Skip to content

Commit 77bb78e

Browse files
VasylShvorakVasylShvorak
committed
Fixed _module.less file according Magento 2 LESS coding standard
1 parent c97fb5a commit 77bb78e

File tree

1 file changed

+58
-59
lines changed
  • app/design/frontend/Magento/blank/Magento_Swatches/web/css/source

1 file changed

+58
-59
lines changed

‎app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less

Lines changed: 58 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838

3939
// Image and Color swatch
4040
@img-color-swatch-option__hover__border: @swatch-option__hover__border;
41-
@img-color-swatch-option__hover__outline: 2px solid #ee0000;
41+
@img-color-swatch-option__hover__outline: 2px solid #e00;
4242

4343
// Tooltip
4444
@swatch-option-tooltip__background: @color-white;
@@ -53,14 +53,14 @@
5353

5454
@swatch-option-tooltip-layered-title__color: @swatch-option-tooltip-title__color;
5555

56-
// Layered Features
56+
// Layered Features
5757
@swatch-option-link-layered__focus__box-shadow: 0 0 3px 1px @color-sky-blue1;
5858

5959
//
6060
// Common
6161
// _____________________________________________
6262

63-
& when (@media-common = true) {
63+
& when (@media-common = true) {
6464

6565
.swatch {
6666
&-attribute {
@@ -72,14 +72,14 @@
7272
padding-right: @indent__s;
7373
}
7474

75-
&[data-required="1"]:after {
75+
&[data-required='1']:after {
7676
.lib-css(color, @form-field-label-asterisk__color);
7777
content: '*';
78+
font-size: @font-size__base;
79+
font-weight: @font-weight__bold;
7880
position: absolute;
7981
right: -11px;
8082
top: -2px;
81-
font-weight: @font-weight__bold;
82-
font-size: @font-size__base;
8383
}
8484
}
8585

@@ -120,16 +120,16 @@
120120

121121
&-option {
122122
.lib-css(border, @swatch-option__border);
123-
padding: 1px 2px;
124-
min-width: 30px;
125-
max-width: 90px;
126-
height: 20px;
123+
cursor: pointer;
127124
float: left;
125+
height: 20px;
128126
margin: 0 @indent__s @indent__xs 0;
129-
text-align: center;
130-
cursor: pointer;
131-
position: relative;
127+
max-width: 90px;
128+
min-width: 30px;
132129
overflow: hidden;
130+
padding: 1px 2px;
131+
position: relative;
132+
text-align: center;
133133
text-overflow: ellipsis;
134134

135135
&.text {
@@ -171,38 +171,37 @@
171171
cursor: default;
172172

173173
&:after {
174+
// ToDo: improve .lib-background-gradient() to support diagonal gradient
175+
background: linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
176+
background: -moz-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
177+
background: -ms-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
178+
background: -o-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
179+
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(42%, rgba(255, 255, 255, 0)), color-stop(43%, rgba(255, 255, 255, 1)), color-stop(46%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(255, 82, 22, 1)), color-stop(53%, rgba(255, 82, 22, 1)), color-stop(54%, rgba(255, 255, 255, 1)), color-stop(57%, rgba(255, 255, 255, 1)), color-stop(58%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
180+
background: -webkit-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
181+
bottom: 0;
174182
content: '';
175-
position: absolute;
183+
filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#00ffffff, GradientType=1)';
176184
left: 0;
185+
position: absolute;
177186
right: 0;
178187
top: 0;
179-
bottom: 0;
180-
181-
// ToDo: improve .lib-background-gradient() to support diagonal gradient
182-
background: -moz-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
183-
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(42%, rgba(255, 255, 255, 0)), color-stop(43%, rgba(255, 255, 255, 1)), color-stop(46%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(255, 82, 22, 1)), color-stop(53%, rgba(255, 82, 22, 1)), color-stop(54%, rgba(255, 255, 255, 1)), color-stop(57%, rgba(255, 255, 255, 1)), color-stop(58%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
184-
background: -webkit-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
185-
background: -o-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
186-
background: -ms-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
187-
background: linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
188-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
189188
}
190189
}
191190
&-disabled {
192-
outline: none !important;
193-
cursor: default;
194191
border: 0;
192+
cursor: default;
193+
outline: none !important;
195194

196195
&:after {
197-
.lib-css(background, @swatch-option__disabled__background);
198196
.lib-rotate(-30deg);
199197
content: '';
198+
height: 2px;
199+
left: -4px;
200200
position: absolute;
201+
top: 10px;
201202
width: 42px;
202-
height: 2px;
203203
z-index: 995;
204-
left: -4px;
205-
top: 10px;
204+
.lib-css(background, @swatch-option__disabled__background);
206205
}
207206
}
208207

@@ -211,86 +210,86 @@
211210
}
212211

213212
&-tooltip {
214-
.lib-css(background, @swatch-option-tooltip__background);
215213
.lib-css(border, @swatch-option-tooltip__border);
216214
.lib-css(color, @swatch-option-tooltip__color);
217-
max-width: 140px;
215+
display: none;
218216
max-height: 100%;
217+
max-width: 140px;
219218
min-height: 20px;
220219
min-width: 20px;
221-
position: absolute;
222220
padding: @indent__xs;
223-
display: none;
224-
z-index: 999;
221+
position: absolute;
225222
text-align: center;
223+
z-index: 999;
224+
.lib-css(background, @swatch-option-tooltip__background);
226225

227226
&,
228-
&-layered {
227+
&-layered {
229228
.corner {
230-
left: 40%;
231-
position: absolute;
232229
bottom: 0;
233230
height: 8px;
231+
left: 40%;
232+
position: absolute;
234233

235234
&:before,
236235
&:after {
236+
border-style: solid;
237237
content: '';
238+
font-size: 1px;
239+
height: 0;
238240
position: relative;
239241
width: 0;
240-
height: 0;
241-
border-style: solid;
242-
font-size: 1px;
243242
}
244243

245244
&:before {
246-
top: 2px;
247-
left: 0;
245+
border-color: @color-gray68 transparent transparent transparent;
248246
border-width: 8px 8.5px 0 8.5px;
249-
border-color: #adadad transparent transparent transparent;
247+
left: 0;
248+
top: 2px;
250249
}
251250

252251
&:after {
253-
top: 1px;
254-
left: -15px;
252+
border-color: @primary4 transparent transparent transparent;
255253
border-width: 7px 7.5px 0 7.5px;
256-
border-color: #fff transparent transparent transparent;
254+
left: -15px;
255+
top: 1px;
257256
}
258257
}
259258

260259
.image {
261260
display: block;
262261
height: 130px;
263-
width: 130px;
264262
margin: 0 auto;
263+
width: 130px;
265264
}
266265
}
267266

268267
&-layered {
269-
.lib-css(background, @swatch-option-tooltip-layered__background);
270268
.lib-css(border, @swatch-option-tooltip-layered__border);
271269
.lib-css(color, @swatch-option-tooltip-layered__color);
272-
width: 140px;
273-
position: absolute;
270+
.lib-css(background, @swatch-option-tooltip-layered__background);
274271
display: none;
275-
z-index: 999;
276272
left: -47px;
273+
position: absolute;
274+
width: 140px;
275+
z-index: 999;
277276
}
278277

279278
.title {
280279
.lib-css(color, @swatch-option-tooltip-title__color);
280+
display: block;
281+
max-height: 200px;
281282
max-width: 140px;
282283
min-height: 20px;
283-
max-height: 200px;
284-
text-align: center;
285-
display: block;
286284
overflow: hidden;
285+
text-align: center;
287286
}
288287
}
289288

290289
&-link-layered {
291-
position: relative;
292290
margin: 0 !important;
293291
padding: 0 !important;
292+
position: relative;
294293

295294
&:focus > div {
296295
.lib-css(box-shadow, @swatch-option-link-layered__focus__box-shadow);
@@ -313,8 +312,8 @@
313312
&-more {
314313
display: inline-block;
315314
margin: 2px 0;
316-
text-decoration: none !important;
317315
position: static;
316+
text-decoration: none !important;
318317
z-index: 1;
319318
}
320319

@@ -336,10 +335,10 @@
336335
}
337336

338337
.clearfix:after {
338+
clear: both;
339339
content: '';
340-
visibility: hidden;
341340
display: block;
342341
height: 0;
343-
clear: both;
342+
visibility: hidden;
344343
}
345344
}

0 commit comments

Comments
 (0)