@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLPagination.vue

@@ -152,53 +152,53 @@ export default defineComponent({
 
 .pagination-info {
   @apply inline-flex items-center mr-4 space-x-0.5 text-base text-pgray-2;
-}
 
-.pagination-info .custom-select {
-  @apply min-w-[2.3125rem];
-}
+  .custom-select {
+    @apply min-w-[2.3125rem];
 
-.pagination-info .custom-select .form-control label {
-  @apply text-center;
-}
+    .select-options .option-list .option-button {
+      @apply min-w-0 text-center;
+    }
 
-.pagination-info .custom-select .form-control label .icon {
-  @apply hidden;
-}
+    .form-control label {
+      @apply text-center;
 
-.pagination-info .custom-select .select-options .option-list .option-button {
-  @apply min-w-0 text-center;
+      .icon {
+        @apply hidden;
+      }
+    }
+  }
 }
 
 .pagination-items {
   @apply inline-flex items-center;
 }
 
-.pagination-item + .pagination-item {
-  @apply border-l;
-}
-
 .pagination-item {
   @apply inline-flex items-center justify-center min-w-[1.5rem] min-h-[1.5rem] p-1 border-t border-b border-primary bg-white text-xs text-primary hover:text-primary-600 focus:text-primary;
-}
 
-.pagination-item.pagination-item--icon {
-  @apply py-1.5;
-}
+  &.pagination-item--icon {
+    @apply py-1.5;
+  }
 
-.pagination-item:first-child {
-  @apply border-l rounded-l-sm;
-}
+  + .pagination-item {
+    @apply border-l;
+  }
 
-.pagination-item:last-child {
-  @apply border-r rounded-r-sm;
-}
+  &:first-child {
+    @apply border-l rounded-l-sm;
+  }
 
-.pagination-item.active {
-  @apply bg-primary text-white;
-}
+  &:last-child {
+    @apply border-r rounded-r-sm;
+  }
+
+  &.active {
+    @apply bg-primary text-white;
+  }
 
-.pagination-item.more {
-  @apply cursor-default hover:text-primary-600;
+  &.more {
+    @apply cursor-default hover:text-primary-600;
+  }
 }
 </style>

package/app/components/SLPillCheckbox.vue

@@ -144,61 +144,61 @@ export default defineComponent({
 
 .pill-checkbox {
   @apply inline-block relative;
-}
 
-.pill-checkbox.pill-checkbox-xs label {
-  @apply py-px text-xs;
-}
+  &.pill-checkbox-secondary-400 input:checked + label {
+    @apply bg-secondary-400 border-secondary-400;
+  }
 
-.pill-checkbox.pill-checkbox-third-500 input:checked + label {
-  @apply bg-third-500 border-third-500;
-}
+  &.pill-checkbox-primary-600 input:checked + label {
+    @apply bg-primary-600 border-primary-600;
+  }
 
-.pill-checkbox.pill-checkbox-third input:checked + label {
-  @apply bg-third border-third;
-}
+  &.pill-checkbox-third-500 input:checked + label {
+    @apply bg-third-500 border-third-500;
+  }
 
-.pill-checkbox.pill-checkbox-primary input:checked + label {
-  @apply bg-primary border-primary;
-}
+  &.pill-checkbox-highlight input:checked + label {
+    @apply bg-highlight border-highlight;
+  }
 
-.pill-checkbox.pill-checkbox-primary-600 input:checked + label {
-  @apply bg-primary-600 border-primary-600;
-}
+  &.pill-checkbox-primary input:checked + label {
+    @apply bg-primary border-primary;
+  }
 
-.pill-checkbox.pill-checkbox-highlight input:checked + label {
-  @apply bg-highlight border-highlight;
-}
+  &.pill-checkbox-blue-1 input:checked + label {
+    @apply bg-blue-1 border-blue-1;
+  }
 
-.pill-checkbox.pill-checkbox-blue-1 input:checked + label {
-  @apply bg-blue-1 border-blue-1;
-}
+  &.pill-checkbox-third input:checked + label {
+    @apply bg-third border-third;
+  }
 
-.pill-checkbox.pill-checkbox-secondary-400 input:checked + label {
-  @apply bg-secondary-400 border-secondary-400;
-}
+  &.pill-checkbox-xs label {
+    @apply py-px text-xs;
+  }
 
-.pill-checkbox input {
-  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
-}
+  input {
+    @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
 
-.pill-checkbox label {
-  @apply inline-flex justify-center items-center relative px-1.75 py-0.75 bg-white border border-primary-300 rounded-full text-sm leading-4.75 text-pgray-2 align-top cursor-pointer;
-}
+    &:disabled + label {
+      @apply bg-white border-pgray-5 text-pgray-4 font-normal cursor-default;
+    }
 
-.pill-checkbox label .icon {
-  @apply hidden ml-2;
-}
+    &:checked + label {
+      @apply bg-white border-white text-white font-bold;
 
-.pill-checkbox input:checked + label {
-  @apply bg-white border-white text-white font-bold;
-}
+      .icon {
+        @apply inline-block;
+      }
+    }
+  }
 
-.pill-checkbox input:checked + label .icon {
-  @apply inline-block;
-}
+  label {
+    @apply inline-flex justify-center items-center relative px-1.75 py-0.75 bg-white border border-primary-300 rounded-full text-sm leading-4.75 text-pgray-2 align-top cursor-pointer;
 
-.pill-checkbox input:disabled + label {
-  @apply bg-white border-pgray-5 text-pgray-4 font-normal cursor-default;
+    .icon {
+      @apply hidden ml-2;
+    }
+  }
 }
 </style>

package/app/components/SLPillLabel.vue

@@ -68,53 +68,53 @@ export default defineComponent({
 .pill-label {
   @apply inline-flex justify-center items-center relative px-1.75 py-0.75;
   @apply bg-white border border-white rounded-full text-sm leading-4.75 text-white font-bold align-top whitespace-nowrap;
-}
 
-.pill-label.pill-label-xs {
-  @apply py-px text-xs;
-}
+  &.pill-label-primary-600 {
+    @apply bg-primary-600 border-primary-600;
+  }
 
-.pill-label.pill-label-sm {
-  @apply py-px text-sm;
-}
+  &.pill-label-third-500 {
+    @apply bg-third-500 border-third-500;
+  }
 
-.pill-label.pill-label-white {
-  @apply text-pgray-2;
-}
+  &.pill-label-third-600 {
+    @apply bg-third-600 border-third-600;
+  }
 
-.pill-label.pill-label-third-500 {
-  @apply bg-third-500 border-third-500;
-}
+  &.pill-label-highlight {
+    @apply bg-highlight border-highlight;
+  }
 
-.pill-label.pill-label-third-600 {
-  @apply bg-third-600 border-third-600;
-}
+  &.pill-label-secondary {
+    @apply bg-secondary border-secondary;
+  }
 
-.pill-label.pill-label-third {
-  @apply bg-third border-third;
-}
+  &.pill-label-primary {
+    @apply bg-primary border-primary;
+  }
 
-.pill-label.pill-label-primary {
-  @apply bg-primary border-primary;
-}
+  &.pill-label-blue-1 {
+    @apply bg-blue-1 border-blue-1;
+  }
 
-.pill-label.pill-label-primary-600 {
-  @apply bg-primary-600 border-primary-600;
-}
+  &.pill-label-white {
+    @apply text-pgray-2;
+  }
 
-.pill-label.pill-label-highlight {
-  @apply bg-highlight border-highlight;
-}
+  &.pill-label-third {
+    @apply bg-third border-third;
+  }
 
-.pill-label.pill-label-blue-1 {
-  @apply bg-blue-1 border-blue-1;
-}
+  &.pill-label-xs {
+    @apply py-px text-xs;
+  }
 
-.pill-label.pill-label-secondary {
-  @apply bg-secondary border-secondary;
-}
+  &.pill-label-sm {
+    @apply py-px text-sm;
+  }
 
-.pill-label .icon {
-  @apply inline-block ml-2;
+  .icon {
+    @apply inline-block ml-2;
+  }
 }
 </style>

package/app/components/SLPopupMenuButton.vue

@@ -142,26 +142,26 @@ export default defineComponent({
 
 .buttons-popup {
   @apply z-60 flex-col items-stretch border border-primary-300 rounded bg-white shadow-md hidden;
-}
 
-.buttons-popup[data-show] {
-  @apply flex;
-}
+  .menu-button-splitter {
+    @apply h-px mx-auto my-1 bg-primary-100;
+    width: calc(100% - var(--spacing) * 4);
+  }
 
-.buttons-popup .menu-button {
-  @apply inline-flex flex-row flex-nowrap items-center justify-center px-2 py-1 space-x-2 text-base text-primary whitespace-nowrap;
-}
+  .menu-button {
+    @apply inline-flex flex-row flex-nowrap items-center justify-center px-2 py-1 space-x-2 text-base text-primary whitespace-nowrap;
 
-.buttons-popup .menu-button:first-child {
-  @apply pt-2;
-}
+    &:first-child {
+      @apply pt-2;
+    }
 
-.buttons-popup .menu-button:last-child {
-  @apply pb-2;
-}
+    &:last-child {
+      @apply pb-2;
+    }
+  }
 
-.buttons-popup .menu-button-splitter {
-  @apply h-px mx-auto my-1 bg-primary-100;
-  width: calc(100% - var(--spacing) * 4);
+  &[data-show] {
+    @apply flex;
+  }
 }
 </style>

package/app/components/SLProfileButton.vue

@@ -179,33 +179,33 @@ export default defineComponent({
 
 .profile-button .toggle-button {
   @apply inline-flex items-center justify-center w-7 h-7 p-0 rounded-full bg-primary-400 text-lg text-white font-bold hover:bg-primary-600 active:bg-primary;
-}
 
-.profile-button .toggle-button.active {
-  @apply bg-primary;
+  &.active {
+    @apply bg-primary;
+  }
 }
 
 .profile-nav-popup {
   @apply z-60 absolute min-w-[10.25rem] p-4 border border-primary bg-primary-50 rounded shadow-popup-lg pointer-events-none invisible;
-}
 
-.profile-nav-popup[data-show] {
-  @apply visible pointer-events-auto;
-}
+  .profile-nav-divider {
+    @apply w-full h-px bg-primary-600;
+  }
 
-.profile-nav-popup-body {
-  @apply flex flex-col space-y-2;
-}
+  .profile-nav-item {
+    @apply inline-flex items-center space-x-2 text-base text-primary-600 hover:text-primary;
+  }
 
-.profile-nav-popup .profile-nav-item {
-  @apply inline-flex items-center space-x-2 text-base text-primary-600 hover:text-primary;
-}
+  .app-version {
+    @apply text-xs text-primary-600 text-right;
+  }
 
-.profile-nav-popup .profile-nav-divider {
-  @apply w-full h-px bg-primary-600;
+  &[data-show] {
+    @apply visible pointer-events-auto;
+  }
 }
 
-.profile-nav-popup .app-version {
-  @apply text-xs text-primary-600 text-right;
+.profile-nav-popup-body {
+  @apply flex flex-col space-y-2;
 }
 </style>

package/app/components/SLProjectShareItem.vue

@@ -75,33 +75,34 @@ export default defineComponent({
 
 .project-share-item {
   @apply flex items-center justify-between space-x-4;
-}
 
-.project-share-item .item-info {
-  @apply grow text-sm text-pgray-2 truncate;
-}
+  .item-actions {
+    @apply grow-0 shrink-0;
 
-.project-share-item .item-actions {
-  @apply grow-0 shrink-0;
-}
+    & :deep(.dropdown-toggle) {
+      @apply py-0.75 border-primary-600 bg-white text-sm;
+    }
+
+    & :deep(.dropdown-menu) {
+      @apply border-primary-600;
+    }
 
-.project-share-item .item-actions :deep(.dropdown-menu) {
-  @apply border-primary-600;
+    .dropdown-item {
+      @apply text-center;
+    }
+  }
+
+  .item-info {
+    @apply grow text-sm text-pgray-2 truncate;
+  }
 }
 
 .project-share-item
   .item-actions
+  &
   :deep(.dropdown-menu)
   .dropdown-list-wrapper
   .dropdown-list {
   @apply min-w-[74px] divide-y divide-primary-100;
 }
-
-.project-share-item .item-actions :deep(.dropdown-toggle) {
-  @apply py-0.75 border-primary-600 bg-white text-sm;
-}
-
-.project-share-item .item-actions .dropdown-item {
-  @apply text-center;
-}
 </style>

package/app/components/SLRadioButton.vue

@@ -72,49 +72,49 @@ export default defineComponent({
 
 .radio-button {
   @apply inline-block relative text-base overflow-hidden;
-}
 
-.radio-button input {
-  @apply absolute -top-10 -left-10;
-}
+  input {
+    @apply absolute -top-10 -left-10;
 
-.radio-button label {
-  @apply relative inline-flex flex-col items-start space-y-1 cursor-pointer;
-}
+    &:not(:checked) + label .radio-button-wrapper .icon-circle {
+      @apply inline-block text-primary;
+    }
 
-.radio-button label .radio-button-wrapper {
-  @apply inline-flex items-center text-base text-pgray-3;
-}
+    &:disabled + label .radio-button-wrapper .icon-dot-circle {
+      @apply text-pgray-3;
+    }
 
-.radio-button label .radio-button-wrapper .icon {
-  @apply hidden;
-}
+    &:checked + label .radio-button-wrapper .icon-dot-circle {
+      @apply inline-block text-primary;
+    }
 
-.radio-button label .radio-button-wrapper span {
-  @apply ml-1 text-base text-pgray-2;
-}
+    &:disabled + label .radio-button-wrapper .icon-circle {
+      @apply text-pgray-3;
+    }
 
-.radio-button label .radio-button-desc {
-  @apply pl-5 text-xs text-pgray-2;
-}
+    &:disabled + label .radio-button-wrapper span {
+      @apply text-pgray-3;
+    }
+  }
 
-.radio-button input:not(:checked) + label .radio-button-wrapper .icon-circle {
-  @apply inline-block text-primary;
-}
+  label {
+    @apply relative inline-flex flex-col items-start space-y-1 cursor-pointer;
 
-.radio-button input:checked + label .radio-button-wrapper .icon-dot-circle {
-  @apply inline-block text-primary;
-}
+    .radio-button-wrapper {
+      @apply inline-flex items-center text-base text-pgray-3;
 
-.radio-button input:disabled + label .radio-button-wrapper span {
-  @apply text-pgray-3;
-}
+      .icon {
+        @apply hidden;
+      }
 
-.radio-button input:disabled + label .radio-button-wrapper .icon-circle {
-  @apply text-pgray-3;
-}
+      span {
+        @apply ml-1 text-base text-pgray-2;
+      }
+    }
 
-.radio-button input:disabled + label .radio-button-wrapper .icon-dot-circle {
-  @apply text-pgray-3;
+    .radio-button-desc {
+      @apply pl-5 text-xs text-pgray-2;
+    }
+  }
 }
 </style>

package/app/components/SLRadioButtonGroup.vue

@@ -95,10 +95,10 @@ export default defineComponent({
 
 .radio-button-group .form-control {
   @apply flex flex-col space-y-1;
-}
 
-.radio-button-group .form-control.inline {
-  @apply flex flex-row flex-wrap space-x-6 space-y-0;
+  &.inline {
+    @apply flex flex-row flex-wrap space-x-6 space-y-0;
+  }
 }
 
 .radio-button-group .invalid-feedback {
@@ -111,9 +111,9 @@ export default defineComponent({
 
 .radio-button-group--lg .form-control .radio-button label {
   @apply text-sm;
-}
 
-.radio-button-group--lg .form-control .radio-button label span {
-  @apply ml-2 text-sm;
+  span {
+    @apply ml-2 text-sm;
+  }
 }
 </style>