release/0.2
Björn 3 years ago
parent f4ae5052f6
commit ba204453a4

6
dist/index.html vendored

@ -85,11 +85,11 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="bar"> <div class="bar">
<div class="tab"> <div class="tabs">
<a class="tab__item"> <a class="tabs__item">
Tab A Tab A
</a> </a>
<a class="tab__item"> <a class="tabs__item">
Tab B Tab B
</a> </a>
</div> </div>

41
dist/plain-ui.css vendored

@ -943,21 +943,15 @@ img.media {
} }
.bar__start { .bar__start {
justify-content: start; justify-content: start;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
} }
.bar__main { .bar__main {
width: 100%; width: 100%;
} }
.bar__end { .bar__end {
text-align: right; justify-content: end;
margin-left: 0.75em;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
} }
.bar__start, .bar__main, .bar__end { .bar__start, .bar__main, .bar__end {
display: flex;
align-self: center; align-self: center;
margin-left: 0.75em; margin-left: 0.75em;
} }
@ -965,12 +959,19 @@ img.media {
margin-right: 0.75em; margin-right: 0.75em;
} }
.tab { .tabs {
display: flex; display: block;
width: 100%;
}
@media only screen and (min-width: 768px) {
.tabs {
display: flex;
width: auto;
}
} }
.tab__item { .tabs__item {
height: 100%; height: 100%;
display: inline-flex; display: flex;
align-items: center; align-items: center;
padding: 0 1em; padding: 0 1em;
background-color: white; background-color: white;
@ -978,11 +979,23 @@ img.media {
background-color: white; background-color: white;
color: #3e3e3e; color: #3e3e3e;
border: 1px solid #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; cursor: pointer;
background-color: #585858; background-color: #585858;
color: white; color: white;
border-color: #585858; border-color: #585858;
} }
.tabs__item:last-child {
border-bottom-width: 1px;
}

@ -20,7 +20,6 @@
&__start { &__start {
justify-content: start; justify-content: start;
min-width: max-content;
} }
&__main { &__main {
@ -28,12 +27,11 @@
} }
&__end { &__end {
text-align: right; justify-content: end;
margin-left: 0.75em;
min-width: max-content;
} }
&__start, &__main, &__end { &__start, &__main, &__end {
display: flex;
align-self: center; align-self: center;
margin-left: 0.75em; margin-left: 0.75em;

@ -4,15 +4,21 @@
* *
*/ */
@mixin plain-ui__component__tab() @mixin plain-ui__component__tabs()
{ {
.tab { .tabs {
display: flex; display: block;
width: 100%;
@include plain-ui__media-sm() {
display: flex;
width: auto;
}
&__item { &__item {
height: 100%; height: 100%;
display: inline-flex; display: flex;
align-items: center; align-items: center;
padding: 0 1em; padding: 0 1em;
@ -23,7 +29,16 @@
color: $plain-ui__primary-light; color: $plain-ui__primary-light;
border: 1px solid $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 { &:hover, &--selected {
cursor: pointer; cursor: pointer;
@ -32,6 +47,10 @@
border-color: lighten($plain-ui__primary-light, 10%); border-color: lighten($plain-ui__primary-light, 10%);
} }
&:last-child {
border-bottom-width: 1px;
}
} }
} }
} }

@ -36,4 +36,4 @@
@include plain-ui__component__hero(); @include plain-ui__component__hero();
@include plain-ui__component__slider(); @include plain-ui__component__slider();
@include plain-ui__component__bar(); @include plain-ui__component__bar();
@include plain-ui__component__tab(); @include plain-ui__component__tabs();
Loading…
Cancel
Save