Projet

Général

Profil

0001-style-sync-bits-of-grid-system-with-publik-base-them.patch

Frédéric Péters, 18 septembre 2020 17:26

Télécharger (2,51 ko)

Voir les différences: 

Subject: [PATCH 1/2] style: sync bits of grid system with publik-base-theme
 (#46794)


 gadjo/static/css/_grid.scss | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)
gadjo/static/css/_grid.scss
2 2 

  		




  3
  3
  
    
$grid-mobile-limit: 601px !default;

  		




  4
  4
  
    
$very-small-limit: 401px !default;

  		




  
  5
  
    
$grid-gutter: 1rem !default;

  		




  5
  6
  
    

  		




  6
  7
  
    
div.grid {

  		




  7
  8
  
    
	float: left;

  		




  8
  
  
    
	box-sizing: border-box;

  		




  
  9
  
    
	box-sizing: content-box;

  		




  9
  10
  
    
	padding-right: 1em;

  		




  10
  11
  
    
	clear: none;

  		




  11
  12
  
    
}

  		




  ......




  14
  15
  
    
	@for $j from 1 through $i {

  		




  15
  16
  
    
		div.grid-#{$j}-#{$i} {

  		




  16
  17
  
    
			float: left;

  		




  17
  
  
    
			box-sizing: border-box;

  		




  
  18
  
    
			box-sizing: content-box;

  		




  
  19
  
    
			&.cell {

  		




  
  20
  
    
				box-sizing: border-box;

  		




  
  21
  
    
			}

  		




  18
  22
  
    
			padding-right: 1em;

  		




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

  		




  
  23
  
    
			width: calc( #{100*$j/$i+0%} - #{$grid-gutter});

  		




  20
  24
  
    
			@media screen and (max-width: $grid-mobile-limit) {

  		




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

  		




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

  		




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

  		




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

  		




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

  		




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

  		




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

  		




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

  		




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

  		




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

  		




  
  25
  
    
				@if $i == 4 and $j <= 2 { width: calc(50% - #{$grid-gutter}); }

  		




  
  26
  
    
				@else if $i == 4 and $j >  2 { width: calc(100% - #{$grid-gutter}); }

  		




  
  27
  
    
				@else if $i == 6 and $j <= 2 { width: calc(#{100/3+0%} - #{$grid-gutter}); }

  		




  
  28
  
    
				@else if $i == 6 and $j == 3 { width: calc(50% - #{$grid-gutter}); }

  		




  
  29
  
    
				@else if $i == 6 and $j <= 5 { width: calc(#{200/3+0%} - #{$grid-gutter}); }

  		




  
  30
  
    
				@else if $i == 6 and $j == 6 { width: calc(100% - #{$grid-gutter}); }

  		




  
  31
  
    
				@else if $i == 12 and $j <= 4 { width: calc(#{100/3+0%} - #{$grid-gutter}); }

  		




  
  32
  
    
				@else if $i == 12 and $j <= 7 { width: calc(50% - #{$grid-gutter}); }

  		




  
  33
  
    
				@else if $i == 12 and $j <= 11 { width: calc(#{200/3+0%} - #{$grid-gutter}); }

  		




  
  34
  
    
				@else if $i == 12 and $j == 12 { width: calc(100% - #{$grid-gutter}); }

  		




  31
  35
  
    
			}

  		




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

  		




  33
  37
  
    
				width: 100%;

  		




  34
  
  
    
-