Skip to content

Commit

Permalink
Clean up styles
Browse files Browse the repository at this point in the history
  • Loading branch information
xingrz committed Mar 26, 2024
1 parent 056a37f commit e0a111d
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 39 deletions.
2 changes: 1 addition & 1 deletion src/components/BSMap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
10 changes: 3 additions & 7 deletions src/components/BSMap/BSIcon.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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 {
Expand Down
62 changes: 31 additions & 31 deletions src/components/BSMap/BSRow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

0 comments on commit e0a111d

Please sign in to comment.