diff --git a/public/components.html b/public/components.html index 9d5bee9..6a2044c 100644 --- a/public/components.html +++ b/public/components.html @@ -200,6 +200,23 @@ +
+
+

+ Progress +

+
+<div class="progress"> + <div class="progress__inner" style="width: 20%;"></div> +</div> + +
+
+
+
+
+
+

Loading

diff --git a/public/plain-ui.css b/public/plain-ui.css index 61deb04..4f651bd 100644 --- a/public/plain-ui.css +++ b/public/plain-ui.css @@ -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; } +/** + *
+ *
+ *
+ * + * @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); +} + /** *
* diff --git a/src/scss/_components.scss b/src/scss/_components.scss deleted file mode 100644 index 2770058..0000000 --- a/src/scss/_components.scss +++ /dev/null @@ -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'; \ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss deleted file mode 100644 index 5a7e7f6..0000000 --- a/src/scss/_core.scss +++ /dev/null @@ -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'; \ No newline at end of file diff --git a/src/scss/_helpers.scss b/src/scss/_helpers.scss deleted file mode 100644 index 9f4d948..0000000 --- a/src/scss/_helpers.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import - 'helpers/core', - 'helpers/sizing', - 'helpers/spacing', - 'helpers/colors', - 'helpers/typography'; \ No newline at end of file diff --git a/src/scss/_layouts.scss b/src/scss/_layouts.scss deleted file mode 100644 index 051fa41..0000000 --- a/src/scss/_layouts.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import - 'layouts/masonry', - 'layouts/flex'; \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 57db0cd..6f83d13 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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; diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 0c6d101..8451f25 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -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%; diff --git a/src/scss/components/_progress.scss b/src/scss/components/_progress.scss index 84f0b78..e37f7cc 100644 --- a/src/scss/components/_progress.scss +++ b/src/scss/components/_progress.scss @@ -1,6 +1,11 @@ /** + *
+ *
+ *
* - * + * @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); } } \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 1e9f064..257b931 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -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';