@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLRadioGroup.vue

@@ -109,133 +109,133 @@ export default defineComponent({
 
 .radio-group {
   @apply inline-flex p-0.5 bg-primary-100 border border-primary-200 rounded;
-}
-
-.radio-group.radio-group--sm .radio label {
-  @apply px-2 py-1.5;
-}
-
-.radio-group.radio-group--xs .radio label {
-  @apply px-4 py-0.5 text-sm;
-}
-
-.radio-group.radio-group--xxs {
-  @apply p-0.75;
-}
-
-.radio-group.radio-group--xxs .radio label {
-  @apply px-2 py-0.75 text-sm;
-}
-
-.radio-group.radio-group--3xs {
-  @apply p-0.75;
-}
-
-.radio-group.radio-group--3xs .radio label {
-  @apply px-2 py-px text-sm;
-}
-
-.radio-group.radio-group--third-600 {
-  @apply bg-third-600 border-third-500;
-}
-
-.radio-group.radio-group--third-600 .radio label {
-  @apply bg-third-600 text-white;
-}
 
-.radio-group.radio-group--third-600
+  &.radio-group--insight-title
   .radio
   input:checked
   + .element-with-title
   label {
-  @apply text-third;
-}
-
-.radio-group.radio-group--edit {
-  @apply bg-edit border-primary;
-}
-
-.radio-group.radio-group--edit.color-invert {
-  @apply bg-card-lightpr-bg border-primary-300;
-}
-
-.radio-group.radio-group--edit.color-invert .radio label {
-  @apply bg-card-lightpr-bg text-primary-600;
-}
+    @apply bg-insight-title text-white;
+  }
 
-.radio-group.radio-group--edit.color-invert
+  &.radio-group--third-600
   .radio
   input:checked
   + .element-with-title
   label {
-  @apply bg-edit text-white;
-}
+    @apply text-third;
+  }
 
-.radio-group.radio-group--edit .radio label {
-  @apply bg-edit text-white;
-}
-
-.radio-group.radio-group--edit
+  &.radio-group--edit
   .radio
   input:checked
   + .element-with-title
   label {
-  @apply text-primary;
-}
+    @apply text-primary;
+  }
 
-.radio-group.radio-group--insight-title {
-  @apply bg-primary-100 border-primary-100;
-}
+  &.radio-group--sm .radio label {
+    @apply px-2 py-1.5;
+  }
 
-.radio-group.radio-group--insight-title.color-invert {
-  @apply bg-card-lightpr-bg border-primary-300;
-}
+  &.radio-group--xs .radio label {
+    @apply px-4 py-0.5 text-sm;
+  }
 
-.radio-group.radio-group--insight-title.color-invert .radio label {
-  @apply bg-card-lightpr-bg text-primary-600;
-}
+  &.radio-group--insight-title {
+    @apply bg-primary-100 border-primary-100;
 
-.radio-group.radio-group--insight-title.color-invert
+    &.color-invert
   .radio
   input:checked
   + .element-with-title
   label {
-  @apply bg-edit text-white;
-}
+      @apply bg-edit text-white;
+    }
 
-.radio-group.radio-group--insight-title .radio label {
-  @apply bg-primary-100 text-primary;
-}
+    &.color-invert {
+      @apply bg-card-lightpr-bg border-primary-300;
+
+      .radio label {
+        @apply bg-card-lightpr-bg text-primary-600;
+      }
+    }
+
+    .radio label {
+      @apply bg-primary-100 text-primary;
+    }
+  }
+
+  &.radio-group--third-600 {
+    @apply bg-third-600 border-third-500;
+
+    .radio label {
+      @apply bg-third-600 text-white;
+    }
+  }
 
-.radio-group.radio-group--insight-title
+  &.radio-group--edit {
+    @apply bg-edit border-primary;
+
+    &.color-invert
   .radio
   input:checked
   + .element-with-title
   label {
-  @apply bg-insight-title text-white;
-}
+      @apply bg-edit text-white;
+    }
 
-.radio-group.disabled {
-  @apply bg-pgray-6 border-pgray-6;
-}
+    &.color-invert {
+      @apply bg-card-lightpr-bg border-primary-300;
 
-.radio-group .radio {
-  @apply relative inline-flex;
-}
+      .radio label {
+        @apply bg-card-lightpr-bg text-primary-600;
+      }
+    }
 
