@mptw/skylens-ui 1.5.15 → 1.5.17

package/app/components/SLTabs.vue

@@ -201,26 +201,51 @@ export default defineComponent({
 
 .tabs.tabs-type-1 > .tabs-nav {
   @apply flex items-start justify-between h-0 space-x-8 overflow-hidden lg:space-x-30;
-}
 
-.tabs.tabs-type-1 > .tabs-nav.show {
-  @apply h-auto -mb-1.5;
-}
+  .tabs-nav-right {
+    @apply grow-0 shrink-0;
+  }
 
-.tabs.tabs-type-1 > .tabs-nav .tabs-nav-left {
-  @apply grow overflow-hidden;
-}
+  .tabs-nav-left {
+    @apply grow overflow-hidden;
+  }
 
-.tabs.tabs-type-1 > .tabs-nav .tabs-nav-right {
-  @apply grow-0 shrink-0;
-}
+  &.show {
+    @apply h-auto -mb-1.5;
+  }
 
-.tabs.tabs-type-1 > .tabs-nav ul {
-  @apply inline-flex items-start -space-x-px;
-}
+  ul {
+    @apply inline-flex items-start -space-x-px;
+
+    .tab-nav-item-link-title {
+      @apply truncate;
+    }
+
+    .tab-nav-item-link {
+      @apply relative block py-1.75 px-3.75 border-t border-r border-l border-primary-600 rounded-t text-lg text-primary-600;
+    }
+
+    .tab-nav-item {
+      @apply relative rounded-t bg-white;
+
+      &.active {
+        @apply pb-1.75;
+
+        .tab-nav-item-link {
+          @apply text-primary cursor-default;
+        }
+
+        &::before {
+          content: "";
+          @apply block absolute top-0.5 right-0.75 left-0.75 h-1 bg-highlight-400;
+        }
+      }
+    }
 
-.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item {
-  @apply relative rounded-t bg-white;
+    .tab-pane {
+      @apply space-y-8;
+    }
+  }
 }
 
 .tabs.tabs-type-1
@@ -232,294 +257,269 @@ export default defineComponent({
   @apply absolute bottom-0 left-0 w-px h-3 -mb-3 -ml-px bg-primary-600;
 }
 
-.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active {
-  @apply pb-1.75;
-}
-
-.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active::before {
-  content: "";
-  @apply block absolute top-0.5 right-0.75 left-0.75 h-1 bg-highlight-400;
-}
-
-.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
-  @apply text-primary cursor-default;
-}
-
-.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
-  @apply relative block py-1.75 px-3.75 border-t border-r border-l border-primary-600 rounded-t text-lg text-primary-600;
-}
-
-.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link-title {
-  @apply truncate;
-}
-
-.tabs.tabs-type-1 > .tabs-nav ul .tab-pane {
-  @apply space-y-8;
-}
-
 .tabs.tabs-type-1 > .tabs-content {
   @apply p-4 border border-primary-600 rounded-lg bg-white overflow-hidden;
-}
 
-.tabs.tabs-type-1 > .tabs-content .tabs-content-header {
-  @apply flex items-start justify-between mb-4;
+  .tabs-content-header {
+    @apply flex items-start justify-between mb-4;
+  }
 }
 
 .tabs.tabs-type-2 > .tabs-nav {
   @apply mb-0;
-}
 
-.tabs.tabs-type-2 > .tabs-nav ul {
-  @apply flex px-8 pb-5 space-x-8 lg:px-6 lg:space-x-14;
-}
+  ul {
+    @apply flex px-8 pb-5 space-x-8 lg:px-6 lg:space-x-14;
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item {
-  @apply relative grow py-6 rounded bg-primary-100 text-lg text-primary-600 text-center lg:py-5.5;
-}
+    .tab-nav-item-link {
+      @apply relative;
+    }
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item::before {
-  content: "";
-  @apply absolute top-0.5 left-0.5 block rounded bg-white;
-  width: calc(100% - var(--spacing));
-  height: calc(100% - var(--spacing));
-}
+    .tab-nav-item {
+      @apply relative grow py-6 rounded bg-primary-100 text-lg text-primary-600 text-center lg:py-5.5;
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item::after {
-  content: "";
-  @apply absolute left-0 bottom-0 -ml-4 -mb-5 block w-full h-3 rounded-t bg-primary-300 opacity-0;
-  width: calc(100% + var(--spacing) * 4 * 2);
-}
+      &::before {
+        content: "";
+        @apply absolute top-0.5 left-0.5 block rounded bg-white;
+        width: calc(100% - var(--spacing));
+        height: calc(100% - var(--spacing));
+      }
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active {
-  @apply text-primary font-bold;
-}
+      &::after {
+        content: "";
+        @apply absolute left-0 bottom-0 -ml-4 -mb-5 block w-full h-3 rounded-t bg-primary-300 opacity-0;
+        width: calc(100% + var(--spacing) * 4 * 2);
+      }
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active::after {
-  @apply opacity-100;
-}
+      &.active {
+        @apply text-primary font-bold;
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(odd) {
-  @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
-}
+        .tab-nav-item-link {
+          @apply cursor-default;
+        }
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(odd)::after {
-  @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
-}
+        &:nth-child(even) {
+          @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(even) {
-  @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
-}
+          &::after {
+            @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
+          }
+        }
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(even)::after {
-  @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
-}
+        &:nth-child(odd) {
+          @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
-  @apply cursor-default;
-}
+          &::after {
+            @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
+          }
+        }
 
-.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item-link {
-  @apply relative;
+        &::after {
+          @apply opacity-100;
+        }
+      }
+    }
+  }
 }
 
 .tabs.tabs-type-3 > .tabs-nav {
   @apply flex items-start justify-between h-0 space-x-8 overflow-hidden lg:space-x-30;
-}
 
