@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLSelectAllToggle.vue

@@ -69,65 +69,65 @@ export default defineComponent({
 
 .select-all-toggle {
   @apply inline-flex items-stretch border rounded-sm bg-white overflow-hidden;
-}
 
-.select-all-toggle.select-all-toggle-xs .select-all-option {
-  @apply text-xs;
-}
+  &.select-all-toggle-xs .select-all-option {
+    @apply text-xs;
+  }
 
-.select-all-toggle.select-all-toggle-sm .select-all-option {
-  @apply py-1.25 text-xs;
-}
+  &.select-all-toggle-sm .select-all-option {
+    @apply py-1.25 text-xs;
+  }
 
-.select-all-toggle.select-all-toggle-primary-600 {
-  @apply border-primary-600;
-}
+  &.select-all-toggle-primary-600 {
+    @apply border-primary-600;
 
-.select-all-toggle.select-all-toggle-primary-600 .select-all-option {
-  @apply text-primary-600;
-}
+    .select-all-divider {
+      @apply bg-primary-600;
+    }
 
-.select-all-toggle.select-all-toggle-primary-600 .select-all-option.active {
-  @apply bg-primary;
-}
+    .select-all-option {
+      @apply text-primary-600;
 
-.select-all-toggle.select-all-toggle-primary-600 .select-all-divider {
-  @apply bg-primary-600;
-}
+      &.active {
+        @apply bg-primary;
+      }
+    }
+  }
 
-.select-all-toggle.select-all-toggle-secondary {
-  @apply border-secondary-400;
-}
+  &.select-all-toggle-secondary {
+    @apply border-secondary-400;
 
-.select-all-toggle.select-all-toggle-secondary .select-all-option {
-  @apply text-secondary-400;
-}
+    .select-all-divider {
+      @apply bg-primary-600;
+    }
 
-.select-all-toggle.select-all-toggle-secondary .select-all-option.active {
-  @apply bg-secondary;
-}
+    .select-all-option {
+      @apply text-secondary-400;
 
-.select-all-toggle.select-all-toggle-secondary .select-all-divider {
-  @apply bg-primary-600;
-}
+      &.active {
+        @apply bg-secondary;
+      }
+    }
+  }
 
-.select-all-toggle .select-all-option {
-  @apply block py-1 bg-white text-sm;
-}
+  .select-all-option-none {
+    @apply pr-2 pl-1.75;
+  }
 
-.select-all-toggle .select-all-option.active {
-  @apply text-white;
-}
+  .select-all-option-all {
+    @apply px-2;
+  }
 
-.select-all-toggle .select-all-option-all {
-  @apply px-2;
-}
+  .select-all-divider {
+    @apply mt-0.5 mb-0.5 w-px;
+  }
 
-.select-all-toggle .select-all-option-none {
-  @apply pr-2 pl-1.75;
-}
+  .select-all-option {
+    @apply block py-1 bg-white text-sm;
 
-.select-all-toggle .select-all-divider {
-  @apply mt-0.5 mb-0.5 w-px;
+    &.active {
+      @apply text-white;
+    }
+  }
 }
 </style>

package/app/components/SLSidebarNav.vue

@@ -251,210 +251,208 @@ export default defineComponent({
 
 .sidebar {
   @apply relative h-full;
-}
 
-.sidebar.dark .sidebar-wrapper {
-  @apply bg-primary-800;
-}
+  &.dark
+  nav
+  .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary-600;
+  }
 
-.sidebar.dark.closure .sidebar-logo .logo img.color-small {
-  @apply lg:hidden;
-}
+  &.dark nav .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb {
+    @apply bg-primary-600;
+  }
 
-.sidebar.dark.closure .sidebar-logo .logo img.white-big {
-  @apply lg:hidden;
-}
+  &.dark.closure .sidebar-logo .logo img.color-small {
+    @apply lg:hidden;
+  }
 
-.sidebar.dark.closure .sidebar-logo .logo img.white-small {
-  @apply lg:block;
-}
+  &.dark.closure .sidebar-logo .logo img.white-small {
+    @apply lg:block;
+  }
 
-.sidebar.dark.closure .sidebar-toggle {
-  @apply bg-primary-900;
-}
+  &.dark.closure .sidebar-logo .logo img.white-big {
+    @apply lg:hidden;
+  }
 
-.sidebar.dark.closure .sidebar-toggle:hover {
-  @apply bg-primary-600;
-}
+  &.dark .sidebar-logo .logo img.color-big {
+    @apply hidden;
+  }
 
-.sidebar.dark .sidebar-logo .logo img.color-big {
-  @apply hidden;
-}
+  &.dark .sidebar-logo .logo img.white-big {
+    @apply block;
+  }
 
-.sidebar.dark .sidebar-logo .logo img.white-big {
-  @apply block;
-}
+  &.closure .sidebar-mode-setting-title {
+    @apply hidden;
+  }
 
-.sidebar.dark nav .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb {
-  @apply bg-primary-600;
-}
+  &.closure nav.site-nav .nav-wrapper {
+    @apply lg:items-center;
+  }
 
-.sidebar.dark
-  nav
-  .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb:hover {
-  @apply bg-primary-600;
-}
+  &.closure .sidebar-mode-setting {
+    @apply p-0 justify-center space-x-0;
 
-.sidebar.dark .sidebar-mode-setting {
-  @apply text-white;
-}
+    .ios-switch {
+      @apply grow-0 shrink-0;
+    }
+  }
 
-.sidebar.dark .sidebar-mode-setting .ios-switch label {
-  @apply bg-nav-color-switch-bg border-primary-600;
-}
+  &.introing .sidebar-intro-modal {
+    @apply block;
+  }
 
-.sidebar.dark .sidebar-mode-setting .ios-switch label::before {
-  @apply border-primary-600 bg-primary-300;
-}
+  &.dark.closure .sidebar-toggle {
+    @apply bg-primary-900;
 
-.sidebar.dark .sidebar-toggle {
-  @apply bg-primary-900 text-white;
-}
+    &:hover {
+      @apply bg-primary-600;
+    }
+  }
 
-.sidebar.dark .sidebar-toggle:hover {
-  @apply bg-primary-600;
-}
+  .sidebar-mode-setting-title {
+    @apply grow-0 shrink-0;
+  }
 
-.sidebar.closure .sidebar-modal {
-  @apply hidden;
-}
+  &.dark .sidebar-mode-setting {
+    @apply text-white;
 
-.sidebar.closure .sidebar-wrapper {
-  @apply -ml-[188px] lg:ml-0 lg:w-[84px];
-}
+    .ios-switch label {
+      @apply bg-nav-color-switch-bg border-primary-600;
 
-.sidebar.closure .sidebar-logo {
-  @apply lg:py-3 lg:px-0;
-}
+      &::before {
+        @apply border-primary-600 bg-primary-300;
+      }
+    }
+  }
 
-.sidebar.closure .sidebar-logo .logo img.color-big {
-  @apply lg:hidden;
-}
+  &.introing .sidebar-wrapper {
+    @apply pointer-events-none;
+  }
 
-.sidebar.closure .sidebar-logo .logo img.color-small {
-  @apply lg:block;
-}
+  &.closure .sidebar-wrapper {
+    @apply -ml-[188px] lg:ml-0 lg:w-[84px];
+  }
 
-.sidebar.closure .sidebar-toggle {
-  @apply -mr-5 bg-primary-300 rounded-l-none rounded-r-xl text-white;
-}
+  &.closure .sidebar-toggle {
+    @apply -mr-5 bg-primary-300 rounded-l-none rounded-r-xl text-white;
 
-.sidebar.closure .sidebar-toggle:hover {
-  @apply bg-primary-400 text-white;
-}
+    .icon-chevron-right {
+      @apply inline-block;
+    }
 
-.sidebar.closure .sidebar-toggle .icon-chevron-left {
-  @apply hidden;
-}
+    .icon-chevron-left {
+      @apply hidden;
+    }
 
-.sidebar.closure .sidebar-toggle .icon-chevron-right {
-  @apply inline-block;
-}
+    &:hover {
+      @apply bg-primary-400 text-white;
+    }
+  }
 
-.sidebar.closure nav.site-nav .nav-wrapper {
-  @apply lg:items-center;
-}
+  &.closure .sidebar-modal {
+    @apply hidden;
+  }
 
-.sidebar.closure .sidebar-mode-setting {
-  @apply p-0 justify-center space-x-0;
-}
+  &.dark .sidebar-wrapper {
+    @apply bg-primary-800;
+  }
 
-.sidebar.closure .sidebar-mode-setting-title {
-  @apply hidden;
-}
+  &.closure .sidebar-logo {
+    @apply lg:py-3 lg:px-0;
 
-.sidebar.closure .sidebar-mode-setting .ios-switch {
-  @apply grow-0 shrink-0;
-}
+    .logo img.color-small {
+      @apply lg:block;
+    }
 
-.sidebar.introing .sidebar-intro-modal {
-  @apply block;
-}
+    .logo img.color-big {
+      @apply lg:hidden;
+    }
+  }
 
-.sidebar.introing .sidebar-wrapper {
-  @apply pointer-events-none;
-}
+  .sidebar-mode-setting {
+    @apply grow-0 shrink-0 flex items-center justify-start my-4 pl-4 space-x-2 text-xs text-primary;
 
-.sidebar-modal {
-  @apply fixed top-0 left-0 w-full h-full bg-white opacity-0 lg:hidden;
-}
+    .ios-switch {
+      @apply grow-0 shrink-0;
 
-.sidebar-intro-modal {
-  @apply fixed top-0 left-0 w-full h-full bg-mask/80 hidden;
-}
+      label {
+        @apply border-primary-100 bg-primary-25;
 
-.sidebar-wrapper {
-  @apply relative flex flex-col w-[188px] h-full bg-white rounded-r-lg shadow-default transition-all;
-}
+        &::before {
+          @apply border-primary-100;
+        }
+      }
+    }
+  }
 
-.sidebar-logo {
-  @apply grow-0 shrink-0 relative flex justify-center py-4 pr-11 pl-6 transition-all;
-}
+  &.dark .sidebar-toggle {
+    @apply bg-primary-900 text-white;
 
-.sidebar-logo .logo {
-  @apply block;
-}
+    &:hover {
+      @apply bg-primary-600;
+    }
+  }
 
-.sidebar-logo .logo img.white-big,
-.sidebar-logo .logo img.white-small,
-.sidebar-logo .logo img.color-small {
-  @apply hidden;
-}
+  nav.site-nav {
+    @apply grow px-1 overflow-hidden;
 
-.sidebar nav.site-nav {
-  @apply grow px-1 overflow-hidden;
-}
+    .nav-wrapper {
+      @apply flex flex-col h-full px-3;
 
-.sidebar nav.site-nav .nav-wrapper {
-  @apply flex flex-col h-full px-3;
+      .sidebar-nav-divide-item {
+        @apply w-full h-px my-2 bg-primary-200;
+      }
+    }
+  }
 }
 
-.sidebar nav.site-nav .nav-wrapper .sidebar-nav-divide-item {
-  @apply w-full h-px my-2 bg-primary-200;
+.sidebar-modal {
+  @apply fixed top-0 left-0 w-full h-full bg-white opacity-0 lg:hidden;
 }
 
-.sidebar .sidebar-mode-setting {
-  @apply grow-0 shrink-0 flex items-center justify-start my-4 pl-4 space-x-2 text-xs text-primary;
+.sidebar-intro-modal {
+  @apply fixed top-0 left-0 w-full h-full bg-mask/80 hidden;
 }
 
-.sidebar .sidebar-mode-setting-title {
-  @apply grow-0 shrink-0;
+.sidebar-wrapper {
+  @apply relative flex flex-col w-[188px] h-full bg-white rounded-r-lg shadow-default transition-all;
 }
 
-.sidebar .sidebar-mode-setting .ios-switch {
-  @apply grow-0 shrink-0;
-}
+.sidebar-logo {
+  @apply grow-0 shrink-0 relative flex justify-center py-4 pr-11 pl-6 transition-all;
 
-.sidebar .sidebar-mode-setting .ios-switch label {
-  @apply border-primary-100 bg-primary-25;
-}
+  .logo {
+    @apply block;
 
-.sidebar .sidebar-mode-setting .ios-switch label::before {
-  @apply border-primary-100;
+    img.white-big, img.white-small, img.color-small {
+      @apply hidden;
+    }
+  }
 }
 
 .sidebar-toggle {
   @apply absolute top-0 right-0 flex justify-center items-center w-5 h-10 mt-2.5 bg-primary-50 rounded-l-xl text-sm text-primary-500 leading-none transition-all;
-}
 
-.sidebar-toggle:hover {
-  @apply bg-primary-300 text-white;
-}
+  .icon-chevron-right {
+    @apply hidden;
+  }
 
-.sidebar-toggle .icon-chevron-right {
-  @apply hidden;
+  &:hover {
+    @apply bg-primary-300 text-white;
+  }
 }
 
 .sidebar-nav-intro {
   @apply w-[288px] p-4 bg-white rounded-lg hidden;
-}
 
-.sidebar-nav-intro[data-show] {
-  @apply block;
-}
+  &[data-popper-placement^="right"] > .sidebar-nav-intro-arrow {
+    @apply -left-3.75 top-4;
+  }
 
-.sidebar-nav-intro[data-popper-placement^="right"] > .sidebar-nav-intro-arrow {
-  @apply -left-3.75 top-4;
+  &[data-show] {
+    @apply block;
+  }
 }
 
 .sidebar-nav-intro-header {
@@ -469,18 +467,17 @@ export default defineComponent({
   @apply text-right;
 }
 
-.sidebar-nav-intro-arrow,
-.sidebar-nav-intro-arrow::before {
+.sidebar-nav-intro-arrow, .sidebar-nav-intro-arrow::before {
   @apply absolute w-[17px] h-[20px] bg-contain;
   background: url("@@uiAppImage/commons/nav-intro-arrow.svg") top left no-repeat;
+
+  &::before {
+    content: "";
+    @apply visible;
+  }
 }
 
 .sidebar-nav-intro-arrow {
   @apply invisible;
 }
-
-.sidebar-nav-intro-arrow::before {
-  content: "";
-  @apply visible;
-}
 </style>