-.radio-group .radio input {
-  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
-}
+    .radio label {
+      @apply bg-edit text-white;
+    }
+  }
 
-.radio-group .radio label {
-  @apply inline-flex justify-center items-center relative px-3 py-1.25 bg-primary-100 rounded text-base leading-[1.3125] text-primary-600 cursor-pointer transition;
-}
+  &.radio-group--xxs {
+    @apply p-0.75;
 
-.radio-group .radio input:checked + .element-with-title label {
-  @apply bg-white text-primary shadow-default;
-}
+    .radio label {
+      @apply px-2 py-0.75 text-sm;
+    }
+  }
+
+  &.radio-group--3xs {
+    @apply p-0.75;
+
+    .radio label {
+      @apply px-2 py-px text-sm;
+    }
+  }
+
+  &.disabled {
+    @apply bg-pgray-6 border-pgray-6;
+  }
 
-.radio-group .radio input:disabled + .element-with-title label {
-  @apply bg-pgray-6 text-pgray-4 cursor-default;
+  .radio {
+    @apply relative inline-flex;
+
+    input {
+      @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
+
+      &:disabled + .element-with-title label {
+        @apply bg-pgray-6 text-pgray-4 cursor-default;
+      }
+
+      &:checked + .element-with-title label {
+        @apply bg-white text-primary shadow-default;
+      }
+    }
+
+    label {
+      @apply inline-flex justify-center items-center relative px-3 py-1.25 bg-primary-100 rounded text-base leading-[1.3125] text-primary-600 cursor-pointer transition;
+    }
+  }
 }
 </style>

package/app/components/SLRangeInput.vue

