@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLSidebarNavGroupItemSection.vue

@@ -401,68 +401,63 @@ export default defineComponent({
 
 .sidebar.dark .sidebar-nav-group-item-section-header {
   @apply bg-primary-900 text-white hover:bg-primary;
-}
 
-.sidebar.dark .sidebar-nav-group-item-section-header.active,
-.sidebar.dark .sidebar-nav-group-item-section-header.router-link-exact-active {
-  @apply bg-primary-600 hover:bg-primary-600;
+  &.active, &.router-link-exact-active {
+    @apply bg-primary-600 hover:bg-primary-600;
+  }
 }
 
 .sidebar.dark
   .sidebar-nav-group-item-section-body-wrapper
   .sidebar-nav-group-item-section-link {
   @apply bg-primary-900 text-white hover:bg-primary-800 active:bg-primary-600;
-}
 
-.sidebar.dark
-  .sidebar-nav-group-item-section-body-wrapper
-  .sidebar-nav-group-item-section-link.router-link-exact-active {
-  @apply bg-primary-600 hover:bg-primary-600;
+  &.router-link-exact-active {
+    @apply bg-primary-600 hover:bg-primary-600;
+  }
 }
 
 .sidebar-nav-group-item-section {
   @apply flex flex-col;
-}
 
-.sidebar-nav-group-item-section.collapsed
+  &.collapsed
   .sidebar-nav-group-item-section-header-right
   .sidebar-nav-group-item-section-status
   .sidebar-nav-group-item-section-toggle-btn {
-  @apply rotate-0;
+    @apply rotate-0;
+  }
 }
 
 .sidebar-nav-group-item-section-header {
   @apply flex items-center flex-nowrap py-2 pr-1 pl-2 bg-primary-50 rounded-lg text-base text-primary hover:bg-primary-200 hover:font-bold;
-}
 
-.sidebar-nav-group-item-section-header:hover
+  &.active
   .sidebar-nav-group-item-section-header-right
   .sidebar-nav-group-item-section-status
-  .sidebar-nav-group-item-section-add-btn {
-  @apply text-primary;
-}
-
-.sidebar-nav-group-item-section-header.active,
-.sidebar-nav-group-item-section-header.router-link-exact-active {
-  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
-}
-
-.sidebar-nav-group-item-section-header.active
+  .sidebar-nav-group-item-section-add-btn, &.router-link-exact-active
   .sidebar-nav-group-item-section-header-right
   .sidebar-nav-group-item-section-status
-  .sidebar-nav-group-item-section-add-btn,
-.sidebar-nav-group-item-section-header.router-link-exact-active
+  .sidebar-nav-group-item-section-add-btn {
+    @apply text-white;
+  }
+
+  &.router-link-exact-active
   .sidebar-nav-group-item-section-header-right
   .sidebar-nav-group-item-section-status
   .sidebar-nav-group-item-section-add-btn {
-  @apply text-white;
-}
+    @apply hidden;
+  }
 
