Projet

Général

Profil

0001-scss-forms-add-order-alignment-options-for-buttons-3.patch

Thomas Jund (congés, retour le 29/04), 15 janvier 2020 14:47

Télécharger (2,79 ko)

Voir les différences: 

Subject: [PATCH] scss: forms: add order & alignment options for buttons
 (#31397)


 help/fr/misc-scss.page      | 12 ++++++++++++
 static/includes/_forms.scss | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
help/fr/misc-scss.page
526 526 
  libellé.</p></td>
527 527 
  <td><p><var>bottom</var></p></td>
528 528 
 </tr>
529 
 <tr>
530 
  <td><p><code>$buttons-order</code></p></td>
531 
  <td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>,<code>cancel</code>, <code>previous</code>) dans l'ordre souhaité séparé par des vigules. Ajouter l'option <code>(grow)</code> après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
532 
  </td>
533 
  <td><p><var>null</var></p></td>
534 
 </tr>
535 
 <tr>
536 
  <td><p><code>$buttons-alignment</code></p></td>
537 
  <td><p>Alignement des boutons. Toutes valeurs CSS de <code>justify-content</code></p>
538 
  </td>
539 
  <td><p><var>null</var></p></td>
540 
 </tr>
529 541 
</table>
530 542 
</section>
531 543 

  		












  

    
      static/includes/_forms.scss
    
  





  31
  31
  
    
//  light: light bottom border, no other border.

  		




  32
  32
  
    
$form-style: classic !default;

  		




  33
  33
  
    

  		




  
  34
  
    
// buttons orders and alignment

  		




  
  35
  
    
// work only for wcs forms actually

  		




  
  36
  
    
// order :

  		




  
  37
  
    
//	3 buttons : submit (form validation or next page), cancel, previous;

  		




  
  38
  
    
// 	put button in the desired order (ex: previous, submit, cancel);

  		




  
  39
  
    
// 	optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);

  		




  
  40
  
    
$buttons-order: null !default;

  		




  
  41
  
    
$buttons-alignment: null !default; // any flexbox justify-content value;

  		




  
  42
  
    

  		




  34
  43
  
    
input, select, button, textarea {

  		




  35
  44
  
    
	font-size: 100%;

  		




  36
  45
  
    
	font-family: $font-family;

  		




  ......




  530
  539
  
    
		}

  		




  531
  540
  
    
	}

  		




  532
  541
  
    
}

  		




  
  542
  
    

  		




  
  543
  
    
// Buttons order & alignment configuration

  		




  
  544
  
    
@if $buttons-order or $buttons-alignment {

  		




  
  545
  
    
	div.buttons {

  		




  
  546
  
    
		display: flex;

  		




  
  547
  
    
		flex-wrap: wrap;

  		




  
  548
  
    
		justify-content: $buttons-alignment;

  		




  
  549
  
    

  		




  
  550
  
    
		@each $btn, $grow in $buttons-order {

  		




  
  551
  
    
			$i: index($buttons-order, $btn);

  		




  
  552
  
    
			@if $grow {

  		




  
  553
  
    
				$i: index($buttons-order, $btn $grow);

  		




  
  554
  
    
			}

  		




  
  555
  
    

  		




  
  556
  
    
			.#{$btn}-button {

  		




  
  557
  
    
				order: $i;

  		




  
  558
  
    
				@if ($grow == 'grow') {

  		




  
  559
  
    
					flex-grow: 1;

  		




  
  560
  
    
				}

  		




  
  561
  
    
	 		}

  		




  
  562
  
    
		}

  		




  
  563
  
    
		// allways hidden, exclude to flex-child

  		




  
  564
  
    
		.savedraft-button {

  		




  
  565
  
    
			display: none;

  		




  
  566
  
    
		}

  		




  
  567
  
    
	}

  		




  
  568
  
    
}

  		




  533
  
  
    
-