@@ -168,29 +168,27 @@ export default defineComponent({
 
 .range-input.inline {
   @apply flex;
-}
 
-.range-input.inline > label {
-  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
-}
+  .form-control {
+    @apply grow;
+  }
 
-.range-input.inline .form-control {
-  @apply grow;
+  > label {
+    @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+  }
 }
 
 .range-input.disabled
   .input-group
   .input-range-group
-  .range-input-accept-values,
-.range-input.readonly
+  .range-input-accept-values, .range-input.readonly
   .input-group
   .input-range-group
   .range-input-accept-values {
   @apply text-pgray-4;
 }
 
-.range-input.disabled .input-group input[type="text"],
-.range-input.readonly .input-group input[type="text"] {
+.range-input.disabled .input-group input[type="text"], .range-input.readonly .input-group input[type="text"] {
   @apply border-primary-600 bg-primary-100;
 }
 
@@ -204,18 +202,18 @@ export default defineComponent({
 
 .range-input .input-group {
   @apply flex flex-nowrap text-base leading-[1.3125] space-x-4;
-}
 
-.range-input .input-group .input-range-group {
-  @apply grow;
-}
+  .input-range-group {
+    @apply grow;
 
-.range-input .input-group .input-range-group .range-input-accept-values {
-  @apply flex justify-between mb-1 text-sm text-pgray-3;
-}
+    .range-input-accept-values {
+      @apply flex justify-between mb-1 text-sm text-pgray-3;
+    }
+  }
 
-.range-input .input-group input[type="text"] {
-  @apply grow-0 shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2 focus:outline-none;
+  input[type="text"] {
+    @apply grow-0 shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2 focus:outline-none;
+  }
 }
 
 .range-input .invalid-feedback {

package/app/components/SLRightSider.vue

@@ -204,15 +204,14 @@ export default defineComponent({
 
 .right-sider {
   @apply z-9 fixed top-0 right-0 h-full;
-}
 
-.right-sider.show,
-.right-sider.hover {
-  @apply z-50;
-}
+  &.show, &.hover {
+    @apply z-50;
+  }
 
-.right-sider.show .right-sider-modal {
-  @apply block;
+  &.show .right-sider-modal {
+    @apply block;
+  }
 }
 
 .right-sider-modal {
@@ -223,28 +222,28 @@ export default defineComponent({
   @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-primary-600 rounded-l-lg shadow-popup-lg transition-[margin];
   max-width: calc(100vw - var(--spacing) * 4);
   max-height: calc(100% - var(--spacing) * 8);
-}
 
-.right-sider-content .sider-toggle {
-  @apply absolute top-0 left-0 inline-flex mt-30.75 -ml-11 p-3 rounded-l-full text-lg text-white;
-}
+  .sider-close-button {
+    @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary;
+  }
 
-.right-sider-content .sider-toggle.sider-toggle-third {
-  @apply bg-third-600;
-}
+  .sider-toggle {
+    @apply absolute top-0 left-0 inline-flex mt-30.75 -ml-11 p-3 rounded-l-full text-lg text-white;
 
-.right-sider-content .sider-toggle.sider-toggle-purple {
-  @apply bg-edit;
+    &.sider-toggle-purple {
+      @apply bg-edit;
+    }
+
+    &.sider-toggle-third {
+      @apply bg-third-600;
+    }
+  }
 }
 
 .right-sider-content-wrapper {
   @apply flex max-w-full overflow-hidden;
 }
 
-.right-sider-content .sider-close-button {
-  @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary;
-}
-
 .right-sider-addition-content {
   @apply absolute top-4 right-0 flex bg-white border border-primary-600 rounded-lg overflow-hidden shadow-popup-lg transition-[margin];
   max-height: calc(100% - var(--spacing) * 8);

package/app/components/SLSearchInput.vue

@@ -80,10 +80,10 @@ export default defineComponent({
 
 .search-input.search-input--sm .button-group {
   @apply py-0.75;
-}
 
-.search-input.search-input--sm .button-group .btn {
-  @apply text-sm;
+  .btn {
+    @apply text-sm;
+  }
 }
 
 .search-input .input-group-append {
@@ -92,13 +92,13 @@ export default defineComponent({
 
 .search-input .button-group {
   @apply inline-flex items-center py-1.75 pr-1.75 space-x-1.75;
+
+  .btn {
+    @apply p-0 border-0 text-pgray-3 focus:outline-none active:outline-none;
+  }
 }
 
 .search-input .button-group-divider {
   @apply w-px h-full my-px bg-primary-600;
 }
-
-.search-input .button-group .btn {
-  @apply p-0 border-0 text-pgray-3 focus:outline-none active:outline-none;
-}
 </style>

package/app/components/SLSelect.vue

@@ -459,131 +459,129 @@ export default defineComponent({
 
 .custom-select {
   @apply relative;
-}
 
-.custom-select.inline {
-  @apply flex;
-}
+  &.disabled .form-control label, &.readonly .form-control label {
+    @apply border-primary-600 bg-primary-100 text-pgray-4 cursor-default;
 
-.custom-select.inline .input-label {
-  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
-}
+    .icon, .icon {
+      @apply text-pgray-4;
+    }
+  }
 
-.custom-select.inline .form-control {
-  @apply grow;
-}
+  &.custom-select-xs .form-control label {
+    @apply py-px px-0.75 text-xs;
+  }
 
-.custom-select.custom-select-xs .form-control label {
-  @apply py-px px-0.75 text-xs;
-}
+  &.custom-select-sm .form-control label {
+    @apply py-0.75 text-sm;
+  }
 
-.custom-select.custom-select-sm .form-control label {
-  @apply py-0.75 text-sm;
-}
+  .invalid-feedback {
+    @apply hidden text-danger text-xs;
+  }
 
-.custom-select.disabled .form-control label,
-.custom-select.readonly .form-control label {
-  @apply border-primary-600 bg-primary-100 text-pgray-4 cursor-default;
-}
+  .form-control {
+    @apply relative block overflow-hidden;
 
-.custom-select.disabled .form-control label .icon,
-.custom-select.readonly .form-control label .icon {
-  @apply text-pgray-4;
-}
+    &.is-invalid .invalid-feedback {
+      @apply block;
+    }
 
-.custom-select .input-label {
-  @apply mb-2 text-base leading-[1.3125] text-pgray-2;
-}
+    &.is-invalid .toggle-button {
+      @apply border-danger-light;
+    }
 
-.custom-select .form-control {
-  @apply relative block overflow-hidden;
-}
+    select {
+      @apply absolute outline-none;
+    }
 
-.custom-select .form-control.is-invalid .toggle-button {
-  @apply border-danger-light;
-}
+    label {
+      @apply relative flex items-center p-1.75 bg-white border border-primary-600 rounded text-base leading-[1.3125] text-pgray-4 space-x-2 cursor-pointer;
 
-.custom-select .form-control.is-invalid .invalid-feedback {
-  @apply block;
-}
+      .button-title {
+        @apply grow truncate;
+      }
 
-.custom-select .form-control select {
-  @apply absolute outline-none;
-}
+      &.selected {
+        @apply text-pgray-2;
+      }
 
-.custom-select .form-control label {
-  @apply relative flex items-center p-1.75 bg-white border border-primary-600 rounded text-base leading-[1.3125] text-pgray-4 space-x-2 cursor-pointer;
-}
+      .icon {
+        @apply grow-0 shrink-0 text-xs text-pgray-2;
+      }
+    }
+  }
 
-.custom-select .form-control label.selected {
-  @apply text-pgray-2;
-}
+  .input-label {
+    @apply mb-2 text-base leading-[1.3125] text-pgray-2;
+  }
 
-.custom-select .form-control label .button-title {
-  @apply grow truncate;
-}
+  &.inline {
+    @apply flex;
 
-.custom-select .form-control label .icon {
-  @apply grow-0 shrink-0 text-xs text-pgray-2;
-}
+    .form-control {
+      @apply grow;
+    }
 
-.custom-select .invalid-feedback {
-  @apply hidden text-danger text-xs;
+    .input-label {
+      @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+    }
+  }
 }
 
 .select-options {
   @apply flex flex-col z-60 absolute invisible border border-primary-600 rounded bg-white overflow-hidden pointer-events-none;
-}
 
-.select-options.select-options--xs .option-list .option-button {
-  @apply py-1 text-xs;
-}
+  &.select-options--xs .option-list .option-button {
+    @apply py-1 text-xs;
+  }
 
-.select-options.select-options--sm .option-list .option-button {
-  @apply py-1 text-sm;
-}
+  &.select-options--sm .option-list .option-button {
+    @apply py-1 text-sm;
+  }
 
-.select-options[data-show] {
-  @apply visible pointer-events-auto;
-}
+  .options-wrapper {
+    @apply relative w-full max-h-[11.6875rem] rounded overflow-auto;
+  }
 
-.select-options .options-header {
-  @apply p-1;
-}
+  .options-header {
+    @apply p-1;
+  }
 
-.select-options .options-wrapper {
-  @apply relative w-full max-h-[11.6875rem] rounded overflow-auto;
-}
+  .option-list {
+    @apply flex flex-col;
 
-.select-options .option-list {
-  @apply flex flex-col;
-}
+    .option-button {
+      @apply block min-w-[10.125rem] p-1.75 bg-white text-base leading-[1.3125] text-pgray-3 hover:bg-primary-100 hover:text-primary;
 
-.select-options .option-list .option-button {
-  @apply block min-w-[10.125rem] p-1.75 bg-white text-base leading-[1.3125] text-pgray-3 hover:bg-primary-100 hover:text-primary;
-}
+      .icon-check-square {
+        @apply hidden;
+      }
 
-.select-options .option-list .option-button.selected {
-  @apply bg-primary-100 text-primary;
-}
+      &.selected {
+        @apply bg-primary-100 text-primary;
 
-.select-options .option-list .option-button.selected .icon-square {
-  @apply hidden;
-}
+        .icon-check-square {
+          @apply inline-block;
+        }
 
-.select-options .option-list .option-button.selected .icon-check-square {
-  @apply inline-block;
-}
+        .icon-square {
+          @apply hidden;
+        }
+      }
 
-.select-options .option-list .option-button.disabled {
-  @apply cursor-default hover:bg-white hover:text-pgray-3;
-}
+      &.disabled {
+        @apply cursor-default hover:bg-white hover:text-pgray-3;
+      }
 
-.select-options .option-list .option-button .icon {
-  @apply mr-2;
-}
+      .icon {
+        @apply mr-2;
+      }
+    }
+  }
 
-.select-options .option-list .option-button .icon-check-square {
-  @apply hidden;
+  &[data-show] {
+    @apply visible pointer-events-auto;
+  }
 }
 </style>