only underline exact avtive

woodpecker-ci · Dec 28, 2024 · 0ba19bd · 0ba19bd
1 parent 33efe19
commit 0ba19bd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
@@ -1,18 +1,18 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow border rounded-md w-full overflow-hidden"
+    class="rounded-md w-full shadow overflow-hidden bg-wp-background-100 dark:bg-wp-background-200 border border-wp-background-400"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="flex gap-2 bg-wp-background-300 px-4 py-2 w-full font-bold text-wp-text-100"
+      class="flex w-full font-bold gap-2 text-wp-text-100 px-4 py-2 bg-wp-background-300"
       @click="_collapsed = !_collapsed"
     >
       <Icon
         v-if="collapsable"
         name="chevron-right"
-        class="min-w-6 h-6 transition-transform duration-150"
+        class="transition-transform duration-150 min-w-6 h-6"
         :class="{ 'transform rotate-90': !collapsed }"
       />
       {{ title }}
@@ -24,7 +24,7 @@
       }"
       class="transition-height duration-150 overflow-hidden"
     >
-      <div class="p-4 w-full text-wp-text-100">
+      <div class="w-full p-4 text-wp-text-100">
         <slot />
       </div>
     </div>

diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
@@ -4,12 +4,12 @@
       v-for="tab in tabs"
       :key="tab.title"
       :to="tab.to"
-      class="flex items-center !border-wp-text-100 py-1 border-transparent md:border-b-2 w-full md:w-auto text-wp-text-100 cursor-pointer"
-      active-class="underline !border-wp-text-100"
-      exact-active-class="underline !border-wp-text-100"
+      class="flex items-center !border-wp-text-100 py-1 border-transparent w-full md:w-auto text-wp-text-100 cursor-pointer"
+      :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
+      :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100 md:border-b-2 underline'"
     >
       <span
-        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 py-1 sm:pr-2 sm:pl-2.5 md:pl-2 rounded-md w-full min-w-20"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>
@@ -26,3 +26,4 @@ import { useTabsClient } from '~/compositions/useTabs';
 
 const { tabs } = useTabsClient();
 </script>
+
diff --git a/web/src/style.css b/web/src/style.css
@@ -105,7 +105,7 @@ body,
 }
 
 .vue-notification {
-  @apply rounded-md text-base border-l-6;
+  @apply border-l-6 rounded-md text-base;
 }
 
 .vue-notification .notification-title {
@@ -131,7 +131,7 @@ body,
 *::-webkit-scrollbar-thumb {
   transition: background 0.2s ease-in-out;
   border: 3px solid transparent;
-  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
+  @apply bg-clip-content bg-cool-gray-200 dark:bg-dark-200 rounded-full;
 }
 
 *::-webkit-scrollbar-thumb:hover {
@@ -143,11 +143,11 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
+  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-200 rounded-md text-wp-code-text-100 px-1 py-px;
+  @apply bg-wp-code-200 px-1 py-px rounded-md text-wp-code-text-100;
 }