-.sidebar-nav-group-item-section-header.router-link-exact-active
+  &:hover
   .sidebar-nav-group-item-section-header-right
   .sidebar-nav-group-item-section-status
   .sidebar-nav-group-item-section-add-btn {
-  @apply hidden;
+    @apply text-primary;
+  }
+
+  &.active, &.router-link-exact-active {
+    @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  }
 }
 
 .sidebar-nav-group-item-section-header-left {
@@ -471,10 +466,10 @@ export default defineComponent({
 
 .sidebar-nav-group-item-section-header-right {
   @apply grow flex items-center justify-between flex-nowrap space-x-1;
-}
 
-.sidebar-nav-group-item-section-header-right .sidebar-nav-group-section-title {
-  @apply grow inline-flex items-center h-6 pl-1 whitespace-nowrap;
+  .sidebar-nav-group-section-title {
+    @apply grow inline-flex items-center h-6 pl-1 whitespace-nowrap;
+  }
 }
 
 .sidebar-nav-group-item-section-header-right
@@ -505,70 +500,67 @@ export default defineComponent({
 .sidebar-nav-group-item-section-body-wrapper
   .sidebar-nav-group-item-section-link {
   @apply block py-1 px-2 bg-primary-50 rounded-lg text-sm text-primary whitespace-nowrap hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
-}
 
-.sidebar-nav-group-item-section-body-wrapper
-  .sidebar-nav-group-item-section-link.router-link-exact-active {
-  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  &.router-link-exact-active {
+    @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  }
 }
 
 .sidebar-nav-group-item-section-popup {
   @apply flex-col min-w-[142px] p-2 space-y-1 bg-white rounded-lg overflow-hidden shadow-md hidden;
-}
 
-.sidebar-nav-group-item-section-popup.dark {
-  @apply bg-primary-900;
-}
+  &.single
+  .sidebar-nav-group-item-section-popup-link {
+    @apply py-2 pr-1 pl-2;
+  }
 
-.sidebar-nav-group-item-section-popup.dark.single
-  .sidebar-nav-group-item-section-popup-link:hover
-  .sidebar-nav-group-item-section-popup-link-icon {
-  @apply text-primary-500;
-}
+  &.dark
+  .sidebar-nav-group-item-section-popup-link {
+    @apply bg-primary-900 text-white hover:bg-primary active:bg-primary-600;
 
-.sidebar-nav-group-item-section-popup.dark.single
-  .sidebar-nav-group-item-section-popup-link.router-link-exact-active
-  .sidebar-nav-group-item-section-popup-link-icon,
-.sidebar-nav-group-item-section-popup.dark.single
-  .sidebar-nav-group-item-section-popup-link:active
-  .sidebar-nav-group-item-section-popup-link-icon {
-  @apply text-primary;
-}
+    &.router-link-exact-active {
+      @apply bg-primary-600 hover:bg-primary-600;
+    }
+  }
 
-.sidebar-nav-group-item-section-popup.dark.single
-  .sidebar-nav-group-item-section-popup-link-icon {
-  @apply text-primary-500;
-}
+  &[data-show] {
+    @apply flex;
+  }
 
-.sidebar-nav-group-item-section-popup.dark
-  .sidebar-nav-group-item-section-popup-link {
-  @apply bg-primary-900 text-white hover:bg-primary active:bg-primary-600;
-}
+  &.single {
+    @apply p-0;
+  }
 
-.sidebar-nav-group-item-section-popup.dark
-  .sidebar-nav-group-item-section-popup-link.router-link-exact-active {
-  @apply bg-primary-600 hover:bg-primary-600;
-}
+  &.dark {
+    @apply bg-primary-900;
 
-.sidebar-nav-group-item-section-popup[data-show] {
-  @apply flex;
-}
+    &.single
+  .sidebar-nav-group-item-section-popup-link.router-link-exact-active
+  .sidebar-nav-group-item-section-popup-link-icon, &.single
+  .sidebar-nav-group-item-section-popup-link:active
+  .sidebar-nav-group-item-section-popup-link-icon {
+      @apply text-primary;
+    }
 
-.sidebar-nav-group-item-section-popup.single {
-  @apply p-0;
-}
+    &.single
+  .sidebar-nav-group-item-section-popup-link:hover
+  .sidebar-nav-group-item-section-popup-link-icon {
+      @apply text-primary-500;
+    }
 
-.sidebar-nav-group-item-section-popup.single
-  .sidebar-nav-group-item-section-popup-link {
-  @apply py-2 pr-1 pl-2;
+    &.single
+  .sidebar-nav-group-item-section-popup-link-icon {
+      @apply text-primary-500;
+    }
+  }
 }
 
 .sidebar-nav-group-item-section-popup-link {
   @apply flex items-center justify-between flex-nowrap py-1 px-2 space-x-4 bg-white rounded-lg text-sm text-primary hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
-}
 
-.sidebar-nav-group-item-section-popup-link.router-link-exact-active {
-  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  &.router-link-exact-active {
+    @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  }
 }
 
 .sidebar-nav-group-item-section-popup-link-icon {

package/app/components/SLSidebarNavLinkItem.vue

@@ -237,10 +237,10 @@ export default defineComponent({
 
 .sidebar.closure .sidebar-nav-link-item-left {
   @apply lg:inline-flex;
-}
 
-.sidebar.closure .sidebar-nav-link-item-left .item-status {
-  @apply lg:inline-flex;
+  .item-status {
+    @apply lg:inline-flex;
+  }
 }
 
 .sidebar.closure .sidebar-nav-link-item-right {
@@ -249,11 +249,10 @@ export default defineComponent({
 
 .sidebar.dark .sidebar-nav-link-item {
   @apply bg-primary-800 text-white hover:bg-primary active:bg-primary-600;
-}
 
-.sidebar.dark .sidebar-nav-link-item.router-link-exact-active,
-.sidebar.dark .sidebar-nav-link-item.router-link-active {
-  @apply bg-primary-600 hover:bg-primary-600 active:bg-primary-600;
+  &.router-link-exact-active, &.router-link-active {
+    @apply bg-primary-600 hover:bg-primary-600 active:bg-primary-600;
+  }
 }
 
 .sidebar.dark
@@ -268,80 +267,79 @@ export default defineComponent({
 
 .sidebar-nav-link-item {
   @apply flex items-center justify-start py-2 pr-3 pl-2 bg-white rounded-lg text-base text-primary hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
-}
 
-.sidebar-nav-link-item.router-link-exact-active,
-.sidebar-nav-link-item.router-link-active {
-  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white active:font-bold;
-}
+  &.sidebar-nav-link-item--home.router-link-exact-active.router-link-active {
+    @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  }
 
-.sidebar-nav-link-item.sidebar-nav-link-item--home.router-link-active {
-  @apply bg-white text-primary font-normal hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
-}
+  &.router-link-exact-active, &.router-link-active {
+    @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white active:font-bold;
+  }
+
+  &.sidebar-nav-link-item--home.router-link-active {
+    @apply bg-white text-primary font-normal hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
+  }
 
-.sidebar-nav-link-item.sidebar-nav-link-item--home.router-link-exact-active.router-link-active {
-  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  + .sidebar-nav-link-item {
+    @apply mt-1;
+  }
 }
 
 .sidebar-nav-link-item-left {
   @apply relative grow-0 shrink-0;
-}
 
-.sidebar-nav-link-item-left .item-pre-icon {
-  @apply inline-flex;
-}
+  .item-pre-icon {
+    @apply inline-flex;
+  }
 
-.sidebar-nav-link-item-left .item-status {
-  @apply absolute -top-2.5 -left-2.5 text-base hidden;
-}
+  .item-status {
+    @apply absolute -top-2.5 -left-2.5 text-base hidden;
 
-.sidebar-nav-link-item-left .item-status.status--new::before {
-  content: "";
-  @apply block absolute top-1/2 left-1/2 w-2 h-2 -translate-x-1/2 -translate-y-1/2 bg-white;
-}
+    &.status--new::before {
+      content: "";
+      @apply block absolute top-1/2 left-1/2 w-2 h-2 -translate-x-1/2 -translate-y-1/2 bg-white;
+    }
 
-.sidebar-nav-link-item-left .item-status.status--new .icon {
-  @apply relative text-highlight-500;
+    &.status--new .icon {
+      @apply relative text-highlight-500;
+    }
+  }
 }
 
 .sidebar-nav-link-item-right {
   @apply grow flex items-center flex-nowrap space-x-1.5;
-}
 
-.sidebar-nav-link-item-right .item-title {
-  @apply grow inline-flex items-center h-6 pl-1 whitespace-nowrap;
-}
-
-.sidebar-nav-link-item-right .item-post-icon {
-  @apply grow-0 shrink-0 relative inline-flex;
-}
+  .item-post-icon {
+    @apply grow-0 shrink-0 relative inline-flex;
 
-.sidebar-nav-link-item-right .item-post-icon.status--new::before {
-  content: "";
-  @apply block absolute top-1/2 left-1/2 w-2 h-2 -translate-x-1/2 -translate-y-1/2 bg-white;
-}
+    &.status--new::before {
+      content: "";
+      @apply block absolute top-1/2 left-1/2 w-2 h-2 -translate-x-1/2 -translate-y-1/2 bg-white;
+    }
 
-.sidebar-nav-link-item-right .item-post-icon.status--new .icon {
-  @apply relative text-highlight-500;
-}
+    &.status--new .icon {
+      @apply relative text-highlight-500;
+    }
+  }
 
-.sidebar-nav-link-item + .sidebar-nav-link-item {
-  @apply mt-1;
+  .item-title {
+    @apply grow inline-flex items-center h-6 pl-1 whitespace-nowrap;
+  }
 }
 
 .sidebar-nav-link-item-popup {
   @apply rounded-lg overflow-hidden shadow-md hidden;
-}
 
-.sidebar-nav-link-item-popup[data-show] {
-  @apply block;
+  &[data-show] {
+    @apply block;
+  }
 }
 
 .sidebar-nav-link-item-popup-link {
   @apply flex items-center p-2 space-x-4 bg-white text-sm text-primary whitespace-nowrap hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
-}
 
-.sidebar-nav-link-item-popup-link.router-link-exact-active {
-  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  &.router-link-exact-active {
+    @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+  }
 }
 </style>

package/app/components/SLSitePage.vue

@@ -119,14 +119,14 @@ export default defineComponent({
 
 .site-page-header {
   @apply flex justify-between mb-4;
-}
 
-.site-page-header.empty {
-  @apply mb-0;
-}
+  &.empty {
+    @apply mb-0;
 
-.site-page-header.empty .site-page-header-left #site-page-header-left-bottom {
-  @apply mt-0;
+    .site-page-header-left #site-page-header-left-bottom {
+      @apply mt-0;
+    }
+  }
 }
 
 .site-page-header-left-top {

package/app/components/SLSortByDropdown.vue

@@ -166,37 +166,37 @@ export default defineComponent({
 
 .sort-by-dropdown {
   @apply inline-flex;
-}
 
-.sort-by-dropdown.single .sort-by-dropdown-toggle {
-  @apply bg-white cursor-default;
-}
+  &.single .sort-by-dropdown-toggle {
+    @apply bg-white cursor-default;
 
-.sort-by-dropdown.single .sort-by-dropdown-toggle .icon {
-  @apply hidden;
+    .icon {
+      @apply hidden;
+    }
+  }
 }
 
 .sort-by-dropdown-toggle {
   @apply inline-flex items-center px-1 py-0.5 space-x-2 bg-primary-50 rounded text-sm text-primary;
-}
 
-.sort-by-dropdown-toggle .icon {
-  @apply text-xs;
+  .icon {
+    @apply text-xs;
+  }
 }
 
 .sort-by-dropdown-menu {
   @apply z-2 flex-col min-w-21 bg-white border border-primary-600 rounded overflow-hidden hidden;
-}
 
-.sort-by-dropdown-menu[data-show] {
-  @apply inline-flex;
-}
+  .sort-by-dropdown-item {
+    @apply inline-flex p-2 bg-white text-sm text-pgray-3;
 
-.sort-by-dropdown-menu .sort-by-dropdown-item {
-  @apply inline-flex p-2 bg-white text-sm text-pgray-3;
-}
+    &.active {
+      @apply bg-primary-100 text-primary;
+    }
+  }
 
-.sort-by-dropdown-menu .sort-by-dropdown-item.active {
-  @apply bg-primary-100 text-primary;
+  &[data-show] {
+    @apply inline-flex;
+  }
 }
 </style>

package/app/components/SLStayRangeInput.vue

@@ -260,58 +260,58 @@ export default defineComponent({
 
 .stay-range-input {
   @apply flex flex-col;
-}
 
-.stay-range-input.inline {
-  @apply flex flex-row;
-}
+  &.disabled .input-group input[type="text"],
+  &.readonly .input-group input[type="text"] {
+    @apply border-primary-600 bg-primary-100;
+  }
 
-.stay-range-input.inline > label {
-  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
-}
+  .is-invalid .input-group input[type="text"] {
+    @apply border-danger;
+  }
 
-.stay-range-input.inline .form-control {
-  @apply grow;
-}
+  .is-invalid .invalid-feedback {
+    @apply block;
+  }
 
-.stay-range-input.disabled .input-group input[type="text"],
-.stay-range-input.readonly .input-group input[type="text"] {
-  @apply border-primary-600 bg-primary-100;
-}
+  .form-control-container {
+    @apply flex items-center space-x-2;
+  }
 
-.stay-range-input > label {
-  @apply mb-2 text-base leading-[1.3125] text-pgray-2;
-}
+  .input-group-splitter {
+    @apply grow-0 shrink-0 w-3 h-px bg-primary;
+  }
 
-.stay-range-input .is-invalid .input-group input[type="text"] {
-  @apply border-danger;
-}
+  .invalid-feedback {
+    @apply hidden text-danger text-xs;
+  }
 
-.stay-range-input .is-invalid .invalid-feedback {
-  @apply block;
-}
+  .input-group {
+    @apply grow flex flex-nowrap space-x-2;
 
-.stay-range-input .form-control-container {
-  @apply flex items-center space-x-2;
-}
+    input[type="text"] {
+      @apply grow-0 shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2 outline-none;
+    }
 
-.stay-range-input .input-group {
-  @apply grow flex flex-nowrap space-x-2;
-}
+    .custom-select {
+      @apply w-full;
+    }
+  }
 
-.stay-range-input .input-group input[type="text"] {
-  @apply grow-0 shrink-0 w-11 border border-primary-600 rounded text-base text-center text-pgray-2 outline-none;
-}
+  > label {
+    @apply mb-2 text-base leading-[1.3125] text-pgray-2;
+  }
 
-.stay-range-input .input-group .custom-select {
-  @apply w-full;
-}
+  &.inline {
+    @apply flex flex-row;
 
-.stay-range-input .input-group-splitter {
-  @apply grow-0 shrink-0 w-3 h-px bg-primary;
-}
+    .form-control {
+      @apply grow;
+    }
 
-.stay-range-input .invalid-feedback {
-  @apply hidden text-danger text-xs;
+    > label {
+      @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+    }
+  }
 }
 </style>