@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/components/SLTableTooltip.vue

@@ -21,9 +21,9 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { formatDateRange } from "~ui/utils";
-import type IDateRange from "~ui/interface/IDateRange";
-import type ITableField from "~ui/interface/ITableField";
+import { formatDateRange } from "~ui/app/utils";
+import type IDateRange from "~ui/app/interface/IDateRange";
+import type ITableField from "~ui/app/interface/ITableField";
 
 export default defineComponent({
   name: "SLTableTooltip",
@@ -70,42 +70,56 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.table-tooltip
-  @apply inline-block p-4 border border-primary-600 rounded bg-white shadow-popup-sm pointer-events-none
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.table-tooltip {
+  @apply inline-block p-4 border border-primary-600 rounded bg-white shadow-popup-sm pointer-events-none;
+}
 
-  &-title
-    @apply mb-4 text-base text-pgray-2 font-bold
+.table-tooltip-title {
+  @apply mb-4 text-base text-pgray-2 font-bold;
+}
 
-    &:not(:last-child)
-      @apply mb-1
+.table-tooltip-title:not(:last-child) {
+  @apply mb-1;
+}
 
-  &-caption
-    @apply mb-2 text-sm text-pgray-2
+.table-tooltip-caption {
+  @apply mb-2 text-sm text-pgray-2;
+}
 
-  table
-    @apply w-full text-base text-pgray-2
+.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
-            @apply pt-4
+.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, th
-            @apply text-left
+.table-tooltip table tbody tr.date-row td,
+.table-tooltip table tbody tr.date-row th {
+  @apply text-left;
+}
 
-        &.header-row
-          @apply border-b
+.table-tooltip table tbody tr.header-row {
+  @apply border-b;
+}
 
-        td, th
-          @apply py-1 px-3 text-center
+.table-tooltip table tbody tr td,
+.table-tooltip table tbody tr th {
+  @apply py-1 px-3 text-center;
+}
 </style>