@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLAlertModal.vue

@@ -79,29 +79,29 @@ export default defineComponent({
 
 .alert-modal {
   @apply z-60;
-}
 
-.alert-modal .modal-backdrop {
-  @apply bg-white/40 backdrop-blur-[5px];
-}
+  .modal-body-content {
+    @apply text-base leading-6 text-pgray-2 text-center space-y-4;
 
-.alert-modal .modal-backdrop.show {
-  @apply bg-white/40;
-}
+    .icon {
+      @apply text-7p17xl;
+    }
 
-.alert-modal .modal-body-content {
-  @apply text-base leading-6 text-pgray-2 text-center space-y-4;
-}
+    p {
+      @apply whitespace-pre-wrap;
+    }
+  }
 
-.alert-modal .modal-body-content .icon {
-  @apply text-7p17xl;
-}
+  .modal-backdrop {
+    @apply bg-white/40 backdrop-blur-[5px];
 
-.alert-modal .modal-body-content p {
-  @apply whitespace-pre-wrap;
-}
+    &.show {
+      @apply bg-white/40;
+    }
+  }
 
-.alert-modal .modal-footer {
-  @apply flex justify-center;
+  .modal-footer {
+    @apply flex justify-center;
+  }
 }
 </style>

package/app/components/SLButton.vue

@@ -120,198 +120,186 @@ export default defineComponent({
 
 .btn {
   @apply relative inline-flex items-center justify-center p-1.75 border border-transparent rounded bg-transparent text-base leading-[1.3125] focus:outline-none;
-}
-
-.btn.btn-lg {
-  @apply px-7.75;
-}
-
-.btn.btn-md {
-  @apply px-3.75;
-}
-
-.btn.btn-sm {
-  @apply py-0.75 px-1.75;
-}
 
-.btn.btn-sm .btn-content {
-  @apply space-x-1;
-}
+  &.btn-lg {
+    @apply px-7.75;
+  }
 
-.btn.btn-xs {
-  @apply py-0.75 px-1.75 text-xs;
-}
+  &.btn-md {
+    @apply px-3.75;
+  }
 
-.btn.btn-xs .btn-content {
-  @apply space-x-1;
-}
+  &.btn-sm {
+    @apply py-0.75 px-1.75;
+  }
 
-.btn.btn-xxs {
-  @apply p-0.75 text-sm;
-}
+  &.btn-xs {
+    @apply py-0.75 px-1.75 text-xs;
+  }
 
-.btn.btn-xxs .btn-content {
-  @apply space-x-1;
-}
+  &.btn-xxs {
+    @apply p-0.75 text-sm;
+  }
 
-.btn.btn-xxs .btn-content .icon.btn-icon {
-  @apply text-sm leading-none;
+  &.loading {
+    @apply bg-primary-200 border-primary-200 cursor-default;
+  }
 }
 
 .btn-white {
   @apply bg-white border-white text-pgray-2 hover:bg-white hover:border-white;
-}
 
-.btn-white.btn-outline {
-  @apply text-pgray-2 hover:text-pgray-2;
-}
+  &.btn-outline {
+    @apply text-pgray-2 hover:text-pgray-2;
+  }
 
-.btn-white .btn-loading .loading div {
-  border-color: white transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: white transparent transparent transparent;
+  }
 }
 
 .btn-primary {
   @apply bg-primary border-primary text-white hover:bg-primary-800 hover:border-primary-800;
-}
 
-.btn-primary.btn-outline {
-  @apply text-primary hover:text-primary-800;
-}
+  &.btn-outline {
+    @apply text-primary hover:text-primary-800;
+  }
 
-.btn-primary .btn-loading .loading div {
-  border-color: var(--color-primary) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-primary) transparent transparent transparent;
+  }
 }
 
 .btn-primary-600 {
   @apply bg-primary-600 border-primary-600 text-white hover:bg-primary hover:border-primary;
-}
 
-.btn-primary-600.btn-outline {
-  @apply text-primary-600 hover:text-primary;
-}
+  &.btn-outline {
+    @apply text-primary-600 hover:text-primary;
+  }
 
-.btn-primary-600 .btn-loading .loading div {
-  border-color: var(--color-primary-600) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-primary-600) transparent transparent transparent;
+  }
 }
 
 .btn-highlight-500 {
   @apply bg-highlight-500 border-highlight-500 text-white hover:bg-highlight-400 hover:text-white hover:border-highlight-400;
-}
 
