Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/DialogButtons: move elevated button styling to layout

Browse source
This commit is contained in:
wukko 2024-07-27 15:03:37 +06:00
parent 778190b2b3
commit 7411f358d2
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/src/components/dialog/DialogButtons.svelte
View file

@ -8,7 +8,7 @@
<div class="popup-buttons"> <div class="popup-buttons">
{#each buttons as button} {#each buttons as button}
<button <button
class="button popup-button {button.color}" class="button elevated popup-button {button.color}"
class:color={button.color} class:color={button.color}
class:active={button.main} class:active={button.main}
on:click={async () => { on:click={async () => {
@ -41,22 +41,4 @@
background-color: var(--red); background-color: var(--red);
color: var(--white); color: var(--white);
} }
.popup-button:not(.active) {
background-color: var(--button-elevated);
}
.popup-button:not(.active):active {
background-color: var(--button-elevated-hover);
}
.popup-button:not(:focus-visible) {
box-shadow: none;
}
@media (hover: hover) {
.popup-button:not(.active):hover {
background-color: var(--button-elevated-hover);
}
}
</style> </style>

16
web/src/routes/+layout.svelte
View file

@ -333,6 +333,18 @@
background-color: var(--button-hover); background-color: var(--button-hover);
} }
:global(.button.elevated) {
background-color: var(--button-elevated);
}
:global(.button.elevated:active) {
background-color: var(--button-elevated-hover);
}
:global(.button.elevated:not(:focus-visible)) {
box-shadow: none;
}
:global(.button.active) { :global(.button.active) {
color: var(--primary); color: var(--primary);
background-color: var(--secondary); background-color: var(--secondary);
@ -353,6 +365,10 @@
:global(button:hover) { :global(button:hover) {
background-color: var(--button-hover); background-color: var(--button-hover);
} }
:global(.button.elevated:hover) {
background-color: var(--button-elevated-hover);
}
:global(.button.active:not(.color):hover) { :global(.button.active:not(.color):hover) {
background-color: var(--button-active-hover); background-color: var(--button-active-hover);