-.tabs.tabs-type-3 > .tabs-nav.show {
-  @apply h-auto mb-1;
-}
+  .tabs-nav-right {
+    @apply grow-0 shrink-0;
+  }
 
-.tabs.tabs-type-3 > .tabs-nav .tabs-nav-left {
-  @apply grow overflow-hidden;
-}
+  .tabs-nav-left {
+    @apply grow overflow-hidden;
+  }
 
-.tabs.tabs-type-3 > .tabs-nav .tabs-nav-right {
-  @apply grow-0 shrink-0;
-}
+  &.show {
+    @apply h-auto mb-1;
+  }
 
-.tabs.tabs-type-3 > .tabs-nav ul {
-  @apply inline-flex items-start space-x-2;
-}
+  ul {
+    @apply inline-flex items-start space-x-2;
 
-.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item {
-  @apply relative rounded-t bg-primary-100;
-}
+    .tab-nav-item-link-title {
+      @apply truncate;
+    }
 
-.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item.active {
-  @apply bg-primary;
-}
+    .tab-nav-item-link {
+      @apply relative block py-2 px-8 rounded-t text-base text-primary;
+    }
 
-.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
-  @apply text-white cursor-default;
-}
+    .tab-nav-item {
+      @apply relative rounded-t bg-primary-100;
 
-.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item-link {
-  @apply relative block py-2 px-8 rounded-t text-base text-primary;
-}
+      &.active {
+        @apply bg-primary;
 
-.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item-link-title {
-  @apply truncate;
-}
+        .tab-nav-item-link {
+          @apply text-white cursor-default;
+        }
+      }
+    }
 
-.tabs.tabs-type-3 > .tabs-nav ul .tab-pane {
-  @apply space-y-8;
+    .tab-pane {
+      @apply space-y-8;
+    }
+  }
 }
 
 .tabs.tabs-type-3 > .tabs-content {
   @apply p-6 rounded-tr-lg rounded-b-lg bg-white shadow-default overflow-hidden;
-}
 
