@mptw/skylens-ui 1.5.16 → 1.5.18

package/app/components/SLTable.vue

@@ -385,90 +385,87 @@ export default defineComponent({
 
 .table {
   @apply block relative w-full overflow-hidden;
-}
 
-.table.table-responsive {
-  @apply overflow-auto;
-}
+  &.table-responsive {
+    @apply overflow-auto;
 
-.table.table-responsive table {
-  @apply table-auto;
-}
+    table {
+      @apply table-auto;
+    }
+  }
 
-.table table {
-  @apply w-full table-fixed;
-}
+  table {
+    @apply w-full table-fixed;
 
-.table table thead tr {
-  @apply border-b border-primary-600 bg-white;
-}
+    tbody tr.body-header-row td {
+      @apply bg-primary-50 text-lg font-bold shadow-inline;
+    }
 
-.table table thead tr th {
-  @apply px-2 pb-2 text-base font-normal text-primary whitespace-nowrap;
-}
+    tbody.clickable tr {
+      @apply cursor-pointer;
+    }
 
-.table table thead tr th.sortable,
-.table table thead tr th.filterable {
-  @apply cursor-pointer;
-}
+    tbody tr td {
+      @apply p-2 border-b text-base text-pgray-2;
 
-.table table thead tr th .sort-icon {
-  @apply opacity-0;
-  transition:
-    transform 0.2s ease,
-    opacity 0.1s ease;
-}
+      &.text-right.sortable {
+        @apply pr-8;
+      }
+    }
 
-.table table thead tr th:hover .sort-icon,
-.table table thead tr th.sorting .sort-icon {
-  @apply opacity-100;
-}
+    thead tr {
+      @apply border-b border-primary-600 bg-white;
 
-.table table thead tr th.filterable .filter-icon {
-  @apply opacity-100;
-}
+      th {
+        @apply px-2 pb-2 text-base font-normal text-primary whitespace-nowrap;
 
-.table table tbody.clickable tr {
-  @apply cursor-pointer;
-}
+        &:hover .sort-icon, &.sorting .sort-icon {
+          @apply opacity-100;
+        }
 
-.table table tbody tr.body-header-row td {
-  @apply bg-primary-50 text-lg font-bold shadow-inline;
-}
+        &.sortable, &.filterable {
+          @apply cursor-pointer;
+        }
 
-.table table tbody tr td {
-  @apply p-2 border-b text-base text-pgray-2;
-}
+        &.filterable .filter-icon {
+          @apply opacity-100;
+        }
 
-.table table tbody tr td.text-right.sortable {
-  @apply pr-8;
+        .sort-icon {
+          @apply opacity-0;
+          transition: transform 0.2s ease,
+    opacity 0.1s ease;
+        }
+      }
+    }
+  }
 }
 
 .table-header-filter-popup {
   @apply z-10 flex border border-primary-600 rounded overflow-hidden invisible pointer-events-none;
-}
 
-.table-header-filter-popup[data-show] {
-  @apply visible pointer-events-auto;
+  &[data-show] {
+    @apply visible pointer-events-auto;
+  }
 }
 
 .table-header-filter-popup-content {
   @apply flex flex-col;
-}
 
-.table-header-filter-popup-content .table-header-filter-item {
-  @apply inline-flex justify-center p-2 bg-white text-sm text-pgray-3 hover:bg-primary-50;
-}
+  .table-header-filter-item {
+    @apply inline-flex justify-center p-2 bg-white text-sm text-pgray-3 hover:bg-primary-50;
 
-.table-header-filter-popup-content .table-header-filter-item.active {
-  @apply bg-primary-100 text-primary;
-}
+    &.active {
+      @apply bg-primary-100 text-primary;
 
-.table-header-filter-popup-content .table-header-filter-item.active .icon {
-  @apply text-primary;
-}
+      .icon {
+        @apply text-primary;
+      }
+    }
 
-.table-header-filter-popup-content .table-header-filter-item .icon {
-  @apply text-base leading-none;
+    .icon {
+      @apply text-base leading-none;
+    }
+  }
 }
 </style>

package/app/components/SLTableTooltip.vue

@@ -75,51 +75,49 @@ export default defineComponent({
 
 .table-tooltip {
   @apply inline-block p-4 border border-primary-600 rounded bg-white shadow-popup-sm pointer-events-none;
-}
 
-.table-tooltip-title {
-  @apply mb-4 text-base text-pgray-2 font-bold;
-}
+  table {
+    @apply w-full text-base text-pgray-2;
 
-.table-tooltip-title:not(:last-child) {
-  @apply mb-1;
-}
+    tbody tr td, tbody tr th {
+      @apply py-1 px-3 text-center;
+    }
 
-.table-tooltip-caption {
-  @apply mb-2 text-sm text-pgray-2;
-}
+    tbody tr.header-row {
+      @apply border-b;
+    }
 
-.table-tooltip table {
-  @apply w-full text-base text-pgray-2;
-}
+    tbody tr.date-row {
+      @apply text-pgray-3;
 
-.table-tooltip table tbody tr.date-row {
-  @apply text-pgray-3;
-}
+      td, th {
+        @apply text-left;
+      }
 
-.table-tooltip table tbody tr.date-row td {
-  @apply pt-4;
-}
+      &:first-child {
+        @apply text-primary;
 
-.table-tooltip table tbody tr.date-row:first-child {
-  @apply text-primary;
-}
+        td {
+          @apply pt-0;
+        }
+      }
 
-.table-tooltip table tbody tr.date-row:first-child td {
-  @apply pt-0;
+      td {
+        @apply pt-4;
+      }
+    }
+  }
 }
 
-.table-tooltip table tbody tr.date-row td,
-.table-tooltip table tbody tr.date-row th {
-  @apply text-left;
-}
+.table-tooltip-title {
+  @apply mb-4 text-base text-pgray-2 font-bold;
 
-.table-tooltip table tbody tr.header-row {
-  @apply border-b;
+  &:not(:last-child) {
+    @apply mb-1;
+  }
 }
 
-.table-tooltip table tbody tr td,
-.table-tooltip table tbody tr th {
-  @apply py-1 px-3 text-center;
+.table-tooltip-caption {
+  @apply mb-2 text-sm text-pgray-2;
 }
 </style>