From 142d7a3d7ed703ce2bca32b846599d54abc5cf27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 20 Jun 2021 23:54:02 +0200 Subject: [PATCH] adding tabs --- dist/index.html | 15 +++++++ dist/plain-ui.css | 67 ++++++++++++++++++++++++++++++-- src/scss/_variables.scss | 2 + src/scss/components/_badge.scss | 3 +- src/scss/components/_bar.scss | 16 +++++++- src/scss/components/_button.scss | 7 ++-- src/scss/components/_tabs.scss | 41 +++++++++++++++++++ src/scss/core/helpers/_core.scss | 22 +++++++++++ src/scss/plain-ui.scss | 4 +- 9 files changed, 165 insertions(+), 12 deletions(-) create mode 100644 src/scss/components/_tabs.scss diff --git a/dist/index.html b/dist/index.html index 480d06b..431c6c1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -82,6 +82,21 @@ +
+
+
+
+ + Tab A + + + Tab B + +
+
+
+
+

Icon

diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 3def296..42828ab 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -319,6 +319,11 @@ summary { * * */ +/** + * + * + * + */ /** *
* @@ -565,6 +570,26 @@ body { position: relative !important; } +/** + * + * + */ +.vertical-align-bottom { + vertical-align: bottom; +} + +.vertical-align-top { + vertical-align: top; +} + +.vertical-align-baseline { + vertical-align: baseline; +} + +/** + * + * + */ .badge { display: inline-block; background-color: #3e3e3e; @@ -613,11 +638,11 @@ body { border: none; background: transparent; } -.button:hover, .button--hover { +.button:hover, .button--selected { cursor: pointer; text-decoration: none; color: white; - background-color: #3e3e3e; + background-color: #585858; } .button:focus, .button:active { outline: 1px solid #646464; @@ -909,13 +934,15 @@ img.media { .bar { display: flex; + height: 2.8em; background-color: #3e3e3e; color: white; - padding: 0.8em 1.2em; +} +.bar .icon { + font-size: 1.5rem; } .bar__start { justify-content: start; - margin-right: 0.75em; } .bar__main { width: 100%; @@ -924,3 +951,35 @@ img.media { justify-content: end; margin-left: 0.75em; } +.bar__start, .bar__main, .bar__end { + align-self: center; + margin-left: 0.75em; +} +.bar__start:last-child, .bar__main:last-child, .bar__end:last-child { + margin-right: 0.75em; +} + +.tab { + display: flex; +} +.tab__item { + height: 100%; + display: inline-flex; + align-items: center; + padding: 0 1em; + background-color: white; + transition: background-color 0.1s; + background-color: white; + color: #3e3e3e; + border: 1px solid #3e3e3e; + border-right: 0; +} +.tab__item:last-child { + margin-right: 0; +} +.tab__item:hover, .tab__item--selected { + cursor: pointer; + background-color: #585858; + color: white; + border-color: #585858; +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 5622184..d8c8dd6 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -57,6 +57,8 @@ $plain-ui__line-height__breakpoints: ( */ $plain-ui__primary-light: #3e3e3e !default; +$plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default; + $plain-ui__secondary: #b3b2af !default; $plain-ui__success-light: #64ac64 !default; $plain-ui__warning: #f0ad4e !default; diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss index e9b605e..9e13e5c 100644 --- a/src/scss/components/_badge.scss +++ b/src/scss/components/_badge.scss @@ -5,7 +5,8 @@ * */ -@mixin plain-ui__component__badge() { +@mixin plain-ui__component__badge() +{ .badge { display: inline-block; diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss index 47279a4..b7d0541 100644 --- a/src/scss/components/_bar.scss +++ b/src/scss/components/_bar.scss @@ -10,13 +10,16 @@ .bar { display: flex; + height: 2.8em; background-color: $plain-ui__primary-light; color: white; - padding: 0.8em 1.2em; + + .icon { + font-size: 1.5rem; + } &__start { justify-content: start; - margin-right: 0.75em; } &__main { @@ -27,5 +30,14 @@ justify-content: end; margin-left: 0.75em; } + + &__start, &__main, &__end { + align-self: center; + margin-left: 0.75em; + + &:last-child { + margin-right: 0.75em; + } + } } } \ No newline at end of file diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index d4ff95d..067943d 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -19,14 +19,13 @@ background-color: white; color: $plain-ui__primary-light; - border-radius: 2px; + border-radius: $plain-ui__border-radius; transition: background-color 0.1s; margin-bottom: 0.5em; padding: 0.5em 1.3em; font-size: 1rem; - // for mobile width: 100%; @include plain-ui__media-sm() { @@ -44,11 +43,11 @@ background: transparent; } - &:hover, &--hover { + &:hover, &--selected { cursor: pointer; text-decoration: none; color: white; - background-color: $plain-ui__primary-light; + background-color: $plain-ui__primary-light-active; } &:focus, &:active { diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss new file mode 100644 index 0000000..9f5c0ff --- /dev/null +++ b/src/scss/components/_tabs.scss @@ -0,0 +1,41 @@ +/** + * + * + * + */ + +@mixin plain-ui__component__tab() +{ + .tab { + display: flex; + + &__item { + height: 100%; + + display: inline-flex; + align-items: center; + padding: 0 1em; + + background-color: white; + transition: background-color 0.1s; + + background-color: white; + color: $plain-ui__primary-light; + + border: 1px solid $plain-ui__primary-light; + border-right: 0; + + &:last-child { + margin-right: 0; + } + + &:hover, &--selected { + cursor: pointer; + background-color: lighten($plain-ui__primary-light, 10%); + color: white; + + border-color: lighten($plain-ui__primary-light, 10%); + } + } + } +} \ No newline at end of file diff --git a/src/scss/core/helpers/_core.scss b/src/scss/core/helpers/_core.scss index 8d834d1..56cffc6 100644 --- a/src/scss/core/helpers/_core.scss +++ b/src/scss/core/helpers/_core.scss @@ -181,4 +181,26 @@ .relative { position: relative !important; } + + /** + * + * + */ + + .vertical-align-bottom { + vertical-align: bottom; + } + + .vertical-align-top { + vertical-align: top; + } + + .vertical-align-baseline { + vertical-align: baseline; + } + + /** + * + * + */ } \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 02213e9..bddcb2b 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -13,6 +13,7 @@ 'components/field', 'components/icon', 'components/hero', + 'components/tabs', 'components/panel', 'components/media', 'components/table', @@ -34,4 +35,5 @@ @include plain-ui__component__table(); @include plain-ui__component__hero(); @include plain-ui__component__slider(); -@include plain-ui__component__bar(); \ No newline at end of file +@include plain-ui__component__bar(); +@include plain-ui__component__tab(); \ No newline at end of file