Skip to content

Commit eba73a5

Browse files
zanileezanilee
committed
MAGETWO-31855: UI improvements
1 parent 7fb878f commit eba73a5

File tree

2 files changed

+57
-29
lines changed
  • app/design/frontend/Magento

2 files changed

+57
-29
lines changed

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

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77

88
@desktop-form-field-vertical-indent: 29px;
99

10-
1110
//
1211
// Common
1312
// _____________________________________________
1413

1514
& when (@media-common = true) {
15+
1616
//
1717
// One Page Checkout
1818
// ---------------------------------------------
19+
1920
.opc-wrapper:extend(.abs-add-box-sizing all) {
2021
.css(padding-bottom, @indent-xl-base);
2122
> .opc:extend(.abs-reset-list all) {
@@ -146,6 +147,13 @@
146147
//
147148
// Order review
148149
// ---------------------------------------------
150+
151+
.order-review {
152+
.fieldset > .field > .label {
153+
font-weight: @font-weight-base;
154+
}
155+
}
156+
149157
.data.table:extend(.abs-product-options-list all) {
150158
.col {
151159
&.price,
@@ -172,6 +180,7 @@
172180
//
173181
// Customer login
174182
// ---------------------------------------------
183+
175184
.login-wrapper {
176185
.block {
177186
.block-title:extend(.abs-login-block-title all) {
@@ -193,6 +202,7 @@
193202
//
194203
// Shipping methods
195204
// ---------------------------------------------
205+
196206
.methods-shipping {
197207
.item-title:extend(.abs-methods-shipping-title all) {
198208
}
@@ -228,30 +238,31 @@
228238
//
229239
// Payment methods
230240
// ---------------------------------------------
241+
231242
.methods-payment {
232-
.item-title {
233-
font-weight: @font-weight-base;
234-
}
235-
.item-content {
236-
margin: 0 0 0 @indent-xl-base;
237-
.fieldset {
238-
padding: 15px 0;
239-
.field {
240-
.font-size(@font-size-base);
241-
&:first-child {
242-
margin-top: 0;
243-
}
244-
}
245-
&.redirect {
246-
.font-size(@font-size-s);
247-
margin-left: -17px;
248-
padding: 0 0 15px;
243+
.item {
244+
&-title {
245+
font-weight: @font-weight-base;
246+
}
247+
&-content {
248+
margin: 0 0 0 @indent-base;
249+
.label {
250+
font-weight: @font-weight-base;
249251
}
250252
}
251-
.label {
252-
font-weight: @font-weight-base;
253+
}
254+
.fieldset {
255+
padding: 15px 0 @indent-m-base;
256+
}
257+
.fieldset & {
258+
.item-content > .fieldset > .field:first-child {
259+
margin-top: 0;
253260
}
254261
}
262+
.redirect {
263+
.font-size(@font-size-s);
264+
padding: 0 0 15px;
265+
}
255266
img {
256267
margin-right: @indent-xs-base;
257268
vertical-align: middle;
@@ -265,6 +276,7 @@
265276
//
266277
// Checkout Progress
267278
// ---------------------------------------------
279+
268280
.opc-block-progress:extend(.abs-add-box-sizing all) {
269281
margin-bottom: @indent-l-base;
270282
> .title {
@@ -321,6 +333,7 @@
321333
//
322334
// Checkout Success
323335
// ---------------------------------------------
336+
324337
.checkout-onepage-success {
325338
.page-title {
326339
.print:extend(.abs-no-display all) {
@@ -346,6 +359,7 @@
346359
//
347360
// Mobile
348361
// _____________________________________________
362+
349363
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-s) {
350364
.opc-wrapper {
351365
table.data.table:extend(.abs-checkout-order-review all) {
@@ -356,6 +370,7 @@
356370
//
357371
// Desktop
358372
// _____________________________________________
373+
359374
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-s) {
360375
.checkout-onepage-index .column.main:extend(.abs-add-clearfix-desktop-s all) {
361376
}
@@ -413,6 +428,7 @@
413428
//
414429
// Checkout success
415430
// ---------------------------------------------
431+
416432
.checkout-onepage-success {
417433
.page-title {
418434
.print {

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

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@
1212
// _____________________________________________
1313

1414
& when (@media-common = true) {
15+
1516
//
1617
// One Page Checkout
1718
// ---------------------------------------------
19+
1820
.opc-wrapper:extend(.abs-add-box-sizing all) {
1921
.field select {
2022
max-width: none;
@@ -63,7 +65,7 @@
6365
.css(background, @sidebar-background);
6466
.css(color, lighten(@color-primary, 40%));
6567
margin-bottom: 2px;
66-
padding: 13px 25px;
68+
padding: 13px @indent-m-base;
6769
position: relative;
6870
h2 {
6971
.font-size(18);
@@ -76,10 +78,10 @@
7678
}
7779

7880
&-content {
79-
padding: 35px 25px 80px;
81+
padding: 35px @indent-m-base 80px;
8082
position: relative;
8183
.addresses .control {
82-
margin: 20px 0 30px;
84+
margin: @indent-base 0 @indent-l-base;
8385
}
8486
.fieldset {
8587
margin-bottom: 0;
@@ -127,7 +129,7 @@
127129
}
128130
}
129131
.actions {
130-
margin-top: 40px;
132+
margin-top: @indent-xl-base;
131133
}
132134
.field.street {
133135
.field.additional {
@@ -145,25 +147,26 @@
145147
//
146148
// Customer login
147149
// ---------------------------------------------
150+
148151
.login-wrapper {
149152
.block {
150153
.block-title {
151-
margin-bottom: 30px;
154+
margin-bottom: @indent-l-base;
152155
strong {
153156
.font-size(22);
154157
font-weight: @font-weight-light;
155158
margin: 0;
156159
}
157160
}
158161
.fieldset.guest {
159-
margin-top: 20px;
162+
margin-top: @indent-base;
160163
}
161164
.field {
162165
&.choice {
163-
margin-bottom: 10px;
166+
margin-bottom: @indent-s-base;
164167
}
165168
&.note {
166-
margin-bottom: 30px;
169+
margin-bottom: @indent-l-base;
167170
}
168171
}
169172
}
@@ -230,6 +233,7 @@
230233
//
231234
// Shipping methods
232235
// ---------------------------------------------
236+
233237
.methods-shipping {
234238
.item-title:extend(.abs-methods-shipping-title all) {
235239
}
@@ -270,6 +274,7 @@
270274
//
271275
// Payment methods
272276
// ---------------------------------------------
277+
273278
.methods-payment {
274279
border-bottom: @border-width-base solid @border-color-base;
275280
.item-title {
@@ -339,9 +344,10 @@
339344
//
340345
// Checkout Progress
341346
// ---------------------------------------------
347+
342348
.opc-block-progress-wrapper {
343349
margin-bottom: @indent-l-base;
344-
margin-top: 20px;
350+
margin-top: @indent-base;
345351
}
346352

347353
.opc-block-progress:extend(.abs-add-box-sizing all) {
@@ -424,6 +430,7 @@
424430
//
425431
// Checkout Success
426432
// ---------------------------------------------
433+
427434
.checkout-onepage-success {
428435
.page-title {
429436
.print:extend(.abs-no-display all) {
@@ -449,6 +456,7 @@
449456
//
450457
// Mobile
451458
// _____________________________________________
459+
452460
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-s) {
453461
.table-wrapper.order-review-wrapper:extend(.abs-no-border-top all) {
454462
.table.table-order-review:extend(.abs-checkout-order-review all) {
@@ -474,6 +482,7 @@
474482
//
475483
// Desktop
476484
// _____________________________________________
485+
477486
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-s) {
478487
.checkout-onepage-index .column.main:extend(.abs-add-clearfix-desktop-s all) {
479488
}
@@ -525,6 +534,7 @@
525534
//
526535
// Login or register
527536
// ---------------------------------------------
537+
528538
.login-wrapper:extend(.abs-add-clearfix-desktop-s all) {
529539
.block:extend(.abs-blocks-2columns-s all) {
530540
margin-bottom: 0;
@@ -551,6 +561,7 @@
551561
//
552562
// Payment methods
553563
// ---------------------------------------------
564+
554565
.methods-payment .item-content > .fieldset,
555566
.order-review .fieldset {
556567
margin: @indent-s-base 0 @indent-l-base @opc-margin-left;
@@ -616,6 +627,7 @@
616627
//
617628
// Checkout success
618629
// ---------------------------------------------
630+
619631
.checkout-onepage-success {
620632
.page-title {
621633
.print:extend(.abs-action-print-s all) {

0 commit comments

Comments
 (0)