From ba204453a4ab5633c663ffbe4759459f1ecfae32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Mon, 21 Jun 2021 23:01:05 +0200
Subject: [PATCH] adding

---
 dist/index.html                |  6 ++---
 dist/plain-ui.css              | 41 ++++++++++++++++++++++------------
 src/scss/components/_bar.scss  |  6 ++---
 src/scss/components/_tabs.scss | 29 +++++++++++++++++++-----
 src/scss/plain-ui.scss         |  2 +-
 5 files changed, 57 insertions(+), 27 deletions(-)

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 @@
         <div class="grid">
             <div class="col-12">
                 <div class="bar">
-                    <div class="tab">
-                        <a class="tab__item">
+                    <div class="tabs">
+                        <a class="tabs__item">
                             Tab A
                         </a>
-                        <a class="tab__item">
+                        <a class="tabs__item">
                             Tab B
                         </a>
                     </div>
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