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