Skip to content

Commit a814447

Browse files
zanileezanilee
committed
MAGETWO-31855: UI improvements
1 parent 0ceb60d commit a814447

File tree

10 files changed

+10864
-10893
lines changed

10 files changed

+10864
-10893
lines changed

‎app/design/frontend/Magento/blank/Magento_Theme/web/css/source/module.less

+332-335
Large diffs are not rendered by default.

‎app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/module.less

+340-340
Large diffs are not rendered by default.

‎lib/web/css/docs/docs.css

+8,769-8,769
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/web/css/docs/responsive.html

+81-87
Large diffs are not rendered by default.

‎lib/web/css/docs/source/responsive.less

+107-106
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,107 @@
1-
// /**
2-
// * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
3-
// */
4-
5-
// # Responsive
6-
// Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of <nobr><code>.media-width()</code></nobr> mixin defined anywhere in project but invoked in one place in <nobr><code>lib/web/css/source/lib/responsive.less</code></nobr>. That's why in the resulting styles.css we have every media query only ones and all the rules there, not a multiple calls for the same query.
7-
//
8-
//
9-
// To see the media queries work resize window to understand which breakpoint is applied.
10-
// ```
11-
// <div class="example-responsive-block">
12-
// are applied.
13-
// </div>
14-
// ```
15-
16-
.example-responsive-block {
17-
padding: 10px;
18-
}
19-
.media-width(@extremum, @break) when (@extremum = 'max')
20-
and (@break = @screen-m) {
21-
22-
.example-responsive-block {
23-
background: #ffc;
24-
}
25-
.example-responsive-block:before {
26-
content: 'Mobile styles ';
27-
font-weight: bold;
28-
}
29-
}
30-
.media-width(@extremum, @break) when (@extremum = 'min')
31-
and (@break = @screen-m) {
32-
33-
.example-responsive-block {
34-
background: #ccf;
35-
}
36-
.example-responsive-block:before {
37-
content: 'Desktop styles ';
38-
font-weight: bold;
39-
}
40-
}
41-
42-
43-
// # Responsive mixins usage
44-
//
45-
// For grouping style rules in certain media queries .media-width() mixin used.
46-
// ```css
47-
// .media-width(<@extremum>, <@break>)
48-
// ```
49-
// * <nobr><code>@extremum</code></nobr>: <code>max|min</code> - sets whether to use min-width or max-width in media query condition
50-
// * <nobr><code>@break</code></nobr>: <code>value</code> - sets the value of breakpoint to compare with in media query condition
51-
// As example
52-
// ```css
53-
// .media-width(@extremum, @break) when (@extremum = 'max')
54-
// and (@break = @screen-s) {
55-
// your styles
56-
// }
57-
// ```
58-
// It will be complied to
59-
// ```css
60-
// @media only screen and (max-width: 640px) {
61-
// your styles
62-
// }
63-
// ```
64-
//
65-
// # Media query style groups separation variables
66-
//
67-
// *<code>@media-common</code>: <code>true|false</code> - Sets whether to output common styles
68-
// For common styles every time you want to add some styles you should write:
69-
// ```css
70-
// & when (@media-common = true) {
71-
// your styles
72-
// }
73-
// ```
74-
// *<code>@media-target</code>: <code>all|desktop|mobile</code> - Sets target device for styles output
75-
// & when (@media-target = 'mobile'), (@media-target = 'all') {
76-
//
77-
// @media only screen and (max-width: (@screen-xs - 1)) {
78-
// .media-width('max', @screen-xs);
79-
// }
80-
// }
81-
// ## Gathering
82-
// Everything that you include in collector mixins above will go in place where they declarated.
83-
// As example all
84-
// ```css
85-
// .media-width(@extremum, @break) {
86-
// your code
87-
// }
88-
// ```
89-
// Will go to
90-
// ```css
91-
// .media-width(@extremum, @break));
92-
// ```
93-
// By default you can find it responsive.less file in lib
94-
//
95-
// &nbsp;
96-
// # Responsive breakpoints
97-
// In Magento UI library there are predefined variables for breakpoints.
98-
// ```css
99-
// @screen-xxs: 320px;
100-
// @screen-xs: 400px;
101-
// @screen-s: 640px;
102-
// @screen-m: 768px;
103-
// @screen-l: 1000px;
104-
// @screen-xl: 1440px;
105-
// ```
106-
// &nbsp;
1+
// /**
2+
// * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
3+
// */
4+
5+
// # Responsive
6+
// Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of <nobr><code>.media-width()</code></nobr> mixin defined anywhere in project but invoked in one place in <nobr><code>lib/web/css/source/lib/responsive.less</code></nobr>. That's why in the resulting <code>styles.css</code> we have every media query only once with all the rules there, not a multiple calls for the same query.
7+
//
8+
// To see the media queries work resize window to understand which breakpoint is applied.
9+
// ```
10+
// <div class="example-responsive-block">
11+
// are applied.
12+
// </div>
13+
// ```
14+
15+
.example-responsive-block {
16+
padding: 10px;
17+
}
18+
19+
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-m) {
20+
.example-responsive-block {
21+
background: #ffc;
22+
}
23+
.example-responsive-block:before {
24+
content: 'Mobile styles ';
25+
font-weight: bold;
26+
}
27+
}
28+
29+
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
30+
.example-responsive-block {
31+
background: #ccf;
32+
}
33+
.example-responsive-block:before {
34+
content: 'Desktop styles ';
35+
font-weight: bold;
36+
}
37+
}
38+
39+
// # Responsive mixins usage
40+
//
41+
// For grouping style rules in certain media queries .media-width() mixin used.
42+
// ```css
43+
// .media-width(<@extremum>, <@break>);
44+
// ```
45+
// <nobr><code>@extremum: max|min</code></nobr> - sets whether to use **min-width** or **max-width** in media query condition<br />
46+
// <nobr><code>@break: value</code></nobr> - sets the value of breakpoint to compare with in media query condition.<br />
47+
// For example
48+
// ```css
49+
// .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-s) {
50+
// your styles
51+
// }
52+
// ```
53+
// It will be complied to
54+
// ```css
55+
// @media only screen and (max-width: 640px) {
56+
// your styles
57+
// }
58+
// ```
59+
// &nbsp;
60+
//
61+
// # Media query style groups separation variables
62+
//
63+
// <code>@media-common: true|false</code> - sets whether to output common styles.
64+
// For common styles every time you want to add some styles you should use
65+
// ```css
66+
// & when (@media-common = true) {
67+
// your styles
68+
// }
69+
// ```
70+
//
71+
// <code>@media-target: all|desktop|mobile</code> - Sets target device for styles output
72+
// ```css
73+
// & when (@media-target = 'mobile'),
74+
// (@media-target = 'all') {
75+
// @media only screen and (max-width: (@screen-xs - 1)) {
76+
// .media-width('max', @screen-xs);
77+
// }
78+
// }
79+
// ```
80+
//
81+
// ## Gathering
82+
//
83+
// Everything that you include in collector mixins above will go in place where they declarated.
84+
// As example all
85+
// ```css
86+
// .media-width(@extremum, @break) {
87+
// your code
88+
// }
89+
// ```
90+
// Will go to
91+
// ```css
92+
// .media-width(@extremum, @break));
93+
// ```
94+
// By default you can find it <code>responsive.less</code> file in li
95+
// &nbsp;
96+
//
97+
// # Responsive breakpoints
98+
// In Magento UI library there are predefined variables for breakpoints.
99+
// ```css
100+
// @screen-xxs: 320px;
101+
// @screen-xs: 400px;
102+
// @screen-s: 640px;
103+
// @screen-m: 768px;
104+
// @screen-l: 1000px;
105+
// @screen-xl: 1440px;
106+
// ```
107+
// &nbsp;

