chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refacotr: styling

Browse source
This commit is contained in:
Methapon2001 2024-07-04 14:38:38 +07:00
parent a985d8be58
commit ec57bae491
1 changed files with 29 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/01_branch-management/BranchCard.vue
View file

@ -77,10 +77,9 @@ defineProps<{
<style scoped>
.branch-card {
--_branch-card-row-fg: 0 0% 100%;
--_branch-card-row-bg: var(--blue-5-hsl);
--_branch-badge-fg: var(--green-8-hsl);
--_branch-badge-bg: var(--green-6-hsl);
--_branch-card-fg: 0 0% 100%;
--_branch-card-bg: var(--blue-5-hsl);
--_branch-status-color: var(--green-6-hsl);
display: flex;
flex-direction: column;
overflow: hidden;
@ -91,12 +90,28 @@ defineProps<{
margin-bottom: var(--size-2);
& .branch-card__icon {
background-color: hsla(var(--_branch-card-row-bg) / 0.1);
background-color: hsla(var(--_branch-card-bg) / 0.1);
border-radius: 50%;
padding: var(--size-1);
position: relative;
transform: rotate(45deg);
&::after {
content: ' ';
display: block;
block-size: 0.5rem;
aspect-ratio: 1;
position: absolute;
border-radius: 50%;
right: -0.25rem;
top: calc(50% - 0.25rem);
bottom: calc(50% - 0.25rem);
background-color: hsla(var(--_branch-status-color) / 1);
}
& :deep(.q-icon) {
color: hsla(var(--_branch-card-row-bg) / 1);
transform: rotate(-45deg);
color: hsla(var(--_branch-card-bg) / 1);
}
}
@ -127,10 +142,10 @@ defineProps<{
}
&.branch-card__none {
--_branch-card-row-bg: var(--gray-3-hsl);
--_branch-card-bg: var(--gray-3-hsl);
&.branch-card__dark {
--_branch-card-row-bg: var(--gray-9-hsl);
--_branch-card-bg: var(--gray-9-hsl);
}
&:not(.branch-card__dark) .branch-card__header {
@ -143,18 +158,19 @@ defineProps<{
}
&.branch-card__hq {
--_branch-card-row-bg: var(--pink-6-hsl);
--_branch-card-bg: var(--pink-6-hsl);
}
&.branch-card__br {
--_branch-card-row-bg: var(--violet-11-hsl);
--_branch-card-bg: var(--violet-11-hsl);
}
&.branch-card__inactive {
--_branch-badge-fg: var(--red-4-hsl);
--_branch-status-color: var(--red-4-hsl);
--_branch-badge-bg: var(--red-4-hsl);
filter: grayscale(40%);
opacity: 0.5;
filter: grayscale(1);
background-color: hsl(var(--gray-1-hsl) / 0.4);
opacity: 0.7;
}
}
</style>