gcch
a4a99789a9
All checks were successful
ci/woodpecker/push/publish_instable Pipeline was successful
80 lines
2 KiB
CSS
Executable file
80 lines
2 KiB
CSS
Executable file
button {
|
|
--button-background-color: var(--root-background-color);
|
|
--button-border-color: var(--root-text-color);
|
|
--button-font-weight: 100;
|
|
--button-padding: var(--s-2);
|
|
--button-text-color: var(--root-text-color);
|
|
|
|
padding: var(--button-padding);
|
|
border: 1px solid var(--button-border-color);
|
|
font-weight: var(--button-font-weight);
|
|
color: var(--button-text-color);
|
|
background-color: var(--button-background-color);
|
|
box-shadow: 4px 4px 0 0 var(--root-text-color);
|
|
|
|
&:hover {
|
|
--button-background-color: var(--root-text-color);
|
|
--button-border-color: var(--root-background-color);
|
|
--button-font-weight: var(--brkly-font-weight-semibold);
|
|
--button-text-color: var(--root-background-color);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateX(2px) translateY(2px);
|
|
box-shadow: 1px 1px 0 0 var(--root-text-color);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline-offset: -0.3rem;
|
|
}
|
|
|
|
/* Inversion des couleurs. */
|
|
&.invert {
|
|
--button-background-color: var(--root-text-color);
|
|
--button-border-color: var(--root-background-color);
|
|
--button-text-color: var(--root-background-color);
|
|
|
|
outline-color: var(--root-background-color);
|
|
}
|
|
|
|
/* TODO: Déplacer dans un Composant. */
|
|
|
|
/* Bouton intégré dans un ensemble. */
|
|
&.integrated {
|
|
border: initial;
|
|
|
|
&:hover {
|
|
color: var(--root-text-color);
|
|
background: var(--bg75-secondary);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateX(2px) translateY(2px);
|
|
}
|
|
}
|
|
|
|
/* Bouton sous forme de lien. */
|
|
&.button-link {
|
|
--button-border-color: transparent;
|
|
padding-block: var(--s-5);
|
|
padding-inline: var(--s-4);
|
|
box-shadow: initial;
|
|
line-height: var(--line-height-comfortable);
|
|
outline-offset: initial;
|
|
|
|
&:hover {
|
|
--button-border-color: var(--root-text-color);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline-offset: initial;
|
|
}
|
|
|
|
&:active {
|
|
transform: initial;
|
|
border: 1px solid var(--root-text-color);
|
|
outline: 1px solid var(--root-background-color);
|
|
outline-offset: -0.1rem;
|
|
}
|
|
}
|
|
}
|