tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding

Browse Source
release/0.2
Björn 4 years ago
parent 79edd96836
commit 499336c532
13 changed files with 735 additions and 106 deletions
Show Stats Download Patch File Download Diff File

500
dist/components.html vendored
Unescape View File

@ -0,0 +1,500 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
<body class="overflow-x-hidden">
<header class="header">
<div class="bar">
<div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha
</h1>
</div>
</div>
</header>
<div class="container m-top-6">
<div class="grid">
<div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item">
Basics
</a>
<a href="components.html" class="tabs__item tabs__item--selected">
Components
</a>
<a href="layout.html" class="tabs__item">
Layout
</a>
<a href="helpers.html" class="tabs__item">
Helpers
</a>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-6">
<div class="content">
<p>
Some Text
<p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="m-bottom-2">Components</h2>
<h3>Buttons</h3>
<button class="button">
Default
</button>
<button class="button">
Default
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
<button class="button button--danger">
Danger
</button>
<button class="button button--selected">
Hover
</button>
<button class="button button--outline">
Outline
</button>
<button class="button button--danger button--outline">
Danger Outline
</button>
</div>
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
<div class="col-12">
<button class="button button--small">
Small
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<div class="tabs">
<a class="tabs__item tabs__item--selected">
Tab A
</a>
<a class="tabs__item">
Tab B
</a>
<a class="tabs__item">
Tab C
</a>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Content</h2>
<div class="content">
<p>
</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Panel</h2>
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
</button>
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-edit"></use>
</svg>
</button>
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel__body">
<div class="content">
<p>
Hallo
</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Modal</h2>
<button class="button" onclick="openModal()">
Click me!
</button>
<script type="text/javascript">
function openModal() {
document.querySelector('.modal').classList.add('modal--open')
}
function closeModal() {
document.querySelector('.modal').classList.remove('modal--open')
}
</script>
<div class="modal">
<div class="modal__inner">
<div class="modal__title t-center">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
Delete
</div>
<div class="modal__body">
Do you really wan't to delete all files?
</div>
<div class="modal__footer">
<button class="button button--outline button--danger" onclick="closeModal()">
Confirm
</button>
<button class="button button--outline float-right" onclick="closeModal()">
Reject
</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Field</h2>
<form>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</label>
</div>
<div class="field-group field-group--valid">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
Surname
<input class="field-text" />
</label>
</div>
<div class="field-group field-group--error">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
</svg>
E-Mail
<input class="field-text" />
</label>
<span class="field-error">
String is not valid
</span>
</div>
<div class="field-group">
<label class="field-label">
Towns
<select class="field-choice">
<option></option>
<option value="lonytown">Lonytown</option>
</select>
</label>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="checkbox" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
Do it!
</label>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
A
</label>
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
B
</label>
</div>
</form>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<table class="table table--striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">Hero</h2>
</div>
</div>
</div>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">Media</h2>
</div>
<div class="col-12">
<figure class="figure">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Slider</h3>
</div>
</div>
</div>
<div class="slider">
<div class="slider__inner">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</body>
</html

76
dist/index.html vendored
Unescape View File

@ -7,6 +7,7 @@
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
@ -14,42 +15,67 @@
<header class="header">
<div class="bar">
<div class="bar__start">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</div>
<div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI
Plain UI 0.1-alpha
</h1>
</div>
</div>
</header>
<div class="container m-top-7">
<div class="container m-top-6">
<div class="grid">
<div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item tabs__item--selected">
Basics
</a>
<a href="components.html" class="tabs__item">
Components
</a>
<a href="layout.html" class="tabs__item">
Layout
</a>
<a href="helpers.html" class="tabs__item">
Helpers
</a>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="grid justify-center">
<div class="col-6">
<div class="content">
<p>
<span class="bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
<span class="bold">Plain UI</span> is a simple UI Framework.
It uses strong Utility Classes and has a few Components.
</p>
<p>
Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
</p>
<p>
The Basic Idea was a quick
</p>
<h3 class="h4 highlight">
Contribution
</h3>
<ul>
<li>TailwindCSS that have thought me a few new Ideas to handle Helper-Classes</li>
<li>TailwindCSS for showing new ideas and concepts to handle handle Helper-Classes</li>
</ul>
</div>
<div class="center">
<a href="#">
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
<use xlink:href="symbol-defs.svg#icon-github"></use>
</svg>
</a>
<a href="https://gitea.tentakelfabrik.de/">
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
</svg>
</a>
</div>
@ -60,9 +86,8 @@
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="m-bottom-2">Heading</h2>
<hr>
<h2 class="m-bottom-2 h-contrast">Heading</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
@ -133,15 +158,16 @@
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="tabs">
<a class="tabs__item">
Tab A
</a>
<a class="tabs__item">
Tab B
</a>
</div>
<div class="tabs">
<a class="tabs__item tabs__item--selected">
Tab A
</a>
<a class="tabs__item">
Tab B
</a>
<a class="tabs__item">
Tab C
</a>
</div>
</div>
</div>

