From 382e7558b085e13ebdabc4770ea7b936e1855cf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 18 Jul 2021 18:13:06 +0200 Subject: [PATCH] adding --- public/components.html | 688 +++++---- public/index.html | 137 +- public/layout.html | 54 + public/plain-ui.css | 1239 ++++++++++++++--- public/symbol-defs.svg | 2 +- src/icons/checkbox-checked.svg | 36 + src/icons/checkbox.svg | 32 + src/scss/components/_field.scss | 46 + src/scss/components/_group.scss | 19 +- src/scss/components/_media.scss | 8 + src/scss/components/_panel.scss | 5 +- src/scss/core/_content.scss | 16 +- src/scss/helpers/_sizing.scss | 17 + src/scss/helpers/_spacing.scss | 61 +- src/scss/{components => layouts}/_slider.scss | 0 src/scss/plain-ui.scss | 3 +- 16 files changed, 1858 insertions(+), 505 deletions(-) create mode 100644 src/icons/checkbox-checked.svg create mode 100644 src/icons/checkbox.svg rename src/scss/{components => layouts}/_slider.scss (100%) diff --git a/public/components.html b/public/components.html index 8219ffc..1c7a663 100644 --- a/public/components.html +++ b/public/components.html @@ -55,6 +55,16 @@ Components +
+
+
+

+ Plain UI is currently under development, a few Styles, Concepts and Names could be changing until Release! +

+
+
+
+

Badge

<span class="badge"> @@ -162,7 +172,6 @@ </div>
-
-
- - - String is not valid - -
- -
- -
- -
- -
- -
- - -
+
+<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> + +
+
+ + + String is not valid + +
+
+<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-checkbox"></use> + </svg> + <svg class="icon field-choice__checked" aria-hidden="true"> + <use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use> + </svg> + Checkbox + </label> +</div> + +
+
+ +
-

Icon

- - - - - +
+<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> + Radio 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> + Radio B + </label> +</div> + +
+
+ + +
-
-
-

- Tabs -

-
- - Tab A - - - Tab B - - - Tab C - +
+<div class="field-group"> + <label class="field-label"> + <input class="field-choice" type="checkbox" name="radio" value="true" /> + <span class="field-switch"></span> + </label> +</div> + +
+
+
-
-
-
-
-

- Tabs + Bar -

-
-
-
- - Tab A - - - Tab B - - - Tab C - -
+

+ Group +

+
+<div class="group"> + <div class="group__item background-color-primary color-text-contrast p-3"> + One + </div> + <div class="group__item background-color-primary color-text-contrast p-3"> + Two + </div> +</div> + +
+
+
+ One +
+
+ Two
+
-
-
- -
-
- +

- Progress + Hero

-
-<div class="progress"> - <div class="progress__inner" style="width: 20%;"></div> +
+<div class="hero"> + <img style="max-height: 400px;" src="/image.jpg" /> </div>
-
-
-
+
+
+ +
+
-

Loading

-
+

Icon

+
+<svg class="icon" aria-hidden="true"> + <use xlink:href="symbol-defs.svg#icon-check"></use> +</svg> +<svg class="icon fill-danger" aria-hidden="true"> + <use xlink:href="symbol-defs.svg#icon-camera"></use> +</svg> +<svg class="icon fill-success" aria-hidden="true"> + <use xlink:href="symbol-defs.svg#icon-clock"></use> +</svg> + +
+ + + + + +

Loading

+
<div class="loading"> <span></span> <span></span> @@ -347,49 +429,55 @@
-
-
-
-
-

Panel

-
-
-
- -
-
Test
-
- - -
-
-
-
-

- Hallo -

-
-
+

+ Media +

+
+<figure class="figure"> + <img class="media" src="/image.jpg" /> + <figcaption class="figure__caption"> + food truck yr franzen pabst + </figcaption> +</figure> +
-
-
+
+ +
+ food truck yr franzen pabst +
+
-
-
-

Modal

+ + +

+ Modal +

+
+<div class="modal"> + <div class="modal__inner"> + <div class="modal__title t-center"> + <svg class="icon fill-text-contrast" 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> + +
@@ -423,19 +511,130 @@
-
-
-
-
-
-
+ +

+ Panel +

