Clean up styles

xingrz · Mar 26, 2024 · 6a980e7 · 6a980e7
1 parent 471e1a6
commit 6a980e7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 39 deletions.
diff --git a/src/components/BSMap.vue b/src/components/BSMap.vue
@@ -37,6 +37,6 @@ const style = computed(() => ({
 
 <style lang="scss" module>
 .map {
-  line-height: calc(var(--bs-map-size)* 1px);
+  line-height: calc(var(--bs-map-size) * 1px);
 }
 </style>
diff --git a/src/components/BSMap/BSIcon.vue b/src/components/BSMap/BSIcon.vue
@@ -1,9 +1,9 @@
 <template>
-  <div v-if="label" :class="{ [$style.label]: true, [$style.overlay]: index > 0 }" :style="style"
-    :data-bold="label.params.b || label.params.bold" :data-align="(label.params.align || ``).toUpperCase()">
+  <div v-if="label" :class="$style.label" :style="style" :data-bold="label.params.b || label.params.bold"
+    :data-align="(label.params.align || ``).toUpperCase()">
     <span>{{ label.text }}</span>
   </div>
-  <img v-else :class="{ [$style.icon]: true, [$style.overlay]: index > 0 }" :style="style" :src="icon?.data" />
+  <img v-else :class="$style.icon" :style="style" :src="icon?.data" />
 </template>
 
 <script lang="ts" setup>
@@ -97,10 +97,6 @@ function parseTextParams(str: string): Record<string, string> {
 
   width: calc(var(--bs-map-size) * var(--bs-map-icon-ratio, 1) * 1px);
   height: calc(var(--bs-map-size) * 1px);
-
-  .overlay {
-    z-index: 1;
-  }
 }
 
 .label {

diff --git a/src/components/BSMap/BSRow.vue b/src/components/BSMap/BSRow.vue
@@ -2,12 +2,12 @@
   <div :class="$style.row">
     <div :class="$style.cells">
       <BSCell v-for="({ cell, offset }, index) in cells" :key="index"
-        :class="{ [$style.selection]: true, [$style.focused]: isFocused(row, offset, cell.length) }" :content="cell"
+        :class="{ [$style.seletable]: true, [$style.focused]: isFocused(row, offset, cell.length) }" :content="cell"
         :row="row" :offset="offset" />
     </div>
     <div :class="$style.texts">
       <BSText v-for="({ text, offset, align }, index) in texts" :key="index"
-        :class="{ [$style.selection]: true, [$style.focused]: isFocused(row, offset, text.length) }" :content="text"
+        :class="{ [$style.seletable]: true, [$style.focused]: isFocused(row, offset, text.length) }" :content="text"
         :align="align" :row="row" :offset="offset" />
     </div>
   </div>
@@ -68,45 +68,45 @@ function isFocused(row: number, offset: number, length: number): boolean {
 .row {
   display: flex;
   align-items: stretch;
+}
 
-  >.cells {
-    flex: 0 0 calc(var(--bs-map-size) * var(--bs-map-cols) * 1px);
-    display: flex;
-    justify-content: center;
-  }
+.cells {
+  flex: 0 0 calc(var(--bs-map-size) * var(--bs-map-cols) * 1px);
+  display: flex;
+  justify-content: center;
+}
 
-  >.texts {
-    flex: 1 1 auto;
-    display: flex;
-  }
+.texts {
+  flex: 1 1 auto;
+  display: flex;
+}
 
-  .selection {
-    position: relative;
+.seletable {
+  position: relative;
 
-    &::after {
-      display: block;
-      content: "";
+  &::after {
+    display: block;
+    content: "";
 
-      position: absolute;
+    position: absolute;
 
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 
-      background: #0099ff;
-      opacity: 0;
+    background: #0099ff;
+    opacity: 0;
 
-      transition: opacity 200ms;
-    }
+    transition: opacity 200ms;
+  }
 
-    &:hover::after {
-      opacity: 0.2;
-    }
+  &:hover::after {
+    opacity: 0.2;
+  }
 
-    &.focused::after {
-      opacity: 0.3;
-    }
+  &.focused::after {
+    opacity: 0.3;
   }
 }
 </style>