#177 tabs tweaks

OnroerendErfgoed · Nov 23, 2023 · 530092f · 530092f
1 parent 03c1adc
commit 530092f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/src/components/dumb/OeContainer.vue b/src/components/dumb/OeContainer.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div data-cy="container-content" class="container__content">
+  <div class="oe-container">
+    <div data-cy="oe-container-content" class="oe-container__content">
       <slot></slot>
     </div>
     <div v-if="props.tabs.length" class="bottom-tabs" data-cy="bottom-tabs">
@@ -52,7 +52,7 @@ const close = (item: ITab) => {
 <style lang="scss">
 @import 'pyoes/scss/base-variables';
 
-.container {
+.oe-container {
   background-color: $white;
   margin: 20px 20px 10px 20px;
   display: flex;
@@ -78,6 +78,7 @@ const close = (item: ITab) => {
     .vl-action-group button:last-child {
       margin-right: -1px;
     }
+
     .vl-pill__close {
       border-radius: 0 0 0.4rem 0;
     }
@@ -96,9 +97,11 @@ const close = (item: ITab) => {
         scale: 1.1;
         background-color: $primary-color;
         color: $white;
+
         .vl-pill__close {
           color: $white;
           border-top: none;
+
           &:hover:not([disabled]) {
             color: $dark-purple;
           }

diff --git a/src/scss/_override-variables.scss b/src/scss/_override-variables.scss
@@ -100,22 +100,31 @@ $vl-icon-font-location: '@govflanders/vl-ui-design-system-style/assets/font/icon
   color: $primary-color;
 }
 
-// vl-tabs
-.vl-tabs__wrapper {
-  display: flex;
-  justify-content: center;
-}
-.vl-tab__pane {
-  outline: none;
-  overflow-x: hidden;
-}
-.vl-tabs {
-  .vl-tab {
-    color: $mid-purple;
+// oe-container vl-tabs
+.oe-tabs {
+  .vl-tabs__wrapper {
+    display: flex;
+    justify-content: center;
+  }
+
+  .vl-tab__pane {
     outline: none;
+    overflow-x: hidden;
+  }
+
+  .vl-tabs__toggle,
+  .vl-tabs {
+    left: 0 !important;
+  }
 
-    &--active {
-      color: $dark-purple;
+  .vl-tabs {
+    .vl-tab {
+      color: $mid-purple;
+      outline: none;
+
+      &--active {
+        color: $dark-purple;
+      }
     }
   }
 }