@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLFileInput.vue

@@ -83,26 +83,26 @@ export default defineComponent({
 
 .custom-file-input {
   @apply inline-flex items-center space-x-3.5;
-}
 
-.custom-file-input .file-button {
-  @apply relative overflow-hidden;
-}
+  .file-button {
+    @apply relative overflow-hidden;
 
-.custom-file-input .file-button.uploaded label {
-  @apply bg-white border text-primary hover:text-primary-600 hover:bg-white;
-}
+    input[type="file"] {
+      @apply absolute top-0 left-0;
+    }
 
-.custom-file-input .file-button label {
-  @apply relative inline-block py-1.75 px-3.75 border border-transparent rounded bg-transparent text-base leading-[1.3125] space-x-2 cursor-pointer focus:outline-none;
-  @apply bg-primary border-primary text-white hover:bg-primary-600 hover:border-primary-600;
-}
+    &.uploaded label {
+      @apply bg-white border text-primary hover:text-primary-600 hover:bg-white;
+    }
 
-.custom-file-input .file-button input[type="file"] {
-  @apply absolute top-0 left-0;
-}
+    label {
+      @apply relative inline-block py-1.75 px-3.75 border border-transparent rounded bg-transparent text-base leading-[1.3125] space-x-2 cursor-pointer focus:outline-none;
+      @apply bg-primary border-primary text-white hover:bg-primary-600 hover:border-primary-600;
+    }
+  }
 
-.custom-file-input .filename {
-  @apply p-1.75 border border-primary-300 rounded bg-primary-50 text-base text-pgray-2;
+  .filename {
+    @apply p-1.75 border border-primary-300 rounded bg-primary-50 text-base text-pgray-2;
+  }
 }
 </style>

package/app/components/SLGenderAgeSelect.vue

@@ -239,61 +239,61 @@ export default defineComponent({
 
 .gender-age-select {
   @apply relative inline-flex;
-}
 
-.gender-age-select .toggle-button {
-  @apply inline-flex items-center justify-between w-full p-1.75 border border-primary-500 rounded space-x-4 text-sm text-pgray-2;
-}
+  .toggle-button {
+    @apply inline-flex items-center justify-between w-full p-1.75 border border-primary-500 rounded space-x-4 text-sm text-pgray-2;
 
-.gender-age-select .toggle-button .toggle-title {
-  @apply grow truncate;
-}
+    .toggle-title {
+      @apply grow truncate;
+    }
 
-.gender-age-select .toggle-button .icon {
-  @apply grow-0 shrink-0 text-xs leading-none;
+    .icon {
+      @apply grow-0 shrink-0 text-xs leading-none;
+    }
+  }
 }
 
 .options-popup {
   @apply z-60 absolute flex max-h-[196px] p-2.75 bg-white border border-primary-500 rounded shadow-default pointer-events-none invisible;
-}
 
-.options-popup[data-show] {
-  @apply pointer-events-auto visible;
-}
+  .options-block-gender {
+    @apply grow-0 shrink-0 w-[37%];
+  }
 
-.options-popup .options-block {
-  @apply flex flex-col;
-}
+  .options-block-header {
+    @apply pb-1.75 border-b border-primary text-base text-primary;
+  }
 
-.options-popup .options-block-gender {
-  @apply grow-0 shrink-0 w-[37%];
-}
+  .options-block-body {
+    @apply overflow-hidden;
 
-.options-popup .options-block-age {
-  @apply grow;
-}
+    .options-list {
+      @apply flex flex-col;
 
-.options-popup .options-block-header {
-  @apply pb-1.75 border-b border-primary text-base text-primary;
-}
+      .checkbox label {
+        @apply w-full py-1.5 px-2 text-sm hover:bg-primary-100;
 
-.options-popup .options-block-body {
-  @apply overflow-hidden;
-}
+        span {
+          @apply ml-1;
+        }
+      }
+    }
+  }
 
-.options-popup .options-block-body .options-list {
-  @apply flex flex-col;
-}
+  .options-block-age {
+    @apply grow;
+  }
 
-.options-popup .options-block-body .options-list .checkbox label {
-  @apply w-full py-1.5 px-2 text-sm hover:bg-primary-100;
-}
+  .options-divide {
+    @apply grow-0 shrink-0 w-px ml-3 mr-2.75 bg-pgray-4;
+  }
 
-.options-popup .options-block-body .options-list .checkbox label span {
-  @apply ml-1;
-}
+  .options-block {
+    @apply flex flex-col;
+  }
 
-.options-popup .options-divide {
-  @apply grow-0 shrink-0 w-px ml-3 mr-2.75 bg-pgray-4;
+  &[data-show] {
+    @apply pointer-events-auto visible;
+  }
 }
 </style>

package/app/components/SLHourRangeInput.vue

@@ -171,27 +171,26 @@ export default defineComponent({
 
 .hour-range-input.inline {
   @apply flex;
-}
 
-.hour-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;
+  }
 
-.hour-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;
+  }
 }
 
-.hour-range-input.disabled .input-group,
-.hour-range-input.readonly .input-group {
+.hour-range-input.disabled .input-group, .hour-range-input.readonly .input-group {
   @apply border-primary-500 bg-primary-100;
 }
 
 .hour-range-input > label {
   @apply flex items-center mb-2 space-x-2 text-base leading-[1.3125] text-pgray-2;
-}
 
-.hour-range-input > label .icon {
-  @apply text-xs leading-none;
+  .icon {
+    @apply text-xs leading-none;
+  }
 }
 
 .hour-range-input .form-control {
@@ -200,18 +199,18 @@ export default defineComponent({
 
 .hour-range-input .input-group {
   @apply flex items-center flex-nowrap p-2 bg-white border border-primary-500 rounded text-base space-x-1;
-}
 
-.hour-range-input .input-group.invalid {
-  @apply border-danger;
-}
+  input[type="text"] {
+    @apply grow-0 shrink-0 w-4.75 border-0 bg-transparent text-base text-center text-pgray-2 outline-none;
+  }
 
-.hour-range-input .input-group input[type="text"] {
-  @apply grow-0 shrink-0 w-4.75 border-0 bg-transparent text-base text-center text-pgray-2 outline-none;
-}
+  .minutes-label {
+    @apply grow-0 shrink-0;
+  }
 
-.hour-range-input .input-group .minutes-label {
-  @apply grow-0 shrink-0;
+  &.invalid {
+    @apply border-danger;
+  }
 }
 
 .hour-range-input .input-group-splitter {

package/app/components/SLIOSSwitch.vue

@@ -174,101 +174,100 @@ export default defineComponent({
 
 .ios-switch {
   @apply inline-block relative overflow-hidden;
-}
 
-.ios-switch.ios-switch-min label {
-  @apply min-w-0 border-2 text-sm;
-  width: 23px;
-  height: 23px;
-}
+  &.ios-switch-primary-600 input:checked + label {
+    @apply bg-primary-600 border-primary;
+  }
 
-.ios-switch.ios-switch-min label::before {
-  @apply hidden;
-}
+  &.ios-switch-primary label .false-label {
+    @apply text-primary;
+  }
 
-.ios-switch.ios-switch-min label .true-label,
-.ios-switch.ios-switch-min label .false-label {
-  @apply p-0;
-}
+  &.ios-switch-min label {
+    @apply min-w-0 border-2 text-sm;
+    width: 23px;
+    height: 23px;
 
-.ios-switch.ios-switch-sm label {
-  @apply min-w-[52px] h-[28px] text-sm;
-}
+    .true-label, .false-label {
+      @apply p-0;
+    }
 
-.ios-switch.ios-switch-sm label::before {
-  @apply w-[20px];
-}
+    &::before {
+      @apply hidden;
+    }
+  }
 
-.ios-switch.ios-switch-sm label .true-label {
-  @apply pr-[31px];
-}
+  &.ios-switch-sm label {
+    @apply min-w-[52px] h-[28px] text-sm;
 
-.ios-switch.ios-switch-sm label .false-label {
-  @apply pl-[31px];
-}
+    .false-label {
+      @apply pl-[31px];
+    }
 
-.ios-switch.ios-switch-xs label {
-  @apply min-w-[60px] h-[24px] text-xs;
-}
+    .true-label {
+      @apply pr-[31px];
+    }
 
-.ios-switch.ios-switch-xs label::before {
-  @apply inset-y-0.75 left-0.75 w-[16px] border border-primary-100 rounded-full shadow-none;
-}
+    &::before {
+      @apply w-[20px];
+    }
+  }
 
-.ios-switch.ios-switch-xs label .true-label {
-  @apply pr-[27px];
-}
+  &.ios-switch-xs label {
+    @apply min-w-[60px] h-[24px] text-xs;
 
-.ios-switch.ios-switch-xs label .false-label {
-  @apply pl-[27px];
-}
+    .false-label {
+      @apply pl-[27px];
+    }
 
-.ios-switch.ios-switch-primary-600 input:checked + label {
-  @apply bg-primary-600 border-primary;
-}
+    .true-label {
+      @apply pr-[27px];
+    }
 
-.ios-switch.ios-switch-primary label .false-label {
-  @apply text-primary;
-}
+    &::before {
+      @apply inset-y-0.75 left-0.75 w-[16px] border border-primary-100 rounded-full shadow-none;
+    }
+  }
 
-.ios-switch 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;
 
-.ios-switch label {
-  @apply relative min-w-full h-[2.3125rem] bg-primary-100 border border-primary-200 rounded-full text-base leading-[1.3125] align-top cursor-pointer transition-colors;
-}
+    &:checked + label {
+      @apply bg-primary border-primary-800;
 
-.ios-switch label::before {
-  content: "";
-  @apply block absolute left-0.75 inset-y-0.75 w-7.25 bg-white rounded-full shadow-default;
-}
+      .false-label {
+        @apply opacity-0;
+      }
 
-.ios-switch label span {
-  @apply flex items-center justify-center absolute top-0 left-0 min-w-full h-full whitespace-nowrap;
-}
+      .true-label {
+        @apply opacity-100;
+      }
 
-.ios-switch label .true-label {
-  @apply pl-2 pr-[35px] text-white opacity-0;
-}
+      &::before {
+        @apply left-auto right-0.75;
+      }
+    }
+  }
 
-.ios-switch label .false-label {
-  @apply pl-[35px] pr-2 text-primary-600 opacity-100;
-}
+  label {
+    @apply relative min-w-full h-[2.3125rem] bg-primary-100 border border-primary-200 rounded-full text-base leading-[1.3125] align-top cursor-pointer transition-colors;
 
-.ios-switch input:checked + label {
-  @apply bg-primary border-primary-800;
-}
+    .false-label {
+      @apply pl-[35px] pr-2 text-primary-600 opacity-100;
+    }
 
-.ios-switch input:checked + label::before {
-  @apply left-auto right-0.75;
-}
+    .true-label {
+      @apply pl-2 pr-[35px] text-white opacity-0;
+    }
 
-.ios-switch input:checked + label .true-label {
-  @apply opacity-100;
-}
+    &::before {
+      content: "";
+      @apply block absolute left-0.75 inset-y-0.75 w-7.25 bg-white rounded-full shadow-default;
+    }
 
-.ios-switch input:checked + label .false-label {
-  @apply opacity-0;
+    span {
+      @apply flex items-center justify-center absolute top-0 left-0 min-w-full h-full whitespace-nowrap;
+    }
+  }
 }
 </style>

package/app/components/SLIconButton.vue

@@ -104,28 +104,36 @@ export default defineComponent({
 
 .icon-btn {
   @apply inline-flex flex-nowrap justify-start items-center p-[0.59375rem] border rounded-full text-base text-white overflow-hidden transition-[width] duration-300;
+
+  &:hover .icon-btn-title {
+    @apply opacity-100;
+  }
+
+  &.icon-btn--secondary {
+    @apply bg-secondary border-secondary;
+
+    &.icon-btn--outline {
+      @apply text-secondary;
+    }
+  }
+
+  &.icon-btn--primary {
+    @apply bg-primary border-primary;
+
+    &.icon-btn--outline {
+      @apply text-primary;
+    }
+  }
+
+  &.icon-btn--outline {
+    @apply bg-transparent;
+  }
+
+  .icon {
+    @apply grow-0 shrink-0;
+  }
 }
-.icon-btn:hover .icon-btn-title {
-  @apply opacity-100;
-}
-.icon-btn.icon-btn--primary {
-  @apply bg-primary border-primary;
-}
-.icon-btn.icon-btn--primary.icon-btn--outline {
-  @apply text-primary;
-}
-.icon-btn.icon-btn--secondary {
-  @apply bg-secondary border-secondary;
-}
-.icon-btn.icon-btn--secondary.icon-btn--outline {
-  @apply text-secondary;
-}
-.icon-btn.icon-btn--outline {
-  @apply bg-transparent;
-}
-.icon-btn .icon {
-  @apply grow-0 shrink-0;
-}
+
 .icon-btn-title {
   @apply grow-0 shrink-0 pl-2 opacity-0 transition-opacity duration-300;
 }

package/app/components/SLInfoTip.vue

@@ -185,54 +185,53 @@ export default defineComponent({
 
 .info-tip {
   @apply inline-flex ml-2 text-base leading-4.5 text-primary hover:text-primary-600 cursor-default;
-}
 
-.info-tip--xs {
-  @apply ml-1 text-xs;
-}
+  .info-tip-toggle {
+    @apply inline-flex cursor-default;
+  }
 
-.info-tip .info-tip-toggle {
-  @apply inline-flex cursor-default;
-}
+  .info-content {
+    @apply relative py-5 pl-4 pr-6 border border-primary-600/50 rounded-lg bg-white text-sm text-pgray-2 text-left font-normal whitespace-normal shadow-popup-sm;
 
-.info-tip .info {
-  @apply z-10 absolute invisible;
-}
+    .pin-toggle {
+      @apply absolute top-0 right-0 mt-2 mr-2 text-base text-primary-600;
 
-.info-tip .info[data-popper-placement^="bottom"] {
-  @apply pt-1;
-}
+      &:hover .icon:before {
+        content: "\\e967";
+      }
 
-.info-tip .info[data-popper-placement^="right"] {
-  @apply pl-3;
-}
+      .icon:before {
+        content: "\\e980";
+      }
+    }
+  }
 
-.info-tip .info[data-show],
-.info-tip .info.pinned {
-  @apply visible;
-}
+  .info {
+    @apply z-10 absolute invisible;
 
-.info-tip .info.pinned .info-content .pin-toggle:hover .icon:before {
-  content: "\\e943";
-}
+    &[data-show], &.pinned {
+      @apply visible;
 
-.info-tip .info.pinned .info-content .pin-toggle .icon:before {
-  content: "\\e943";
-}
+      .info-content .pin-toggle:hover .icon:before {
+        content: "\\e943";
+      }
 
-.info-tip .info-content {
-  @apply relative py-5 pl-4 pr-6 border border-primary-600/50 rounded-lg bg-white text-sm text-pgray-2 text-left font-normal whitespace-normal shadow-popup-sm;
-}
+      .info-content .pin-toggle .icon:before {
+        content: "\\e943";
+      }
+    }
 
-.info-tip .info-content .pin-toggle {
-  @apply absolute top-0 right-0 mt-2 mr-2 text-base text-primary-600;
-}
+    &[data-popper-placement^="bottom"] {
+      @apply pt-1;
+    }
 
-.info-tip .info-content .pin-toggle:hover .icon:before {
-  content: "\\e967";
+    &[data-popper-placement^="right"] {
+      @apply pl-3;
+    }
+  }
 }
 
-.info-tip .info-content .pin-toggle .icon:before {
-  content: "\\e980";
+.info-tip--xs {
+  @apply ml-1 text-xs;
 }
 </style>

package/app/components/SLLegend.vue

@@ -67,17 +67,17 @@ export default defineComponent({
 
 .chart-legend-item {
   @apply inline-flex items-center mx-2 text-base text-pgray-2;
-}
 
-.chart-legend-item.unactive {
-  @apply text-pgray-5;
-}
+  .item-marker {
+    @apply inline-block w-3 h-3 mr-1 rounded-full;
+  }
 
-.chart-legend-item .item-icon {
-  @apply mr-1;
-}
+  .item-icon {
+    @apply mr-1;
+  }
 
-.chart-legend-item .item-marker {
-  @apply inline-block w-3 h-3 mr-1 rounded-full;
+  &.unactive {
+    @apply text-pgray-5;
+  }
 }
 </style>

package/app/components/SLLink.vue

@@ -158,9 +158,9 @@ export default defineComponent({
 
 .sl-link-tooltip {
   @apply p-1 bg-pgray-2 text-xs text-white whitespace-nowrap shadow-default invisible;
-}
 
-.sl-link-tooltip[data-show] {
-  @apply visible;
+  &[data-show] {
+    @apply visible;
+  }
 }
 </style>

package/app/components/SLLoading.vue

@@ -90,41 +90,41 @@ export default defineComponent({
 
 .loading-modal {
   @apply z-10;
-}
 
-.loading-modal-primary {
-  @apply bg-primary-300/20;
-}
+  .loading {
+    @apply relative inline-block w-12 h-12;
 
-.loading-modal-primary .loading div {
-  border-color: var(--color-primary) transparent transparent transparent;
-}
+    div {
+      @apply absolute block w-8 h-8 m-2 border-4 rounded-full animate-loading;
 
-.loading-modal-highlight-500 {
-  @apply bg-highlight-500/20;
-}
+      &:nth-child(1) {
+        animation-delay: -0.45s;
+      }
 
-.loading-modal-highlight-500 .loading div {
-  border-color: var(--color-highlight-500) transparent transparent transparent;
-}
+      &:nth-child(2) {
+        animation-delay: -0.3s;
+      }
 
-.loading-modal .loading {
-  @apply relative inline-block w-12 h-12;
+      &:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+    }
+  }
 }
 
-.loading-modal .loading div {
-  @apply absolute block w-8 h-8 m-2 border-4 rounded-full animate-loading;
-}
+.loading-modal-primary {
+  @apply bg-primary-300/20;
 
-.loading-modal .loading div:nth-child(1) {
-  animation-delay: -0.45s;
+  .loading div {
+    border-color: var(--color-primary) transparent transparent transparent;
+  }
 }
 
-.loading-modal .loading div:nth-child(2) {
-  animation-delay: -0.3s;
-}
+.loading-modal-highlight-500 {
+  @apply bg-highlight-500/20;
 
-.loading-modal .loading div:nth-child(3) {
-  animation-delay: -0.15s;
+  .loading div {
+    border-color: var(--color-highlight-500) transparent transparent transparent;
+  }
 }
 </style>