Projet

Général

Profil

0001-scss-links-list-use-li-border-bottom-as-item-separat.patch

Thomas Jund, 20 janvier 2020 17:13

Télécharger (4,54 ko)

Voir les différences: 

Subject: [PATCH] scss: links-list: use li border-bottom as item separator
 (#38821)


 static/arles/_custom.scss                   |  2 +-
 static/fontenay-sous-bois-2018/_custom.scss |  8 +-
 static/includes/_cells.scss                 | 99 ++++++++++-----------
 3 files changed, 55 insertions(+), 54 deletions(-)
static/arles/_custom.scss
275 275 
.combo-search-results {
276 276 
	width: 60%;
277 277 
	margin: 0 auto;
278 
	div.links-list ul > li > a {
278 
	div.links-list ul > li {
279 279 
		border: 0;
280 280 
	}
281 281 
	li div p {
static/fontenay-sous-bois-2018/_custom.scss
304 304 
			color: #888;
305 305 
			padding: 0.5rem 0.5rem;
306 306 
		}
307 
		li:hover a,
308 
		li.selected a {
309 
			color: $primary-color;
307 
		li:hover,
308 
		li.selected {
310 309 
			border-bottom: 1px solid $primary-color;
310 
			a {
311 
				color: $primary-color;
312 
			}
311 313 
		}
312 314 
	}
313 315 
}
static/includes/_cells.scss
142 142 
	position: relative;
143 143 
	z-index: 0;
144 144 

  		




  145
  
  
    
	& > li > a {

  		




  146
  
  
    
		display: -ms-flexbox;

  		




  147
  
  
    
		display: flex;

  		




  148
  
  
    
		-ms-align-items: baseline;

  		




  149
  
  
    
		align-items: baseline;

  		




  150
  
  
    

  		




  151
  
  
    
		-ms-flex-wrap: wrap;

  		




  152
  
  
    
		flex-wrap: wrap;

  		




  153
  
  
    
		padding: 1rem;

  		




  154
  
  
    
		color: $cell-entry-color;

  		




  
  145
  
    
	& > li {

  		




  155
  146
  
    
		border-bottom: 1px solid $cell-entry-border-color;

  		




  156
  
  
    
		position: relative;

  		




  157
  147
  
    

  		




  158
  
  
    
		&:hover {

  		




  159
  
  
    
			color: $cell-entry-hover-color;

  		




  160
  
  
    
			@if $cell-entry-hover-effect != none {

  		




  161
  
  
    
				&:after {

  		




  162
  
  
    
					width: 100%;

  		




  163
  
  
    
					height: 100%;

  		




  
  148
  
    
		> a {

  		




  
  149
  
    
			display: -ms-flexbox;

  		




  
  150
  
    
			display: flex;

  		




  
  151
  
    
			-ms-align-items: baseline;

  		




  
  152
  
    
			align-items: baseline;

  		




  
  153
  
    

  		




  
  154
  
    
			-ms-flex-wrap: wrap;

  		




  
  155
  
    
			flex-wrap: wrap;

  		




  
  156
  
    
			padding: 1rem;

  		




  
  157
  
    
			color: $cell-entry-color;

  		




  
  158
  
    
			position: relative;

  		




  
  159
  
    

  		




  
  160
  
    
			&:hover {

  		




  
  161
  
    
				color: $cell-entry-hover-color;

  		




  
  162
  
    
				@if $cell-entry-hover-effect != none {

  		




  
  163
  
    
					&:after {

  		




  
  164
  
    
						width: 100%;

  		




  
  165
  
    
						height: 100%;

  		




  
  166
  
    
					}

  		




  
  167
  
    
				} @else {

  		




  
  168
  
    
					background-color: $cell-entry-hover-background;

  		




  164
  169
  
    
				}

  		




  165
  
  
    
			} @else {

  		




  166
  
  
    
				background-color: $cell-entry-hover-background;

  		




  167
  
  
    
			}

  		




  168
  
  
    
		}

  		




  169
  
  
    
		&:after {

  		




  170
  
  
    
			@if $cell-entry-hover-effect != none {

  		




  171
  
  
    
				background-color: $cell-entry-hover-background;

  		




  172
  
  
    
				content: "";

  		




  173
  
  
    
				position: absolute;

  		




  174
  
  
    
				z-index: -1;

  		




  175
  
  
    
				transition: all 0.3s ease;

  		




  176
  
  
    
				box-sizing: border-box;

  		




  177
  
  
    
				width: 0;

  		




  178
  
  
    
			}

  		




  179
  
  
    
			@if $cell-entry-hover-effect == left-to-right {

  		




  180
  
  
    
				width: 0%; height: 100%; top: 0; left: 0;

  		




  181
  
  
    
			}

  		




  182
  
  
    
			@if $cell-entry-hover-effect == right-to-left {

  		




  183
  
  
    
				width: 0%; height: 100%; top: 0; right: 0;

  		




  184
  
  
    
			}

  		




  185
  
  
    
			@if $cell-entry-hover-effect == top-to-bottom {

  		




  186
  
  
    
				width: 100%; height: 0%; top: 0; left: 0;

  		




  187
  170
  
    
			}

  		




  188
  
  
    
			@if $cell-entry-hover-effect == bottom-to-top {

  		




  189
  
  
    
				width: 100%; height: 0%; bottom: 0; left: 0;

  		




  190
  
  
    
			}

  		




  191
  
  
    
			@if $cell-entry-hover-effect == middle-to-edges {

  		




  192
  
  
    
				top: 50%;

  		




  193
  
  
    
				left: 50%;

  		




  194
  
  
    
				transition: translateY(-50%) translateX(-50%);

  		




  
  171
  
    
			&:after {

  		




  
  172
  
    
				@if $cell-entry-hover-effect != none {

  		




  
  173
  
    
					background-color: $cell-entry-hover-background;

  		




  
  174
  
    
					content: "";

  		




  
  175
  
    
					position: absolute;

  		




  
  176
  
    
					z-index: -1;

  		




  
  177
  
    
					transition: all 0.3s ease;

  		




  
  178
  
    
					box-sizing: border-box;

  		




  
  179
  
    
					width: 0;

  		




  
  180
  
    
				}

  		




  
  181
  
    
				@if $cell-entry-hover-effect == left-to-right {

  		




  
  182
  
    
					width: 0%; height: 100%; top: 0; left: 0;

  		




  
  183
  
    
				}

  		




  
  184
  
    
				@if $cell-entry-hover-effect == right-to-left {

  		




  
  185
  
    
					width: 0%; height: 100%; top: 0; right: 0;

  		




  
  186
  
    
				}

  		




  
  187
  
    
				@if $cell-entry-hover-effect == top-to-bottom {

  		




  
  188
  
    
					width: 100%; height: 0%; top: 0; left: 0;

  		




  
  189
  
    
				}

  		




  
  190
  
    
				@if $cell-entry-hover-effect == bottom-to-top {

  		




  
  191
  
    
					width: 100%; height: 0%; bottom: 0; left: 0;

  		




  
  192
  
    
				}

  		




  
  193
  
    
				@if $cell-entry-hover-effect == middle-to-edges {

  		




  
  194
  
    
					top: 50%;

  		




  
  195
  
    
					left: 50%;

  		




  
  196
  
    
					transition: translateY(-50%) translateX(-50%);

  		




  
  197
  
    
				}

  		




  195
  198
  
    
			}

  		




  196
  199
  
    
		}

  		




  197
  200
  
    
	}

  		




  ......




  217
  220
  
    
	}

  		




  218
  221
  
    

  		




  219
  222
  
    
	li div.description {

  		




  220
  
  
    
		position: relative;

  		




  221
  
  
    
		top: -1px;

  		




  222
  
  
    
		border-top: 1px solid $cell-background;

  		




  223
  223
  
    
		padding: 0 1rem;

  		




  224
  224
  
    
		font-size: 90%;

  		




  225
  225
  
    
		color: #666;

  		




  ......




  227
  227
  
    
			margin-top: 0;

  		




  228
  228
  
    
			margin-bottom: 0.7em;

  		




  229
  229
  
    
		}

  		




  230
  
  
    
		border-bottom: 1px solid $cell-entry-border-color;

  		




  231
  230
  
    
	}

  		




  232
  231
  
    
}

  		




  233
  232
  
    

  		




  234
  
  
    
-