0001-scss-add-variables-to-control-field-and-button-outli.patch

Frédéric Péters, 13 juillet 2019 18:25

Voir les différences: en ligne côte à côte

Subject: [PATCH] scss: add variables to control field and button outline, for
 a11y (#34811)

 help/fr/misc-scss.page                | 20 ++++++++++++++
 static/includes/_forms.scss           | 40 +++++++++++++++++++++++----
 static/metz-metropole-2019/_vars.scss |  2 ++
 static/toodego/_vars.scss             |  2 ++
 4 files changed, 59 insertions(+), 5 deletions(-)

       <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>
-...
       <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>

     $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;
-...
     	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);
-...
     		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,
-...
     	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 {
-...
     			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;
-...
     					top: calc(0.33rem + 2px);
     					left: 2px;
+    				  }
+    			  }
+    			}
     			&:checked + span::after {
     				background: $widget-custom-radio-checkbox-color;
+    			}
-...
+    			}
     			&:focus + span {
     				outline: 1px dotted $widget-custom-radio-checkbox-color;
     				@if $widget-focus-outline == none {
     					outline: 1px dotted $widget-custom-radio-checkbox-color;
     				} @else {
     					outline: $widget-focus-outline;
     					outline-offset: $widget-focus-outline-offset;
+    				}
+    			}
+    		}
+    	}

     $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;

     $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;
+    -

Projet

Général

Profil

Produits Entr'ouvert » Intégrations graphiques Publik

0001-scss-add-variables-to-control-field-and-button-outli.patch