diff --git a/dist/Impressum.html b/dist/Impressum.html new file mode 100644 index 0000000..f374fe5 --- /dev/null +++ b/dist/Impressum.html @@ -0,0 +1,488 @@ + + + + + + + + Plain UI | Lightweight CSS UI Framework for Building Apps and Websites + + + + + + + + + +
+
+
+

+ Plain UI 0.1-alpha +

+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Some Text +

+

+
+
+
+
+
+
+

Components

+ +

Buttons

+ + + + + + + +
+
+ +
+
+ +
+
+ +
+
+

Icon

+ + + +
+
+ +
+
+

+ Bar +

+
+
+ +
+
+ Bar +
+
+
+
+ +
+
+

+ Tabs +

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

+ Tabs + Bar +

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

Badge

+ + Category + + + 99+ + +
+
+ +
+
+

Loading

+
+
+ + + +
+
+
+
+ +
+
+

Panel

+
+
+
+ +
+
Test
+
+ + +
+
+
+
+

+ Hallo +

+
+
+
+
+
+ +
+
+

Modal

+ + +
+
+
+ + Delete +
+
+ Do you really wan't to delete all files? +
+
+ + +
+
+
+
+
+ +
+
+

Field

+ +
+
+ +
+ +
+ +
+ +
+ + + String is not valid + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+
+ +
+
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABCD
1234
1234
1234
+
+
+
+ +
+
+
+

+ Hero +

+
+ +
+
+
+
+ +
+
+
+

+ Media +

+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+
+
+

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 +
+
+
+
+
+ + + - Plain UI | Lightweight CSS UI Framework for Building Apps and Websites + + Plain UI | Lightweight CSS UI Framework for Building Apps and Websites + + @@ -59,8 +62,10 @@
-

Components

+

Components

+

Buttons

+ @@ -97,6 +102,24 @@
+

Icon

+ + + +
+
+ +
+
+

+ Bar +

+ + + + + +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ Bar +
+
+
+
+ +
+
+
+ + Tab A + + + Tab B + + + Tab C + +
+
+
+ +
+
+

Icon

+ + + +
+
+ +
+
+

Content

+
+

+

+
    +
  • +
  • +
  • +
+
+
+
+ +
+
+

Badge

+ + Category + + + 99+ + +
+
+ +
+
+

Loading

+
+
+ + + +
+
+
+
+ +
+
+ +

Panel

+ +
+
+
+ +
+
Test
+
+ + +
+
+
+
+

+ Hallo +

+
+
+
+ +
+
+ +
+
+

Modal

+ + +
+
+
+ + Delete +
+
+ Do you really wan't to delete all files? +
+
+ + +
+
+
+
+
+ +
+
+

Field

+ +
+
+ +
+ +
+ +
+ +
+ + + String is not valid + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+
+ +
+
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABCD
1234
1234
1234
+
+
+
+ +
+
+
+

Hero

+
+
+
+ +
+ +
+ +
+
+
+

Media

+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+
+
+

Layout

+
+
+

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 +
+
+
+
+
+ +
+
+
+

Masonry

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + +
-
-
+
+

Plain UI is a simple UI Framework. - - It uses strong Utility Classes and has a few Components.

- Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS. + Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.

Contribution @@ -86,14 +84,12 @@
-

Heading

- -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
+

+ Installation +

+
+npm install plain-ui --save +
@@ -101,95 +97,75 @@
-

Components

-
+

+ Building +

+

+ 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, +

+ -

Buttons

- - - - - - -
-
- -
-
- +
+
+
-
-
- -
-
- Bar -
-
+

+ Variables + Themes +

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

+ Basic Styles +

-
-
-

Icon

- - - -
-
+

+ Normalize +

-
-
-

Content

+

+ 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. +

+ +

+ Heading + .highlight +

+ +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

+ Heading +

+ +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

+ Heading + .highlight +

+ +

+ Content +

@@ -201,344 +177,7 @@
- -
-
-

Badge

- - Category - - - 99+ - -
-
- -
-
-

Loading

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

Panel

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

- Hallo -

-
-
-
- -
-
- -
-
-

Modal

- - -
-
-
- - Delete -
-
- Do you really wan't to delete all files? -
-
- - -
-
-
-
-
- -
-
-

