From d3e3f1d42e7d1b4dcd8a43fa45a10b220c4538b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 18 Jul 2021 10:14:52 +0200 Subject: [PATCH] adding --- public/index.html | 22 +--- public/plain-ui.css | 135 +++++++++++---------- src/scss/_components.scss | 14 +++ src/scss/_layouts.scss | 3 + src/scss/_variables.scss | 11 +- src/scss/components/_button.scss | 114 +++++++---------- src/scss/components/_field.scss | 4 +- src/scss/core/_content.scss | 3 +- src/scss/core/_heading.scss | 53 +++++--- src/scss/core/_normalize.scss | 5 +- src/scss/helpers/_spacing.scss | 7 ++ src/scss/{layout => layouts}/_flex.scss | 0 src/scss/{layout => layouts}/_masonry.scss | 0 src/scss/plain-ui.scss | 22 +--- 14 files changed, 203 insertions(+), 190 deletions(-) create mode 100644 src/scss/_components.scss create mode 100644 src/scss/_layouts.scss rename src/scss/{layout => layouts}/_flex.scss (100%) rename src/scss/{layout => layouts}/_masonry.scss (100%) diff --git a/public/index.html b/public/index.html index 6d69f23..71da3dc 100644 --- a/public/index.html +++ b/public/index.html @@ -66,7 +66,7 @@
-
+

On development, a few styles and names will be change until release

@@ -152,7 +152,7 @@ Basic Styles -

+

Normalize

@@ -163,10 +163,9 @@

-

+

Heading

-

Heading 1

Heading 2

Heading 3

@@ -174,23 +173,12 @@
Heading 5
Heading 6
-

- Heading + .highlight -

- -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
- -

+

Content

-
+

The Class "content" will trigger a few styles for

