adding tabs

dist/index.html

@@ -82,6 +82,21 @@
             </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="col-12">
                 <h2>Icon</h2>

dist/plain-ui.css

@@ -319,6 +319,11 @@ summary {
  *
  *
  */
+/**
+ *
+ *
+ *
+ */
 /**
  *  <figure class="media-figure">
  *      <img class="media__img" src="https://via.placeholder.com/150" />
@@ -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;
+}

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;

src/scss/components/_badge.scss

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

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;
+            }
+        }
     }
 }

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 {

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

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;
+    }
+
+    /**
+     *
+     *
+     */
 }

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();
+@include plain-ui__component__bar();
+@include plain-ui__component__tab();