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

adding #8

Browse Source
release/0.2
Björn 3 years ago
parent d3e3f1d42e
commit 726490756a
10 changed files with 89 additions and 68 deletions
Show Stats Download Patch File Download Diff File

17
public/components.html
Unescape View File

@ -200,6 +200,23 @@
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>
Progress
</h2>
<div class="content m-last-child-0 m-bottom-4">
<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
&#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="progress">
<div class="progress__inner" style="width: 20%;"></div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>

52
public/plain-ui.css
Unescape View File

@ -1631,15 +1631,6 @@
* border
*
*/
/**
* core
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
/**
* normalize
*
@ -1759,7 +1750,7 @@ textarea {
}
fieldset {
margin: 0.5rem 0 1rem;
margin: 0 0 1rem;
}
button,
@ -1826,7 +1817,7 @@ hr {
overflow: visible;
border: 0;
border-top: 1px solid var(--border);
margin: 0.5rem 0 1rem;
margin: 0 0 1rem;
}
progress {
@ -1874,11 +1865,11 @@ samp {
*/
}
.content p {
margin: 0.5rem 0 1rem;
margin: 0 0 1rem;
}
@media only screen and (min-width: 992px) {
.content p {
margin: 0.6rem 0 1.2rem;
margin: 0 0 1.2rem;
}
}
.content a,
@ -1930,13 +1921,13 @@ samp {
.content ol,
.content ul {
padding: 0;
margin: 0.5rem 0 1rem;
margin: 0 0 1rem;
}
@media only screen and (min-width: 992px) {
.content dl,
.content ol,
.content ul {
margin: 0.6rem 0 1.2rem;
margin: 0 0 1.2rem;
}
}
.content ol,
@ -1973,12 +1964,12 @@ samp {
border: 1px solid var(--border);
border-radius: 2px;
background-color: var(--background);
margin: 0.5rem 0 1rem;
margin: 0 0 1rem;
padding: 0.6rem 0.8rem;
}
@media only screen and (min-width: 992px) {
.content code {
margin: 0.6rem 0 1.2rem;
margin: 0 0 1.2rem;
}
}
@media only screen and (min-width: 992px) {
@ -2017,7 +2008,7 @@ h6, .h6 {
font-family: "IBM Plex Mono", sans-serif;
font-weight: bold;
line-height: 1.2;
margin: 0.5rem 0 1rem;
margin: 0 0 1rem;
}
h1.highlight, .h1.highlight,
h2.highlight, .h2.highlight,
@ -2134,7 +2125,7 @@ h6, .h6 {
color: var(--text);
border-radius: 2px;
transition: background-color 0.1s;
margin-bottom: 0.5rem;
margin: 0 0 1rem;
padding: 0 1.3rem;
min-height: 2.8rem;
width: 100%;
@ -2239,7 +2230,7 @@ h6, .h6 {
*
*/
.field-group {
margin: 0.5rem 0 1rem;
margin: 0 0 1rem;
}
.field-group--valid input.field-text, .field-group--valid textarea.field-text {
border-color: var(--success);
@ -2486,6 +2477,27 @@ svg.field-choice__checked {
border-left-width: 12px;
}
/**
* <div class="progress">
* <div class="progress__inner" style="width: 20%"></div>
* </div>
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/
.progress {
height: 40px;
width: 100%;
border: 1px solid var(--border);
}
.progress__inner {
height: 100%;
border: 1px solid var(--background-contrast);
background-color: var(--background);
}
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />

14
src/scss/_components.scss
Unescape View File

@ -1,14 +0,0 @@
@import
'components/badge',
'components/button',
'components/field',
'components/icon',
'components/hero',
'components/tabs',
'components/panel',
'components/media',
'components/table',
'components/slider',
'components/bar',
'components/modal',
'components/loading';

14
src/scss/_core.scss
Unescape View File

@ -1,14 +0,0 @@
/**
* core
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@import
'core/normalize',
'core/content',
'core/heading';

6
src/scss/_helpers.scss
Unescape View File

@ -1,6 +0,0 @@
@import
'helpers/core',
'helpers/sizing',
'helpers/spacing',
'helpers/colors',
'helpers/typography';

3
src/scss/_layouts.scss
Unescape View File

@ -1,3 +0,0 @@
@import
'layouts/masonry',
'layouts/flex';

4
src/scss/_variables.scss
Unescape View File

@ -118,9 +118,9 @@ $colors: (
*
*/
$margin: 0.5rem 0 1rem !default;
$margin: 0 0 1rem !default;
$margin-breakpoints: (
$breakpoint__md: 0.6rem 0 1.2rem
$breakpoint__md: 0 0 1.2rem
) !default;

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

@ -57,7 +57,8 @@
border-radius: $border-radius;
transition: background-color 0.1s;
margin-bottom: 0.5rem;
margin: $margin;
padding: 0 1.3rem;
min-height: 2.8rem;
width: 100%;

12
src/scss/components/_progress.scss
Unescape View File

@ -1,6 +1,11 @@
/**
* <div class="progress">
* <div class="progress__inner" style="width: 20%"></div>
* </div>
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/
@ -8,10 +13,11 @@
height: 40px;
width: 100%;
border: 1px solid var(--primary);
border: $border;
&__inner {
margin: 1px;
height: 100%;
border: 1px solid var(--background-contrast);
background-color: var(--background);
}
}

32
src/scss/plain-ui.scss
Unescape View File

@ -7,8 +7,30 @@
'mixins',
'variables',
'core',
'components',
'layouts',
'helpers';
'core/normalize',
'core/content',
'core/heading',
'components/badge',
'components/button',
'components/field',
'components/icon',
'components/hero',
'components/tabs',
'components/panel',
'components/progress',
'components/media',
'components/table',
'components/slider',
'components/bar',
'components/modal',
'components/loading',
'layouts/masonry',
'layouts/flex',
'helpers/core',
'helpers/sizing',
'helpers/spacing',
'helpers/colors',
'helpers/typography';

Write Preview
Loading…
Cancel
Save