Field

- -
-
- -
- -
- -
- -
- - - String is not valid - -
- -
- -
- -
- -
- -
- - -
- -
- -
-
- -
-
-

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ABCD
1234
1234
1234
-
-
-
- -
-
-
-

Hero

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

Media

-
-
-
- -
- food truck yr franzen pabst -
-
-
-
-
- -
-
-
-

Layout

-
-
-

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 -
-
-
-
- -
-
-
-

Masonry

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-
- - * A - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui - * - */ -.badge { - display: inline-block; - background-color: var(--primary); - color: var(--white); - font-size: 0.85rem; - padding: 0.4rem 0.8rem; -} -.badge--round { - display: inline-flex; - justify-content: center; - border-radius: 50%; - width: 2.8em; -} - /** * Heading * @@ -2016,7 +1907,7 @@ h6, .h6 { .content blockquote { border-left: 1px solid var(--primary); margin-left: 0; - padding: 0.4rem 0.8rem; + padding: 0.6rem 0.8rem; } .content blockquote p:last-child { margin-bottom: 0; @@ -2059,6 +1950,153 @@ h6, .h6 { .content dt { font-weight: bold; } +.content code { + white-space: pre; + display: block; + overflow-y: hidden; + overflow-x: auto; + border: 1px solid var(--primary); + border-radius: 2px; + background-color: var(--background-secondary); + margin: 0 0 1rem; + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .content code { + margin: 0 0 0.8rem; + } +} +@media only screen and (min-width: 992px) { + .content code { + padding: 0.8rem 1rem; + } +} + +.highlight { + padding: 0.15rem 0.4rem 0.25rem; + background: var(--primary); + color: var(--text-secondary); + border-radius: 2px; +} + +/** + * Heading + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: "IBM Plex Mono", sans-serif; + font-weight: bold; + line-height: 1.2; + margin: 0 0 1.2rem; +} +@media only screen and (min-width: 992px) { + h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + margin: 0 0 1.4rem; + } +} +h1.highlight, .h1.highlight, +h2.highlight, .h2.highlight, +h3.highlight, .h3.highlight, +h4.highlight, .h4.highlight, +h5.highlight, .h5.highlight, +h6.highlight, .h6.highlight { + display: table; +} + +h1, .h1 { + font-size: 2.25rem; +} +@media only screen and (min-width: 992px) { + h1, .h1 { + font-size: 2.7rem; + } +} + +h2, .h2 { + font-size: 2rem; +} +@media only screen and (min-width: 992px) { + h2, .h2 { + font-size: 2.4rem; + } +} + +h3, .h3 { + font-size: 1.8rem; +} +@media only screen and (min-width: 992px) { + h3, .h3 { + font-size: 2.16rem; + } +} + +h4, .h4 { + font-size: 1.6rem; +} +@media only screen and (min-width: 992px) { + h4, .h4 { + font-size: 1.92rem; + } +} + +h5, .h5 { + font-size: 1.4rem; +} +@media only screen and (min-width: 992px) { + h5, .h5 { + font-size: 1.68rem; + } +} + +h6, .h6 { + font-size: 1.2rem; +} +@media only screen and (min-width: 992px) { + h6, .h6 { + font-size: 1.44rem; + } +} + +/** + * + * A + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.badge { + display: inline-block; + background-color: var(--background); + color: var(--text-secondary); + font-size: 0.85rem; + padding: 0.4rem 0.8rem; + border: 1px solid var(--primary); + border-radius: 2px; +} +.badge--round { + display: inline-flex; + justify-content: center; + border-radius: 50%; + width: 2.8em; +} /** * @@ -2290,9 +2328,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 * */ .icon { @@ -2311,6 +2351,10 @@ svg.field-choice__checked { * image *

* + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * */ .hero { position: relative; @@ -2328,18 +2372,81 @@ svg.field-choice__checked { * * */ +.tabs { + display: flex; + flex-direction: column; + width: 100%; + border-bottom: 1px solid var(--primary); +} +@media only screen and (min-width: 768px) { + .tabs { + width: auto; + flex-direction: row; + } +} +.tabs__item { + min-height: 2.8em; + display: flex; + align-items: center; + padding: 0 1em; + color: var(--text); + 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; + } +} +.tabs__item:hover { + cursor: pointer; + background-color: var(--primary-active); + color: var(--text-secondary); + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} +.tabs__item--selected { + color: var(--text); + border-color: var(--border); +} +.tabs--secondary { + border: 0; +} +.tabs--secondary .tabs__item { + color: var(--text-secondary); +} +.tabs--secondary .tabs__item:hover { + background-color: var(--primary-active-secondary); + color: var(--text); + border-radius: 0; +} +.tabs--secondary .tabs__item--selected { + border-color: var(--border-secondary); +} + /** * * * */ .panel { - border: 1px solid var(--primary); + border: 1px solid var(--border); border-radius: 2px; - background-color: var(--white); + background-color: var(--background-secondary); } .panel__body { - padding: 0.25em 1em; + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .panel__body { + padding: 0.8rem 1rem; + } +} +.panel--border-highlight { + border-left-width: 10px; } /** @@ -2383,6 +2490,37 @@ svg.field-choice__checked { * * */ +.table { + width: 100%; + border: 1px solid #cacaca; + background: var(--white); +} +.table--striped tr:nth-child(even) { + background-color: #fdfdfd; +} +.table--scroll { + overflow-x: auto; +} +.table td { + color: var(--text); +} +.table td, +.table th { + text-align: left; + border-bottom: 1px solid #cacaca; + padding: 0.5em 1.25em; +} +.table th { + color: white; + background-color: #3e3e3e; +} +.table tr:hover { + background-color: #585858; +} +.table tr:hover td { + color: white; +} + /** *
*
@@ -2391,6 +2529,21 @@ 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; +} + /** *
*
@@ -2411,6 +2564,7 @@ svg.field-choice__checked { min-height: 2.8em; background-color: var(--primary); color: var(--text-secondary); + border: 1px solid var(--primary); border-radius: 2px; } .bar__start { @@ -2505,6 +2659,9 @@ 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 * */ .loading { @@ -2518,7 +2675,7 @@ svg.field-choice__checked { display: block; width: 15px; height: 80px; - background-color: var(--primary); + background-color: var(--background); -webkit-animation-name: plain-ui__loading-animation; animation-name: plain-ui__loading-animation; -webkit-animation-duration: 0.5s; @@ -2527,8 +2684,8 @@ svg.field-choice__checked { animation-iteration-count: infinite; -webkit-animation-delay: 0.15s; animation-delay: 0.15s; - border-top: 1px solid var(--primary-dark); - border-bottom: 1px solid var(--primary-dark); + border-top: 1px solid var(--background); + border-bottom: 1px solid var(--background); } .loading span:first-child { margin-right: 1px; @@ -4096,7 +4253,7 @@ svg.field-choice__checked { * * */ -.border, .badge { +.border { border: 1px solid var(--primary); } @@ -4822,6 +4979,10 @@ svg.field-choice__checked { padding: 0; } +.marginless-last-child > *:last-child { + margin-bottom: 0; +} + /** * spacing for single padding or margin * @@ -7472,89 +7633,3 @@ svg.field-choice__checked { font-size: 3rem; } } -.table { - width: 100%; - border: 1px solid #cacaca; - background: var(--white); -} -.table--striped tr:nth-child(even) { - background-color: #fdfdfd; -} -.table--scroll { - overflow-x: auto; -} -.table td { - color: var(--text); -} -.table td, -.table th { - text-align: left; - border-bottom: 1px solid #cacaca; - padding: 0.5em 1.25em; -} -.table th { - color: white; - background-color: #3e3e3e; -} -.table tr:hover { - background-color: #585858; -} -.table tr:hover td { - 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; -} - -.tabs { - display: flex; - flex-direction: column; - width: 100%; - border-bottom: 1px solid var(--primary); -} -@media only screen and (min-width: 768px) { - .tabs { - width: auto; - flex-direction: row; - } -} -.tabs__item { - min-height: 2.8em; - display: flex; - align-items: center; - padding: 0 1em; - color: var(--text); - 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; - } -} -.tabs__item:hover { - cursor: pointer; - background-color: var(--primary-active); - color: var(--text-secondary); - border-top-left-radius: 2px; - border-top-right-radius: 2px; -} -.tabs__item--selected { - color: var(--text); - border-color: var(--primary); -} diff --git a/mix-manifest.json b/mix-manifest.json index 6bff7ea..1e623b6 100644 --- a/mix-manifest.json +++ b/mix-manifest.json @@ -1,5 +1,6 @@ { "/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", diff --git a/src/scss/_core.scss b/src/scss/_core.scss index bf99b79..5a7e7f6 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -10,4 +10,5 @@ @import 'core/normalize', + 'core/content', 'core/heading'; \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index c29ed65..6025b8f 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -57,6 +57,7 @@ $plain-ui__line-height__breakpoints: ( $plain-ui__primary: #3e3e3e !default; $plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default; +$plain-ui__primary-active-secondary: #ffffff !default; $plain-ui__secondary: #b3b2af !default; $plain-ui__success: #64ac64 !default; @@ -69,9 +70,12 @@ $plain-ui__info: #0090d4 !default; $plain-ui__info-light: lighten($plain-ui__info, 20%) !default; $plain-ui__background: #f9f9f9 !default; +$plain-ui__background--secondary: #ffffff !default; +$plain-ui__body: #f9f9f9 !default; $plain-ui__text: #363636 !default; $plain-ui__text-secondary: #ffffff !default; -$plain-ui__border: #dfdfdf !default; +$plain-ui__border: $plain-ui__primary !default; +$plain-ui__border-secondary: #ffffff !default; $plain-ui__link: #fff !default; $plain-ui__colors: ( @@ -83,6 +87,7 @@ $plain-ui__colors: ( :root { --primary: #{$plain-ui__primary}; --primary-active: #{$plain-ui__primary-active}; + --primary-active-secondary: #{$plain-ui__primary-active-secondary}; --link: #{$plain-ui__primary}; --link-hover: #{$plain-ui__danger}; --danger: #{$plain-ui__danger}; @@ -93,9 +98,10 @@ $plain-ui__colors: ( --text: #{$plain-ui__text}; --text-secondary: #{$plain-ui__text-secondary}; --background: #{$plain-ui__primary}; - --background--contrast: #{$plain-ui__primary}; + --background-secondary: #{$plain-ui__border-secondary}; --body: #{$plain-ui__body}; --border: #{$plain-ui__border}; + --border-secondary: #{$plain-ui__border-secondary}; } /** @@ -113,9 +119,9 @@ $plain-ui__margin-breakpoints: ( * */ -$plain-ui__padding: 0.4rem 0.8rem !default; +$plain-ui__padding: 0.6rem 0.8rem !default; $plain-ui__padding-breakpoints: ( - $plain-ui__md: 0.6rem 1rem + $plain-ui__md: 0.8rem 1rem ) !default; /** diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss index 0ff3d68..dfb570d 100644 --- a/src/scss/components/_badge.scss +++ b/src/scss/components/_badge.scss @@ -12,13 +12,14 @@ .badge { display: inline-block; - background-color: var(--primary); - color: var(--white); + background-color: var(--background); + color: var(--text-secondary); font-size: 0.85rem; padding: 0.4rem 0.8rem; - @extend .border; + border: $plain-ui__border; + border-radius: $plain-ui__border-radius; &--round { display: inline-flex; diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss index 08835d8..57c0ea6 100644 --- a/src/scss/components/_bar.scss +++ b/src/scss/components/_bar.scss @@ -21,6 +21,7 @@ background-color: var(--primary); color: var(--text-secondary); + border: $plain-ui__border; border-radius: $plain-ui__border-radius; &__start { diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index 4788ba7..e0007d7 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -6,6 +6,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/components/_hero.scss b/src/scss/components/_hero.scss index 5c069bb..315429e 100644 --- a/src/scss/components/_hero.scss +++ b/src/scss/components/_hero.scss @@ -3,6 +3,10 @@ * image *
* + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * */ .hero { diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss index b37783a..e81034b 100644 --- a/src/scss/components/_icon.scss +++ b/src/scss/components/_icon.scss @@ -1,7 +1,9 @@ /** + * * - * - * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui * */ @@ -14,7 +16,6 @@ vertical-align: middle; overflow: hidden; - font-size: 1.4rem; fill: var(--text); diff --git a/src/scss/components/_loading.scss b/src/scss/components/_loading.scss index 2fb82bf..40a3b74 100644 --- a/src/scss/components/_loading.scss +++ b/src/scss/components/_loading.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 * */ @@ -17,7 +20,7 @@ width: 15px; height: 80px; - background-color: var(--primary); + background-color: var(--background); animation-name: plain-ui__loading-animation; animation-duration: 0.5s; @@ -25,8 +28,8 @@ animation-delay: 0.15s; - border-top: 1px solid var(--primary-dark); - border-bottom: 1px solid var(--primary-dark); + border-top: 1px solid var(--background); + border-bottom: 1px solid var(--background); &:first-child { margin-right: 1px; diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss index 22a4dcc..fa7a3d2 100644 --- a/src/scss/components/_panel.scss +++ b/src/scss/components/_panel.scss @@ -5,13 +5,16 @@ */ .panel { - border: 1px solid var(--primary); + border: 1px solid var(--border); border-radius: $plain-ui__border-radius; - background-color: var(--white); + background-color: var(--background-secondary); &__body { - padding: 0.25em 1em; + padding: $plain-ui__padding; + @include media-breakpoints('padding', $plain-ui__padding-breakpoints); } - // bar left, right, top, bottom + &--border-highlight { + border-left-width: 10px; + } } \ No newline at end of file diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss index 530007c..dd5357b 100644 --- a/src/scss/components/_slider.scss +++ b/src/scss/components/_slider.scss @@ -7,22 +7,19 @@ * */ -@mixin plain-ui__component__slider() -{ - .slider { - position: relative; - overflow-x: visible; +.slider { + position: relative; + overflow-x: visible; - &__inner { - display: flex; - white-space: nowrap; - } + &__inner { + display: flex; + white-space: nowrap; + } - &__item { - padding: 0 .6em; - display: inline-block; - white-space: normal; - flex-shrink: 0; - } + &__item { + padding: 0 0.6em; + display: inline-block; + white-space: normal; + flex-shrink: 0; } } \ No newline at end of file diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index 1938f04..8c9597f 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -4,49 +4,46 @@ * */ -@mixin plain-ui__component__table() -{ - .table { - width: 100%; - border: 1px solid lighten($plain-ui__primary, 55%); - background: var(--white); - - &--striped { - tr { - &:nth-child(even) { - background-color: lighten($plain-ui__primary, 75%); - } +.table { + width: 100%; + border: 1px solid lighten($plain-ui__primary, 55%); + background: var(--white); + + &--striped { + tr { + &:nth-child(even) { + background-color: lighten($plain-ui__primary, 75%); } } + } - &--scroll { - overflow-x: auto; - } + &--scroll { + overflow-x: auto; + } - td { - color: var(--text); - } + td { + color: var(--text); + } - td, - th { - text-align: left; - border-bottom: 1px solid lighten($plain-ui__primary, 55%); + td, + th { + text-align: left; + border-bottom: 1px solid lighten($plain-ui__primary, 55%); - padding: 0.5em 1.25em; - //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); - } + padding: 0.5em 1.25em; + //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); + } - th { - color: white; - background-color: $plain-ui__primary; - } + th { + color: white; + background-color: $plain-ui__primary; + } - tr:hover { - background-color: lighten($plain-ui__primary, 10%); + tr:hover { + background-color: lighten($plain-ui__primary, 10%); - td { - color: white; - } + td { + color: white; } } } \ No newline at end of file diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss index 74d18ce..1384e16 100644 --- a/src/scss/components/_tabs.scss +++ b/src/scss/components/_tabs.scss @@ -4,53 +4,68 @@ * */ -@mixin plain-ui__component__tabs() -{ - .tabs { +.tabs { + display: flex; + flex-direction: column; + + width: 100%; + border-bottom: $plain-ui__border; + + @include plain-ui__media-sm() { + width: auto; + flex-direction: row; + } + + &__item { + min-height: 2.8em; + display: flex; - flex-direction: column; + align-items: center; + padding: 0 1em; + color: var(--text); + + transition: background-color 0.1s; + + border-bottom: 3px solid transparent; + background-color: transparent; width: 100%; - border-bottom: $plain-ui__border; @include plain-ui__media-sm() { width: auto; - flex-direction: row; + display: inline-flex; } - &__item { - min-height: 2.8em; + &:hover { + cursor: pointer; + background-color: var(--primary-active); + color: var(--text-secondary); - display: flex; - align-items: center; - padding: 0 1em; - color: var(--text); - - transition: background-color 0.1s; + border-top-left-radius: $plain-ui__border-radius; + border-top-right-radius: $plain-ui__border-radius; + } - border-bottom: 3px solid transparent; - background-color: transparent; + &--selected { + color: var(--text); + border-color: var(--border); + } + } - width: 100%; + &--secondary { + border: 0; - @include plain-ui__media-sm() { - width: auto; - display: inline-flex; - } + .tabs__item { + color: var(--text-secondary); &:hover { - cursor: pointer; - background-color: var(--primary-active); - color: var(--text-secondary); - - border-top-left-radius: $plain-ui__border-radius; - border-top-right-radius: $plain-ui__border-radius; - } - - &--selected { + background-color: var(--primary-active-secondary); color: var(--text); - border-color: var(--primary); + border-radius: 0; } } + + .tabs__item--selected { + border-color: var(--border-secondary); + } } } \ No newline at end of file diff --git a/src/scss/components/_content.scss b/src/scss/core/_content.scss similarity index 74% rename from src/scss/components/_content.scss rename to src/scss/core/_content.scss index 1c247d5..2bc015c 100644 --- a/src/scss/components/_content.scss +++ b/src/scss/core/_content.scss @@ -122,4 +122,29 @@ dt { font-weight: bold; } -} \ No newline at end of file + + code { + white-space: pre; + display: block; + + overflow-y: hidden; + overflow-x: auto; + border: $plain-ui__border; + border-radius: $plain-ui__border-radius; + background-color: var(--background-secondary); + + margin: $plain-ui__margin; + @include media-breakpoints('margin', $plain-ui__margin-breakpoints); + + padding: $plain-ui__padding; + @include media-breakpoints('padding', $plain-ui__padding-breakpoints); + } +} + +.highlight { + padding: 0.15rem 0.4rem 0.25rem; + background: var(--primary); + color: var(--text-secondary); + border-radius: $plain-ui__border-radius; +} + diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss index fb5013f..8c3d5af 100644 --- a/src/scss/core/_heading.scss +++ b/src/scss/core/_heading.scss @@ -49,12 +49,6 @@ h6, .h6 { } } -.highlight { - padding: 0.25rem 0.5rem; - background: var(--primary); - color: var(--text-secondary); -} - @each $h, $font-size in $plain-ui__heading__font-sizes { #{$h}, .#{$h} { font-size: $font-size; diff --git a/src/scss/core/_normalize.scss b/src/scss/core/_normalize.scss index 94e9590..0144279 100644 --- a/src/scss/core/_normalize.scss +++ b/src/scss/core/_normalize.scss @@ -30,7 +30,7 @@ body { font-family: $plain-ui__font-family; color: var(--text); - background-color: var(--background); + background-color: var(--body); direction: $plain-ui__direction; font-size: $plain-ui__font-size; diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index 85c90a5..813f50f 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -22,6 +22,12 @@ $plain-ui__spacing-steps: 10 !default; padding: 0; } +.marginless-last-child { + > *:last-child { + margin-bottom: 0; + } +} + /** * spacing for single padding or margin diff --git a/src/scss/helpers/_typography.scss b/src/scss/helpers/_typography.scss index 9af7702..a1efe82 100644 --- a/src/scss/helpers/_typography.scss +++ b/src/scss/helpers/_typography.scss @@ -88,5 +88,4 @@ @include plain-ui__media-xlg() { @include add_font_size('xlg-' + $name, $font-size); } -} - +} \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 9d7ad48..b2cd530 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -9,7 +9,6 @@ 'core', 'components/badge', - 'components/content', 'components/button', 'components/field', 'components/icon', @@ -31,7 +30,3 @@ 'helpers/spacing', 'helpers/colors', 'helpers/typography'; - -@include plain-ui__component__table(); -@include plain-ui__component__slider(); -@include plain-ui__component__tabs(); \ No newline at end of file