chamomind/jws-frontend
chamomind/jws-frontend
6
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> <style scoped>
.branch-card { .branch-card {
--_branch-card-row-fg: 0 0% 100%; --_branch-card-fg: 0 0% 100%;
--_branch-card-row-bg: var(--blue-5-hsl); --_branch-card-bg: var(--blue-5-hsl);
--_branch-badge-fg: var(--green-8-hsl); --_branch-status-color: var(--green-6-hsl);
--_branch-badge-bg: var(--green-6-hsl);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@ -91,12 +90,28 @@ defineProps<{
margin-bottom: var(--size-2); margin-bottom: var(--size-2);
& .branch-card__icon { & .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%; border-radius: 50%;
padding: var(--size-1); 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) { & :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__none {
--_branch-card-row-bg: var(--gray-3-hsl); --_branch-card-bg: var(--gray-3-hsl);
&.branch-card__dark { &.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 { &:not(.branch-card__dark) .branch-card__header {
@ -143,18 +158,19 @@ defineProps<{
} }
&.branch-card__hq { &.branch-card__hq {
--_branch-card-row-bg: var(--pink-6-hsl); --_branch-card-bg: var(--pink-6-hsl);
} }
&.branch-card__br { &.branch-card__br {
--_branch-card-row-bg: var(--violet-11-hsl); --_branch-card-bg: var(--violet-11-hsl);
} }
&.branch-card__inactive { &.branch-card__inactive {
--_branch-badge-fg: var(--red-4-hsl); --_branch-status-color: var(--red-4-hsl);
--_branch-badge-bg: var(--red-4-hsl); --_branch-badge-bg: var(--red-4-hsl);
filter: grayscale(40%); filter: grayscale(1);
opacity: 0.5; background-color: hsl(var(--gray-1-hsl) / 0.4);
opacity: 0.7;
} }
} }
</style> </style>