+
+<div class="panel"> + <div class="bar"> + <div class="bar__start"> + <button type="button" class="button button--transparent"> + <svg class="icon fill-text-contrast" aria-hidden="true"> + <use xlink:href="symbol-defs.svg#icon-expand"></use> + </svg> + </button> + </div> + <div class="bar__main">Panel</div> + <div class="bar__end"> + <button type="button" class="button button--transparent"> + <svg class="icon fill-text-contrast" 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-text-contrast" aria-hidden="true"> + <use xlink:href="symbol-defs.svg#icon-close"></use> + </svg> + </button> + </div> + </div> + <div class="panel__body"> + <div class="content m-last-child-0"> + <p> + Content + </p> + </div> + </div> +</div> + +
+
+
+
+ +
+
Panel
+
+ + +
+
+
+
+

+ Hallo +

+
+
+
-
-
-

Table

+ +

+ Progress +

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

+ Table +

+
+<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> + +
@@ -466,94 +665,85 @@
-
-
-
- -
-
-
-

- Hero -

- - -
-
-
-
- -
-
-
-
-

- Media + +

+ Tabs

-
- -
- food truck yr franzen pabst -
-
-
-
-
+
+<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> + +
+
+ + Tab A + + + Tab B + + + Tab C + +
-
-
-
-

Slider

+

+ Tabs + Bar +

+
+<div class="bar"> + <div class="tabs tabs--contrast"> + <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> + +
+
+
+ + Tab A + + + Tab B + + + Tab C + +
+
-
-
-
-
- -
- food truck yr franzen pabst -
-
-
-
-
- -
- food truck yr franzen pabst -
-
-
-
-
- -
- food truck yr franzen pabst -
-
-
-
-
- -
- food truck yr franzen pabst -
-
-
-
-
- -
- food truck yr franzen pabst -
-
+
- + - + Gitea

- On development, a few styles and names will be change until release + Plain UI is currently under development, Styles, Names and Documentation may change until Release!

+

Plain UI is a simple UI Framework.

@@ -83,9 +84,18 @@ Contribution
@@ -113,10 +123,10 @@

- For Buildung use Webpack or a similiar System. Plain UI is build by Laravel-Mix. Consider to use PurgeCSS, - with all Helper-Classes the CSS is really growning. PurgeCSS, with Laravel Mix it looks like this, - - PurgeCSS + Plain UI is build by Laravel-Mix. + For this Site also PurgeCSS was used. This is Important + to reduce the amount of Helper-Classes. For Laravel-Mix there is also a Wrapper + available.

mix .setPublicPath('./public') @@ -139,33 +149,21 @@

- Variables + Themes + Core

-
-
-
-
-
-
-

- Basic Styles -

- -

+

Normalize

-

- For all elements is the same, try set a basic style without anything, no margin, no padding. The Reason is to use Components, Layout and - Helpers for the styling or make your own rules for the elements. + This is mainly done by normalize.css with a few Modification.

-

+

Heading -

+

Heading 1

Heading 2

Heading 3

@@ -173,19 +171,50 @@
Heading 5
Heading 6
-

+

Content

-
-
-
-

- The Class "content" will trigger a few styles for -

-
-
+
+<div class="content"> + <p> + Y'know this time it wasn't my fault. The Doc set all of his clocks twenty-five minutes slow. + Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on + your way to the mall? whoa, this is it, this is the part coming up, Doc. I'm really gonna miss you. + Doc, about the future- Thank you, don't forget to take a flyer. + </p> + <p> + Dear Doctor Brown, on the night that I go back in time, you will be shot by terrorists. Please take + whatever precautions are necessary to prevent this terrible disaster. Your friend, Marty. + Well, safe and sound, now, n good old 1955. I've gotta go. Look, George, I'm telling you George, + if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, + heard you laid out Biff, nice going. + </p> + <ul> + <li>item 1</li> + <li> + item 2 + <ul> + <li>child item 1</li> + <li>child item 2</li> + </ul> + </li> + </ul> + <ol> + <li>item 1</li> + <li>item 2</li> + </ol> + <dl> + <dt>defined title 1</dt> + <dd>defined item 1</dd> + </dl> + <blockquote> + I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna + regret it for the rest of my life. Hey George, heard you laid out Biff, nice going. + </blockquote> + <mark>Mark</mark> +</div> +
-

