Skip to content

Commit 88b0a52

Browse files
author
Natalia Momotenko
committed
Merge remote-tracking branch 'origin/MAGETWO-45910-new' into PR
2 parents 8e64956 + 6662509 commit 88b0a52

File tree

2 files changed

+300
-283
lines changed
  • app/design/frontend/Magento

2 files changed

+300
-283
lines changed

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

Lines changed: 143 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -3,178 +3,185 @@
33
// * See COPYING.txt for license details.
44
// */
55

6-
@autocomplete-background: @color-white;
7-
@autocomplete-border: 1px solid @form-element-input__border-color;
8-
@autocomplete-item-border: 1px solid @color-gray90;
9-
@autocomplete-item-hover: @color-gray91;
10-
@autocomplete-item-amount-color: @color-gray60;
6+
//
7+
// Variables
8+
// _____________________________________________
9+
10+
@autocomplete__background-color: @color-white;
11+
@autocomplete__border: 1px solid @form-element-input__border-color;
12+
@autocomplete-item__border: 1px solid @color-gray90;
13+
@autocomplete-item__hover__color: @color-gray91;
14+
@autocomplete-item-amount__color: @color-gray60;
1115

1216
//
13-
// Common
14-
//--------------------------------------
17+
// Common
18+
// _____________________________________________
1519

