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

---
 dist/index.html                | 28 +++++++++++++++-------------
 dist/plain-ui.css              | 11 +++++++----
 src/scss/components/_bar.scss  |  4 +++-
 src/scss/components/_tabs.scss |  4 ----
 4 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 431c6c1..c9de5a7 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -43,7 +43,7 @@
                 <button class="button button--danger">
                     Danger
                 </button>
-                <button class="button button--hover">
+                <button class="button button--selected">
                     Hover
                 </button>
             </div>
@@ -130,21 +130,23 @@
                 <h2>Panel</h2>
 
                 <div class="panel">
-                    <div class="panel__header">
-                        <button type="button">
-                            <svg class="icon icon--first" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-expand"></use>
-                            </svg>
-                        </button>
-                        <div class="panel__title">Test</div>
-                        <div class="panel__buttons">
-                            <button type="button">
-                                <svg class="icon" aria-hidden="true">
+                    <div class="bar">
+                        <div class="bar__start">
+                            <button type="button" class="button button--no-style">
+                                <svg class="icon fill-white" aria-hidden="true">
+                                    <use xlink:href="symbol-defs.svg#icon-expand"></use>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="bar__main">Test</div>
+                        <div class="bar__end">
+                            <button type="button" class="button button--no-style">
+                                <svg class="icon fill-white" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-edit"></use>
                                 </svg>
                             </button>
-                            <button type="button">
-                                <svg class="icon" aria-hidden="true">
+                            <button type="button" class="button button--no-style">
+                                <svg class="icon fill-white" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-close"></use>
                                 </svg>
                             </button>
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index 42828ab..dd5292c 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -943,13 +943,19 @@ img.media {
 }
 .bar__start {
   justify-content: start;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .bar__main {
   width: 100%;
 }
 .bar__end {
-  justify-content: end;
+  text-align: right;
   margin-left: 0.75em;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .bar__start, .bar__main, .bar__end {
   align-self: center;
@@ -974,9 +980,6 @@ img.media {
   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;
diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss
index b7d0541..7053c86 100644
--- a/src/scss/components/_bar.scss
+++ b/src/scss/components/_bar.scss
@@ -20,6 +20,7 @@
 
         &__start {
             justify-content: start;
+            width: fit-content;
         }
 
         &__main {
@@ -27,8 +28,9 @@
         }
 
         &__end {
-            justify-content: end;
+            text-align: right;
             margin-left: 0.75em;
+            width: fit-content;
         }
 
         &__start, &__main, &__end {
diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss
index 9f5c0ff..06f3c89 100644
--- a/src/scss/components/_tabs.scss
+++ b/src/scss/components/_tabs.scss
@@ -25,10 +25,6 @@
             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%);