improve styling

2020-04-17 23:47:25 +02:00
parent 71e1e20e01
commit 5059a58c18
2 changed files with 19 additions and 19 deletions
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -18,33 +18,28 @@
  }

  &__tabs {
-    padding: 0 1.5rem;
-    border-bottom: 2px solid rgba($colorWhite, 0.1);
+    padding: 1rem 1.5rem 0 1.5rem;
  }

  &__tab {
+    display: inline-flex;
    position: relative;
-    color: rgba($colorWhite, 0.5);
-    font: inherit;
+    background-color: transparent;
+    color: rgba($colorWhite, 0.7);
+    padding: 0.1rem 0.5rem;
+    border-radius: 5px;
    font-weight: 500;
-    padding: 0.75rem 0;
-    background: none;
    border: none;
-    cursor: pointer;
-    margin-right: 1rem;
+    margin-right: 0.5rem;

-    &.is-active {
+    &:first-child {
+      margin-left: -0.5rem;
+    }
+
+    &.is-active,
+    &:hover {
      color: $colorWhite;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background-color: $colorWhite;
-      }
+      background-color: rgba($colorWhite, 0.1);
    } 
  }
  
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -60,6 +60,11 @@ ol {
  list-style: none;
 }

+button {
+  font: inherit;
+  cursor: pointer;
+}
+
 a {
  color: inherit;
  transition: color 0.2s $ease, background-color 0.2s $ease;