Skip to content

Commit 22edaa9

Browse files
irenelagnoirenelagno
committed
MAGETWO-43042: Checkout Label Updates
1 parent 49db439 commit 22edaa9

File tree

6 files changed

+246
-10
lines changed

6 files changed

+246
-10
lines changed

‎app/code/Magento/Braintree/view/frontend/web/js/view/payment/method-renderer/cc-form.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,10 @@ define(
349349
}
350350
});
351351
}
352+
},
353+
354+
getCssClass: function () {
355+
return (this.isCcDetectionEnabled()) ? 'field type detection' : 'field type required';
352356
}
353357
});
354358
}

‎app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
2-
3-
41
<!--
52
/**
63
* Copyright © 2015 Magento. All rights reserved.
@@ -61,7 +58,12 @@
6158
</div>
6259
<div>&nbsp;</div>
6360
<!-- /ko -->
64-
<div class="field type required" data-bind="visible: isCcFormShown">
61+
<div data-bind="visible: isCcFormShown, attr: {class: getCssClass()}">
62+
<!-- ko if: (!isCcDetectionEnabled())-->
63+
<label data-bind="attr: {for: getCode() + '_cc_type'}" class="label">
64+
<span><!-- ko i18n: 'Credit Card Type'--><!-- /ko --></span>
65+
</label>
66+
<!-- /ko -->
6567
<div class="control">
6668
<!-- ko if: (!isCcDetectionEnabled())-->
6769
<select name="payment[cc_type]" class="select"
@@ -150,7 +152,7 @@
150152
<label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
151153
<span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
152154
</label>
153-
<div class="control">
155+
<div class="control _with-tooltip">
154156
<input type="number"
155157
class="input-text cvv"
156158
name="payment[cc_cid]"

‎app/code/Magento/Checkout/view/frontend/web/template/shipping-information.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="shipping-information">
1010
<div class="ship-to">
1111
<div class="shipping-information-title">
12-
<span data-bind="i18n: 'Ship To'"></span>
12+
<span data-bind="i18n: 'Ship To:'"></span>
1313
<button class="action action-edit" data-bind="click: back">
1414
<span data-bind="i18n: 'edit'"></span>
1515
</button>
@@ -22,7 +22,7 @@
2222
</div>
2323
<div class="ship-via">
2424
<div class="shipping-information-title">
25-
<span data-bind="i18n: 'Shipping Method'"></span>
25+
<span data-bind="i18n: 'Shipping Method:'"></span>
2626
<button class="action action-edit" data-bind="click: backToShippingMethod">
2727
<span data-bind="i18n: 'edit'"></span>
2828
</button>

‎app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<span><!-- ko i18n: 'Credit Card Information'--><!-- /ko --></span>
1212
</legend><br />
1313
<!-- /ko -->
14-
<div class="field type required">
14+
<div class="field type">
1515
<div class="control">
1616
<ul class="credit-card-types">
1717
<!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->

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

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,12 @@
7575
&:not(:last-child) {
7676
margin: 0 0 @indent__base;
7777
}
78-
> .field {
79-
margin: 0 0 @indent__base;
78+
}
79+
.field {
80+
&.cvv {
81+
.control {
82+
width: 40%;
83+
}
8084
}
8185
}
8286
}
@@ -191,6 +195,23 @@
191195
}
192196
}
193197
}
198+
.payment-method-content {
199+
.fieldset {
200+
> .field {
201+
margin: 0 0 @indent__base;
202+
&.type {
203+
.control {
204+
margin-left: 25.8%;
205+
}
206+
&.no-detection {
207+
.control {
208+
margin-left: 0;
209+
}
210+
}
211+
}
212+
}
213+
}
214+
}
194215
}
195216
.payment-method-billing-address {
196217
.action-update {

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

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
// /**
2+
// * Copyright © 2015 Magento. All rights reserved.
3+
// * See COPYING.txt for license details.
4+
// */
5+
6+
//
7+
// Variables
8+
// _____________________________________________
9+
10+
@checkout-payment-method-title__border: @checkout-shipping-method__border;
11+
@checkout-payment-method-title__padding: @checkout-shipping-method__padding;
12+
@checkout-payment-method-title-mobile__padding: 15px;
13+
14+
@checkout-payment-method-content__padding__xl: 22px;
15+
16+
@checkout-billing-address-details__line-height: 27px;
17+
@checkout-billing-address-details__padding: 0 0 0 23px;
18+
@checkout-billing-address-form__max-width: @checkout-shipping-address__max-width;
19+
20+
//
21+
// Common
22+
// _____________________________________________
23+
24+
& when (@media-common = true) {
25+
.checkout-payment-method {
26+
.step-title {
27+
margin-bottom: 0;
28+
}
29+
.payment-method {
30+
&:first-child {
31+
.payment-method-title {
32+
border-top: 0;
33+
}
34+
}
35+
&._active {
36+
.payment-method-content {
37+
display: block;
38+
}
39+
}
40+
}
41+
42+
.payment-method-content {
43+
> .actions-toolbar {
44+
> .primary {
45+
.action {
46+
&.primary {
47+
&:extend(.abs-button-l all);
48+
}
49+
}
50+
}
51+
}
52+
}
53+
54+
.payment-method-title {
55+
.lib-css(border-top, @checkout-payment-method-title__border);
56+
.lib-css(padding, @checkout-payment-method-title__padding 0);
57+
margin: 0;
58+
59+
.payment-icon {
60+
display: inline-block;
61+
margin-right: @indent__xs;
62+
vertical-align: middle;
63+
}
64+
65+
.action-help {
66+
display: inline-block;
67+
margin-left: @indent__xs;
68+
}
69+
}
70+
71+
.payment-method-content {
72+
display: none;
73+
.lib-css(padding, 0 0 @indent__base @checkout-payment-method-content__padding__xl);
74+
.fieldset {
75+
&:not(:last-child) {
76+
margin: 0 0 @indent__base;
77+
}
78+
}
79+
.field {
80+
&.cvv {
81+
.control {
82+
width: 40%;
83+
}
84+
}
85+
}
86+
}
87+
88+
.field-select-billing,
89+
.billing-address-form {
90+
.lib-css(max-width, @checkout-billing-address-form__max-width);
91+
}
92+
93+
.billing-address-same-as-shipping-block {
94+
margin: 0 0 @indent__s;
95+
}
96+
97+
.payment-method-billing-address {
98+
margin: 0 0 @indent__base;
99+
100+
.primary {
101+
.action-update {
102+
margin-right: 0;
103+
}
104+
}
105+
106+
.action-cancel {
107+
&:extend(.abs-action-button-as-link all);
108+
}
109+
110+
.billing-address-details {
111+
.lib-css(line-height, @checkout-billing-address-details__line-height);
112+
.lib-css(padding, @checkout-billing-address-details__padding);
113+
114+
.action-edit-address {
115+
&:extend(.abs-action-button-as-link all);
116+
}
117+
}
118+
}
119+
120+
.payment-method-note {
121+
& + .payment-method-billing-address {
122+
margin-top: @indent__base;
123+
}
124+
}
125+
126+
.field-select-billing {
127+
> .label {
128+
&:extend(.abs-visually-hidden all);
129+
}
130+
}
131+
.payment-method-iframe {
132+
background-color: transparent;
133+
display: none;
134+
width: 100%;
135+
}
136+
.no-payments-block {
137+
margin: @indent__base 0;
138+
}
139+
.ccard {
140+
.legend {
141+
&:extend(.abs-visually-hidden all);
142+
}
143+
.year {
144+
padding-left: @indent__l;
145+
}
146+
}
147+
}
148+
}
149+
150+
//
151+
// Mobile
152+
// _____________________________________________
153+
154+
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
155+
.checkout-payment-method {
156+
.payment-methods {
157+
.lib-css(margin, 0 -(@checkout-payment-method-title-mobile__padding));
158+
}
159+
160+
.payment-method-title {
161+
.lib-css(padding, @checkout-payment-method-title-mobile__padding)
162+
}
163+
164+
.payment-method-content {
165+
.lib-css(padding, 0 @checkout-payment-method-title-mobile__padding @indent__base);
166+
}
167+
168+
.payment-method-billing-address {
169+
.action-cancel {
170+
margin-top: @indent__s;
171+
}
172+
}
173+
}
174+
}
175+
176+
//
177+
// Desktop
178+
// _____________________________________________
179+
180+
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
181+
.checkout-payment-method {
182+
.payment-methods {
183+
.actions-toolbar {
184+
.primary {
185+
float: right;
186+
margin: 0;
187+
}
188+
}
189+
}
190+
.fieldset {
191+
> .field-select-billing {
192+
> .control {
193+
float: none;
194+
width: 100%;
195+
}
196+
}
197+
}
198+
}
199+
.payment-method-billing-address {
200+
.action-update {
201+
float: right;
202+
}
203+
.actions-toolbar {
204+
.action-cancel {
205+
margin: 6px @indent__base 0 0;
206+
}
207+
}
208+
}
209+
}

0 commit comments

Comments
 (0)