Skip to content

Commit 91959ed

Browse files
irenelagnoirenelagno
committed
MAGETWO-86867: [Tech Debt] Revise LESS/CSS classes and icons
1 parent 356b549 commit 91959ed

File tree

2 files changed

+138
-139
lines changed
  • app/code/Magento/PageBuilder/view

2 files changed

+138
-139
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/slick/_slick.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
}
6060

6161
.slick-vertical & {
62-
border: @entityBorderWidth solid transparent;
62+
border: 1px solid transparent;
6363
display: block;
6464
height: auto;
6565
}

‎app/code/Magento/PageBuilder/view/frontend/web/css/source/slick/_slick.less

Lines changed: 137 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,19 @@
11
/* Slider */
22

3-
.slick-arrow.slick-hidden {
4-
display: none;
5-
}
6-
7-
.slick-dots {
8-
bottom: -30px;
3+
.slick-slider {
4+
box-sizing: border-box;
95
display: block;
10-
list-style: none;
11-
margin: 0;
12-
padding: 0;
13-
position: absolute;
14-
text-align: center;
15-
width: 100%;
16-
li {
17-
cursor: pointer;
18-
display: inline-block;
19-
height: 14px;
20-
margin: 0 5px;
21-
padding: 0;
22-
position: relative;
23-
vertical-align: middle;
24-
width: 14px;
25-
button {
26-
background: transparent;
27-
border: 1px solid #ccc;
28-
border-radius: 10px;
29-
box-shadow: none;
30-
cursor: pointer;
31-
display: block;
32-
height: 14px;
33-
padding: 0;
34-
text-indent: -99999px;
35-
transition: .3s;
36-
width: 14px;
37-
38-
&:hover {
39-
border: 1px solid #b3b3b3;
40-
}
41-
42-
&:active,
43-
&:focus,
44-
&:not(.primary) {
45-
background: transparent;
46-
box-shadow: none;
47-
}
48-
}
49-
50-
&.slick-active {
51-
button {
52-
background: #1c1918;
53-
border: none;
54-
}
55-
}
56-
}
6+
position: relative;
7+
-webkit-tap-highlight-color: transparent;
8+
-ms-touch-action: pan-y;
9+
touch-action: pan-y;
10+
-webkit-touch-callout: none;
11+
-webkit-user-select: none;
12+
-khtml-user-select: none;
13+
-moz-user-select: none;
14+
-ms-user-select: none;
15+
user-select: none;
5716
}
58-
5917
.slick-list {
6018
display: block;
6119
margin: 0;
@@ -73,6 +31,83 @@
7331
}
7432
}
7533

34+
.slick-track {
35+
display: block;
36+
left: 0;
37+
margin-left: auto;
38+
margin-right: auto;
39+
position: relative;
40+
top: 0;
41+
42+
&:before,
43+
&:after {
44+
content: '';
45+
display: table;
46+
}
47+
48+
&:after {
49+
clear: both;
50+
}
51+
52+
.slick-loading & {
53+
visibility: hidden;
54+
}
55+
}
56+
.slick-slide {
57+
display: none;
58+
float: left;
59+
height: 100%;
60+
min-height: 1px;
61+
[dir='rtl'] & {
62+
float: right;
63+
}
64+
img {
65+
display: block;
66+
}
67+
&.slick-loading img {
68+
display: none;
69+
}
70+
71+
&.dragging img {
72+
pointer-events: none;
73+
}
74+
75+
.slick-initialized & {
76+
display: block;
77+
}
78+
79+
.slick-loading & {
80+
visibility: hidden;
81+
}
82+
83+
.slick-vertical & {
84+
border: 1px solid transparent;
85+
display: block;
86+
height: auto;
87+
}
88+
}
89+
90+
.slick-slider .slick-track,
91+
.slick-slider .slick-list {
92+
-webkit-transform: translate3d(0, 0, 0);
93+
-moz-transform: translate3d(0, 0, 0);
94+
-ms-transform: translate3d(0, 0, 0);
95+
-o-transform: translate3d(0, 0, 0);
96+
transform: translate3d(0, 0, 0);
97+
}
98+
99+
.slick-arrow.slick-hidden {
100+
display: none;
101+
}
102+
103+
.slick-prev {
104+
left: 2rem;
105+
&:before {
106+
content: @icon-pagebuilder-caret-prev__content;
107+
padding-right: 5px;
108+
}
109+
}
110+
76111
.slick-next {
77112
right: 2rem;
78113
&:before {
@@ -81,8 +116,8 @@
81116
}
82117
}
83118