-.tabs.tabs-type-3 > .tabs-content .tabs-content-header {
-  @apply flex items-start justify-between;
-}
+  .tabs-content-header {
+    @apply flex items-start justify-between;
+  }
 
-.tabs.tabs-type-3 > .tabs-content .tabs-dropdown {
-  @apply mb-4;
+  .tabs-dropdown {
+    @apply mb-4;
+  }
 }
 
 .tabs.tabs-type-4 {
   @apply flex;
-}
 
-.tabs.tabs-type-4 > .tabs-nav {
-  @apply grow-0 shrink-0;
-}
+  .tabs-content {
+    @apply grow -ml-2 p-4 bg-white border border-primary-600 rounded-lg shadow-md;
 
-.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul {
-  @apply flex flex-col space-y-0.5;
-}
+    > div {
+      @apply flex min-h-full;
 
-.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item {
-  @apply flex justify-between w-[184px] py-3 pl-3 pr-5 bg-primary-50 rounded-l-lg text-xs;
-}
+      .tabs-content-body {
+        @apply w-full;
+      }
+    }
+  }
 
-.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item.active {
-  @apply bg-primary-600 text-white font-bold shadow-md;
-}
+  > .tabs-nav {
+    @apply grow-0 shrink-0;
 
-.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item-link {
-  @apply block w-full;
-}
+    .tabs-nav-left ul {
+      @apply flex flex-col space-y-0.5;
 
-.tabs.tabs-type-4 .tabs-content {
-  @apply grow -ml-2 p-4 bg-white border border-primary-600 rounded-lg shadow-md;
-}
+      .tab-nav-item-link {
+        @apply block w-full;
+      }
 
-.tabs.tabs-type-4 .tabs-content > div {
-  @apply flex min-h-full;
-}
+      .tab-nav-item {
+        @apply flex justify-between w-[184px] py-3 pl-3 pr-5 bg-primary-50 rounded-l-lg text-xs;
 
-.tabs.tabs-type-4 .tabs-content > div .tabs-content-body {
-  @apply w-full;
+        &.active {
+          @apply bg-primary-600 text-white font-bold shadow-md;
+        }
+      }
+    }
+  }
 }
 
 .tabs.tabs-type-5 > .tabs-nav {
   @apply flex items-start justify-between h-0 mb-4 space-x-8 overflow-hidden lg:space-x-30;
-}
 
-.tabs.tabs-type-5 > .tabs-nav.show {
-  @apply h-auto;
-}
+  .tabs-nav-right {
+    @apply grow-0 shrink-0;
+  }
 
-.tabs.tabs-type-5 > .tabs-nav.show .tabs-nav-left::before {
-  content: "";
-  @apply absolute right-0 bottom-0 left-0 h-px rounded-[1px] bg-primary-300;
-}
+  .tabs-nav-left {
+    @apply relative grow overflow-hidden;
+  }
 
-.tabs.tabs-type-5 > .tabs-nav .tabs-nav-left {
-  @apply relative grow overflow-hidden;
-}
+  &.show {
+    @apply h-auto;
 
-.tabs.tabs-type-5 > .tabs-nav .tabs-nav-right {
-  @apply grow-0 shrink-0;
-}
+    .tabs-nav-left::before {
+      content: "";
+      @apply absolute right-0 bottom-0 left-0 h-px rounded-[1px] bg-primary-300;
+    }
+  }
 
