@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLModal.vue

@@ -293,110 +293,110 @@ export default defineComponent({
 
 .modal {
   @apply z-50 fixed top-0 left-0 w-full h-full overflow-hidden;
-}
 
-.modal.modal-centered {
-  @apply flex items-center;
-}
+  .modal-dialog-centered {
+    @apply flex;
+    max-height: calc(100% - (var(--spacing) * 7 * 2));
+  }
 
-.modal .modal-backdrop {
-  @apply absolute top-0 left-0 w-full h-full;
-}
+  .modal-dialog-free {
+    @apply w-auto;
+  }
 
-.modal .modal-backdrop.show {
-  @apply bg-mask/80;
-}
+  .modal-dialog-2xl {
+    @apply max-w-[41rem] lg:max-w-[55.125rem];
+  }
 
-.modal .modal-dialog {
-  @apply relative w-full my-7 mx-auto;
-}
+  .modal-dialog-3xl {
+    @apply max-w-[748px] lg:max-w-[900px];
+  }
 
-.modal .modal-dialog-xs {
-  @apply max-w-[30rem];
-}
+  .modal-dialog-4xl {
+    @apply max-w-[697px] lg:max-w-[924px];
+  }
 
-.modal .modal-dialog-sm {
-  @apply max-w-149.5;
-}
+  .modal-dialog-5xl {
+    @apply max-w-[748px] lg:max-w-[980px];
+  }
 
-.modal .modal-dialog-lg {
-  @apply max-w-[39.75rem];
-}
+  .modal-dialog-xs {
+    @apply max-w-[30rem];
+  }
 
-.modal .modal-dialog-xl {
-  @apply max-w-[39rem] lg:max-w-208;
-}
+  .modal-dialog-sm {
+    @apply max-w-149.5;
+  }
 
-.modal .modal-dialog-2xl {
-  @apply max-w-[41rem] lg:max-w-[55.125rem];
-}
+  .modal-dialog-lg {
+    @apply max-w-[39.75rem];
+  }
 
-.modal .modal-dialog-3xl {
-  @apply max-w-[748px] lg:max-w-[900px];
-}
+  .modal-dialog-xl {
+    @apply max-w-[39rem] lg:max-w-208;
+  }
 
-.modal .modal-dialog-4xl {
-  @apply max-w-[697px] lg:max-w-[924px];
-}
+  .modal-backdrop {
+    @apply absolute top-0 left-0 w-full h-full;
 
-.modal .modal-dialog-5xl {
-  @apply max-w-[748px] lg:max-w-[980px];
-}
+    &.show {
+      @apply bg-mask/80;
+    }
+  }
 
-.modal .modal-dialog-free {
-  @apply w-auto;
-}
+  &.modal-centered {
+    @apply flex items-center;
+  }
 
-.modal .modal-dialog-centered {
-  @apply flex;
-  max-height: calc(100% - (var(--spacing) * 7 * 2));
-}
+  .modal-content {
+    @apply flex flex-col w-full max-h-full rounded-lg bg-white shadow-popup-lg;
 
-.modal .modal-content {
-  @apply flex flex-col w-full max-h-full rounded-lg bg-white shadow-popup-lg;
-}
+    .modal-header-right {
+      @apply flex items-baseline ml-6;
+    }
 
-.modal .modal-content .modal-header + .modal-body {
-  @apply rounded-t-none;
-}
+    .modal-title-notice {
+      @apply text-xs font-normal;
+    }
 
-.modal .modal-content .modal-header {
-  @apply grow-0 shrink-0 flex items-center justify-between py-2 px-4 bg-primary rounded-t-lg text-xl leading-6.75 text-white;
-}
+    .modal-header-left {
+      @apply flex items-center;
+    }
 
-.modal .modal-content .modal-header-left {
-  @apply flex items-center;
-}
+    .modal-header {
+      @apply grow-0 shrink-0 flex items-center justify-between py-2 px-4 bg-primary rounded-t-lg text-xl leading-6.75 text-white;
 
-.modal .modal-content .modal-header-right {
-  @apply flex items-baseline ml-6;
-}
+      + .modal-body {
+        @apply rounded-t-none;
+      }
+    }
 
-.modal .modal-content .modal-title {
-  @apply inline-flex items-baseline space-x-2 font-normal;
-}
+    .close-button {
+      @apply inline-flex text-base text-white;
 
-.modal .modal-content .modal-title-notice {
-  @apply text-xs font-normal;
-}
+      .icon {
+        @apply inline-flex;
+      }
+    }
 
-.modal .modal-content .close-button {
-  @apply inline-flex text-base text-white;
-}
+    .modal-title {
+      @apply inline-flex items-baseline space-x-2 font-normal;
+    }
+  }
 
-.modal .modal-content .close-button .icon {
-  @apply inline-flex;
-}
+  .modal-dialog {
+    @apply relative w-full my-7 mx-auto;
+  }
 
-.modal .modal-body {
-  @apply grow relative w-full pt-4 pr-4 pl-4 bg-white rounded-lg;
-}
+  .modal-footer {
+    @apply grow-0 shrink-0 p-6 rounded-b-lg;
+  }
 
-.modal .modal-body:last-child {
-  @apply pb-4;
-}
+  .modal-body {
+    @apply grow relative w-full pt-4 pr-4 pl-4 bg-white rounded-lg;
 
-.modal .modal-footer {
-  @apply grow-0 shrink-0 p-6 rounded-b-lg;
+    &:last-child {
+      @apply pb-4;
+    }
+  }
 }
 </style>

package/app/components/SLMonthCalendarButton.vue

@@ -339,50 +339,66 @@ export default defineComponent({
 
 .month-calendar-button-toggle {
   @apply inline-flex items-center justify-center min-w-[163px] min-h-[58px] py-1 px-4 bg-white border border-primary-500 rounded shadow-default;
-}
 
-.month-calendar-button-toggle .toggle-wrapper {
-  @apply inline-flex items-center;
-}
+  .toggle-wrapper {
+    @apply inline-flex items-center;
 
-.month-calendar-button-toggle .toggle-wrapper .icon {
-  @apply text-base leading-none text-primary;
-}
+    .toggle-divide {
+      @apply self-stretch w-px ml-4 mr-3.75 bg-primary rounded-full;
+    }
 
-.month-calendar-button-toggle .toggle-wrapper .toggle-divide {
-  @apply self-stretch w-px ml-4 mr-3.75 bg-primary rounded-full;
-}
+    .button-title {
+      @apply space-y-1 text-end;
 
-.month-calendar-button-toggle .toggle-wrapper .button-title {
-  @apply space-y-1 text-end;
-}
+      .current-month {
+        @apply text-lg text-pgray-2;
+      }
 
-.month-calendar-button-toggle .toggle-wrapper .button-title .current-month {
-  @apply text-lg text-pgray-2;
-}
+      .compare-month {
+        @apply text-xs text-pgray-3;
+      }
+    }
 
-.month-calendar-button-toggle .toggle-wrapper .button-title .compare-month {
-  @apply text-xs text-pgray-3;
+    .icon {
+      @apply text-base leading-none text-primary;
+    }
+  }
 }
 
 .month-calendar-popup {
   @apply z-50 p-3.75 space-y-4 bg-white border border-primary-100 rounded-lg shadow-md hidden;
-}
 
-.month-calendar-popup[data-show] {
-  @apply block;
-}
+  .popup-header {
+    @apply text-center;
 
-.month-calendar-popup .popup-header {
-  @apply text-center;
-}
+    .compare-switch {
+      @apply inline-flex items-center space-x-px;
 
-.month-calendar-popup .popup-header .compare-switch {
-  @apply inline-flex items-center space-x-px;
-}
+      .compare-switch-button {
+        @apply block py-0.75 px-3.75 bg-white border border-primary-300 text-sm text-insight-title;
+      }
+    }
+  }
+
+  .popup-footer {
+    @apply pt-4 space-x-6 border-t border-pgray-4 text-center;
+
+    .cancel-button {
+      @apply text-base text-pgray-3;
+    }
+  }
 
-.month-calendar-popup .popup-header .compare-switch .compare-switch-button {
-  @apply block py-0.75 px-3.75 bg-white border border-primary-300 text-sm text-insight-title;
+  .popup-body {
+    @apply flex;
+
+    .calendar-divide {
+      @apply w-px ml-4 mr-3.75 bg-pgray-4;
+    }
+  }
+
+  &[data-show] {
+    @apply block;
+  }
 }
 
 .month-calendar-popup
@@ -405,20 +421,4 @@ export default defineComponent({
   .compare-switch-button.selected {
   @apply bg-insight-title border-insight-title text-white;
 }
-
-.month-calendar-popup .popup-body {
-  @apply flex;
-}
-
-.month-calendar-popup .popup-body .calendar-divide {
-  @apply w-px ml-4 mr-3.75 bg-pgray-4;
-}
-
-.month-calendar-popup .popup-footer {
-  @apply pt-4 space-x-6 border-t border-pgray-4 text-center;
-}
-
-.month-calendar-popup .popup-footer .cancel-button {
-  @apply text-base text-pgray-3;
-}
 </style>

package/app/components/SLMonthPicker.vue

@@ -110,47 +110,45 @@ export default defineComponent({
 
 .month-picker {
   @apply w-47.5 space-y-4;
-}
 
-.month-picker--insight-title .month-select-wrapper .month-button.selected {
-  @apply bg-insight-title;
-}
+  .month-select-wrapper {
+    @apply flex flex-wrap -my-2 -mx-4;
 
-.month-picker--primary-600 .month-select-wrapper .month-button.selected {
-  @apply bg-primary-600;
-}
+    .month-button {
+      @apply flex items-center justify-center w-10.5 h-6.75 my-2 mx-4 bg-white rounded text-sm text-pgray-3 hover:bg-primary-300 hover:text-white;
 
-.month-picker .year-select {
-  @apply flex items-center justify-center space-x-10;
-}
+      &.selected {
+        @apply text-white;
+      }
 
-.month-picker .year-select .prev-button,
-.month-picker .year-select .next-button {
-  @apply inline-flex items-center text-xs text-pgray-3;
-}
+      &.disabled {
+        @apply bg-white text-pgray-5;
+      }
+    }
+  }
 
-.month-picker .year-select .prev-button.disabled,
-.month-picker .year-select .next-button.disabled {
-  @apply text-pgray-5 cursor-default;
-}
+  .year-select {
+    @apply flex items-center justify-center space-x-10;
 
-.month-picker .year-select .year {
-  @apply text-sm text-pgray-2;
-}
+    .prev-button, .next-button {
+      @apply inline-flex items-center text-xs text-pgray-3;
 
-.month-picker .month-select-wrapper {
-  @apply flex flex-wrap -my-2 -mx-4;
-}
+      &.disabled, &.disabled {
+        @apply text-pgray-5 cursor-default;
+      }
+    }
 
-.month-picker .month-select-wrapper .month-button {
-  @apply flex items-center justify-center w-10.5 h-6.75 my-2 mx-4 bg-white rounded text-sm text-pgray-3 hover:bg-primary-300 hover:text-white;
+    .year {
+      @apply text-sm text-pgray-2;
+    }
+  }
 }
 
-.month-picker .month-select-wrapper .month-button.selected {
-  @apply text-white;
+.month-picker--insight-title .month-select-wrapper .month-button.selected {
+  @apply bg-insight-title;
 }
 
-.month-picker .month-select-wrapper .month-button.disabled {
-  @apply bg-white text-pgray-5;
+.month-picker--primary-600 .month-select-wrapper .month-button.selected {
+  @apply bg-primary-600;
 }
 </style>

package/app/components/SLMultiEmailInput.vue

@@ -610,34 +610,42 @@ export default defineComponent({
 
 .multi-email-input {
   @apply flex flex-col;
-}
 
-.multi-email-input.collapsable .multi-email-input-header {
-  @apply cursor-pointer;
-}
+  &.collapsed .multi-email-input-header .right-block .icon {
+    @apply rotate-0;
+  }
 
-.multi-email-input.collapsable .multi-email-input-header .right-block {
-  @apply flex;
-}
+  &.collapsable .multi-email-input-header {
+    @apply cursor-pointer;
+
+    .right-block {
+      @apply flex;
+    }
+  }
 
-.multi-email-input.collapsed .multi-email-input-header .right-block .icon {
-  @apply rotate-0;
+  .multi-email-input-actions {
+    @apply grow-0 shrink-0;
+
+    .btn {
+      @apply text-sm;
+    }
+  }
 }
 
 .multi-email-input-header {
   @apply flex items-center justify-between mb-2 cursor-default;
-}
 
-.multi-email-input-header .left-block {
-  @apply grow-0 shrink-0 flex items-center text-base text-pgray-2;
-}
+  .right-block {
+    @apply grow-0 shrink-0 text-xs hidden;
 
-.multi-email-input-header .right-block {
-  @apply grow-0 shrink-0 text-xs hidden;
-}
+    .icon {
+      @apply transition-transform rotate-180;
+    }
+  }
 
-.multi-email-input-header .right-block .icon {
-  @apply transition-transform rotate-180;
+  .left-block {
+    @apply grow-0 shrink-0 flex items-center text-base text-pgray-2;
+  }
 }
 
 .multi-email-input-body-wrapper {
@@ -646,30 +654,34 @@ export default defineComponent({
 
 .multi-email-input-body .emails-input {
   @apply grow flex items-center p-1.75 space-x-4 bg-white border border-primary-500 rounded overflow-hidden;
-}
 
-.multi-email-input-body .emails-input-wrapper {
-  @apply grow space-y-2 overflow-hidden;
-}
+  .emails-list-wrapper {
+    @apply flex flex-col items-start space-y-2 overflow-hidden;
 
-.multi-email-input-body .emails-input .emails-list {
-  @apply max-h-[97px];
-}
+    .email-item-status {
+      @apply grow-0 shrink-0;
+    }
 
-.multi-email-input-body .emails-input .emails-list-wrapper {
-  @apply flex flex-col items-start space-y-2 overflow-hidden;
-}
+    .email-item-email {
+      @apply grow truncate;
+    }
 
-.multi-email-input-body .emails-input .emails-list-wrapper .email-item {
-  @apply inline-flex items-center justify-start max-w-full px-1.75 py-0.5 space-x-2 bg-white border border-primary-300 rounded-full text-base text-pgray-2;
-}
+    .email-item {
+      @apply inline-flex items-center justify-start max-w-full px-1.75 py-0.5 space-x-2 bg-white border border-primary-300 rounded-full text-base text-pgray-2;
+    }
+  }
+
+  .emails-list {
+    @apply max-h-[97px];
+  }
 
-.multi-email-input-body .emails-input .emails-list-wrapper .email-item-email {
-  @apply grow truncate;
+  textarea {
+    @apply grow-0 shrink-0 block w-full p-0 border-0 bg-white text-sm text-pgray-2 resize-none focus:outline-none;
+  }
 }
 
-.multi-email-input-body .emails-input .emails-list-wrapper .email-item-status {
-  @apply grow-0 shrink-0;
+.multi-email-input-body .emails-input-wrapper {
+  @apply grow space-y-2 overflow-hidden;
 }
 
 .multi-email-input-body
@@ -703,57 +715,45 @@ export default defineComponent({
   @apply text-xs;
 }
 
-.multi-email-input-body .emails-input textarea {
-  @apply grow-0 shrink-0 block w-full p-0 border-0 bg-white text-sm text-pgray-2 resize-none focus:outline-none;
-}
-
 .multi-email-input-body .multi-email-input-role {
   @apply grow-0 shrink-0 flex;
-}
 
-.multi-email-input-body .multi-email-input-role :deep(.dropdown-toggle) {
-  @apply text-sm;
-}
-
-.multi-email-input .multi-email-input-actions {
-  @apply grow-0 shrink-0;
-}
-
-.multi-email-input .multi-email-input-actions .btn {
-  @apply text-sm;
+  & :deep(.dropdown-toggle) {
+    @apply text-sm;
+  }
 }
 
 .multi-email-input-autocomplete {
   @apply z-50 max-h-[116px] p-1 bg-white rounded shadow-default hidden;
-}
 
-.multi-email-input-autocomplete[data-show] {
-  @apply flex;
-}
+  & :deep(.swiper-scrollbar-drag) {
+    @apply bg-primary-300;
+  }
 
-.multi-email-input-autocomplete .swiper {
-  @apply w-full;
-}
+  .autotcomplete-item {
+    @apply block w-full py-1 px-2 bg-white text-sm text-pgray-2;
 
-.multi-email-input-autocomplete .swiper-slide {
-  @apply h-auto;
-}
+    &:hover,
+    &.focused {
+      @apply bg-primary-100;
+    }
+  }
 
-.multi-email-input-autocomplete .swiper-scrollbar {
-  @apply top-0 right-0 h-full bg-transparent;
-}
+  .swiper-scrollbar {
+    @apply top-0 right-0 h-full bg-transparent;
+  }
 
-.multi-email-input-autocomplete :deep(.swiper-scrollbar-drag) {
-  @apply bg-primary-300;
-}
+  .swiper-slide {
+    @apply h-auto;
+  }
 
-.multi-email-input-autocomplete .autotcomplete-item {
-  @apply block w-full py-1 px-2 bg-white text-sm text-pgray-2;
-}
+  &[data-show] {
+    @apply flex;
+  }
 
-.multi-email-input-autocomplete .autotcomplete-item:hover,
-.multi-email-input-autocomplete .autotcomplete-item.focused {
-  @apply bg-primary-100;
+  .swiper {
+    @apply w-full;
+  }
 }
 
 .dropdown-menu.multi-email-input-role-dropdown-menu {

package/app/components/SLMultiSelect.vue

@@ -90,43 +90,41 @@ export default defineComponent({
 
 .custom-multi-select {
   @apply px-3 py-1 border border-primary-500 rounded;
-}
 
-.custom-multi-select .options-wrapper {
-  @apply relative overflow-auto;
-}
+  .options-wrapper {
+    @apply relative overflow-auto;
+  }
 
-.custom-multi-select .options {
-  @apply flex flex-col;
-}
+  .options {
+    @apply flex flex-col;
 
-.custom-multi-select .options .option-button {
-  @apply flex justify-between items-center px-2 py-1 bg-white shadow-inline hover:bg-primary-25;
-}
+    .option-button {
+      @apply flex justify-between items-center px-2 py-1 bg-white shadow-inline hover:bg-primary-25;
 
-.custom-multi-select .options .option-button:hover .btn {
-  @apply opacity-100;
-}
+      &.selected:hover .btn, &.selected:active .btn, &.selected:focus .btn {
+        @apply bg-primary;
+      }
 
-.custom-multi-select .options .option-button.selected .option-label {
-  @apply text-primary font-bold;
-}
+      &.selected .option-label {
+        @apply text-primary font-bold;
+      }
 
-.custom-multi-select .options .option-button.selected .btn {
-  @apply bg-primary-600 opacity-100;
-}
+      &.selected .btn {
+        @apply bg-primary-600 opacity-100;
+      }
 
-.custom-multi-select .options .option-button.selected:hover .btn,
-.custom-multi-select .options .option-button.selected:active .btn,
-.custom-multi-select .options .option-button.selected:focus .btn {
-  @apply bg-primary;
-}
+      .option-label {
+        @apply grow inline-block text-base leading-[1.3125] text-pgray-2 truncate;
+      }
 
-.custom-multi-select .options .option-button .option-label {
-  @apply grow inline-block text-base leading-[1.3125] text-pgray-2 truncate;
-}
+      &:hover .btn {
+        @apply opacity-100;
+      }
 
-.custom-multi-select .options .option-button .btn {
-  @apply grow-0 shrink-0 inline-block px-2 py-1 bg-primary rounded text-base leading-[1.3125] text-white opacity-0;
+      .btn {
+        @apply grow-0 shrink-0 inline-block px-2 py-1 bg-primary rounded text-base leading-[1.3125] text-white opacity-0;
+      }
+    }
+  }
 }
 </style>

package/app/components/SLPageModal.vue

@@ -59,11 +59,11 @@ export default defineComponent({
 
 .page-modal {
   @apply fixed top-0 left-0 w-full h-full overflow-auto;
-}
 
-.page-modal .modal-dialog {
-  @apply flex items-center justify-center relative m-8 rounded-lg bg-white shadow-popup-lg overflow-hidden;
-  width: calc(100% - var(--spacing) * 8 * 2);
-  height: calc(100% - var(--spacing) * 8 * 2);
+  .modal-dialog {
+    @apply flex items-center justify-center relative m-8 rounded-lg bg-white shadow-popup-lg overflow-hidden;
+    width: calc(100% - var(--spacing) * 8 * 2);
+    height: calc(100% - var(--spacing) * 8 * 2);
+  }
 }
 </style>