Add pointer cursor to buttons

This commit is contained in:
Caleb Owens 2024-02-24 12:12:50 +00:00
parent 2a10996c47
commit 2949c89f32
No known key found for this signature in database
GPG Key ID: 3BEA28BDD0A2975D
6 changed files with 23 additions and 2 deletions

View File

@ -49,6 +49,8 @@
color var(--transition-fast), color var(--transition-fast),
filter var(--transition-fast); filter var(--transition-fast);
cursor: pointer;
&.pop { &.pop {
color: var(--clr-theme-scale-pop-10); color: var(--clr-theme-scale-pop-10);
background: color-mix( background: color-mix(

View File

@ -84,7 +84,9 @@
min-width: var(--size-btn-m); min-width: var(--size-btn-m);
background: transparent; background: transparent;
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
cursor: pointer;
&:disabled { &:disabled {
cursor: default;
pointer-events: none; pointer-events: none;
opacity: 0.6; opacity: 0.6;
} }
@ -99,6 +101,7 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
&.not-clickable { &.not-clickable {
cursor: default;
pointer-events: none; pointer-events: none;
} }
} }

View File

@ -32,9 +32,9 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--clr-theme-scale-ntrl-40);
border-radius: var(--radius-m); border-radius: var(--radius-m);
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
cursor: pointer;
transition: transition:
background-color var(--transition-fast), background-color var(--transition-fast),
color var(--transition-fast); color var(--transition-fast);
@ -45,6 +45,7 @@
} }
.selected { .selected {
background-color: color-mix(in srgb, transparent, var(--darken-tint-light)); background-color: color-mix(in srgb, transparent, var(--darken-tint-light));
cursor: default;
} }
.large { .large {
height: var(--size-btn-l); height: var(--size-btn-l);

View File

@ -84,6 +84,8 @@
transition: background var(--transition-fast); transition: background var(--transition-fast);
cursor: pointer;
&:hover { &:hover {
background-color: color-mix( background-color: color-mix(
in srgb, in srgb,
@ -98,11 +100,15 @@
border-right-width: 1px; border-right-width: 1px;
border-left-width: 1px; border-left-width: 1px;
cursor: default;
& > .label { & > .label {
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
cursor: default;
} }
& > .icon { & > .icon {
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
cursor: default;
} }
&.left { &.left {
border-right-width: 1px; border-right-width: 1px;
@ -128,9 +134,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
cursor: pointer;
} }
.label { .label {
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
cursor: pointer;
} }
</style> </style>

View File

@ -17,6 +17,7 @@
<button <button
class="sync-btn" class="sync-btn"
class:sync-btn-busy={$baseServiceBusy$}
on:click={async (e) => { on:click={async (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -53,6 +54,12 @@
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
border-radius: var(--radius-m); border-radius: var(--radius-m);
cursor: pointer;
&.sync-btn-busy {
cursor: default;
}
transition: transition:
background var(--transition-fast), background var(--transition-fast),
border var(--transition-fast); border var(--transition-fast);

View File

@ -79,7 +79,7 @@
padding: 0 var(--space-2); padding: 0 var(--space-2);
} }
.clickable { .clickable {
cursor: default; cursor: pointer;
} }
/* colors */ /* colors */