103
dist/layout.html vendored
Unescape View File

@ -0,0 +1,103 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
<body class="overflow-x-hidden">
<header class="header">
<div class="bar">
<div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha
</h1>
</div>
</div>
</header>
<div class="container m-top-6">
<div class="grid">
<div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item">
Basics
</a>
<a href="components.html" class="tabs__item">
Components
</a>
<a href="layout.html" class="tabs__item tabs__item--selected">
Layout
</a>
<a href="helpers.html" class="tabs__item">
Helpers
</a>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-6">
<div class="content">
<p>
Some Text
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="highlight">
Layout
</h2>
<h3 class="highlight">
Grid
</h3>
<p class="m-bottom-4">
The grid is a small modificated Version from the Reflex Grid
</p>
<h3 class="highlight">
Masonry
</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</body>
</html

69
dist/plain-ui.css vendored
Unescape View File

@ -1849,10 +1849,14 @@ h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
display: table;
font-family: "IBM Plex Mono", sans-serif;
font-weight: bold;
line-height: 1.2;
margin: 0 0 1rem;
padding: 0.25rem 0.5rem;
background: var(--primary);
color: var(--text-secondary);
margin: 0 0 1.2rem;
}
@media only screen and (min-width: 992px) {
h1, .h1,
@ -1861,24 +1865,16 @@ h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin: 0 0 0.8rem;
margin: 0 0 1.4rem;
}
}
h5 {
line-height: 1.4;
}
h6 {
line-height: 1.618;
}
h1, .h1 {
font-size: 2.5rem;
font-size: 2.25rem;
}
@media only screen and (min-width: 992px) {
h1, .h1 {
font-size: 3rem;
font-size: 2.7rem;
}
}
@ -1892,38 +1888,38 @@ h2, .h2 {
}
h3, .h3 {
font-size: 1.75rem;
font-size: 1.8rem;
}
@media only screen and (min-width: 992px) {
h3, .h3 {
font-size: 2.1rem;
font-size: 2.16rem;
}
}
h4, .h4 {
font-size: 1.5rem;
font-size: 1.6rem;
}
@media only screen and (min-width: 992px) {
h4, .h4 {
font-size: 1.8rem;
font-size: 1.92rem;
}
}
h5, .h5 {
font-size: 1.25rem;
font-size: 1.4rem;
}
@media only screen and (min-width: 992px) {
h5, .h5 {
font-size: 1.5rem;
font-size: 1.68rem;
}
}
h6, .h6 {
font-size: 1rem;
font-size: 1.2rem;
}
@media only screen and (min-width: 992px) {
h6, .h6 {
font-size: 1.2rem;
font-size: 1.44rem;
}
}
@ -2020,7 +2016,7 @@ h6, .h6 {
.content blockquote {
border-left: 1px solid var(--primary);
margin-left: 0;
padding: 0.5rem 1rem;
padding: 0.4rem 0.8rem;
}
.content blockquote p:last-child {
margin-bottom: 0;
@ -2105,6 +2101,7 @@ h6, .h6 {
padding: 0;
border: none;
background: transparent;
border-radius: 0;
}
.button--transparent:focus, .button--transparent:active {
outline: none;
@ -2414,9 +2411,7 @@ svg.field-choice__checked {
min-height: 2.8em;
background-color: var(--primary);
color: var(--text-secondary);
}
.bar .icon {
font-size: 1.5rem;
border-radius: 2px;
}
.bar__start {
justify-content: start;
@ -2435,9 +2430,6 @@ svg.field-choice__checked {
.bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
margin-right: 0.75em;
}
.bar .button:active, .bar .button:focus {
outline: none;
}
/**
* <figure class="media-figure">
@ -7530,6 +7522,7 @@ svg.field-choice__checked {
display: flex;
flex-direction: column;
width: 100%;
border-bottom: 1px solid var(--primary);
}
@media only screen and (min-width: 768px) {
.tabs {
@ -7542,28 +7535,26 @@ svg.field-choice__checked {
display: flex;
align-items: center;
padding: 0 1em;
background-color: white;
transition: background-color 0.1s;
background-color: white;
color: var(--text);
border: 1px solid var(--primary);
border-bottom-width: 0;
transition: background-color 0.1s;
border-bottom: 3px solid transparent;
background-color: transparent;
width: 100%;
}
@media only screen and (min-width: 768px) {
.tabs__item {
width: auto;
display: inline-flex;
border-right-width: 0;
border-bottom-width: 1px;
}
}
.tabs__item:hover, .tabs__item--selected {
.tabs__item:hover {
cursor: pointer;
background-color: var(--primary-active);
color: white;
border-color: var(--primary-active);
color: var(--text-secondary);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.tabs__item:last-child {
border-bottom-width: 1px;
.tabs__item--selected {
color: var(--text);
border-color: var(--primary);
}

2
dist/symbol-defs.svg vendored
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 52 KiB

1
mix-manifest.json
Unescape View File

@ -1,6 +1,5 @@
{
"/spritemap.js": "/spritemap.js",
"/dist/plain-ui.css": "/dist/plain-ui.css",
"/dist/fonts/demo.html": "/dist/fonts/demo.html",
"/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot",
"/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf",

5
src/icons/gitea.svg
Unescape View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>gitea</title>
<path fill="#609926" d="M5.581 7.228c-2.46-0.005-5.755 1.559-5.573 5.48 0.284 6.125 6.56 6.693 9.068 6.743 0.275 1.149 3.227 5.112 5.412 5.32h9.573c5.741-0.381 10.040-17.363 6.853-17.427-5.271 0.248-8.395 0.373-11.073 0.395v5.3l-0.835-0.369-0.005-4.928c-3.075-0.001-5.781-0.144-10.919-0.397-0.643-0.004-1.539-0.113-2.501-0.116zM5.929 9.395h0.293c0.349 3.14 0.917 4.976 2.067 7.781-2.933-0.347-5.429-1.199-5.888-4.38-0.237-1.647 0.563-3.365 3.528-3.401zM17.339 12.481c0.2 0.003 0.404 0.040 0.596 0.128l0.999 0.431-0.716 1.305c-0.002 0-0.004-0-0.007-0-0.113 0-0.221 0.019-0.321 0.053l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.037 0.089 0.088 0.166 0.151 0.233l-0.001-0.001-1.235 2.248c-0.107 0.002-0.208 0.020-0.302 0.052l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.128 0.31 0.457 0.527 0.843 0.527 0.109 0 0.213-0.017 0.31-0.049l-0.006 0.002c0.348-0.114 0.592-0.406 0.592-0.749 0-0.097-0.020-0.19-0.056-0.277l0.002 0.006c-0.048-0.115-0.119-0.213-0.211-0.293l-0-0 1.203-2.189c0.029 0.003 0.062 0.005 0.095 0.005 0.106 0 0.207-0.016 0.302-0.046l-0.006 0.002c0.109-0.036 0.204-0.087 0.285-0.15l-0.001 0.001c0.464 0.195 0.844 0.353 1.117 0.488 0.411 0.203 0.556 0.337 0.6 0.487 0.044 0.147-0.004 0.429-0.236 0.925-0.173 0.369-0.46 0.893-0.799 1.511-0.006-0-0.013-0-0.020-0-0.113 0-0.222 0.019-0.321 0.053l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.128 0.31 0.457 0.527 0.843 0.527 0.109 0 0.213-0.017 0.31-0.049l-0.006 0.002c0.348-0.114 0.592-0.406 0.592-0.749 0-0.097-0.019-0.19-0.055-0.275l0.002 0.006c-0.043-0.104-0.105-0.194-0.183-0.27l0.001 0.001c0.335-0.611 0.623-1.136 0.808-1.531 0.251-0.536 0.381-0.935 0.267-1.32s-0.467-0.636-0.933-0.867c-0.307-0.151-0.689-0.311-1.147-0.503 0.001-0.015 0.002-0.033 0.002-0.050 0-0.096-0.019-0.188-0.054-0.274l0.002 0.006c-0.045-0.108-0.11-0.201-0.194-0.279l0 0 0.704-1.284 3.899 1.684c0.704 0.305 0.995 1.053 0.653 1.68l-2.68 4.907c-0.343 0.625-1.184 0.884-1.888 0.58l-5.516-2.384c-0.704-0.304-0.996-1.053-0.653-1.68l2.68-4.905c0.235-0.431 0.707-0.687 1.207-0.707z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

5
src/icons/github.svg
Unescape View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 975 B

8
src/scss/_variables.scss
Unescape View File

@ -92,7 +92,9 @@ $plain-ui__colors: (
--black: #212121;
--text: #{$plain-ui__text};
--text-secondary: #{$plain-ui__text-secondary};
--background: #{$plain-ui__background};
--background: #{$plain-ui__primary};
--background--contrast: #{$plain-ui__primary};
--body: #{$plain-ui__body};
--border: #{$plain-ui__border};
}
@ -111,9 +113,9 @@ $plain-ui__margin-breakpoints: (
*
*/
$plain-ui__padding: 0.5rem 1rem !default;
$plain-ui__padding: 0.4rem 0.8rem !default;
$plain-ui__padding-breakpoints: (
$plain-ui__md: 0.25rem 0.75rem
$plain-ui__md: 0.6rem 1rem
) !default;
/**

10
src/scss/components/_bar.scss
Unescape View File

@ -21,9 +21,7 @@
background-color: var(--primary);
color: var(--text-secondary);
.icon {
font-size: 1.5rem;
}
border-radius: $plain-ui__border-radius;
&__start {
justify-content: start;
@ -46,10 +44,4 @@
margin-right: 0.75em;
}
}
.button {
&:active, &:focus {
outline: none;
}
}
}

1
src/scss/components/_button.scss
Unescape View File

@ -43,6 +43,7 @@
padding: 0;
border: none;
background: transparent;
border-radius: 0;
&:focus, &:active {
outline: none;

24
src/scss/components/_tabs.scss
Unescape View File

@ -11,6 +11,7 @@
flex-direction: column;
width: 100%;
border-bottom: $plain-ui__border;
@include plain-ui__media-sm() {
width: auto;
@ -23,35 +24,32 @@
display: flex;
align-items: center;
padding: 0 1em;
color: var(--text);
background-color: white;
transition: background-color 0.1s;
background-color: white;
color: var(--text);
border: $plain-ui__border;
border-bottom-width: 0;
border-bottom: 3px solid transparent;
background-color: transparent;
width: 100%;
@include plain-ui__media-sm() {
width: auto;
display: inline-flex;
border-right-width: 0;
border-bottom-width: 1px;
}
&:hover, &--selected {
&:hover {
cursor: pointer;
background-color: var(--primary-active);
color: white;
color: var(--text-secondary);
border-color: var(--primary-active);
border-top-left-radius: $plain-ui__border-radius;
border-top-right-radius: $plain-ui__border-radius;
}
&:last-child {
border-bottom-width: 1px;
&--selected {
color: var(--text);
border-color: var(--primary);
}
}
}

37
src/scss/core/_heading.scss
Unescape View File

@ -9,22 +9,27 @@
*/
$plain-ui__heading__font-sizes: (
'h1': $plain-ui__font-size * 2.5,
'h2': $plain-ui__font-size * 2,
'h3': $plain-ui__font-size * 1.75,
'h4': $plain-ui__font-size * 1.5,
'h5': $plain-ui__font-size * 1.25,
'h6': $plain-ui__font-size
'h1': 2.25rem,
'h2': 2rem,
'h3': 1.8rem,
'h4': 1.6rem,
'h5': 1.4rem,
'h6': 1.2rem
) !default;
$plain-ui__heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem
) !default;
$plain-ui__heading__font-weight: bold !default;
$plain-ui__heading__font-weight: bold!default;
$plain-ui__heading__font-family: $plain-ui__font-family !default;
$plain-ui__heading__margin: $plain-ui__margin !default;
$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
$plain-ui__heading__line-height: 1.2 !default;
$plain-ui__heading__margin: 0 0 1.2rem !default;
$plain-ui__heading__margin-breakpoints: (
$plain-ui__md: 0 0 1.4rem
) !default;
h1, .h1,
h2, .h2,
@ -34,18 +39,20 @@ h5, .h5,
h6, .h6 {
font-family: $plain-ui__heading__font-family;
font-weight: $plain-ui__heading__font-weight;
line-height: 1.2;
line-height: $plain-ui__heading__line-height;
margin: $plain-ui__heading__margin;
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
}
h5 {
line-height: 1.4;
&.highlight {
display: table;
}
}
h6 {
line-height: $plain-ui__line-height;
.highlight {
padding: 0.25rem 0.5rem;
background: var(--primary);
color: var(--text-secondary);
}
@each $h, $font-size in $plain-ui__heading__font-sizes {

Write Preview
Loading…
Cancel
Save