refactor: replace scss with modern css

arnoson · Dec 28, 2023 · 6bf9f13 · 6bf9f13
1 parent 300e211
commit 6bf9f13
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 96 deletions.
diff --git a/src/components/k-stats-chart.vue b/src/components/k-stats-chart.vue
@@ -50,7 +50,7 @@ export default {
             views + counters.views,
             visits + counters.visits,
           ],
-          [0, 0]
+          [0, 0],
         )
 
         data.views.push(views)
@@ -69,7 +69,7 @@ export default {
       const trimmedData = this.trimData(data)
       const finishedData = trimmedData.slice(0, -1)
       const unfinishedData = trimmedData.map((value, index) =>
-        index < finishedData.length - 1 ? null : value
+        index < finishedData.length - 1 ? null : value,
       )
 
       console.log(unfinishedData)
@@ -112,7 +112,7 @@ export default {
             },
           },
         ],
-      ]
+      ],
     )
   },
 
@@ -147,71 +147,71 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .k-stats-chart {
   &.k-stat {
     padding: 0rem 3rem 0.3rem 0.7rem;
   }
 
-  &-chartist-container {
-    padding-top: 2rem;
-    height: 400px;
-  }
-
-  &-count {
-    font-size: 1.25rem;
-    margin-bottom: var(--spacing-1);
-  }
-
-  &-label {
-    font-size: var(--text-xs);
-  }
-
-  k-button.active {
+  & .k-button.active {
     color: blue;
   }
 
-  svg {
+  & svg {
     overflow: visible;
   }
 
-  .ct-point {
+  & .ct-point {
     stroke-width: 6px;
     stroke: var(--color-blue);
   }
 
-  .ct-line {
+  & .ct-line {
     stroke-width: 4px;
     stroke-linejoin: round;
     stroke-linecap: round;
     stroke: var(--color-blue);
   }
 
-  .ct-series-b .ct-line {
+  & .ct-series-b .ct-line {
     stroke-dasharray: 6;
   }
 
-  .ct-area {
-    // Fill and opacity match `--color-blue-200`.
+  & .ct-area {
+    /* Fill and opacity match `--color-blue-200`. */
     fill: var(--color-blue);
     fill-opacity: 0.29;
   }
 
-  .ct-label.ct-vertical.ct-start,
-  .ct-label.ct-vertical.ct-end {
+  & .ct-label.ct-vertical.ct-start,
+  & .ct-label.ct-vertical.ct-end {
     transform: translateY(50%);
     align-items: center;
   }
 
-  .ct-label.ct-horizontal.ct-start,
-  .ct-label.ct-horizontal.ct-end {
+  & .ct-label.ct-horizontal.ct-start,
+  & .ct-label.ct-horizontal.ct-end {
     white-space: nowrap;
     transform: translateX(-50%);
     justify-content: center;
   }
 
-  .ct-label.ct-horizontal {
+  & .ct-label.ct-horizontal {
     margin-top: 0.2rem;
   }
 }
+
+.k-stats-chart-chartist-container {
+  padding-top: 2rem;
+  height: 400px;
+}
+
+.k-stats-chart-count {
+  font-size: 1.25rem;
+  margin-bottom: var(--spacing-1);
+}
+
+.k-stats-chart-label {
+  font-size: var(--text-xs);
+}
 </style>
diff --git a/src/components/k-stats-pages.vue b/src/components/k-stats-pages.vue
@@ -69,9 +69,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .k-stats-pages {
-  .k-table-empty {
+  & .k-table-empty {
     padding: 0.325rem 0.75rem;
   }
 }

diff --git a/src/components/k-table-stats-page-cell.vue b/src/components/k-table-stats-page-cell.vue
@@ -23,29 +23,28 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .k-table-stats-percent-cell {
   position: relative;
+}
 
-  &-text {
-    // Make sure text is above the bar.
-    position: relative;
-    // padding-inline: 0.65rem;
-  }
+.k-table-stats-percent-cell-text {
+  /* Make sure text is above the bar. */
+  position: relative;
+}
 
-  &-bar {
-    height: 100%;
-    border-radius: var(--rounded);
-    background-color: var(--color-blue-200);
-  }
+.k-table-stats-percent-cell-bar {
+  height: 100%;
+  border-radius: var(--rounded);
+  background-color: var(--color-blue-200);
+}
 
-  &-bar-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    padding: 0.08rem 0.4rem;
-  }
+.k-table-stats-percent-cell-bar-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0.08rem 0.4rem;
 }
 </style>
diff --git a/src/components/k-table-stats-percent-cell.vue b/src/components/k-table-stats-percent-cell.vue
@@ -21,29 +21,28 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .k-table-stats-percent-cell {
   position: relative;
+}
 
-  &-text {
-    // Make sure text is above the bar.
-    position: relative;
-    // padding-inline: 0.65rem;
-  }
+.k-table-stats-percent-cell-text {
+  /* Make sure text is above the bar. */
+  position: relative;
+}
 
-  &-bar {
-    height: 100%;
-    border-radius: var(--rounded);
-    background-color: var(--color-blue-200);
-  }
+.k-table-stats-percent-cell-bar {
+  height: 100%;
+  border-radius: var(--rounded);
+  background-color: var(--color-blue-200);
+}
 
-  &-bar-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    padding: 0.08rem 0.4rem;
-  }
+.k-table-stats-percent-cell-bar-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0.08rem 0.4rem;
 }
 </style>
diff --git a/src/views/k-stats-main-view.vue b/src/views/k-stats-main-view.vue
@@ -137,50 +137,48 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .k-stats-main-view {
-  .k-button[data-disabled] {
+  & .k-button[data-disabled] {
     opacity: 0.5;
     pointer-events: none;
     cursor: default;
   }
 
-  .k-table {
-    tr td:nth-child(2) {
+  & .k-table {
+    & tr td:nth-child(2) {
       text-align: right;
     }
 
-    tr th:nth-child(2) {
+    & tr th:nth-child(2) {
       text-align: center;
     }
   }
 }
 
-.k-stats {
-  &-type-button {
-    position: relative;
+.k-stats-type-button {
+  position: relative;
 
-    // Adjust the letter-spacing to roughly match the bold weight.
-    letter-spacing: 0.3px;
+  /* Adjust the letter-spacing to roughly match the bold weight. */
+  letter-spacing: 0.3px;
 
-    &:not(.active):not(:hover) {
-      color: var(--color-gray-600);
-    }
-    &.active {
-      font-weight: var(--font-bold);
-      letter-spacing: 0;
-    }
+  &:not(.active):not(:hover) {
+    color: var(--color-gray-600);
   }
-
-  // Make sure the buttons always takes up the same space by adding an invisible
-  // bold version to avoid layout shift.
-  &-type-display {
-    position: absolute;
-  }
-  &-type-width {
-    visibility: hidden;
-    letter-spacing: 0;
+  &.active {
     font-weight: var(--font-bold);
+    letter-spacing: 0;
   }
 }
+
+/* Make sure the buttons always takes up the same space by adding an invisible
+  bold version to avoid layout shift. */
+.k-stats-type-display {
+  position: absolute;
+}
+.k-stats-type-width {
+  visibility: hidden;
+  letter-spacing: 0;
+  font-weight: var(--font-bold);
+}
 </style>