fix(button): ajout de couleurs de hover
This commit is contained in:
parent
d11d41f082
commit
8a343855f1
2 changed files with 13 additions and 7 deletions
|
@ -29,16 +29,18 @@ L'idée est de pouvoir générer simplement un blog ou un site simple pour les g
|
||||||
|
|
||||||
## Customiser
|
## Customiser
|
||||||
|
|
||||||
La couleur d'accents se customise en modifiant deux variables :
|
La couleur d'accents se customise en modifiant quatre variables :
|
||||||
|
|
||||||
```css
|
```css
|
||||||
:root {
|
:root {
|
||||||
--accent-color-dark: #1971c2;
|
--accent-color-dark: #1971c2;
|
||||||
--accent-color-light: #d0ebff;
|
--accent-color-light: #d0ebff;
|
||||||
|
--accent-color-dark-hover: #1864ab;
|
||||||
|
--accent-color-light-hover: #e7f5ff;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair).
|
La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair). Les deux suivantes sont les mêmes, mais avec cette fois en variante pour le survol de la souris.
|
||||||
|
|
||||||
Toute la palette peut également être customisé avec les variables css, de la manière suivante :
|
Toute la palette peut également être customisé avec les variables css, de la manière suivante :
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,9 @@
|
||||||
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
|
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
|
||||||
|
|
||||||
--accent-color-dark: #1971c2;
|
--accent-color-dark: #1971c2;
|
||||||
|
--accent-color-dark-hover: #1864ab;
|
||||||
--accent-color-light: #d0ebff;
|
--accent-color-light: #d0ebff;
|
||||||
|
--accent-color-light-hover: #e7f5ff;
|
||||||
|
|
||||||
--text-color: #212529;
|
--text-color: #212529;
|
||||||
--border-color: rgba(0,0,0,0.15);
|
--border-color: rgba(0,0,0,0.15);
|
||||||
|
@ -14,6 +16,7 @@
|
||||||
|
|
||||||
--accent-color: var(--accent-color-dark);
|
--accent-color: var(--accent-color-dark);
|
||||||
--accent-color-back: var(--accent-color-light);
|
--accent-color-back: var(--accent-color-light);
|
||||||
|
--accent-color-hover: var(--accent-color-dark-hover);
|
||||||
|
|
||||||
--border-radius: 6px;
|
--border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
@ -25,6 +28,7 @@
|
||||||
--well-color: #343a40;
|
--well-color: #343a40;
|
||||||
--accent-color: var(--accent-color-light);
|
--accent-color: var(--accent-color-light);
|
||||||
--accent-color-back: var(--accent-color-dark);
|
--accent-color-back: var(--accent-color-dark);
|
||||||
|
--accent-color-hover: var(--accent-color-light-hover);
|
||||||
|
|
||||||
--border-color: rgba(255,255,255,0.2);
|
--border-color: rgba(255,255,255,0.2);
|
||||||
--hover-color: rgba(255,255,255,0.1);
|
--hover-color: rgba(255,255,255,0.1);
|
||||||
|
@ -282,10 +286,11 @@ input[type=checkbox], input[type=radio] {
|
||||||
&:checked {
|
&:checked {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
box-shadow:inset 0px 0px 0px 3px var(--background-color);
|
box-shadow:inset 0px 0px 0px 3px var(--background-color);
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
filter:brightness(.9);
|
background-color: var(--accent-color-hover);
|
||||||
|
box-shadow:inset 0px 0px 0px 3px color-mix(in srgb, var(--background-color) 90%, currentColor);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -304,8 +309,7 @@ button, .button, input[type=submit], input[type=reset], input[type=button] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color-hover);
|
||||||
outline-style: solid;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue