Style tabs border color

pradoslaw · Dec 9, 2024 · 5dfbf03 · 5dfbf03
1 parent e76f34e
commit 5dfbf03
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -50,6 +50,7 @@ $scroll-top-background:         (light: style.$green-050, dark: style.$green-900
   @include theme.var(--post-user-posts-counter-color, $post-user-posts-counter-color);
   @include theme.var(--scroll-top-color, $scroll-top-color);
   @include theme.var(--scroll-top-background, $scroll-top-background);
+  @include theme.var(--tabber-active-border-color, (light: style.$green-500, dark:style.$green-500)); // TODO fix, so that same value can be used
 }
 
 .look-and-feel-legacy {
@@ -76,6 +77,7 @@ $scroll-top-background:         (light: style.$green-050, dark: style.$green-900
 
   @include theme.var(--scroll-top-color, (light: #80a41a, dark: #80a41a));
   @include theme.var(--scroll-top-background, (light: #f3f7e6, dark: #141414));
+  @include theme.var(--tabber-active-border-color, (light: #d7661c, dark:#d7661c)); // TODO fix, so that same value can be used
 }
 
 body {
@@ -212,3 +214,11 @@ body {
   color:      var(--scroll-top-color) !important; // overrides footer .scroll top
   background: var(--scroll-top-background) !important; // overrides footer .scroll top
 }
+
+.neon-tabber {
+  .neon-tabber-tab {
+    &.neon-tabber-tab-active {
+      border-bottom-color: var(--tabber-active-border-color) !important; // overrides .nav-pills .nav-link.active
+    }
+  }
+}
diff --git a/resources/js/components/tabs.vue b/resources/js/components/tabs.vue
@@ -1,13 +1,12 @@
 <template>
-  <div :class="`nav nav-${this.type}`">
+  <div :class="['nav', `nav-${this.type}`, 'neon-tabber']">
     <div v-for="(item, key) in items" :key="key" class="nav-item">
       <a
         :href="typeof key === 'string' ? key : 'javascript:'"
-        class="nav-link"
-        :class="{'active': key === currentTab}"
-        v-text="item"
-
+        class="nav-link neon-tabber-tab"
+        :class="{'active neon-tabber-tab-active': key === currentTab}"
         @click="$emit('change', key)"
+        v-text="item"
       />
     </div>
     <slot/>