Y'know this time it wasn't my fault. The Doc set all of his clocks twenty-five minutes slow. Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on your way to the mall? whoa, this is it, this is the part coming up, Doc. I'm really gonna miss you. Doc, about the future- Thank you, don't forget to take a flyer. @@ -194,17 +223,47 @@ Dear Doctor Brown, on the night that I go back in time, you will be shot by terrorists. Please take whatever precautions are necessary to prevent this terrible disaster. Your friend, Marty. Well, safe and sound, now, n good old 1955. I've gotta go. Look, George, I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going.

    -
  • Anyway, if Grandpa hadn't hit him
    • -
  • Yeah, well history is gonna change
    • -
  • Children
    • +
  • item 1
    • +
  • + item 2 +
      +
    • child item 1
      • +
    • child item 2
      • +
    +
+
    +
  1. item 1
    2. +
  2. item 2
    3. +
+
+
defined title 1
+
defined item 1
+
I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going.
+ Mark
+ +
+ +
+
+
+

Slider

+
+
+
+ +
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ + * + * A + * + *
+ * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.group__item { + width: auto; + display: inline-block; + margin: 0 0 1rem; + margin-right: 0.25rem; +} +.group__item:last-child { + margin-right: 0; +} + /** * * @@ -2454,8 +2517,11 @@ svg.field-choice__checked { } /** + * * - * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui * */ .panel { @@ -2504,6 +2570,11 @@ svg.field-choice__checked { * * * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * */ .figure { margin: 0; @@ -2520,9 +2591,11 @@ svg.field-choice__checked { line-height: 1.618; margin: 0; color: var(--text-contrast); + border-top: 1px solid var(--border-contrast); } .figure .media { border: 0; + border-radius: 0; } .media { @@ -2568,29 +2641,6 @@ svg.field-choice__checked { color: white; } -/** - *
- *
- *
- *
- *
- * - */ -.slider { - position: relative; - overflow-x: visible; -} -.slider__inner { - display: flex; - white-space: nowrap; -} -.slider__item { - padding: 0 0.6em; - display: inline-block; - white-space: normal; - flex-shrink: 0; -} - /** *
*
@@ -2818,6 +2868,29 @@ svg.field-choice__checked { } } +/** + *
+ *
+ *
+ *
+ *
+ * + */ +.slider { + position: relative; + overflow-x: visible; +} +.slider__inner { + display: flex; + white-space: nowrap; +} +.slider__item { + padding: 0 0.6em; + display: inline-block; + white-space: normal; + flex-shrink: 0; +} + :root { --reflex-columns: 12; --reflex-grid-spacing: 15px; @@ -4511,216 +4584,424 @@ svg.field-choice__checked { width: 0; } -.h-0 { - height: 0; +@media only screen and (min-width: 576px) { + .w-xs-1 { + width: 0; + } } - -.w-1 { - width: 1px; +@media only screen and (min-width: 768px) { + .w-sm-1 { + width: 0; + } } - -.h-1 { - height: 1px; +@media only screen and (min-width: 992px) { + .w-md-1 { + width: 0; + } } - -.w-100 { - width: 100%; +@media only screen and (min-width: 1200px) { + .w-lg-1 { + width: 0; + } } - -.h-100 { - height: 100%; +@media only screen and (min-width: 1600px) { + .w-xlg-1 { + width: 0; + } } - -.w-col-1 { - width: 8.3333333333%; +.h-0 { + height: 0; } @media only screen and (min-width: 576px) { - .w-col-xs-1 { - width: 8.3333333333%; + .h-xs-1 { + height: 0; } } @media only screen and (min-width: 768px) { - .w-col-sm-1 { - width: 8.3333333333%; + .h-sm-1 { + height: 0; } } @media only screen and (min-width: 992px) { - .w-col-md-1 { - width: 8.3333333333%; + .h-md-1 { + height: 0; } } @media only screen and (min-width: 1200px) { - .w-col-lg-1 { - width: 8.3333333333%; + .h-lg-1 { + height: 0; } } @media only screen and (min-width: 1600px) { - .w-col-xlg-1 { - width: 8.3333333333%; + .h-xlg-1 { + height: 0; } } -.h-col-1 { - height: 8.3333333333%; +.w-1 { + width: 1px; } @media only screen and (min-width: 576px) { - .h-col-xs-1 { - height: 8.3333333333%; + .w-xs-1 { + width: 1px; } } @media only screen and (min-width: 768px) { - .h-col-sm-1 { - height: 8.3333333333%; + .w-sm-1 { + width: 1px; } } @media only screen and (min-width: 992px) { - .h-col-md-1 { - height: 8.3333333333%; + .w-md-1 { + width: 1px; } } @media only screen and (min-width: 1200px) { - .h-col-lg-1 { - height: 8.3333333333%; + .w-lg-1 { + width: 1px; } } @media only screen and (min-width: 1600px) { - .h-col-xlg-1 { - height: 8.3333333333%; + .w-xlg-1 { + width: 1px; } } -.w-col-2 { - width: 16.6666666667%; +.h-1 { + height: 1px; } @media only screen and (min-width: 576px) { - .w-col-xs-2 { - width: 16.6666666667%; + .h-xs-1 { + height: 1px; } } @media only screen and (min-width: 768px) { - .w-col-sm-2 { - width: 16.6666666667%; + .h-sm-1 { + height: 1px; } } @media only screen and (min-width: 992px) { - .w-col-md-2 { - width: 16.6666666667%; + .h-md-1 { + height: 1px; } } @media only screen and (min-width: 1200px) { - .w-col-lg-2 { - width: 16.6666666667%; + .h-lg-1 { + height: 1px; } } @media only screen and (min-width: 1600px) { - .w-col-xlg-2 { - width: 16.6666666667%; + .h-xlg-1 { + height: 1px; } } -.h-col-2 { - height: 16.6666666667%; +.w-100 { + width: 100%; } @media only screen and (min-width: 576px) { - .h-col-xs-2 { - height: 16.6666666667%; + .w-xs-100 { + width: 100%; } } @media only screen and (min-width: 768px) { - .h-col-sm-2 { - height: 16.6666666667%; + .w-sm-100 { + width: 100%; } } @media only screen and (min-width: 992px) { - .h-col-md-2 { - height: 16.6666666667%; + .w-md-100 { + width: 100%; } } @media only screen and (min-width: 1200px) { - .h-col-lg-2 { - height: 16.6666666667%; + .w-lg-100 { + width: 100%; } } @media only screen and (min-width: 1600px) { - .h-col-xlg-2 { - height: 16.6666666667%; + .w-xlg-100 { + width: 100%; } } -.w-col-3 { - width: 25%; +.w-auto { + width: auto; } @media only screen and (min-width: 576px) { - .w-col-xs-3 { - width: 25%; + .w-xs-auto { + width: auto; } } @media only screen and (min-width: 768px) { - .w-col-sm-3 { - width: 25%; + .w-sm-auto { + width: auto; } } @media only screen and (min-width: 992px) { - .w-col-md-3 { - width: 25%; + .w-md-auto { + width: auto; } } @media only screen and (min-width: 1200px) { - .w-col-lg-3 { - width: 25%; + .w-lg-auto { + width: auto; } } @media only screen and (min-width: 1600px) { - .w-col-xlg-3 { - width: 25%; + .w-xlg-auto { + width: auto; } } -.h-col-3 { - height: 25%; +.h-100 { + height: 100%; } @media only screen and (min-width: 576px) { - .h-col-xs-3 { - height: 25%; + .h-xs-100 { + height: 100%; } } @media only screen and (min-width: 768px) { - .h-col-sm-3 { - height: 25%; + .h-sm-100 { + height: 100%; } } @media only screen and (min-width: 992px) { - .h-col-md-3 { - height: 25%; + .h-md-100 { + height: 100%; } } @media only screen and (min-width: 1200px) { - .h-col-lg-3 { - height: 25%; + .h-lg-100 { + height: 100%; } } @media only screen and (min-width: 1600px) { - .h-col-xlg-3 { - height: 25%; + .h-xlg-100 { + height: 100%; } } -.w-col-4 { - width: 33.3333333333%; +.h-auto { + height: auto; } @media only screen and (min-width: 576px) { - .w-col-xs-4 { - width: 33.3333333333%; + .h-xs-auto { + height: auto; } } @media only screen and (min-width: 768px) { - .w-col-sm-4 { - width: 33.3333333333%; + .h-sm-auto { + height: auto; } } @media only screen and (min-width: 992px) { - .w-col-md-4 { + .h-md-auto { + height: auto; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-auto { + height: auto; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-auto { + height: auto; + } +} +.w-col-1 { + width: 8.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-1 { + width: 8.3333333333%; + } +} +.h-col-1 { + height: 8.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-1 { + height: 8.3333333333%; + } +} +.w-col-2 { + width: 16.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-2 { + width: 16.6666666667%; + } +} +.h-col-2 { + height: 16.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-2 { + height: 16.6666666667%; + } +} +.w-col-3 { + width: 25%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-3 { + width: 25%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-3 { + width: 25%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-3 { + width: 25%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-3 { + width: 25%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-3 { + width: 25%; + } +} +.h-col-3 { + height: 25%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-3 { + height: 25%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-3 { + height: 25%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-3 { + height: 25%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-3 { + height: 25%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-3 { + height: 25%; + } +} +.w-col-4 { + width: 33.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-4 { width: 33.3333333333%; } } @@ -8169,141 +8450,410 @@ svg.field-choice__checked { margin-bottom: 0; } -.m-top-0 { - margin-top: 0; +.m-0 { + margin: 0; } -.m-top-1 { - margin-top: 1px; +.m-1 { + margin: 1px; } -.m-top-2 { - margin-top: 0.125rem; +.m-2 { + margin: 0.125rem; } @media only screen and (min-width: 576px) { - .m-top-xs-2 { - margin-top: 0.125rem; + .m-xs-2 { + margin: 0.125rem; } } @media only screen and (min-width: 768px) { - .m-top-sm-2 { - margin-top: 0.125rem; + .m-sm-2 { + margin: 0.125rem; } } @media only screen and (min-width: 992px) { - .m-top-md-2 { - margin-top: 0.125rem; + .m-md-2 { + margin: 0.125rem; } } @media only screen and (min-width: 1200px) { - .m-top-lg-2 { - margin-top: 0.125rem; + .m-lg-2 { + margin: 0.125rem; } } @media only screen and (min-width: 1600px) { - .m-top-xlg-2 { - margin-top: 0.125rem; + .m-xlg-2 { + margin: 0.125rem; } } -.m-top-3 { - margin-top: 0.5rem; +.m-3 { + margin: 0.5rem; } @media only screen and (min-width: 576px) { - .m-top-xs-3 { - margin-top: 0.5rem; + .m-xs-3 { + margin: 0.5rem; } } @media only screen and (min-width: 768px) { - .m-top-sm-3 { - margin-top: 0.5rem; + .m-sm-3 { + margin: 0.5rem; } } @media only screen and (min-width: 992px) { - .m-top-md-3 { - margin-top: 0.5rem; + .m-md-3 { + margin: 0.5rem; } } @media only screen and (min-width: 1200px) { - .m-top-lg-3 { - margin-top: 0.5rem; + .m-lg-3 { + margin: 0.5rem; } } @media only screen and (min-width: 1600px) { - .m-top-xlg-3 { - margin-top: 0.5rem; + .m-xlg-3 { + margin: 0.5rem; } } -.m-top-4 { - margin-top: 1.125rem; +.m-4 { + margin: 1.125rem; } @media only screen and (min-width: 576px) { - .m-top-xs-4 { - margin-top: 1.125rem; + .m-xs-4 { + margin: 1.125rem; } } @media only screen and (min-width: 768px) { - .m-top-sm-4 { - margin-top: 1.125rem; + .m-sm-4 { + margin: 1.125rem; } } @media only screen and (min-width: 992px) { - .m-top-md-4 { - margin-top: 1.125rem; + .m-md-4 { + margin: 1.125rem; } } @media only screen and (min-width: 1200px) { - .m-top-lg-4 { - margin-top: 1.125rem; + .m-lg-4 { + margin: 1.125rem; } } @media only screen and (min-width: 1600px) { - .m-top-xlg-4 { - margin-top: 1.125rem; + .m-xlg-4 { + margin: 1.125rem; } } -.m-top-5 { - margin-top: 2rem; +.m-5 { + margin: 2rem; } @media only screen and (min-width: 576px) { - .m-top-xs-5 { - margin-top: 2rem; + .m-xs-5 { + margin: 2rem; } } @media only screen and (min-width: 768px) { - .m-top-sm-5 { - margin-top: 2rem; + .m-sm-5 { + margin: 2rem; } } @media only screen and (min-width: 992px) { - .m-top-md-5 { - margin-top: 2rem; + .m-md-5 { + margin: 2rem; } } @media only screen and (min-width: 1200px) { - .m-top-lg-5 { - margin-top: 2rem; + .m-lg-5 { + margin: 2rem; } } @media only screen and (min-width: 1600px) { - .m-top-xlg-5 { - margin-top: 2rem; + .m-xlg-5 { + margin: 2rem; } } -.m-top-6 { - margin-top: 3.125rem; +.m-6 { + margin: 3.125rem; } @media only screen and (min-width: 576px) { - .m-top-xs-6 { - margin-top: 3.125rem; + .m-xs-6 { + margin: 3.125rem; } } @media only screen and (min-width: 768px) { - .m-top-sm-6 { + .m-sm-6 { + margin: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-6 { + margin: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-6 { + margin: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-6 { + margin: 3.125rem; + } +} +.m-7 { + margin: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-7 { + margin: 4.5rem; + } +} +.m-8 { + margin: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-8 { + margin: 6.125rem; + } +} +.m-9 { + margin: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-9 { + margin: 8rem; + } +} +.m-10 { + margin: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-10 { + margin: 10.125rem; + } +} +.m-top-0 { + margin-top: 0; +} + +.m-top-1 { + margin-top: 1px; +} + +.m-top-2 { + margin-top: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-2 { + margin-top: 0.125rem; + } +} +.m-top-3 { + margin-top: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-3 { + margin-top: 0.5rem; + } +} +.m-top-4 { + margin-top: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-4 { + margin-top: 1.125rem; + } +} +.m-top-5 { + margin-top: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-5 { + margin-top: 2rem; + } +} +.m-top-6 { + margin-top: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-6 { margin-top: 3.125rem; } } @@ -9245,6 +9795,333 @@ svg.field-choice__checked { margin-right: 10.125rem; } } +.p-0 { + padding: 0; +} + +.p-1 { + padding: 1px; +} + +.p-0 { + padding: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-0 { + padding: 0.125rem; + } +} +.p-1 { + padding: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-1 { + padding: 0rem; + } +} +.p-2 { + padding: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-2 { + padding: 0.125rem; + } +} +.p-3 { + padding: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-3 { + padding: 0.5rem; + } +} +.p-4 { + padding: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-4 { + padding: 1.125rem; + } +} +.p-5 { + padding: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-5 { + padding: 2rem; + } +} +.p-6 { + padding: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-6 { + padding: 3.125rem; + } +} +.p-7 { + padding: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-7 { + padding: 4.5rem; + } +} +.p-8 { + padding: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-8 { + padding: 6.125rem; + } +} +.p-9 { + padding: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-9 { + padding: 8rem; + } +} +.p-10 { + padding: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-10 { + padding: 10.125rem; + } +} .p-top-0 { padding-top: 0; } diff --git a/public/symbol-defs.svg b/public/symbol-defs.svg index 9437756..0cb1622 100644 --- a/public/symbol-defs.svg +++ b/public/symbol-defs.svg @@ -1 +1 @@ -addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcomputercopycredit-carddelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-altfilterfolder-addfolder-checkfolder-downloadfolder-removefoldergiteagithubgridhearthomeimageinboxlaptoplink-altlinklistlocationlocklog-outmapmegaphonemenumessage-altmessagemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepercentagepinplaypreviousrefreshremoverepeatsearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesortspeakersstopsunsunriseswitchtabletablettagundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamzoom-inzoom-out \ No newline at end of file +addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckcheckbox-checkedcheckboxchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcomputercopycredit-carddelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-altfilterfolder-addfolder-checkfolder-downloadfolder-removefoldergiteagithubgridhearthomeimageinboxlaptoplink-altlinklistlocationlocklog-outmapmegaphonemenumessage-altmessagemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepercentagepinplaypreviousrefreshremoverepeatsearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesortspeakersstopsunsunriseswitchtabletablettagundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamzoom-inzoom-out \ No newline at end of file diff --git a/src/icons/checkbox-checked.svg b/src/icons/checkbox-checked.svg new file mode 100644 index 0000000..6caefcc --- /dev/null +++ b/src/icons/checkbox-checked.svg @@ -0,0 +1,36 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/icons/checkbox.svg b/src/icons/checkbox.svg new file mode 100644 index 0000000..80fb950 --- /dev/null +++ b/src/icons/checkbox.svg @@ -0,0 +1,32 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index f768c9f..8742a59 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -140,6 +140,52 @@ svg.field-choice__checked { font-size: 0.8rem; } +/** + * + * + */ + +.field-switch { + position: relative; + display: inline-block; + width: 75px; + height: 35px; + + border: $border; + border-radius: $border-radius; + + &:after { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + content: ''; + + border: $border; + border-color: var(--border-contrast); + border-radius: $border-radius; + background-color: var(--active); + + transition: transform 0.25s; + } +} + +input[type=checkbox].field-choice { + ~ .field-switch:after { + left: 0; + } + + &:checked ~ .field-switch { + border-color: var(--success); + + &:after { + background-color: var(--success); + transform: translateX(100%); + } + } +} + /** * display error for fields * diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index cb17733..65457df 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -12,17 +12,16 @@ * */ -@mixin component__group() -{ - .group { - &__item { - width: auto; - display: inline-block; - margin: 0 1rem 1rem; +.group { + &__item { + width: auto; + display: inline-block; + margin: $margin; - &:last-child { - margin-right: 0; - } + margin-right: 0.25rem; + + &:last-child { + margin-right: 0; } } } \ No newline at end of file diff --git a/src/scss/components/_media.scss b/src/scss/components/_media.scss index 9a03d0c..5839404 100644 --- a/src/scss/components/_media.scss +++ b/src/scss/components/_media.scss @@ -6,6 +6,11 @@ * * * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * */ .figure { @@ -25,10 +30,13 @@ line-height: $line-height; margin: 0; color: var(--text-contrast); + + border-top: 1px solid var(--border-contrast); } .media { border: 0; + border-radius: 0; } } diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss index e672c3c..3ce8e6c 100644 --- a/src/scss/components/_panel.scss +++ b/src/scss/components/_panel.scss @@ -1,6 +1,9 @@ /** + * * - * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui * */ diff --git a/src/scss/core/_content.scss b/src/scss/core/_content.scss index 17e20ec..241cc2d 100644 --- a/src/scss/core/_content.scss +++ b/src/scss/core/_content.scss @@ -65,7 +65,8 @@ } mark { - padding: 0.25em; + padding: 0.25rem; + background-color: var(--warning); } /** @@ -95,15 +96,18 @@ @include media-breakpoints('margin', $margin-breakpoints); } - ol, ul { - margin-left: 1.5em; + margin-left: 1.5rem; + } + + ol { + margin-left: 2.5rem; } ol ol, ul ul { margin-top: 0; - margin-left: 1em; + margin-left: 1.5rem; } ol { @@ -111,11 +115,11 @@ } ul { - list-style: disc outside; + list-style: square outside; } dl { - margin-left: 0.5em; + margin-left: 0.5rem; } dd, diff --git a/src/scss/helpers/_sizing.scss b/src/scss/helpers/_sizing.scss index bd75a7b..a3f42cb 100644 --- a/src/scss/helpers/_sizing.scss +++ b/src/scss/helpers/_sizing.scss @@ -49,11 +49,28 @@ $sizing_steps: 50 !default; } .w-0 { width: 0; } +@include sizing_breakpoints('w', 'width', '1', 0); + .h-0 { height: 0; } +@include sizing_breakpoints('h', 'height', '1', 0); + .w-1 { width: 1px;} +@include sizing_breakpoints('w', 'width', '1', 1px); + .h-1 { height: 1px; } +@include sizing_breakpoints('h', 'height', '1', 1px); + .w-100 { width: 100%; } +@include sizing_breakpoints('w', 'width', '100', 100%); + +.w-auto { width: auto; } +@include sizing_breakpoints('w', 'width', 'auto', auto); + .h-100 { height: 100%; } +@include sizing_breakpoints('h', 'height', '100', 100%); + +.h-auto { height: auto; } +@include sizing_breakpoints('h', 'height', 'auto', auto); @for $i from 1 through $reflex-columns { diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index 4a48c43..1e33777 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -16,43 +16,52 @@ $spacing-direction: ( $spacing-gap: 0.25 !default; $spacing-steps: 10 !default; + /** * mixin: spacing for single padding or margin * * */ -@mixin spacing($class, $style, $direction, $name, $value) + +@mixin spacing($class, $style, $name, $value, $direction: null) { - .#{$class}-#{$direction}-#{$name} { - #{$style}-#{$direction}: $value; + @if ($direction != null) { + $class: $class + '-' + $direction; + $style: $style + '-' + $direction; + } + + .#{$class}-#{$name} { + #{$style}: $value; } } + /** * mixin: spacing for each breakpoint * * */ -@mixin spacing_breakpoints($class, $style, $direction, $i, $value) + +@mixin spacing_breakpoints($class, $style, $i, $value, $direction: null) { @include media-xs() { - @include spacing($class, $style, $direction, 'xs-' + $i, $value); + @include spacing($class, $style, 'xs-' + $i, $value, $direction); } @include media-sm() { - @include spacing($class, $style, $direction, 'sm-' + $i, $value); + @include spacing($class, $style, 'sm-' + $i, $value, $direction); } @include media-md() { - @include spacing($class, $style, $direction, 'md-' + $i, $value); + @include spacing($class, $style, 'md-' + $i, $value, $direction); } @include media-lg() { - @include spacing($class, $style, $direction, 'lg-' + $i, $value); + @include spacing($class, $style, 'lg-' + $i, $value, $direction); } @include media-xlg() { - @include spacing($class, $style, $direction, 'xlg-' + $i, $value); + @include spacing($class, $style, 'xlg-' + $i, $value, $direction); } } @@ -89,26 +98,44 @@ $spacing-steps: 10 !default; } } +@include spacing('m', 'margin', 0, 0); +@include spacing('m', 'margin', 1, 1px); + +@for $i from 2 through $spacing-steps { + $value: $spacing-gap * factor($i - 1) * 1rem; + @include spacing('m', 'margin', $i, $value); + @include spacing_breakpoints('m', 'margin', $i, $value); +} + @each $direction in $spacing-direction { - @include spacing('m', 'margin', $direction, 0, 0); - @include spacing('m', 'margin', $direction, 1, 1px); + @include spacing('m', 'margin', 0, 0, $direction); + @include spacing('m', 'margin', 1, 1px, $direction); @for $i from 2 through $spacing-steps { $value: $spacing-gap * factor($i - 1) * 1rem; - @include spacing('m', 'margin', $direction, $i, $value); - @include spacing_breakpoints('m', 'margin', $direction, $i, $value); + @include spacing('m', 'margin', $i, $value, $direction); + @include spacing_breakpoints('m', 'margin', $i, $value, $direction); } } +@include spacing('p', 'padding', 0, 0); +@include spacing('p', 'padding', 1, 1px); + +@for $i from 0 through $spacing-steps { + $value: $spacing-gap * factor($i - 1) * 1rem; + @include spacing('p', 'padding', $i, $value); + @include spacing_breakpoints('p', 'padding', $i, $value); +} + @each $direction in $spacing-direction { - @include spacing('p', 'padding', $direction, 0, 0); - @include spacing('p', 'padding', $direction, 1, 1px); + @include spacing('p', 'padding', 0, 0, $direction); + @include spacing('p', 'padding', 1, 1px, $direction); @for $i from 0 through $spacing-steps { $value: $spacing-gap * factor($i - 1) * 1rem; - @include spacing('p', 'padding', $direction, $i, $value); - @include spacing_breakpoints('p', 'padding', $direction, $i, $value); + @include spacing('p', 'padding', $i, $value, $direction); + @include spacing_breakpoints('p', 'padding', $i, $value, $direction); } } \ No newline at end of file diff --git a/src/scss/components/_slider.scss b/src/scss/layouts/_slider.scss similarity index 100% rename from src/scss/components/_slider.scss rename to src/scss/layouts/_slider.scss diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 257b931..dcfa27a 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -14,6 +14,7 @@ 'components/badge', 'components/button', 'components/field', + 'components/group', 'components/icon', 'components/hero', 'components/tabs', @@ -21,12 +22,12 @@ 'components/progress', 'components/media', 'components/table', - 'components/slider', 'components/bar', 'components/modal', 'components/loading', 'layouts/masonry', + 'layouts/slider', 'layouts/flex', 'helpers/core',