@mptw/skylens-ui 1.5.16 → 1.5.17

package/app/components/SLCheckbox.vue

@@ -185,66 +185,65 @@ export default defineComponent({
 
 .checkbox {
   @apply inline-flex relative text-base align-top overflow-hidden;
-}
 
-.checkbox.inactive label {
-  @apply pointer-events-none;
-}
+  input:checked + label, &.is-check-some {
+    @apply text-primary;
+  }
 
-.checkbox.checkbox-sm {
-  @apply text-sm;
-}
+  &.inactive label {
+    @apply pointer-events-none;
+  }
 
-.checkbox.checkbox-sm label {
-  @apply text-sm;
-}
+  &.checkbox-sm {
+    @apply text-sm;
 
-.checkbox input {
-  @apply absolute -top-10 -left-10;
-}
+    label {
+      @apply text-sm;
+    }
+  }
 
-.checkbox label {
-  @apply relative text-base text-pgray-3 cursor-pointer;
-}
+  input {
+    @apply absolute -top-10 -left-10;
 
-.checkbox label .icon {
-  @apply hidden;
-}
+    &:not(:checked) + label:not(.is-check-some) .icon-square {
+      @apply inline-block;
+    }
 
-.checkbox label span {
-  @apply ml-2;
-}
+    &:not(:checked) + label.is-check-some {
+      @apply text-primary;
 
-.checkbox input:not(:checked) + label:not(.is-check-some) .icon-square {
-  @apply inline-block;
-}
+      .icon-minus-square {
+        @apply inline-block;
+      }
 
-.checkbox input:not(:checked) + label.is-check-some {
-  @apply text-primary;
-}
+      .icon-square {
+        @apply hidden;
+      }
+    }
 
-.checkbox input:not(:checked) + label.is-check-some .icon-square {
-  @apply hidden;
-}
+    &:checked + label .icon-check-square {
+      @apply inline-block;
+    }
 
-.checkbox input:not(:checked) + label.is-check-some .icon-minus-square {
-  @apply inline-block;
-}
+    &:not(:checked):disabled + label {
+      @apply text-pgray-4 cursor-default pointer-events-none;
+    }
 
-.checkbox input:checked + label,
-.checkbox.is-check-some {
-  @apply text-primary;
-}
+    &:checked:disabled + label {
+      @apply text-pgray-3 cursor-default pointer-events-none;
+    }
+  }
 
-.checkbox input:checked + label .icon-check-square {
-  @apply inline-block;
-}
+  label {
+    @apply relative text-base text-pgray-3 cursor-pointer;
 
-.checkbox input:not(:checked):disabled + label {
-  @apply text-pgray-4 cursor-default pointer-events-none;
-}
+    .icon {
+      @apply hidden;
+    }
 
-.checkbox input:checked:disabled + label {
-  @apply text-pgray-3 cursor-default pointer-events-none;
+    span {
+      @apply ml-2;
+    }
+  }
 }
 </style>

package/app/components/SLCircleButton.vue

@@ -76,29 +76,29 @@ export default defineComponent({
 
 .circle-button {
   @apply inline-flex items-center justify-center relative w-10 h-10 rounded-full bg-white text-xl leading-5.75 text-white;
+
+  .badge {
+    @apply absolute top-1.5 right-2 block w-0.75 h-0.75 rounded-full bg-highlight;
+  }
 }
 
 .circle-button-lg {
   @apply w-13.5 h-13.5 text-2p67xl;
-}
 
-.circle-button-lg .badge {
-  @apply top-1.75 right-3 w-1 h-1;
+  .badge {
+    @apply top-1.75 right-3 w-1 h-1;
+  }
 }
 
 .circle-button-highlight-400 {
   @apply bg-highlight-400;
-}
 
-.circle-button-highlight-400.shadow {
-  @apply shadow-md;
-}
-
-.circle-button-highlight-400.active {
-  @apply border border-highlight text-highlight;
-}
+  &.shadow {
+    @apply shadow-md;
+  }
 
-.circle-button .badge {
-  @apply absolute top-1.5 right-2 block w-0.75 h-0.75 rounded-full bg-highlight;
+  &.active {
+    @apply border border-highlight text-highlight;
+  }
 }
 </style>

package/app/components/SLCollapsableBlock.vue

@@ -100,17 +100,17 @@ export default defineComponent({
 
 .sl-collapsable-block {
   @apply p-3.75 border border-secondary-400 rounded-lg;
-}
 
-.sl-collapsable-block.collapsed
+  &.collapsed
   .sl-collapsable-block-header
   .toggle-collapse-button
   .icon {
-  @apply rotate-0;
-}
+    @apply rotate-0;
+  }
 
-.sl-collapsable-block.collapsed .sl-collapsable-block-body {
-  @apply pt-0;
+  &.collapsed .sl-collapsable-block-body {
+    @apply pt-0;
+  }
 }
 
 .sl-collapsable-block-header .collapse-block-title-icon {
@@ -123,21 +123,21 @@ export default defineComponent({
 
 .sl-collapsable-block-header .toggle-collapse-button {
   @apply inline-flex items-center space-x-2;
-}
 
-.sl-collapsable-block-header .toggle-collapse-button .button-title {
-  @apply text-sm text-primary;
-}
+  .button-title {
+    @apply text-sm text-primary;
+  }
 
-.sl-collapsable-block-header .toggle-collapse-button .icon {
-  @apply text-xs leading-none text-primary-600 rotate-180 transition-transform;
+  .icon {
+    @apply text-xs leading-none text-primary-600 rotate-180 transition-transform;
+  }
 }
 
 .sl-collapsable-block-body {
   @apply relative pt-4 overflow-hidden transition-all;
-}
 
-.sl-collapsable-block-body .collapsable-block-wrapper {
-  @apply absolute top-4 left-0 w-full;
+  .collapsable-block-wrapper {
+    @apply absolute top-4 left-0 w-full;
+  }
 }
 </style>

package/app/components/SLCollapsableMulitPillSelect.vue

@@ -77,21 +77,21 @@ export default defineComponent({
 
 .collapsable-multi-pill-select .toggle-button {
   @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2;
-}
 
-.collapsable-multi-pill-select .toggle-button.active .toggle-icon {
-  @apply rotate-180;
-}
+  &.active .toggle-icon {
+    @apply rotate-180;
+  }
 
-.collapsable-multi-pill-select .toggle-button .toggle-icon {
-  @apply transform origin-center;
+  .toggle-icon {
+    @apply transform origin-center;
+  }
 }
 
 .collapsable-multi-pill-select .pills {
   @apply -mx-1 mb-4 border-b border-primary-300;
-}
 
-.collapsable-multi-pill-select .pills .pill-checkbox {
-  @apply mx-1 mb-2;
+  .pill-checkbox {
+    @apply mx-1 mb-2;
+  }
 }
 </style>

package/app/components/SLContextMenu.vue

@@ -276,19 +276,19 @@ export default defineComponent({
 
 .sl-context-menu-container {
   @apply fixed top-0 left-0 w-full h-full;
-}
 
-.sl-context-menu-container-modal {
-  @apply absolute top-0 left-0 w-full h-full;
-}
+  .sl-context-menu-item {
+    @apply block min-w-[160px] p-3 bg-white text-base text-gray-2;
+    @apply hover:bg-primary-100 hover:text-primary;
+  }
 
-.sl-context-menu-container .sl-context-menu {
-  @apply absolute top-0 left-0 m-0 border border-primary-600 rounded overflow-hidden shadow-popup-sm;
+  .sl-context-menu {
+    @apply absolute top-0 left-0 m-0 border border-primary-600 rounded overflow-hidden shadow-popup-sm;
+  }
 }
 
-.sl-context-menu-container .sl-context-menu-item {
-  @apply block min-w-[160px] p-3 bg-white text-base text-gray-2;
-  @apply hover:bg-primary-100 hover:text-primary;
+.sl-context-menu-container-modal {
+  @apply absolute top-0 left-0 w-full h-full;
 }
 
 .toast.copy-msg-toast :deep(.toast-wrapper) {

package/app/components/SLDateInput.vue

@@ -371,10 +371,10 @@ export default defineComponent({
 
 .date-input.date-input-xs .input-group .inputs {
   @apply pl-0 rounded-r-lg;
-}
 
-.date-input.date-input-xs .input-group .inputs div input {
-  @apply w-[5.875rem] text-center;
+  div input {
+    @apply w-[5.875rem] text-center;
+  }
 }
 
 .date-input.date-input-range.date-input-dateTime
@@ -387,20 +387,17 @@ export default defineComponent({
 
 .date-input.inline {
   @apply flex;
-}
 
-.date-input.inline > label {
-  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
-}
+  .form-control {
+    @apply grow;
+  }
 
-.date-input.inline .form-control {
-  @apply grow;
+  > label {
+    @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+  }
 }
 
-.date-input.disabled .input-group .input-group-prepend,
-.date-input.disabled .input-group .inputs,
-.date-input.readonly .input-group .input-group-prepend,
-.date-input.readonly .input-group .inputs {
+.date-input.disabled .input-group .input-group-prepend, .date-input.disabled .input-group .inputs, .date-input.readonly .input-group .input-group-prepend, .date-input.readonly .input-group .inputs {
   @apply border-primary-500 bg-primary-100;
 }
 
@@ -408,19 +405,16 @@ export default defineComponent({
   @apply mb-2 text-base leading-[1.3125] text-pgray-2;
 }
 
-.date-input .is-invalid .input-group .input-group-prepend,
-.date-input .is-invalid .input-group.is-focus .input-group-prepend {
+.date-input .is-invalid .input-group .input-group-prepend, .date-input .is-invalid .input-group.is-focus .input-group-prepend {
   @apply border-danger-light;
 }
 
-.date-input .is-invalid .input-group .inputs,
-.date-input .is-invalid .input-group.is-focus .inputs {
+.date-input .is-invalid .input-group .inputs, .date-input .is-invalid .input-group.is-focus .inputs {
   @apply border-danger-light;
-}
 
-.date-input .is-invalid .input-group .inputs .icon,
-.date-input .is-invalid .input-group.is-focus .inputs .icon {
-  @apply inline-block;
+  .icon, .icon {
+    @apply inline-block;
+  }
 }
 
 .date-input .is-invalid .invalid-feedback {
@@ -429,41 +423,40 @@ export default defineComponent({
 
 .date-input .input-group {
   @apply flex flex-nowrap w-full text-base leading-[1.3125];
-}
 
-.date-input .input-group.is-focus .input {
-  @apply border-primary;
-}
+  &.is-fill .input .float-label, &.is-focus .input .float-label {
+    @apply ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
+  }
 
-.date-input .input-group.is-fill .input .float-label,
-.date-input .input-group.is-focus .input .float-label {
-  @apply ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
-}
+  .input-group-prepend {
+    @apply grow-0 shrink-0 flex items-center relative pl-4 pr-6 rounded-l border border-r-0 border-primary-500 bg-white text-base leading-none;
 
-.date-input .input-group .input-group-prepend {
-  @apply grow-0 shrink-0 flex items-center relative pl-4 pr-6 rounded-l border border-r-0 border-primary-500 bg-white text-base leading-none;
-}
+    &::after {
+      content: "";
+      @apply block absolute top-2 right-1.75 bottom-2 w-px bg-primary;
+    }
+  }
 
-.date-input .input-group .input-group-prepend::after {
-  content: "";
-  @apply block absolute top-2 right-1.75 bottom-2 w-px bg-primary;
-}
+  &.is-focus .input {
+    @apply border-primary;
+  }
 
-.date-input .input-group .inputs {
-  @apply relative grow flex items-center p-2 bg-white rounded-r border border-l-0 border-primary-500 text-base text-pgray-2;
-}
+  .inputs {
+    @apply relative grow flex items-center p-2 bg-white rounded-r border border-l-0 border-primary-500 text-base text-pgray-2;
 
-.date-input .input-group .inputs input {
-  @apply grow bg-transparent text-base text-pgray-2 text-left placeholder-pgray-4 focus:outline-none;
-  width: calc((100% - 25px) / 2);
-}
+    .date-range-split {
+      @apply grow-0 shrink-0 mx-0.5;
+    }
 
-.date-input .input-group .inputs .date-range-split {
-  @apply grow-0 shrink-0 mx-0.5;
-}
+    input {
+      @apply grow bg-transparent text-base text-pgray-2 text-left placeholder-pgray-4 focus:outline-none;
+      width: calc((100% - 25px) / 2);
+    }
 
-.date-input .input-group .inputs .icon {
-  @apply absolute right-0 mr-2 text-danger-light hidden;
+    .icon {
+      @apply absolute right-0 mr-2 text-danger-light hidden;
+    }
+  }
 }
 
 .date-input .input-info {

package/app/components/SLDownloadButton.vue

@@ -278,29 +278,29 @@ export default defineComponent({
 
 .download-button {
   @apply inline-block;
-}
 
-.download-button.disabled .download-button-toggle {
-  @apply border-pgray-5 text-pgray-5 cursor-default;
+  &.disabled .download-button-toggle {
+    @apply border-pgray-5 text-pgray-5 cursor-default;
+  }
 }
 
 .download-button-toggle {
   @apply inline-flex justify-center items-center w-[28px] h-[28px] bg-white border border-primary-600 rounded text-lg text-primary-600;
-}
 
-.download-button-toggle.active {
-  @apply bg-primary-600 text-white;
+  &.active {
+    @apply bg-primary-600 text-white;
+  }
 }
 
 .download-button-popup {
   @apply z-60 absolute flex flex-col bg-white border border-primary-500 rounded overflow-hidden shadow-default invisible pointer-events-none;
-}
 
-.download-button-popup[data-show] {
-  @apply visible pointer-events-auto;
-}
+  .download-option {
+    @apply block p-2 bg-white text-sm text-pgray-3 hover:bg-primary-100 hover:text-primary;
+  }
 
-.download-button-popup .download-option {
-  @apply block p-2 bg-white text-sm text-pgray-3 hover:bg-primary-100 hover:text-primary;
+  &[data-show] {
+    @apply visible pointer-events-auto;
+  }
 }
 </style>

package/app/components/SLDropdown.vue

@@ -245,41 +245,41 @@ export default defineComponent({
 
 .dropdown {
   @apply inline-block relative;
-}
 
-.dropdown.active .dropdown-toggle .toggle-icon {
-  @apply text-primary-600 rotate-180;
+  &.active .dropdown-toggle .toggle-icon {
+    @apply text-primary-600 rotate-180;
+  }
 }
 
 .dropdown-toggle {
   @apply flex items-center p-1.75 border border-primary-500 rounded bg-white space-x-2 text-base text-pgray-2 whitespace-nowrap;
-}
 
-.dropdown-toggle .toggle-icon {
-  @apply text-xs leading-none text-pgray-2 transition-transform transform;
+  .toggle-icon {
+    @apply text-xs leading-none text-pgray-2 transition-transform transform;
+  }
 }
 
 .dropdown-menu {
   @apply z-50 flex flex-col max-h-48 border border-primary-500 rounded bg-white shadow-md overflow-hidden invisible pointer-events-none;
-}
 
-.dropdown-menu[data-show] {
-  @apply visible pointer-events-auto;
-}
+  .dropdown-list-wrapper {
+    @apply grow;
 
-.dropdown-menu[data-show] .dropdown-list-wrapper .dropdown-list {
-  @apply relative;
-}
+    .dropdown-list {
+      @apply absolute;
+    }
+  }
 
-.dropdown-menu .dropdown-search {
-  @apply grow-0 shrink-0 mb-1 p-1;
-}
+  .dropdown-search {
+    @apply grow-0 shrink-0 mb-1 p-1;
+  }
 
-.dropdown-menu .dropdown-list-wrapper {
-  @apply grow;
-}
+  &[data-show] {
+    @apply visible pointer-events-auto;
 
-.dropdown-menu .dropdown-list-wrapper .dropdown-list {
-  @apply absolute;
+    .dropdown-list-wrapper .dropdown-list {
+      @apply relative;
+    }
+  }
 }
 </style>

package/app/components/SLDropdownItem.vue

@@ -27,9 +27,9 @@ export default defineComponent({
 
 .dropdown-item {
   @apply block p-2 bg-white text-sm text-primary whitespace-nowrap hover:text-primary hover:bg-primary-50 focus:text-primary focus:bg-primary-50 active:text-primary active:bg-primary-50;
-}
 
-.dropdown-item.active {
-  @apply text-primary bg-primary-50;
+  &.active {
+    @apply text-primary bg-primary-50;
+  }
 }
 </style>

package/app/components/SLElementWithTitle.vue

@@ -178,9 +178,9 @@ export default defineComponent({
 
 .element-with-title-tooltip {
   @apply z-10 p-2 bg-mask/70 rounded text-xs text-white whitespace-pre shadow-default invisible pointer-events-none;
-}
 
-.element-with-title-tooltip[data-show] {
-  @apply visible;
+  &[data-show] {
+    @apply visible;
+  }
 }
 </style>

package/app/components/SLEyeCheckbox.vue

@@ -123,53 +123,53 @@ export default defineComponent({
 
 .eye-checkbox {
   @apply inline-block relative text-base align-top overflow-hidden;
-}
 
-.eye-checkbox.checkbox-sm {
-  @apply text-sm;
-}
+  &.checkbox-sm {
+    @apply text-sm;
 
-.eye-checkbox.checkbox-sm label {
-  @apply text-sm;
-}
+    label {
+      @apply text-sm;
+    }
+  }
 
-.eye-checkbox input {
-  @apply absolute -top-10 -left-10;
-}
+  input {
+    @apply absolute -top-10 -left-10;
 
-.eye-checkbox label {
-  @apply relative inline-flex items-center text-base text-pgray-2 cursor-pointer;
-}
+    &:not(:checked) + label .icon-eye-slash {
+      @apply inline-block;
+    }
 
-.eye-checkbox label .icon {
-  @apply hidden text-primary;
-}
+    &:not(:checked):disabled + label {
+      @apply text-pgray-4 cursor-default;
 
-.eye-checkbox label span {
-  @apply ml-2;
-}
+      .icon-eye-slash {
+        @apply inline-block text-pgray-4;
+      }
+    }
 
-.eye-checkbox input:checked + label .icon-eye {
-  @apply inline-block;
-}
+    &:checked + label .icon-eye {
+      @apply inline-block;
+    }
 
-.eye-checkbox input:not(:checked) + label .icon-eye-slash {
-  @apply inline-block;
-}
+    &:checked:disabled + label {
+      @apply text-pgray-3 cursor-default;
 
-.eye-checkbox input:not(:checked):disabled + label {
-  @apply text-pgray-4 cursor-default;
-}
+      .icon-eye {
+        @apply inline-block text-pgray-3;
+      }
+    }
+  }
 
-.eye-checkbox input:not(:checked):disabled + label .icon-eye-slash {
-  @apply inline-block text-pgray-4;
-}
+  label {
+    @apply relative inline-flex items-center text-base text-pgray-2 cursor-pointer;
 
-.eye-checkbox input:checked:disabled + label {
-  @apply text-pgray-3 cursor-default;
-}
+    .icon {
+      @apply hidden text-primary;
+    }
 
-.eye-checkbox input:checked:disabled + label .icon-eye {
-  @apply inline-block text-pgray-3;
+    span {
+      @apply ml-2;
+    }
+  }
 }
 </style>