Projet

Général

Profil

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

Thomas Jund, 07 février 2020 17:20

Télécharger (4,84 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                 | 111 ++++++++++----------
 3 files changed, 63 insertions(+), 58 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
146 146
	position: relative;
147 147
	z-index: 0;
148 148

  
149
	& > li > a {
150
		display: -ms-flexbox;
151
		display: flex;
152
		-ms-align-items: baseline;
153
		align-items: baseline;
154

  
155
		-ms-flex-wrap: wrap;
156
		flex-wrap: wrap;
157
		padding: 1rem;
158
		color: $cell-entry-color;
149
	& > li {
159 150
		border-bottom: 1px solid $cell-entry-border-color;
160
		position: relative;
161 151

  
162
		&:hover {
163
			color: $cell-entry-hover-color;
164
			@if $cell-entry-hover-effect != none {
165
				&:after {
166
					width: 100%;
167
					height: 100%;
152
		> a {
153
			display: -ms-flexbox;
154
			display: flex;
155
			-ms-align-items: baseline;
156
			align-items: baseline;
157

  
158
			-ms-flex-wrap: wrap;
159
			flex-wrap: wrap;
160
			padding: 1rem;
161
			color: $cell-entry-color;
162
			position: relative;
163

  
164
			&:hover {
165
				color: $cell-entry-hover-color;
166
				@if $cell-entry-hover-effect != none {
167
					&:after {
168
						width: 100%;
169
						height: 100%;
170
					}
171
				} @else {
172
					background-color: $cell-entry-hover-background;
168 173
				}
169
			} @else {
170
				background-color: $cell-entry-hover-background;
171
			}
172
		}
173
		&:after {
174
			@if $cell-entry-hover-effect != none {
175
				background-color: $cell-entry-hover-background;
176
				content: "";
177
				position: absolute;
178
				z-index: -1;
179
				transition: all 0.3s ease;
180
				box-sizing: border-box;
181
				width: 0;
182
			}
183
			@if $cell-entry-hover-effect == left-to-right {
184
				width: 0%; height: 100%; top: 0; left: 0;
185 174
			}
186
			@if $cell-entry-hover-effect == right-to-left {
187
				width: 0%; height: 100%; top: 0; right: 0;
188
			}
189
			@if $cell-entry-hover-effect == top-to-bottom {
190
				width: 100%; height: 0%; top: 0; left: 0;
191
			}
192
			@if $cell-entry-hover-effect == bottom-to-top {
193
				width: 100%; height: 0%; bottom: 0; left: 0;
194
			}
195
			@if $cell-entry-hover-effect == middle-to-edges {
196
				top: 50%;
197
				left: 50%;
198
				transform: translateY(-50%) translateX(-50%);
175
			&:after {
176
				@if $cell-entry-hover-effect != none {
177
					background-color: $cell-entry-hover-background;
178
					content: "";
179
					position: absolute;
180
					z-index: -1;
181
					transition: all 0.3s ease;
182
					box-sizing: border-box;
183
					width: 0;
184
				}
185
				@if $cell-entry-hover-effect == left-to-right {
186
					width: 0%; height: 100%; top: 0; left: 0;
187
				}
188
				@if $cell-entry-hover-effect == right-to-left {
189
					width: 0%; height: 100%; top: 0; right: 0;
190
				}
191
				@if $cell-entry-hover-effect == top-to-bottom {
192
					width: 100%; height: 0%; top: 0; left: 0;
193
				}
194
				@if $cell-entry-hover-effect == bottom-to-top {
195
					width: 100%; height: 0%; bottom: 0; left: 0;
196
				}
197
				@if $cell-entry-hover-effect == middle-to-edges {
198
					top: 50%;
199
					left: 50%;
200
					transform: translateY(-50%) translateX(-50%);
201
				}
199 202
			}
200 203
		}
201 204
	}
......
208 211
	}
209 212

  
210 213
	li div.description {
211
		position: relative;
212
		top: -1px;
213
		border-top: 1px solid $cell-background;
214 214
		padding: 0 1rem;
215 215
		font-size: 90%;
216 216
		color: #666;
......
218 218
			margin-top: 0;
219 219
			margin-bottom: 0.7em;
220 220
		}
221
		border-bottom: 1px solid $cell-entry-border-color;
222 221
	}
223 222
}
224 223

  
......
336 335
	}
337 336
}
338 337

  
339
div.menucell ul ul a {
340
	padding-left: 3em;
341
	font-size: 90%;
342
}
338
div.menucell li li {
339
	border-bottom: none;
340
	border-top: 1px solid $cell-entry-border-color;
341
	a {
342
		padding-left: 3em;
343
		font-size: 90%;
344
	}
345
} 
343 346

  
344 347
div.wcs-tracking-code-input form {
345 348
	margin: 1em;
346
-