-.btn-highlight-500.btn-outline {
-  @apply text-highlight-500 hover:text-highlight-400;
-}
+  &.btn-outline {
+    @apply text-highlight-500 hover:text-highlight-400;
+  }
 
-.btn-highlight-500 .btn-loading .loading div {
-  border-color: var(--color-highlight-400) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-highlight-400) transparent transparent transparent;
+  }
 }
 
 .btn-third {
   @apply bg-third border-third text-white hover:bg-third-600 hover:text-white hover:border-third-600;
-}
 
-.btn-third.btn-outline {
-  @apply text-third hover:text-third-600;
-}
+  &.btn-outline {
+    @apply text-third hover:text-third-600;
+  }
 
-.btn-third .btn-loading .loading div {
-  border-color: var(--color-third-600) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-third-600) transparent transparent transparent;
+  }
 }
 
 .btn-danger {
   @apply bg-danger border-danger text-white hover:bg-danger-light hover:border-danger-light;
-}
 
-.btn-danger.btn-outline {
-  @apply text-danger hover:text-danger-light;
-}
+  &.btn-outline {
+    @apply text-danger hover:text-danger-light;
+  }
 
-.btn-danger .btn-loading .loading div {
-  border-color: var(--color-danger-light) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-danger-light) transparent transparent transparent;
+  }
 }
 
 .btn-pgray-5 {
   @apply bg-pgray-5 border-pgray-5 text-pgray-2 hover:bg-pgray-4p5 hover:border-pgray-4p5;
-}
 
-.btn-pgray-5.btn-outline {
-  @apply text-pgray-5 hover:text-pgray-4p5;
-}
+  &.btn-outline {
+    @apply text-pgray-5 hover:text-pgray-4p5;
+  }
 
-.btn-pgray-5 .btn-loading .loading div {
-  border-color: var(--color-pgray-4p5) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-pgray-4p5) transparent transparent transparent;
+  }
 }
 
 .btn-pgray-2 {
   @apply bg-pgray-2 border-pgray-2 text-white hover:bg-pgray-3 hover:border-pgray-3;
-}
 
-.btn-pgray-2.btn-outline {
-  @apply text-pgray-2 hover:text-pgray-3;
-}
+  &.btn-outline {
+    @apply text-pgray-2 hover:text-pgray-3;
+  }
 
-.btn-pgray-2 .btn-loading .loading div {
-  border-color: var(--color-pgray-3) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-pgray-3) transparent transparent transparent;
+  }
 }
 
 .btn-secondary {
   @apply bg-secondary border-secondary text-white hover:bg-secondary-800 hover:border-secondary-800;
-}
 
-.btn-secondary.btn-outline {
-  @apply text-secondary hover:text-secondary-800;
-}
+  &.btn-outline {
+    @apply text-secondary hover:text-secondary-800;
+  }
 
-.btn-secondary .btn-loading .loading div {
-  border-color: var(--color-secondary-500) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-secondary-500) transparent transparent transparent;
+  }
 }
 
 .btn-secondary-200 {
   @apply bg-secondary-200 border-secondary-200 text-secondary hover:bg-secondary hover:border-secondary hover:text-white;
-}
 
-.btn-secondary-200.btn-outline {
-  @apply text-secondary-200 hover:text-secondary;
-}
+  &.btn-outline {
+    @apply text-secondary-200 hover:text-secondary;
+  }
 
-.btn-secondary-200 .btn-loading .loading div {
-  border-color: var(--color-secondary-500) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-secondary-500) transparent transparent transparent;
+  }
 }
 
 .btn-secondary-600 {
   @apply bg-secondary-600 border-secondary-600 text-white hover:bg-secondary hover:border-secondary;
-}
 
-.btn-secondary-600.btn-outline {
-  @apply text-secondary-600 hover:text-secondary;
-}
+  &.btn-outline {
+    @apply text-secondary-600 hover:text-secondary;
+  }
 
-.btn-secondary-600 .btn-loading .loading div {
-  border-color: var(--color-secondary-500) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-secondary-500) transparent transparent transparent;
+  }
 }
 
 .btn-blue-1 {
   @apply bg-secondary border-secondary text-white hover:bg-blue-1 hover:border-blue-1;
-}
 