84-
.slick-next,
85-
.slick-prev {
119+
.slick-prev,
120+
.slick-next {
86121
background: rgba(252, 252, 252, .6);
87122
border: none;
88123
border-radius: 0;
@@ -106,6 +141,7 @@
106141
opacity: .2;
107142
}
108143

144+
109145
&:hover {
110146
background: rgba(252, 252, 252, 1);
111147
border: none;
@@ -139,91 +175,54 @@
139175
}
140176
}
141177

142-
.slick-prev {
143-
left: 2rem;
144-
&:before {
145-
content: @icon-pagebuilder-caret-prev__content;
146-
padding-right: 5px;
147-
}
148-
}
149-
150-
.slick-slider {
151-
box-sizing: border-box;
152-
display: block;
153-
position: relative;
154-
-webkit-tap-highlight-color: transparent;
155-
-ms-touch-action: pan-y;
156-
touch-action: pan-y;
157-
-webkit-touch-callout: none;
158-
-webkit-user-select: none;
159-
-khtml-user-select: none;
160-
-moz-user-select: none;
161-
-ms-user-select: none;
162-
user-select: none;
163-
}
164-
165-
.slick-slide {
166-
display: none;
167-
float: left;
168-
height: 100%;
169-
min-height: 1px;
170-
[dir='rtl'] & {
171-
float: right;
172-
}
173-
img {
174-
display: block;
175-
}
176-
&.slick-loading img {
177-
display: none;
178-
}
179-
180-
&.dragging img {
181-
pointer-events: none;
182-
}
183-
184-
.slick-initialized & {
185-
display: block;
186-
}
187-
188-
.slick-loading & {
189-
visibility: hidden;
190-
}
191-
192-
.slick-vertical & {
193-
border: 1px solid transparent;
194-
display: block;
195-
height: auto;
196-
}
197-
}
198-
199-
.slick-slider .slick-track,
200-
.slick-slider .slick-list {
201-
-webkit-transform: translate3d(0, 0, 0);
202-
-moz-transform: translate3d(0, 0, 0);
203-
-ms-transform: translate3d(0, 0, 0);
204-
-o-transform: translate3d(0, 0, 0);
205-
transform: translate3d(0, 0, 0);
206-
}
207-
208-
.slick-track {
178+
.slick-dots {
179+
bottom: -30px;
209180
display: block;
210-
left: 0;
211-
margin-left: auto;
212-
margin-right: auto;
213-
position: relative;
214-
top: 0;
181+
list-style: none;
182+
margin: 0;
183+
padding: 0;
184+
position: absolute;
185+
text-align: center;
186+
width: 100%;
187+
li {
188+
cursor: pointer;
189+
display: inline-block;
190+
height: 14px;
191+
margin: 0 5px;
192+
padding: 0;
193+
position: relative;
194+
vertical-align: middle;
195+
width: 14px;
196+
button {
197+
background: transparent;
198+
border: 1px solid #ccc;
199+
border-radius: 10px;
200+
box-shadow: none;
201+
cursor: pointer;
202+
display: block;
203+
height: 14px;
204+
padding: 0;
205+
text-indent: -99999px;
206+
transition: .3s;
207+
width: 14px;
215208

216-
&:before,
217-
&:after {
218-
content: '';
219-
display: table;
220-
}
209+
&:hover {
210+
border: 1px solid #b3b3b3;
211+
}
221212

222-
&:after {
223-
clear: both;
224-
}
213+
&:active,
214+
&:focus,
215+
&:not(.primary) {
216+
background: transparent;
217+
box-shadow: none;
218+
}
219+
}
225220

226-
.slick-loading & {
227-
visibility: hidden;
221+
&.slick-active {
222+
button {
223+
background: #1c1918;
224+
border: none;
225+
}
226+
}
228227
}
229228
}

0 commit comments

Comments
 (0)