adding tabs

release/0.2
Björn 3 years ago
parent 1b57109133
commit 142d7a3d7e

15
dist/index.html vendored

@ -82,6 +82,21 @@
</div> </div>
</div> </div>
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="tab">
<a class="tab__item">
Tab A
</a>
<a class="tab__item">
Tab B
</a>
</div>
</div>
</div>
</div>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Icon</h2> <h2>Icon</h2>

67
dist/plain-ui.css vendored

@ -319,6 +319,11 @@ summary {
* *
* *
*/ */
/**
*
*
*
*/
/** /**
* <figure class="media-figure"> * <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" /> * <img class="media__img" src="https://via.placeholder.com/150" />
@ -565,6 +570,26 @@ body {
position: relative !important; position: relative !important;
} }
/**
*
*
*/
.vertical-align-bottom {
vertical-align: bottom;
}
.vertical-align-top {
vertical-align: top;
}
.vertical-align-baseline {
vertical-align: baseline;
}
/**
*
*
*/
.badge { .badge {
display: inline-block; display: inline-block;
background-color: #3e3e3e; background-color: #3e3e3e;
@ -613,11 +638,11 @@ body {
border: none; border: none;
background: transparent; background: transparent;
} }
.button:hover, .button--hover { .button:hover, .button--selected {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: white; color: white;
background-color: #3e3e3e; background-color: #585858;
} }
.button:focus, .button:active { .button:focus, .button:active {
outline: 1px solid #646464; outline: 1px solid #646464;
@ -909,13 +934,15 @@ img.media {
.bar { .bar {
display: flex; display: flex;
height: 2.8em;
background-color: #3e3e3e; background-color: #3e3e3e;
color: white; color: white;
padding: 0.8em 1.2em; }
.bar .icon {
font-size: 1.5rem;
} }
.bar__start { .bar__start {
justify-content: start; justify-content: start;
margin-right: 0.75em;
} }
.bar__main { .bar__main {
width: 100%; width: 100%;
@ -924,3 +951,35 @@ img.media {
justify-content: end; justify-content: end;
margin-left: 0.75em; 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;
}

@ -57,6 +57,8 @@ $plain-ui__line-height__breakpoints: (
*/ */
$plain-ui__primary-light: #3e3e3e !default; $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__secondary: #b3b2af !default;
$plain-ui__success-light: #64ac64 !default; $plain-ui__success-light: #64ac64 !default;
$plain-ui__warning: #f0ad4e !default; $plain-ui__warning: #f0ad4e !default;

@ -5,7 +5,8 @@
* *
*/ */
@mixin plain-ui__component__badge() { @mixin plain-ui__component__badge()
{
.badge { .badge {
display: inline-block; display: inline-block;

@ -10,13 +10,16 @@
.bar { .bar {
display: flex; display: flex;
height: 2.8em;
background-color: $plain-ui__primary-light; background-color: $plain-ui__primary-light;
color: white; color: white;
padding: 0.8em 1.2em;
.icon {
font-size: 1.5rem;
}
&__start { &__start {
justify-content: start; justify-content: start;
margin-right: 0.75em;
} }
&__main { &__main {
@ -27,5 +30,14 @@
justify-content: end; justify-content: end;
margin-left: 0.75em; margin-left: 0.75em;
} }
&__start, &__main, &__end {
align-self: center;
margin-left: 0.75em;
&:last-child {
margin-right: 0.75em;
}
}
} }
} }

@ -19,14 +19,13 @@
background-color: white; background-color: white;
color: $plain-ui__primary-light; color: $plain-ui__primary-light;
border-radius: 2px; border-radius: $plain-ui__border-radius;
transition: background-color 0.1s; transition: background-color 0.1s;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding: 0.5em 1.3em; padding: 0.5em 1.3em;
font-size: 1rem; font-size: 1rem;
// for mobile
width: 100%; width: 100%;
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
@ -44,11 +43,11 @@
background: transparent; background: transparent;
} }
&:hover, &--hover { &:hover, &--selected {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: white; color: white;
background-color: $plain-ui__primary-light; background-color: $plain-ui__primary-light-active;
} }
&:focus, &:active { &:focus, &:active {

@ -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%);
}
}
}
}

@ -181,4 +181,26 @@
.relative { .relative {
position: relative !important; position: relative !important;
} }
/**
*
*
*/
.vertical-align-bottom {
vertical-align: bottom;
}
.vertical-align-top {
vertical-align: top;
}
.vertical-align-baseline {
vertical-align: baseline;
}
/**
*
*
*/
} }

@ -13,6 +13,7 @@
'components/field', 'components/field',
'components/icon', 'components/icon',
'components/hero', 'components/hero',
'components/tabs',
'components/panel', 'components/panel',
'components/media', 'components/media',
'components/table', 'components/table',
@ -34,4 +35,5 @@
@include plain-ui__component__table(); @include plain-ui__component__table();
@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();
Loading…
Cancel
Save