Projet

Général

Profil

0001-scss-add-custom-medias-sass-vars-to-manage-medias-qu.patch

Thomas Jund, 20 décembre 2019 16:09

Télécharger (9,04 ko)

Voir les différences: 

Subject: [PATCH] scss: add custom medias sass vars to manage medias queries
 (#37223)


 static/includes/_cells.scss           | 10 +++++-----
 static/includes/_grid.scss            |  2 +-
 static/includes/_layout.scss          | 17 ++++++++++++-----
 static/includes/_misc.scss            | 12 ++++++------
 static/includes/_user-info.scss       |  4 ++--
 static/includes/wcs/_bulk.scss        | 10 +++++-----
 static/includes/wcs/_nearby-form.scss |  2 +-
 static/includes/wcs/_steps.scss       |  4 ++--
 8 files changed, 34 insertions(+), 27 deletions(-)
static/includes/_cells.scss
38 38 
div#right div.block,
39 39 
.gru-content #right .cell { margin-right: 0; }
40 40 

  		




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

  		




  
  41
  
    
@media screen and ($max-mobile-viewport) {

  		




  42
  42
  
    
	div#left div.block,

  		




  43
  43
  
    
	.gru-content #left .cell,

  		




  44
  44
  
    
	div#right div.block,

  		




  ......




  54
  54
  
    
	& form, & p {

  		




  55
  55
  
    
		margin: 1em 0.5em;

  		




  56
  56
  
    
	}

  		




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

  		




  
  57
  
    
	@media screen and ($max-mobile-viewport) {

  		




  58
  58
  
    
		margin: 0 auto;

  		




  59
  59
  
    
	}

  		




  60
  60
  
    
}

  		




  ......




  614
  614
  
    
#registration-blocks.methods3 > .a2-block,

  		




  615
  615
  
    
#login-page.methods2 > .block,

  		




  616
  616
  
    
#login-page.methods3 > .block {

  		




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

  		




  
  617
  
    
	@media screen and ($max-mobile-viewport) {

  		




  618
  618
  
    
		width: auto;

  		




  619
  619
  
    
		float: none;

  		




  620
  620
  
    
		margin: 0.7em;

  		




  ......




  661
  661
  
    
	div.family_members {

  		




  662
  662
  
    
		display: flex;

  		




  663
  663
  
    
		justify-content: space-between;

  		




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

  		




  
  664
  
    
		@media screen and ($max-mobile-viewport) {

  		




  665
  665
  
    
			flex-direction: column;

  		




  666
  666
  
    
		}

  		




  667
  667
  
    
	}

  		




  668
  668
  
    
	div.family_adults, div.family_children {

  		




  669
  669
  
    
		width: 48%;

  		




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

  		




  
  670
  
    
		@media screen and ($max-mobile-viewport) {

  		




  671
  671
  
    
			width: auto;

  		




  672
  672
  
    
		}

  		




  673
  673
  
    
		> div {

  		












  

    
      static/includes/_grid.scss
    
  





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

  		




  75
  75
  
    
		.grid-#{$j}-#{$i} {

  		




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

  		




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

  		




  
  77
  
    
			@media screen and ($max-mobile-viewport) {

  		




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

  		




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

  		




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

  		












  

    
      static/includes/_layout.scss
    
  





  9
  9
  
    
$sidebar-min-width: 0 !default;

  		




  10
  10
  
    
$sidebar-position: left !default;

  		




  11
  11
  
    

  		




  
  12
  
    
// custom media queries

  		




  
  13
  
    
// 	@media ($max-mobile-viewport) {}

  		




  
  14
  
    
//	@media ($min-desktop-viewport) {}

  		




  
  15
  
    
$max-mobile-viewport: "max-width: #{$mobile-limit}";

  		




  
  16
  
    
$min-desktop-viewport: "min-width: #{$mobile-limit + 1}";

  		




  
  17
  
    

  		




  
  18
  
    

  		




  12
  19
  
    
html, body {

  		




  13
  20
  
    
	margin: 0;

  		




  14
  21
  
    
	min-height: 100vh;

  		




  ......




  51
  58
  
    
	& h1 {

  		




  52
  59
  
    
		margin: 0;

  		




  53
  60
  
    
	}

  		




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

  		




  
  61
  
    
	@media screen and ($max-mobile-viewport) {

  		




  55
  62
  
    
		& h1 {

  		




  56
  63
  
    
			padding-left: $top-logo-width+70px;

  		




  57
  64
  
    
			background-position: 70px;

  		




  ......




  65
  72
  
    
	max-width: $width;

  		




  66
  73
  
    
	margin: 0px auto 0px auto;

  		




  67
  74
  
    
	padding: 0;

  		




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

  		




  
  75
  
    
	@media screen and ($max-mobile-viewport) {

  		




  69
  76
  
    
		position: static;

  		




  70
  77
  
    
		z-index: 0;

  		




  71
  78
  
    
	}

  		




  ......




  122
  129
  
    
	}

  		




  123
  130
  
    
}

  		




  124
  131
  
    

  		




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

  		




  
  132
  
    
@media screen and ($max-mobile-viewport) {

  		




  126
  133
  
    
	#columns {

  		




  127
  134
  
    
		padding: 0 0.7em;

  		




  128
  135
  
    
		max-width: 100%;

  		




  ......




  171
  178
  
    
	padding-left: $top-logo-width;

  		




  172
  179
  
    
}

  		




  173
  180
  
    

  		




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

  		




  
  181
  
    
@media screen and ($max-mobile-viewport) {

  		




  175
  182
  
    
	.desktop-only {

  		




  176
  183
  
    
		display: none;

  		




  177
  184
  
    
	}

  		




  178
  185
  
    
}

  		




  179
  186
  
    

  		




  180
  
  
    
@media screen and (min-width: $mobile-limit+1px) {

  		




  
  187
  
    
@media screen and ($min-desktop-viewport) {

  		




  181
  188
  
    
	.mobile-only {

  		




  182
  189
  
    
		display: none;

  		




  183
  190
  
    
	}

  		












  

    
      static/includes/_misc.scss
    
  





  18
  18
  
    
	margin: 0.7em 0.5rem;

  		




  19
  19
  
    
}

  		




  20
  20
  
    

  		




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

  		




  
  21
  
    
@media screen and ($max-mobile-viewport) {

  		




  22
  22
  
    
	img {

  		




  23
  23
  
    
		max-width: 100%;

  		




  24
  24
  
    
	}

  		




  ......




  43
  43
  
    
	white-space: pre;

  		




  44
  44
  
    
	opacity: 0.9;

  		




  45
  45
  
    
	pointer-events: none;

  		




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

  		




  
  46
  
    
	@media screen and ($max-mobile-viewport) {

  		




  47
  47
  
    
		top: auto;

  		




  48
  48
  
    
		bottom: 3rem;

  		




  49
  49
  
    
		right: -1rem;

  		




  ......




  74
  74
  
    
}

  		




  75
  75
  
    

  		




  76
  76
  
    

  		




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

  		




  
  77
  
    
@media screen and ($max-mobile-viewport) {

  		




  78
  78
  
    
	#welcome-text,

  		




  79
  79
  
    
	#login-methods {

  		




  80
  80
  
    
		width: auto;

  		




  ......




  114
  114
  
    
			height: 3rem;

  		




  115
  115
  
    
			line-height: 3rem;

  		




  116
  116
  
    
		}

  		




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

  		




  
  117
  
    
		@media screen and ($max-mobile-viewport) {

  		




  118
  118
  
    
			border-left: none;

  		




  119
  119
  
    
			padding-left: 0;

  		




  120
  120
  
    
			&::after {

  		




  ......




  157
  157
  
    
	padding: 5px 10px;

  		




  158
  158
  
    
	border: 1px solid #888;

  		




  159
  159
  
    
	border-width: 0 1px 1px 1px;

  		




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

  		




  
  160
  
    
	@media screen and ($max-mobile-viewport) {

  		




  161
  161
  
    
		display: none;

  		




  162
  162
  
    
	}

  		




  163
  163
  
    
}

  		




  ......




  187
  187
  
    
}

  		




  188
  188
  
    

  		




  189
  189
  
    
%top-consent-banner {

  		




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

  		




  
  190
  
    
	@media screen and ($max-mobile-viewport) {

  		




  191
  191
  
    
		position: absolute;

  		




  192
  192
  
    
		background: rgba(255, 255, 255, 0.98);

  		




  193
  193
  
    
		box-shadow: 0 0 8px 1px #333;

  		












  

    
      static/includes/_user-info.scss
    
  





  12
  12
  
    
	padding: 0.7em 2em 0.2em 2em;

  		




  13
  13
  
    
	border: 3px solid $primary-color;

  		




  14
  14
  
    
	border-width: 0 1px 1px 1px;

  		




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

  		




  
  15
  
    
	@media screen and ($max-mobile-viewport) {

  		




  16
  16
  
    
		border-right: 0;

  		




  17
  17
  
    
		right: 0;

  		




  18
  18
  
    
		max-width: 90%;

  		




  ......




  27
  27
  
    

  		




  28
  28
  
    
#toplinks span.connected-user {

  		




  29
  29
  
    
	padding-right: 0.7em;

  		




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

  		




  
  30
  
    
	@media screen and ($max-mobile-viewport) {

  		




  31
  31
  
    
		padding-right: 0;

  		




  32
  32
  
    
	}

  		




  33
  33
  
    
}

  		












  

    
      static/includes/wcs/_bulk.scss
    
  





  58
  58
  
    
	padding: 0;

  		




  59
  59
  
    
	margin: 0;

  		




  60
  60
  
    
	list-style: none;

  		




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

  		




  
  61
  
    
	@media screen and ($max-mobile-viewport) {

  		




  62
  62
  
    
		@include vendor-prefix('column-count', '1');

  		




  63
  63
  
    
	}

  		




  64
  64
  
    
}

  		




  ......




  132
  132
  
    

  		




  133
  133
  
    

  		




  134
  134
  
    

  		




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

  		




  
  135
  
    
@media screen and ($max-mobile-viewport) {

  		




  136
  136
  
    
	// move #gauche on top and tracking code after steps

  		




  137
  137
  
    
	div#gauche {

  		




  138
  138
  
    
		float: none;

  		




  ......




  151
  151
  
    
	}

  		




  152
  152
  
    
}

  		




  153
  153
  
    

  		




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

  		




  
  154
  
    
@media screen and ($max-mobile-viewport) {

  		




  155
  155
  
    
	div#gauche + div#rub_service,

  		




  156
  156
  
    
	div#rub_service {

  		




  157
  157
  
    
		width: 100%;

  		




  ......




  405
  405
  
    
	font-weight: normal;

  		




  406
  406
  
    
	font-size: smaller;

  		




  407
  407
  
    
	float: right;

  		




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

  		




  
  408
  
    
	@media screen and ($max-mobile-viewport) {

  		




  409
  409
  
    
		padding-left: 0;

  		




  410
  410
  
    
		float: none;

  		




  411
  411
  
    
		display: block;

  		




  ......




  647
  647
  
    
	&.folded {

  		




  648
  648
  
    
		span.disclose-message {

  		




  649
  649
  
    
			display: inline-block;

  		




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

  		




  
  650
  
    
			@media screen and ($max-mobile-viewport) {

  		




  651
  651
  
    
				// never displayed on mobile as the small width

  		




  652
  652
  
    
				// makes clear the relation between title and

  		




  653
  653
  
    
				// open/close bracket.

  		












  

    
      static/includes/wcs/_nearby-form.scss
    
  





  40
  40
  
    
}

  		




  41
  41
  
    
.nearby-form--datetime {

  		




  42
  42
  
    
	width: 20%;

  		




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

  		




  
  43
  
    
	@media screen and ($max-mobile-viewport) {

  		




  44
  44
  
    
		width: 30%;

  		




  45
  45
  
    
	}

  		




  46
  46
  
    
}

  		












  

    
      static/includes/wcs/_steps.scss
    
  





  49
  49
  
    
//	Steps orientations depend on media-queries & $form-sidebar-position

  		




  50
  50
  
    
@mixin desktop-horizontal-steps() {

  		




  51
  51
  
    
	@if ($form-sidebar-position == top) {

  		




  52
  
  
    
		@media (min-width: $mobile-limit + 1) {

  		




  
  52
  
    
		@media ($min-desktop-viewport) {

  		




  53
  53
  
    
			@content;

  		




  54
  54
  
    
		}

  		




  55
  55
  
    
	}

  		




  56
  56
  
    
}

  		




  57
  57
  
    
@mixin desktop-vertical-steps() {

  		




  58
  58
  
    
	@if ($form-sidebar-position == left or $form-sidebar-position == right) {

  		




  59
  
  
    
		@media (min-width: $mobile-limit + 1) {

  		




  
  59
  
    
		@media ($min-desktop-viewport) {

  		




  60
  60
  
    
			@content;

  		




  61
  61
  
    
		}

  		




  62
  62
  
    
	}

  		




  63
  
  
    
-