scss: add variables to control field and button outline, for a11y (#34811)
This commit is contained in:
parent
b9c8044cd9
commit
a5e7ae5a2c
|
|
@ -436,6 +436,16 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<td><p>Taille de l'arrondi à appliquer aux boutons</p></td>
|
||||
<td><p><var>$border-radius</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$button-focus-outline</code></p></td>
|
||||
<td><p>Style du contour des boutons quand ils sont actifs</p></td>
|
||||
<td><p><var>$widget-focus-outline</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$button-focus-outline-offset</code></p></td>
|
||||
<td><p>Décalage du contour des boutons quand ils ont actifs</p></td>
|
||||
<td><p><var>$widget-focus-outline-offset</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-background</code></p></td>
|
||||
<td><p>Couleur de fond des champs de formulaire (texte, liste…)</p></td>
|
||||
|
|
@ -466,6 +476,16 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<td><p>Style de bordure des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
|
||||
<td><p><var>$widget-border</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-focus-outline</code></p></td>
|
||||
<td><p>Style du contour des champs de formulaire quand ils sont actifs</p></td>
|
||||
<td><p><var>none</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-focus-outline-offset</code></p></td>
|
||||
<td><p>Décalage du contour des champs de formulaire quand ils sont actifs</p></td>
|
||||
<td><p><var>0</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-border-radius</code></p></td>
|
||||
<td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,11 @@ $widget-border-radius: 0 !default;
|
|||
$widget-focus-background: inherit !default;
|
||||
$widget-focus-border: $widget-border !default;
|
||||
$widget-focus-color: $widget-color !default;
|
||||
$widget-focus-outline: none !default;
|
||||
$widget-focus-outline-offset: 0 !default;
|
||||
|
||||
$button-focus-outline: $widget-focus-outline !default;
|
||||
$button-focus-outline-offset: $widget-focus-outline-offset !default;
|
||||
|
||||
$widget-custom-radio-checkbox: false !default;
|
||||
$widget-custom-radio-checkbox-color: $button-background !default;
|
||||
|
|
@ -82,7 +87,9 @@ div.buttons div {
|
|||
cursor: pointer;
|
||||
border: $button-border;
|
||||
border-radius: $button-border-radius;
|
||||
transition: all 0.2s ease;
|
||||
transition: background 0.5s ease;
|
||||
transition: color 0.5s ease;
|
||||
transition: border 0.5s ease;
|
||||
margin-right: 1.5em;
|
||||
vertical-align: middle;
|
||||
box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);
|
||||
|
|
@ -100,6 +107,15 @@ div.buttons div {
|
|||
background: grayscale($button-background);
|
||||
color: grayscale($button-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@if $button-focus-outline == none {
|
||||
outline: 1px dotted $button-background;
|
||||
} @else {
|
||||
outline: $button-focus-outline;
|
||||
outline-offset: $button-focus-outline-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fargo-pick-popup button,
|
||||
|
|
@ -130,15 +146,20 @@ input, input[type="text"], input[type="email"], input[type="password"], input[ty
|
|||
border-radius: $widget-border-radius;
|
||||
box-sizing: border-box;
|
||||
margin: 0.2em 0px;
|
||||
outline: medium none;
|
||||
padding: 0.4em 0.7em 0.4em 0.7em;
|
||||
max-width: 100%;
|
||||
transition: all 0.5s ease;
|
||||
transition: background 0.5s ease;
|
||||
transition: color 0.5s ease;
|
||||
transition: border 0.5s ease;
|
||||
&:focus:not([readonly]) {
|
||||
background-color: $widget-focus-background;
|
||||
border: $widget-focus-border;
|
||||
color: $widget-focus-color;
|
||||
}
|
||||
&:focus {
|
||||
outline: $widget-focus-outline;
|
||||
outline-offset: $widget-focus-outline-offset;
|
||||
}
|
||||
}
|
||||
|
||||
select option {
|
||||
|
|
@ -177,6 +198,15 @@ input[type="checkbox"],
|
|||
input[type="radio"] {
|
||||
margin-right: 0.7em;
|
||||
margin-bottom: 0.7em;
|
||||
&:focus {
|
||||
@if $widget-focus-outline == none {
|
||||
outline: $widget-border;
|
||||
outline-style: dotted;
|
||||
} @else {
|
||||
outline: $widget-focus-outline;
|
||||
outline-offset: $widget-focus-outline-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.content label {
|
||||
|
|
@ -271,6 +301,10 @@ span.select2-container {
|
|||
border: $widget-focus-border;
|
||||
}
|
||||
}
|
||||
&.select2-container--focus span.select2-selection--single {
|
||||
outline: $widget-focus-outline;
|
||||
outline-offset: $widget-focus-outline-offset;
|
||||
}
|
||||
.select2-choices,
|
||||
.select2-choice {
|
||||
box-shadow: none;
|
||||
|
|
@ -358,8 +392,7 @@ div.select2-search {
|
|||
top: calc(0.33rem + 2px);
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&:checked + span::after {
|
||||
background: $widget-custom-radio-checkbox-color;
|
||||
}
|
||||
|
|
@ -368,7 +401,13 @@ div.select2-search {
|
|||
}
|
||||
|
||||
&:focus + span {
|
||||
outline: 1px dotted $widget-custom-radio-checkbox-color;
|
||||
@if $widget-focus-outline == none {
|
||||
outline: $widget-border;
|
||||
outline-style: dotted;
|
||||
} @else {
|
||||
outline: $widget-focus-outline;
|
||||
outline-offset: $widget-focus-outline-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,6 +123,15 @@ div#login-methods input {
|
|||
}
|
||||
}
|
||||
|
||||
.block-fc a.button:focus {
|
||||
@if $button-focus-outline == none {
|
||||
outline: 1px dotted $button-background;
|
||||
} @else {
|
||||
outline: $button-focus-outline;
|
||||
outline-offset: $button-focus-outline-offset;
|
||||
}
|
||||
}
|
||||
|
||||
#profile span.label {
|
||||
color: lighten($font-color, 20%);
|
||||
font-size: 90%;
|
||||
|
|
|
|||
|
|
@ -589,6 +589,16 @@ div.file-upload-widget {
|
|||
box-sizing: border-box;
|
||||
border: $widget-border;
|
||||
border-radius: $widget-border-radius;
|
||||
&:focus-within {
|
||||
border: $widget-focus-border;
|
||||
@if $widget-focus-outline == none {
|
||||
outline: $widget-border;
|
||||
outline-style: dotted;
|
||||
} @else {
|
||||
outline: $widget-focus-outline;
|
||||
outline-offset: $widget-focus-outline-offset;
|
||||
}
|
||||
}
|
||||
height: 150px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ $widget-background: white;
|
|||
$widget-background-focus: white;
|
||||
$widget-border-radius: 0px;
|
||||
$widget-border: 1px solid $darkblue;
|
||||
$button-focus-outline: 2px solid $blue;
|
||||
$button-focus-outline-offset: 1px;
|
||||
|
||||
$carrousel-height: 170px;
|
||||
$carrousel-navigation-bullet-border: 2px solid $darkblue;
|
||||
|
|
|
|||
|
|
@ -24,4 +24,7 @@ $body-background: white;
|
|||
$widget-background: white;
|
||||
$widget-border: 1px solid #AAA;
|
||||
$widget-border-radius: 0;
|
||||
$widget-focus-border: $widget-border;
|
||||
$widget-focus-outline: none;
|
||||
$button-focus-outline: none;
|
||||
$nav-mobile-mode: none;
|
||||
|
|
|
|||
|
|
@ -16,3 +16,4 @@ $footer-background: #3a3a3a;
|
|||
$footer-color: #b4b4b4;
|
||||
$footer-menucell-separator: 1px solid #b4b4b4;
|
||||
$nav-mobile-mode: none;
|
||||
$button-focus-outline: none;
|
||||
|
|
|
|||
|
|
@ -12,3 +12,4 @@ $button-color: rgb(49, 69, 93);
|
|||
$cell-border: 0;
|
||||
$cell-title-cover-border: false;
|
||||
$nav-mobile-mode: none;
|
||||
$button-focus-outline: none;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ $widget-border: 2px solid #e4e4e4;
|
|||
$widget-focus-background: white;
|
||||
$widget-focus-border: 2px solid #4b4b4b;
|
||||
$widget-unique-checkbox-position: left;
|
||||
$button-focus-outline: 2px solid $red;
|
||||
$button-focus-outline-offset: 1px;
|
||||
|
||||
$mobile-navigation-height: 64px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue