diff --git a/dist/index.html b/dist/index.html index c9de5a7..ff4ad4c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -85,11 +85,11 @@
-
- + diff --git a/dist/plain-ui.css b/dist/plain-ui.css index f38af79..b455fa6 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -943,21 +943,15 @@ img.media { } .bar__start { justify-content: start; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; } .bar__main { width: 100%; } .bar__end { - text-align: right; - margin-left: 0.75em; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; + justify-content: end; } .bar__start, .bar__main, .bar__end { + display: flex; align-self: center; margin-left: 0.75em; } @@ -965,12 +959,19 @@ img.media { margin-right: 0.75em; } -.tab { - display: flex; +.tabs { + display: block; + width: 100%; +} +@media only screen and (min-width: 768px) { + .tabs { + display: flex; + width: auto; + } } -.tab__item { +.tabs__item { height: 100%; - display: inline-flex; + display: flex; align-items: center; padding: 0 1em; background-color: white; @@ -978,11 +979,23 @@ img.media { background-color: white; color: #3e3e3e; border: 1px solid #3e3e3e; - border-right: 0; + border-bottom-width: 0; + width: 100%; } -.tab__item:hover, .tab__item--selected { +@media only screen and (min-width: 768px) { + .tabs__item { + width: auto; + display: inline-flex; + border-right-width: 0; + border-bottom-width: 1px; + } +} +.tabs__item:hover, .tabs__item--selected { cursor: pointer; background-color: #585858; color: white; border-color: #585858; } +.tabs__item:last-child { + border-bottom-width: 1px; +} diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss index 01f5732..46e841b 100644 --- a/src/scss/components/_bar.scss +++ b/src/scss/components/_bar.scss @@ -20,7 +20,6 @@ &__start { justify-content: start; - min-width: max-content; } &__main { @@ -28,12 +27,11 @@ } &__end { - text-align: right; - margin-left: 0.75em; - min-width: max-content; + justify-content: end; } &__start, &__main, &__end { + display: flex; align-self: center; margin-left: 0.75em; diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss index 06f3c89..fd66f4f 100644 --- a/src/scss/components/_tabs.scss +++ b/src/scss/components/_tabs.scss @@ -4,15 +4,21 @@ * */ -@mixin plain-ui__component__tab() +@mixin plain-ui__component__tabs() { - .tab { - display: flex; + .tabs { + display: block; + width: 100%; + + @include plain-ui__media-sm() { + display: flex; + width: auto; + } &__item { height: 100%; - display: inline-flex; + display: flex; align-items: center; padding: 0 1em; @@ -23,7 +29,16 @@ color: $plain-ui__primary-light; border: 1px solid $plain-ui__primary-light; - border-right: 0; + border-bottom-width: 0; + + width: 100%; + + @include plain-ui__media-sm() { + width: auto; + display: inline-flex; + border-right-width: 0; + border-bottom-width: 1px; + } &:hover, &--selected { cursor: pointer; @@ -32,6 +47,10 @@ border-color: lighten($plain-ui__primary-light, 10%); } + + &:last-child { + border-bottom-width: 1px; + } } } } \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index bddcb2b..b06e8d8 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -36,4 +36,4 @@ @include plain-ui__component__hero(); @include plain-ui__component__slider(); @include plain-ui__component__bar(); -@include plain-ui__component__tab(); \ No newline at end of file +@include plain-ui__component__tabs(); \ No newline at end of file