diff --git a/public/plain-ui.css b/public/plain-ui.css index 4563682..61deb04 100644 --- a/public/plain-ui.css +++ b/public/plain-ui.css @@ -1672,6 +1672,7 @@ --background-contrast: #ffffff; --border: #3e3e3e; --border-contrast: #ffffff; + --font-family: IBM Plex Mono, sans-serif; } html { @@ -1692,7 +1693,7 @@ legend { } body { - font-family: "IBM Plex Mono", sans-serif; + font-family: var(--font-family); color: var(--text); background-color: var(--body); direction: ltr; @@ -1758,7 +1759,7 @@ textarea { } fieldset { - margin: 0 0 1rem; + margin: 0.5rem 0 1rem; } button, @@ -1825,7 +1826,7 @@ hr { overflow: visible; border: 0; border-top: 1px solid var(--border); - margin: 0 0 1rem; + margin: 0.5rem 0 1rem; } progress { @@ -1844,7 +1845,7 @@ code, kbd, pre, samp { - font-family: "IBM Plex Mono", sans-serif; + font-family: var(--font-family); font-size: 0.9rem; } @@ -1873,11 +1874,11 @@ samp { */ } .content p { - margin: 0 0 1rem; + margin: 0.5rem 0 1rem; } @media only screen and (min-width: 992px) { .content p { - margin: 0 0 0.8rem; + margin: 0.6rem 0 1.2rem; } } .content a, @@ -1929,13 +1930,13 @@ samp { .content ol, .content ul { padding: 0; - margin: 0 0 1rem; + margin: 0.5rem 0 1rem; } @media only screen and (min-width: 992px) { .content dl, .content ol, .content ul { - margin: 0 0 0.8rem; + margin: 0.6rem 0 1.2rem; } } .content ol, @@ -1966,22 +1967,23 @@ samp { .content code { white-space: pre; display: block; + color: var(--text-contrast); overflow-y: hidden; overflow-x: auto; border: 1px solid var(--border); border-radius: 2px; - background-color: var(--background-contrast); - margin: 0 0 1rem; + background-color: var(--background); + margin: 0.5rem 0 1rem; padding: 0.6rem 0.8rem; } @media only screen and (min-width: 992px) { .content code { - margin: 0 0 0.8rem; + margin: 0.6rem 0 1.2rem; } } @media only screen and (min-width: 992px) { .content code { - padding: 0.8rem 1rem; + padding: 0.7rem 1rem 0.9rem; } } @@ -2001,6 +2003,11 @@ samp { * @link https://github.com/tentakelfabrik/crispy-css * */ +/** + * add font-size for heading as class and element + * + * + */ h1, .h1, h2, .h2, h3, .h3, @@ -2010,17 +2017,7 @@ h6, .h6 { font-family: "IBM Plex Mono", sans-serif; font-weight: bold; line-height: 1.2; - margin: 0.6rem 0 1.2rem; -} -@media only screen and (min-width: 992px) { - h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { - margin: 0.7rem 0 1.4rem; - } + margin: 0.5rem 0 1rem; } h1.highlight, .h1.highlight, h2.highlight, .h2.highlight, @@ -2032,59 +2029,54 @@ h6.highlight, .h6.highlight { } h1, .h1 { - font-size: 2.25rem; -} -@media only screen and (min-width: 992px) { - h1, .h1 { - font-size: 1.2rem; - } + font-size: 2.5rem; } h2, .h2 { font-size: 2rem; } -@media only screen and (min-width: 992px) { - h2, .h2 { - font-size: 1.2rem; - } -} h3, .h3 { - font-size: 1.8rem; -} -@media only screen and (min-width: 992px) { - h3, .h3 { - font-size: 1.2rem; - } + font-size: 1.75rem; } h4, .h4 { - font-size: 1.6rem; -} -@media only screen and (min-width: 992px) { - h4, .h4 { - font-size: 1.2rem; - } + font-size: 1.5rem; } h5, .h5 { - font-size: 1.4rem; -} -@media only screen and (min-width: 992px) { - h5, .h5 { - font-size: 1.2rem; - } + font-size: 1.25rem; } h6, .h6 { - font-size: 1.2rem; + font-size: 1rem; } + @media only screen and (min-width: 992px) { + h1, .h1 { + font-size: 2.75rem; + } + + h2, .h2 { + font-size: 2.5rem; + } + + h3, .h3 { + font-size: 2rem; + } + + h4, .h4 { + font-size: 1.75rem; + } + + h5, .h5 { + font-size: 1.5rem; + } + h6, .h6 { font-size: 1.2rem; } } - /** * * A @@ -2112,13 +2104,21 @@ h6, .h6 { } /** - * + * Button * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/plain-ui * */ +/** + * + * + */ +/** + * + * + */ .button { -webkit-appearance: none; -moz-appearance: none; @@ -2127,16 +2127,16 @@ h6, .h6 { display: inline-flex; align-items: center; text-decoration: none; - font-family: "IBM Plex Mono", sans-serif; + font-family: var(--font-family); font-size: 1rem; border: 1px solid var(--border); background-color: var(--background-contrast); color: var(--text); border-radius: 2px; transition: background-color 0.1s; - margin-bottom: 0.5em; - padding: 0 1.3em; - min-height: 2.8em; + margin-bottom: 0.5rem; + padding: 0 1.3rem; + min-height: 2.8rem; width: 100%; } @media only screen and (min-width: 768px) { @@ -2182,7 +2182,7 @@ h6, .h6 { background-color: var(--danger); } .button--danger:focus, .button--danger:active { - outline: 2px solid var(--active); + outline: 2px solid var(--danger); } .button--info { border-color: var(--info); @@ -2225,6 +2225,9 @@ h6, .h6 { .button--info.button--outline:hover { border-color: #3bc0ff; } +.button--warning.button--outline:hover { + border-color: #f8d9ac; +} .button--success.button--outline:hover { border-color: #a6d0a6; } @@ -2236,7 +2239,7 @@ h6, .h6 { * */ .field-group { - margin: 0 0 1rem; + margin: 0.5rem 0 1rem; } .field-group--valid input.field-text, .field-group--valid textarea.field-text { border-color: var(--success); @@ -2253,7 +2256,7 @@ h6, .h6 { .field-label { font-size: 1rem; - font-family: "IBM Plex Mono", sans-serif; + font-family: var(--font-family); } .field-label .icon { vertical-align: text-bottom; @@ -2263,7 +2266,7 @@ h6, .h6 { } input.field-text, textarea.field-text, select.field-choice { - font-family: "IBM Plex Mono", sans-serif; + font-family: var(--font-family); font-size: 0.95rem; width: 100%; border: 1px solid var(--active); @@ -2476,7 +2479,7 @@ svg.field-choice__checked { } @media only screen and (min-width: 992px) { .panel__body { - padding: 0.8rem 1rem; + padding: 0.7rem 1rem 0.9rem; } } .panel--border-highlight { @@ -8139,6 +8142,10 @@ svg.field-choice__checked { padding: 0; } +.m-last-child-0 > *:last-child { + margin: 0; +} + .m-top-last-child-0 > *:last-child { margin-top: 0; } diff --git a/src/scss/_components.scss b/src/scss/_components.scss new file mode 100644 index 0000000..2770058 --- /dev/null +++ b/src/scss/_components.scss @@ -0,0 +1,14 @@ +@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/_layouts.scss b/src/scss/_layouts.scss new file mode 100644 index 0000000..051fa41 --- /dev/null +++ b/src/scss/_layouts.scss @@ -0,0 +1,3 @@ +@import + 'layouts/masonry', + 'layouts/flex'; \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 060dd4c..57db0cd 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -21,6 +21,7 @@ $breakpoint__md : 992px !default; $breakpoint__lg : 1200px !default; $breakpoint__xlg: 1600px !default; + /** * fonts * @@ -30,6 +31,7 @@ $direction: ltr !default; $font-family: 'IBM Plex Mono', sans-serif !default; $font-weight: normal !default; + $font-size: 0.9rem !default; $font-size-breakpoints: ( $breakpoint__md: 1rem @@ -110,16 +112,18 @@ $colors: ( '--border-contrast': $color__border-contrast ) !default; + /** * margin * */ -$margin: 0 0 1rem !default; +$margin: 0.5rem 0 1rem !default; $margin-breakpoints: ( - $breakpoint__md: 0 0 0.8rem + $breakpoint__md: 0.6rem 0 1.2rem ) !default; + /** * padding * @@ -127,9 +131,10 @@ $margin-breakpoints: ( $padding: 0.6rem 0.8rem !default; $padding-breakpoints: ( - $breakpoint__md: 0.8rem 1rem + $breakpoint__md: 0.7rem 1rem 0.9rem ) !default; + /** * border * diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 68fe9d3..0c6d101 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,5 +1,5 @@ /** - * + * Button * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License @@ -7,6 +7,38 @@ * */ +/** + * + * + */ +@mixin button-color($name) +{ + &--#{$name} { + border-color: var(--#{$name}); + + &:hover { + background-color: var(--#{$name}); + } + + &:focus, &:active { + outline: 2px solid var(--#{$name}); + } + } +} + +/** + * + * + */ +@mixin button-outline-color($name, $color) +{ + &--#{$name}.button--outline { + &:hover { + border-color: $color; + } + } +} + .button { appearance: none; position: relative; @@ -15,7 +47,7 @@ align-items: center; text-decoration: none; - font-family: $font-family; + font-family: var(--font-family); font-size: 1rem; border: 1px solid var(--border); @@ -25,9 +57,9 @@ border-radius: $border-radius; transition: background-color 0.1s; - margin-bottom: 0.5em; - padding: 0 1.3em; - min-height: 2.8em; + margin-bottom: 0.5rem; + padding: 0 1.3rem; + min-height: 2.8rem; width: 100%; @include media-sm() { @@ -72,53 +104,10 @@ } } - &--danger { - border-color: var(--danger); - - &:hover { - background-color: var(--danger); - } - - &:focus, &:active { - outline: 2px solid var(--active); - } - } - - &--info { - border-color: var(--info); - - &:hover { - background-color: var(--info); - } - - &:focus, &:active { - outline: 2px solid var(--info); - } - } - - &--warning { - border-color: var(--warning); - - &:hover { - background-color: var(--warning); - } - - &:focus, &:active { - outline: 2px solid var(--warning); - } - } - - &--success { - border-color: var(--success); - - &:hover { - background-color: var(--success); - } - - &:focus, &:active { - outline: 2px solid var(--success); - } - } + @include button-color('danger'); + @include button-color('info'); + @include button-color('warning'); + @include button-color('success'); &--outline { background-color: transparent; @@ -130,21 +119,8 @@ } } - &--danger.button--outline { - &:hover { - border-color: lighten($color__danger, 20%); - } - } - - &--info.button--outline { - &:hover { - border-color: lighten($color__info, 20%); - } - } - - &--success.button--outline { - &:hover { - border-color: lighten($color__success, 20%); - } - } + @include button-outline-color('danger', lighten($color__danger, 20%)); + @include button-outline-color('info', lighten($color__info, 20%)); + @include button-outline-color('warning', lighten($color__warning, 20%)); + @include button-outline-color('success', lighten($color__success, 20%)); } \ No newline at end of file diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index 63d5d8e..86772f4 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -31,7 +31,7 @@ .field-label { font-size: 1rem; - font-family: $font-family; + font-family: var(--font-family); .icon { vertical-align: text-bottom; @@ -43,7 +43,7 @@ } input.field-text, textarea.field-text, select.field-choice { - font-family: $font-family; + font-family: var(--font-family); font-size: 0.95rem; width: 100%; diff --git a/src/scss/core/_content.scss b/src/scss/core/_content.scss index ca58790..17e20ec 100644 --- a/src/scss/core/_content.scss +++ b/src/scss/core/_content.scss @@ -131,11 +131,12 @@ white-space: pre; display: block; + color: var(--text-contrast); overflow-y: hidden; overflow-x: auto; border: $border; border-radius: $border-radius; - background-color: var(--background-contrast); + background-color: var(--background); margin: $margin; @include media-breakpoints('margin', $margin-breakpoints); diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss index c613929..8d62369 100644 --- a/src/scss/core/_heading.scss +++ b/src/scss/core/_heading.scss @@ -8,17 +8,37 @@ * */ + +/** + * add font-size for heading as class and element + * + * + */ +@mixin heading-font-size($h, $font-size) +{ + #{$h}, .#{$h} { + font-size: $font-size; + } +} + $heading__font-sizes: ( - 'h1': 2.25rem, + 'h1': 2.5rem, 'h2': 2rem, - 'h3': 1.8rem, - 'h4': 1.6rem, - 'h5': 1.4rem, - 'h6': 1.2rem + 'h3': 1.75rem, + 'h4': 1.5rem, + 'h5': 1.25rem, + 'h6': 1rem ) !default; -$heading__font-sizes__breakpoints: ( - $breakpoint__md: 1.2rem +$heading__font-sizes-breakpoints: ( + $breakpoint__md: ( + 'h1': 2.75rem, + 'h2': 2.5rem, + 'h3': 2rem, + 'h4': 1.75rem, + 'h5': 1.5rem, + 'h6': 1.2rem + ) ) !default; $heading__font-weight: bold!default; @@ -26,10 +46,8 @@ $heading__font-family: $font-family !default; $heading__line-height: 1.2 !default; -$heading__margin: 0.6rem 0 1.2rem !default; -$heading__margin-breakpoints: ( - $breakpoint__md: 0.7rem 0 1.4rem -) !default; +$heading__margin: $margin !default; +$heading__margin-breakpoints: margin-breakpoints !default; h1, .h1, h2, .h2, @@ -49,9 +67,16 @@ h6, .h6 { } } +// adding font-size for each @each $h, $font-size in $heading__font-sizes { - #{$h}, .#{$h} { - font-size: $font-size; - @include breakpoints-font-size($heading__font-sizes__breakpoints, $font-size, $font-size); + @include heading-font-size($h, $font-size); +} + +// adding breakpoints for each breakpoint and each heading +@each $breakpoint, $headings in $heading__font-sizes-breakpoints { + @media only screen and (min-width: $breakpoint) { + @each $h, $font-size in $headings { + @include heading-font-size($h, $font-size); + } } } \ No newline at end of file diff --git a/src/scss/core/_normalize.scss b/src/scss/core/_normalize.scss index abe4c3d..db44960 100644 --- a/src/scss/core/_normalize.scss +++ b/src/scss/core/_normalize.scss @@ -13,6 +13,7 @@ @each $var, $color in $colors { #{$var}: $color; } + --font-family: #{$font-family}; } html { @@ -33,7 +34,7 @@ legend { } body { - font-family: $font-family; + font-family: var(--font-family); color: var(--text); background-color: var(--body); @@ -198,7 +199,7 @@ code, kbd, pre, samp { - font-family: $font-family; + font-family: var(--font-family); font-size: $font-size; // @TODO } \ No newline at end of file diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index 2d5bf6f..4a48c43 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -56,6 +56,7 @@ $spacing-steps: 10 !default; } } + /** * * @@ -70,6 +71,12 @@ $spacing-steps: 10 !default; padding: 0; } +.m-last-child-0 { + > *:last-child { + margin: 0; + } +} + .m-top-last-child-0 { > *:last-child { margin-top: 0; diff --git a/src/scss/layout/_flex.scss b/src/scss/layouts/_flex.scss similarity index 100% rename from src/scss/layout/_flex.scss rename to src/scss/layouts/_flex.scss diff --git a/src/scss/layout/_masonry.scss b/src/scss/layouts/_masonry.scss similarity index 100% rename from src/scss/layout/_masonry.scss rename to src/scss/layouts/_masonry.scss diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index cb85d65..1e9f064 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -6,23 +6,9 @@ 'functions', 'mixins', 'variables', - 'core', - - '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', - - 'layout/masonry', - 'layout/flex', + 'core', + + 'components', + 'layouts', 'helpers';