-.btn-blue-1.btn-outline {
-  @apply text-blue-1 hover:text-blue-1;
-}
+  &.btn-outline {
+    @apply text-blue-1 hover:text-blue-1;
+  }
 
-.btn-blue-1 .btn-loading .loading div {
-  border-color: var(--color-blue-1) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-blue-1) transparent transparent transparent;
+  }
 }
 
 .btn-insight-title-line {
   @apply bg-insight-title-line border-insight-title-line text-white hover:bg-insight-title-line hover:border-insight-title-line;
-}
 
-.btn-insight-title-line.btn-outline {
-  @apply text-insight-title hover:text-insight-title;
-}
+  &.btn-outline {
+    @apply text-insight-title hover:text-insight-title;
+  }
 
-.btn-insight-title-line .btn-loading .loading div {
-  border-color: var(--color-blue-1) transparent transparent transparent;
+  .btn-loading .loading div {
+    border-color: var(--color-blue-1) transparent transparent transparent;
+  }
 }
 
 .btn-outline {
@@ -320,57 +308,29 @@ export default defineComponent({
 
 .btn-disabled {
   @apply bg-pgray-5 border-pgray-5 text-white cursor-default hover:bg-pgray-5 hover:border-pgray-5 hover:text-white;
-}
-
-.btn-disabled.btn-outline {
-  @apply bg-white border-pgray-5 text-pgray-5 hover:bg-white hover:border-pgray-5 hover:text-pgray-5;
-}
-
-.btn-disabled.btn-icon {
-  @apply bg-transparent border-transparent text-pgray-5 hover:bg-transparent hover:border-transparent hover:text-pgray-5;
-}
-
-.btn.loading {
-  @apply bg-primary-200 border-primary-200 cursor-default;
-}
 
-.btn.loading .btn-content {
-  @apply opacity-0;
-}
+  &.btn-outline {
+    @apply bg-white border-pgray-5 text-pgray-5 hover:bg-white hover:border-pgray-5 hover:text-pgray-5;
+  }
 
-.btn.loading .btn-loading {
-  @apply block;
+  &.btn-icon {
+    @apply bg-transparent border-transparent text-pgray-5 hover:bg-transparent hover:border-transparent hover:text-pgray-5;
+  }
 }
 
 .btn-content {
   @apply inline-flex items-center space-x-1;
-}
 
-.btn-content .icon.btn-icon {
-  @apply inline-flex text-xs leading-none;
+  .icon.btn-icon {
+    @apply inline-flex text-xs leading-none;
+  }
 }
 
 .btn-loading {
   @apply absolute top-1/2 left-1/2 w-4 h-4 -translate-x-1/2 -translate-y-1/2 pointer-events-none hidden;
-}
-
-.btn-loading .loading {
-  @apply relative inline-block w-4 h-4;
-}
-
-.btn-loading .loading div {
-  @apply absolute block w-4 h-4 border-2 rounded-full animate-loading;
-}
-
-.btn-loading .loading div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-
-.btn-loading .loading div:nth-child(2) {
-  animation-delay: -0.3s;
-}
 
-.btn-loading .loading div:nth-child(3) {
-  animation-delay: -0.15s;
+  .loading {
+    @apply relative inline-block w-4 h-4;
+  }
 }
 </style>

package/app/components/SLCalendarButton.vue

@@ -245,41 +245,41 @@ export default defineComponent({
 
 .calendar-button {
   @apply inline-block;
-}
 
-.calendar-button.calendar-button--compact .toggle-button {
-  @apply h-[37px];
-}
+  &.calendar-button--compact .toggle-button {
+    @apply h-[37px];
+  }
 
-.calendar-button .toggle-button {
-  @apply inline-flex flex-col justify-center h-[58px] px-2.75 space-y-1 border border-white/20 rounded bg-white text-sm leading-[1.3125] text-pgray-2;
-}
+  .toggle-button {
+    @apply inline-flex flex-col justify-center h-[58px] px-2.75 space-y-1 border border-white/20 rounded bg-white text-sm leading-[1.3125] text-pgray-2;
 
-.calendar-button .toggle-button .date-range {
-  @apply flex items-center;
-}
+    .compare-date-range {
+      @apply pl-1 space-x-2 text-sm text-pgray-3;
+    }
 
-.calendar-button .toggle-button .date-range .icon {
-  @apply grow-0 shrink-0 text-base text-primary leading-none;
-}
+    .date-range {
+      @apply flex items-center;
 
-.calendar-button .toggle-button .date-range .divider {
-  @apply grow-0 shrink-0 block w-px h-4.75 ml-2 mr-1.75 bg-primary;
-}
+      .range-days {
+        @apply block ml-0.5 px-1 py-0.5 bg-primary-50 rounded text-xs text-primary;
+      }
 
-.calendar-button .toggle-button .date-range .range-days {
-  @apply block ml-0.5 px-1 py-0.5 bg-primary-50 rounded text-xs text-primary;
-}
+      .divider {
+        @apply grow-0 shrink-0 block w-px h-4.75 ml-2 mr-1.75 bg-primary;
+      }
 
-.calendar-button .toggle-button .compare-date-range {
-  @apply pl-1 space-x-2 text-sm text-pgray-3;
+      .icon {
+        @apply grow-0 shrink-0 text-base text-primary leading-none;
+      }
+    }
+  }
 }
 
 .calendar-popup {
   @apply z-60 absolute invisible pointer-events-none;
-}
 
-.calendar-popup[data-show] {
-  @apply visible pointer-events-auto;
+  &[data-show] {
+    @apply visible pointer-events-auto;
+  }
 }
 </style>

package/app/components/SLCard.vue

@@ -71,69 +71,69 @@ export default defineComponent({
 
 .tabs .card {
   @apply rounded-lg border-primary-300 shadow-md;
-}
 
-.tabs .card .card {
-  @apply border-0 rounded-none shadow-none;
+  .card {
+    @apply border-0 rounded-none shadow-none;
+  }
 }
 
 .card {
   @apply p-4 border border-primary-600 rounded bg-white shadow-default;
-}
 
-.card .card-prepend {
-  @apply mb-4;
-}
+  .card-prepend {
+    @apply mb-4;
+  }
 
-.card .card-header {
-  @apply flex justify-between mb-4;
-}
+  .card-header {
+    @apply flex justify-between mb-4;
 
-.card .card-header .card-title {
-  @apply inline-flex flex-col;
-}
+    .card-title-container {
+      @apply inline-flex items-center mb-2 text-lg text-primary;
 
-.card .card-header .card-title-container {
-  @apply inline-flex items-center mb-2 text-lg text-primary;
-}
+      .title-icon {
+        @apply ml-2;
+      }
+    }
 
-.card .card-header .card-title-container .title-icon {
-  @apply ml-2;
-}
+    .card-title-container {
+      @apply mb-0 text-base text-pgray-2;
+    }
 
-.card .card-header .card-title-border {
-  @apply h-0.5 rounded-full bg-highlight-500;
-}
+    .card-title-border {
+      @apply h-0.5 rounded-full bg-highlight-500;
+    }
 
-.card .card-header .card-desc {
-  @apply text-base text-pgray-2;
-}
+    .card-title-border {
+      @apply hidden;
+    }
 
-.card .card-header .card-desc .date-range {
-  @apply ml-2 text-sm text-pgray-3;
-}
+    .inline-info {
+      @apply mt-2 text-sm text-pgray-3;
+    }
 
-.card .card-header .inline-info {
-  @apply mt-2 text-sm text-pgray-3;
-}
+    .card-title {
+      @apply inline-flex flex-col;
+    }
 
-.card .card-body {
-  @apply relative;
-}
+    .card-desc {
+      @apply text-base text-pgray-2;
 
-.card .card-footer {
-  @apply mt-4 pb-2 border-b border-primary-300/30;
-}
+      .date-range {
+        @apply ml-2 text-sm text-pgray-3;
+      }
+    }
+  }
 
-.card {
-  @apply border-primary-300 rounded-lg shadow-md;
-}
+  .card-footer {
+    @apply mt-4 pb-2 border-b border-primary-300/30;
+  }
 
-.card .card-header .card-title-container {
-  @apply mb-0 text-base text-pgray-2;
+  .card-body {
+    @apply relative;
+  }
 }
 
-.card .card-header .card-title-border {
-  @apply hidden;
+.card {
+  @apply border-primary-300 rounded-lg shadow-md;
 }
 </style>