Projet

Général

Profil

0001-scss-add-responsiveness-to-grid-system-10928.patch

Frédéric Péters, 13 mai 2016 22:13

Télécharger (2,07 ko)

Voir les différences: 

Subject: [PATCH] scss: add responsiveness to grid system (#10928)

This also changes the denomitors from 1 to 8 to a 1, 2, 3, 4, 6, 12, for richer
and more useful values.

 static/includes/_layout.scss |  1 +
 static/includes/_wcs.scss    | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)
static/includes/_layout.scss
1 1 
$width: 1000px !default;
2 2 
$mobile-limit: 800px !default;
3 
$very-small-limit: 480px !default;
3 4 
$footer-background: #666666 !default;
4 5 
$footer-color: white !default;
5 6 
$top-logo-width: 0 !default;
static/includes/_wcs.scss
401 401 
	clear: none;
402 402 
}
403 403 

  		




  404
  
  
    
@for $i from 1 through 8 {

  		




  
  404
  
    
@each $i in 1, 2, 3, 4, 6, 12 {

  		




  405
  405
  
    
	@for $j from 1 through $i {

  		




  406
  406
  
    
		div.dataview div.grid-#{$j}-#{$i},

  		




  407
  407
  
    
		form.quixote div.grid-#{$j}-#{$i} {

  		




  ......




  415
  415
  
    
			box-sizing: border-box;

  		




  416
  416
  
    
			padding-right: 1em;

  		




  417
  417
  
    
			width: (100*$j/$i+0%);

  		




  
  418
  
    
			@media screen and (max-width: $mobile-limit) {

  		




  
  419
  
    
				@if $i == 4 and $j <= 2 { width: 50%; }

  		




  
  420
  
    
				@else if $i == 4 and $j >  2 { width: 100%; }

  		




  
  421
  
    
				@else if $i == 6 and $j <= 2 { width: (100/3+0%); }

  		




  
  422
  
    
				@else if $i == 6 and $j == 3 { width: 50%; }

  		




  
  423
  
    
				@else if $i == 6 and $j <= 5 { width: (200/3+0%); }

  		




  
  424
  
    
				@else if $i == 6 and $j == 6 { width: 100%; }

  		




  
  425
  
    
				@else if $i == 12 and $j <= 4 { width: (100/3+0%); }

  		




  
  426
  
    
				@else if $i == 12 and $j <= 7 { width: 50%; }

  		




  
  427
  
    
				@else if $i == 12 and $j <= 11 { width: (200/3+0%); }

  		




  
  428
  
    
				@else if $i == 12 and $j == 12 { width: 100%; }

  		




  
  429
  
    
			}

  		




  
  430
  
    
			@media screen and (max-width: $very-small-limit) {

  		




  
  431
  
    
				width: 100%;

  		




  
  432
  
    
			}

  		




  418
  433
  
    
			& + div {

  		




  419
  434
  
    
				clear: both;

  		




  420
  435
  
    
			}

  		




  421
  
  
    
-