ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Button style improvments.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-03-30 11:30:52 +02:00
commit 84835bbe30
2 changed files with 10 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

29
assets/sass/components/button/_button.scss
View file

@ -27,7 +27,7 @@ button,
color: var(--color-button-text); color: var(--color-button-text);
text-shadow: var(--color-button) 0 1px 0; text-shadow: var(--color-button) 0 1px 0;
background: linear-gradient(var(--color-button), var(--color-button-hover)); background: linear-gradient(var(--color-button), var(--color-button-hover));
border: 1px solid var(--color-button); border: 1px solid var(--color-button-hover);
border-radius: var(--radius-s); border-radius: var(--radius-s);
&:hover, &:hover,
@ -39,6 +39,10 @@ button,
text-shadow: var(--color-button-hover) 0 1px 0; text-shadow: var(--color-button-hover) 0 1px 0;
background: linear-gradient(var(--color-button-hover), var(--color-button)); background: linear-gradient(var(--color-button-hover), var(--color-button));
} }
&:active {
box-shadow: inset 2px 2px 5px var(--color-black-40);
}
} }
// Add button variations here. // Add button variations here.
@ -51,38 +55,21 @@ button,
&--alt { &--alt {
color: var(--color-button-text-hover); color: var(--color-button-text-hover);
background-color: var(--color-button-hover); background: var(--color-button-hover);
&:hover, &:hover,
&:focus-visible, &:focus-visible,
&:active { &:active {
color: var(--color-button-text); color: var(--color-button-text);
background-color: var(--color-button); background: var(--color-button);
} }
} }
&--outline { &--outline {
color: var(--color-button); color: var(--color-button);
background-color: var(--color-button-text); background: var(--color-button-text);
border-color: var(--color-button);
&:hover,
&:focus-visible,
&:active {
color: var(--color-button-text);
background-color: var(--color-button);
}
} }
&--shadow {
&:hover {
box-shadow: 2px 2px 5px 1px var(--color-button-disabled);
}
&:active {
box-shadow: inset 2px 2px 5px 1px var(--color-button);
}
}
&--plain { &--plain {
appearance: none; appearance: none;

9
assets/sass/mobilemenu.scss
View file

@ -40,22 +40,17 @@
position: absolute; position: absolute;
top: var(--gutters); top: var(--gutters);
right: var(--gutters); right: var(--gutters);
margin: 0;
padding: 0 .3rem; padding: 0 .3rem;
border-color: var(--color-button-text-hover); border-color: var(--color-button-text-hover);
font-weight: var(--fw-bold);
z-index: 22; z-index: 22;
pointer-events: auto; pointer-events: auto;
&:hover, &:hover,
&:focus-visible { &:focus-visible,
&:active {
svg { svg {
fill: var(--color-button-text-hover); fill: var(--color-button-text-hover);
} }
&.button--outline {
border-color: var(--color-button-text-hover);
}
} }
} }