1620
& when (@media-common = true) {
21+
.block-search {
22+
margin-bottom: 0;
1723

18-
.block-search {
19-
margin-bottom: 0;
20-
21-
.block {
22-
&-title {
23-
display: none;
24+
.block {
25+
&-title {
26+
display: none;
27+
}
2428
}
25-
}
2629

27-
.block-content {
28-
margin-bottom: 0;
29-
}
30+
.block-content {
31+
margin-bottom: 0;
32+
}
3033

31-
.label {
32-
.lib-icon-font(
34+
.label {
35+
.lib-icon-font(
3336
@_icon-font-content: @icon-search,
3437
@_icon-font-size: 35px,
3538
@_icon-font-line-height: 33px,
3639
@_icon-font-color: @minicart-icons-color,
3740
@_icon-font-color-hover: @minicart-icons-color-hover,
3841
@_icon-font-color-active: @minicart-icons-color-hover,
3942
@_icon-font-text-hide: true
40-
);
41-
display: inline-block;
42-
float: right;
43+
);
44+
display: inline-block;
45+
float: right;
4346

44-
&.active {
45-
+ .control {
46-
input {
47-
position: static;
47+
&.active {
48+
+ .control {
49+
input {
50+
position: static;
51+
}
4852
}
4953
}
5054
}
51-
}
5255

53-
.action.search {
54-
display: none;
55-
}
56+
.action.search {
57+
display: none;
58+
}
5659

57-
.control {
58-
border-top: 1px solid @border-color__base;
59-
clear: both;
60-
margin: 0 -@layout__width-xs-indent -1px;
61-
padding: 0 @layout__width-xs-indent;
62-
}
60+
.control {
61+
border-top: 1px solid @border-color__base;
62+
clear: both;
63+
margin: 0 -@layout__width-xs-indent -1px;
64+
padding: 0 @layout__width-xs-indent;
65+
}
6366

64-
input {
65-
left: -300%;
66-
position: absolute;
67-
margin: 15px 0;
67+
input {
68+
left: -300%;
69+
margin: 15px 0;
70+
position: absolute;
71+
}
72+
73+
.nested {
74+
display: none;
75+
}
6876
}
6977

70-
.nested {
78+
.search-autocomplete {
79+
&:extend(.abs-add-box-sizing all);
7180
display: none;
72-
}
73-
}
81+
margin-top: -15px;
82+
overflow: hidden;
83+
position: absolute;
84+
z-index: 3;
7485

75-
.search-autocomplete {
76-
display: none;
77-
position: absolute;
78-
z-index: 3;
79-
overflow: hidden;
80-
margin-top: -15px;
81-
&:extend(.abs-add-box-sizing all);
82-
83-
ul {
84-
.lib-list-reset-styles();
85-
86-
li {
87-
&:not(:empty) {
88-
.lib-css(background, @autocomplete-background);
89-
.lib-css(border, @autocomplete-border);
90-
border-top: 0;
91-
}
86+
ul {
87+
.lib-list-reset-styles();
9288

93-
.lib-css(border-top, @autocomplete-item-border);
94-
cursor: pointer;
95-
margin: 0;
96-
padding: @indent__xs @indent__xl @indent__xs @indent__s;
97-
position: relative;
98-
text-align: left;
99-
white-space: normal;
89+
li {
90+
.lib-css(border-top, @autocomplete-item__border);
91+
cursor: pointer;
92+
margin: 0;
93+
padding: @indent__xs @indent__xl @indent__xs @indent__s;
94+
position: relative;
95+
text-align: left;
96+
white-space: normal;
97+
98+
&:not(:empty) {
99+
border-top: 0;
100+
.lib-css(border, @autocomplete__border);
101+
.lib-css(background, @autocomplete__background-color);
102+
}
100103

101-
&:first-child {
102-
border-top: none;
103-
}
104+
&:first-child {
105+
border-top: none;
106+
}
104107

105-
&:hover,
106-
&.selected {
107-
.lib-css(background, @autocomplete-item-hover);
108-
}
108+
&:hover,
109+
&.selected {
110+
.lib-css(background, @autocomplete-item__hover__color);
111+
}
109112

110-
.amount {
111-
.lib-css(color, @autocomplete-item-amount-color);
112-
position: absolute;
113-
right: 7px;
114-
top: @indent__xs;
113+
.amount {
114+
.lib-css(color, @autocomplete-item-amount__color);
115+
position: absolute;
116+
right: 7px;
117+
top: @indent__xs;
118+
}
115119
}
116120
}
117121
}
118-
}
119122

120-
.form.search.advanced {
121-
.fields.range {
122-
.field {
123-
&:first-child {
124-
position: relative;
123+
.form.search.advanced {
124+
.fields.range {
125+
.field {
126+
&:first-child {
127+
position: relative;
128+
129+
.control {
130+
padding-right: 25px;
131+
132+
&:after {
133+
content: ' \2013 ';
134+
display: inline-block;
135+
position: absolute;
136+
right: 0;
137+
text-align: center;
138+
top: 6px;
139+
width: 25px;
140+
}
141+
}
142+
}
125143

126-
.control {
127-
padding-right: 25px;
144+
&:last-child {
145+
position: relative;
128146

129-
&:after {
130-
content: ' \2013 ';
131-
display: inline-block;
132-
text-align: center;
133-
width: 25px;
147+
div.mage-error[generated] {
148+
left: 0;
134149
position: absolute;
135-
right: 0;
136-
top: 6px;
150+
top: 32px;
137151
}
138152
}
139-
}
140-
141-
&:last-child {
142-
position: relative;
143153

144-
div.mage-error[generated] {
145-
position: absolute;
146-
top: 32px;
147-
left: 0;
154+
&.with-addon {
155+
.control {
156+
padding-right: 45px;
157+
}
148158
}
149159
}
160+
}
150161

151-
&.with-addon {
152-
.control {
153-
padding-right: 45px;
162+
.group.price {
163+
.addon {
164+
.addafter {
165+
background: none;
166+
border: 0;
167+
padding-top: 6px;
168+
position: absolute;
169+
right: 0;
170+
top: 0;
154171
}
155172
}
156173
}
157174
}
158-
159-
.group.price {
160-
.addon {
161-
.addafter {
162-
background: none;
163-
border: 0;
164-
padding-top: 6px;
165-
position: absolute;
166-
right: 0;
167-
top: 0;
168-
}
169-
}
175+
176+
.search.summary {
177+
margin-bottom: @indent__s;
170178
}
171179
}
172180

173-
}
174-
175181
//
176-
// Mobile
177-
//--------------------------------------
182+
// Mobile
183+
// _____________________________________________
184+
178185
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
179186
.block-search {
180187
.block-content {
@@ -190,13 +197,14 @@
190197
}
191198

192199
//
193-
// Desktop
194-
//--------------------------------------
200+
// Desktop
201+
// _____________________________________________
202+
195203
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
196204
.block-search {
197-
position: relative;
198205
float: right;
199206
padding-left: 15px;
207+
position: relative;
200208
width: 250px;
201209
z-index: 4;
202210

@@ -217,32 +225,31 @@
217225
}
218226

219227
input {
220-
position: static;
221-
padding-right: 35px;
222-
margin: 0;
223228
.lib-input-placeholder(@form-element-input-placeholder__color);
229+
margin: 0;
230+
padding-right: 35px;
231+
position: static;
224232
}
225233

226234
.action.search {
227-
position: absolute;
228235
display: inline-block;
229-
right: 10px;
230-
top: 0;
231-
z-index: 1;
232236
.lib-button-icon(
233-
@_icon-font-content: @icon-search,
234-
@_icon-font-text-hide: true,
235-
@_icon-font-color: @header-icons-color
237+
@_icon-font-content: @icon-search,
238+
@_icon-font-text-hide: true,
239+
@_icon-font-color: @header-icons-color
236240
);
237241
.lib-button-reset();
242+
padding: @indent__xs 0;
243+
position: absolute;
244+
right: 10px;
245+
top: 0;
246+
z-index: 1;
238247

239248
&:focus {
240249
&:before {
241250
.lib-css(color, @color-gray20);
242251
}
243252
}
244-
245-
padding: @indent__xs 0;
246253
}
247254
}
248255

0 commit comments

Comments
 (0)