‎lib/web/css/source/lib/loaders.less

+88-94
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,88 @@
1-
// /**
2-
// * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
3-
// */
4-
5-
.loader(
6-
@_loader-overlay-background-color: @loader-overlay-background-color,
7-
@_loader-overlay-z-index: @loader-overlay-z-index,
8-
@_loader-icon-width: @loader-icon-width,
9-
@_loader-icon-height: @loader-icon-height,
10-
@_loader-icon-background-color: @loader-icon-background-color,
11-
@_loader-icon-background-image: @loader-icon-background-image,
12-
@_loader-icon-background-position: @loader-icon-background-position,
13-
@_loader-icon-border-radius: @loader-icon-border-radius,
14-
@_loader-icon-padding: @loader-icon-padding,
15-
@_loader-text: @loader-text,
16-
@_loader-text-color: @loader-text-color,
17-
@_loader-text-font-size: @loader-text-font-size,
18-
@_loader-text-font-family: @loader-text-font-family,
19-
@_loader-text-font-weight: @loader-text-font-weight,
20-
@_loader-text-font-style: @loader-text-font-style,
21-
@_loader-text-padding: @loader-text-padding
22-
) {
23-
position: fixed;
24-
left: 0;
25-
top: 0;
26-
right: 0;
27-
bottom: 0;
28-
.css(background-color, @_loader-overlay-background-color);
29-
.css(z-index, @_loader-overlay-z-index);
30-
&:before {
31-
.css(border-radius, @_loader-icon-border-radius);
32-
.css(background-color, @_loader-icon-background-color);
33-
.css(background-image, @_loader-icon-background-image);
34-
.css(background-position, @_loader-icon-background-position);
35-
background-repeat: no-repeat;
36-
box-sizing: border-box;
37-
content: '';
38-
position: absolute;
39-
top: 0;
40-
right: 0;
41-
left: 0;
42-
bottom: 0;
43-
margin: auto;
44-
.css(padding, @_loader-icon-padding);
45-
.css(width, @_loader-icon-width);
46-
.css(height, @_loader-icon-height);
47-
._loader-text(@_loader-text);
48-
}
49-
}
50-
51-
._loader-text(
52-
@_loader-text
53-
) when (@_loader-text = true) {
54-
content: attr(data-text);
55-
.css(padding, @_loader-text-padding);
56-
vertical-align: baseline;
57-
text-align: center;
58-
.typography(
59-
@_color: @_loader-text-color,
60-
@_font-size: @_loader-text-font-size,
61-
@_font-family: @_loader-text-font-family,
62-
@_font-weight: @_loader-text-font-weight,
63-
@_font-style: @_loader-text-font-style
64-
);
65-
}
66-
67-
.loading(
68-
@_loading-background-color: @loading-background-color,
69-
@_loading-background-image: @loading-background-image
70-
) {
71-
position: relative;
72-
&:before {
73-
content: '';
74-
position: absolute;
75-
left: 0;
76-
top: 0;
77-
right: 0;
78-
bottom: 0;
79-
.css(background-color, @_loading-background-color);
80-
.css(background-image, @_loading-background-image);
81-
background-position: 50% 50%;
82-
background-repeat: no-repeat;
83-
}
84-
}
85-
86-
.loading-mask() {
87-
bottom: 0;
88-
left: 0;
89-
margin: auto;
90-
position: fixed;
91-
right: 0;
92-
top: 0;
93-
z-index: 100;
94-
}
1+
// /**
2+
// * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
3+
// */
4+
5+
.loader(
6+
@_loader-overlay-background-color: @loader-overlay-background-color,
7+
@_loader-overlay-z-index: @loader-overlay-z-index,
8+
@_loader-icon-width: @loader-icon-width,
9+
@_loader-icon-height: @loader-icon-height,
10+
@_loader-icon-background-color: @loader-icon-background-color,
11+
@_loader-icon-background-image: @loader-icon-background-image,
12+
@_loader-icon-background-position: @loader-icon-background-position,
13+
@_loader-icon-border-radius: @loader-icon-border-radius,
14+
@_loader-icon-padding: @loader-icon-padding,
15+
@_loader-text: @loader-text,
16+
@_loader-text-color: @loader-text-color,
17+
@_loader-text-font-size: @loader-text-font-size,
18+
@_loader-text-font-family: @loader-text-font-family,
19+
@_loader-text-font-weight: @loader-text-font-weight,
20+
@_loader-text-font-style: @loader-text-font-style,
21+
@_loader-text-padding: @loader-text-padding
22+
) {
23+
position: fixed;
24+
top: 0;
25+
right: 0;
26+
bottom: 0;
27+
left: 0;
28+
.css(background-color, @_loader-overlay-background-color);
29+
.css(z-index, @_loader-overlay-z-index);
30+
&:before {
31+
.css(border-radius, @_loader-icon-border-radius);
32+
.css(background, @_loader-icon-background-color @_loader-icon-background-image no-repeat @_loader-icon-background-position);
33+
box-sizing: border-box;
34+
content: '';
35+
position: absolute;
36+
top: 0;
37+
right: 0;
38+
left: 0;
39+
bottom: 0;
40+
margin: auto;
41+
.css(padding, @_loader-icon-padding);
42+
.css(width, @_loader-icon-width);
43+
.css(height, @_loader-icon-height);
44+
._loader-text(@_loader-text);
45+
}
46+
}
47+
48+
._loader-text(
49+
@_loader-text
50+
) when (@_loader-text = true) {
51+
content: attr(data-text);
52+
.css(padding, @_loader-text-padding);
53+
vertical-align: baseline;
54+
text-align: center;
55+
.typography(
56+
@_color: @_loader-text-color,
57+
@_font-size: @_loader-text-font-size,
58+
@_font-family: @_loader-text-font-family,
59+
@_font-weight: @_loader-text-font-weight,
60+
@_font-style: @_loader-text-font-style
61+
);
62+
}
63+
64+
.loading(
65+
@_loading-background-color: @loading-background-color,
66+
@_loading-background-image: @loading-background-image
67+
) {
68+
position: relative;
69+
&:before {
70+
content: '';
71+
position: absolute;
72+
left: 0;
73+
top: 0;
74+
right: 0;
75+
bottom: 0;
76+
.css(background, @_loading-background-color @_loading-background-image no-repeat 50% 50%);
77+
}
78+
}
79+
80+
.loading-mask() {
81+
bottom: 0;
82+
left: 0;
83+
margin: auto;
84+
position: fixed;
85+
right: 0;
86+
top: 0;
87+
z-index: 100;
88+
}

0 commit comments

Comments
 (0)