release/0.2
Björn 3 years ago
parent d3e3f1d42e
commit 726490756a

@ -200,6 +200,23 @@
</div> </div>
</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="grid">
<div class="col-12"> <div class="col-12">
<h2>Loading</h2> <h2>Loading</h2>

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

@ -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';

@ -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';

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

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

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

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

@ -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; height: 40px;
width: 100%; width: 100%;
border: 1px solid var(--primary); border: $border;
&__inner { &__inner {
margin: 1px;
height: 100%; height: 100%;
border: 1px solid var(--background-contrast);
background-color: var(--background);
} }
} }

@ -7,8 +7,30 @@
'mixins', 'mixins',
'variables', 'variables',
'core', 'core/normalize',
'core/content',
'core/heading',
'components', 'components/badge',
'layouts', 'components/button',
'helpers'; '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';

Loading…
Cancel
Save