-.tabs.tabs-type-5 > .tabs-nav ul {
-  @apply inline-flex items-start;
-}
+  ul {
+    @apply inline-flex items-start;
 
-.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item {
-  @apply relative;
-}
+    .tab-nav-item-link-title {
+      @apply truncate;
+    }
 
-.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.active::after {
-  content: "";
-  @apply block absolute right-0 bottom-0 left-0 h-1 rounded-[1px] bg-primary;
-}
+    .tab-nav-item-link {
+      @apply relative block px-4 pb-2 text-lg text-pgray-2;
+    }
 
-.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
-  @apply cursor-default;
-}
+    .tab-nav-item {
+      @apply relative;
 
-.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.disabled .tab-nav-item-link {
-  @apply text-pgray-4 cursor-default;
-}
+      &.disabled .tab-nav-item-link {
+        @apply text-pgray-4 cursor-default;
+      }
 
-.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item-link {
-  @apply relative block px-4 pb-2 text-lg text-pgray-2;
-}
+      &.active .tab-nav-item-link {
+        @apply cursor-default;
+      }
 
-.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item-link-title {
-  @apply truncate;
-}
+      &.active::after {
+        content: "";
+        @apply block absolute right-0 bottom-0 left-0 h-1 rounded-[1px] bg-primary;
+      }
+    }
 
-.tabs.tabs-type-5 > .tabs-nav ul .tab-pane {
-  @apply space-y-8;
+    .tab-pane {
+      @apply space-y-8;
+    }
+  }
 }
 
 .tabs.tabs-type-6 > .tabs-nav {
   @apply flex items-start justify-between h-0 mb-6 space-x-8 overflow-hidden lg:space-x-30;
-}
 
-.tabs.tabs-type-6 > .tabs-nav.show {
-  @apply h-auto;
-}
+  .tabs-nav-right {
+    @apply grow-0 shrink-0;
+  }
 
-.tabs.tabs-type-6 > .tabs-nav.show .tabs-nav-left::before {
-  content: "";
-  @apply absolute right-0 bottom-0 left-0 h-1 bg-pgray-5;
-}
+  .tabs-nav-left {
+    @apply relative grow-0 shrink-0;
+  }
 
-.tabs.tabs-type-6 > .tabs-nav .tabs-nav-left {
-  @apply relative grow-0 shrink-0;
-}
+  &.show {
+    @apply h-auto;
 
-.tabs.tabs-type-6 > .tabs-nav .tabs-nav-right {
-  @apply grow-0 shrink-0;
-}
+    .tabs-nav-left::before {
+      content: "";
+      @apply absolute right-0 bottom-0 left-0 h-1 bg-pgray-5;
+    }
+  }
 
-.tabs.tabs-type-6 > .tabs-nav ul {
-  @apply inline-flex items-start;
-}
+  ul {
+    @apply inline-flex items-start;
 
-.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item {
-  @apply relative;
-}
+    .tab-nav-item-link-title {
+      @apply truncate;
+    }
 
-.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.active::after {
-  content: "";
-  @apply block absolute right-0 bottom-0 left-0 h-1 bg-blue-1;
-}
+    .tab-nav-item-link {
+      @apply relative block pt-1 px-6 pb-2 text-base text-secondary-500;
+    }
 
-.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
-  @apply text-blue-1 cursor-default;
-}
+    .tab-nav-item {
+      @apply relative;
 
-.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.disabled .tab-nav-item-link {
-  @apply text-pgray-4 cursor-default;
-}
+      &.disabled .tab-nav-item-link {
+        @apply text-pgray-4 cursor-default;
+      }
 
-.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item-link {
-  @apply relative block pt-1 px-6 pb-2 text-base text-secondary-500;
-}
+      &.active .tab-nav-item-link {
+        @apply text-blue-1 cursor-default;
+      }
 
-.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item-link-title {
-  @apply truncate;
-}
+      &.active::after {
+        content: "";
+        @apply block absolute right-0 bottom-0 left-0 h-1 bg-blue-1;
+      }
+    }
 
-.tabs.tabs-type-6 > .tabs-nav ul .tab-pane {
-  @apply space-y-8;
+    .tab-pane {
+      @apply space-y-8;
+    }
+  }
 }
 
 .tabs > .tabs-content .tabs > .tabs-content {