Skip to content

Commit faf2eb5

Browse files
zanileezanilee
committed
MAGETWO-43423: Fix mark up for credit card form
1 parent 0be91a5 commit faf2eb5

File tree

6 files changed

+273
-36
lines changed

6 files changed

+273
-36
lines changed

‎app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_collapsible-blocks.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,9 @@
253253
.scope-label {
254254
padding: 31px 1.5rem 0 0;
255255
}
256+
.use-default {
257+
padding: 29px 1.5rem 0 0;
258+
}
256259
.value {
257260
padding-right: 4rem;
258261
}

‎app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payment-options.less

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,58 @@
105105
filter: gray; // For IE 6 - 9
106106
}
107107
}
108+
109+
.ccard {
110+
.legend {
111+
&:extend(.abs-visually-hidden all);
112+
}
113+
.fields {
114+
> .year {
115+
padding-left: @indent__xs;
116+
}
117+
.select {
118+
padding-left: @indent__xs;
119+
padding-right: @indent__xs;
120+
}
121+
}
122+
.month {
123+
.select {
124+
width: 140px;
125+
}
126+
}
127+
.year {
128+
.select {
129+
width: 80px;
130+
}
131+
}
132+
.number {
133+
.input-text {
134+
width: 225px;
135+
}
136+
}
137+
138+
> .field.cvv {
139+
> .control {
140+
padding-right: @indent__base;
141+
width: auto;
142+
}
143+
}
144+
.cvv {
145+
.input-text {
146+
width: 55px;
147+
}
148+
}
149+
150+
&.fieldset {
151+
> .field {
152+
.fields.group.group-2 {
153+
.field {
154+
width: auto !important;
155+
}
156+
}
157+
}
158+
}
159+
}
108160
}
109161
}
110162

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,6 @@
7676
margin: 0 0 @indent__base;
7777
}
7878
}
79-
.field {
80-
&.cvv {
81-
.control {
82-
width: 40%;
83-
}
84-
}
85-
}
8679
}
8780

8881
.field-select-billing,
@@ -136,14 +129,6 @@
136129
.no-payments-block {
137130
margin: @indent__base 0;
138131
}
139-
.ccard {
140-
.legend {
141-
&:extend(.abs-visually-hidden all);
142-
}
143-
.year {
144-
padding-left: @indent__l;
145-
}
146-
}
147132
.payments {
148133
.legend {
149134
&:extend(.abs-visually-hidden all);

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
font-size: 1.6rem;
8787
font-weight: 700;
8888
margin: 0;
89-
padding: 8px 20px;
89+
padding: .8rem 3.5rem .8rem 2rem;
9090
.label {
9191
display: block;
9292
margin-bottom: @indent__xs;
@@ -125,16 +125,17 @@
125125

126126
.header.links {
127127
.lib-list-reset-styles();
128+
border-bottom: 1px solid @color-gray82;
128129
li {
129-
border-top: 1px solid @color-gray82;
130130
font-size: 1.6rem;
131131
margin: 0;
132132
&.greet.welcome {
133+
border-top: 1px solid @color-gray82;
133134
font-weight: 700;
134-
padding: 8px 20px;
135+
padding: .8rem @indent__base;
135136
}
136-
&:last-child {
137-
border-bottom: 1px solid @color-gray82;
137+
> a {
138+
border-top: 1px solid @color-gray82;
138139
}
139140
}
140141
a,
@@ -143,7 +144,10 @@
143144
.lib-css(text-decoration, @navigation-level0-item__text-decoration);
144145
display: block;
145146
font-weight: 700;
146-
padding: 8px 20px;
147+
padding: .8rem @indent__base;
148+
}
149+
.header.links {
150+
border: 0;
147151
}
148152
}
149153
}
@@ -217,6 +221,11 @@
217221
background: transparent;
218222
border-bottom: 0;
219223
}
224+
.nav-sections-item-switch {
225+
&:hover {
226+
text-decoration: none;
227+
}
228+
}
220229
}
221230

222231
&-item-content {

‎app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_payment-options.less

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
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-option-title__border: @checkout-payment-method-title__border;
11+
@checkout-payment-option-title__color: @link__color;
12+
@checkout-payment-option-title__padding: @checkout-payment-method-title__padding;
13+
@checkout-payment-option-title-mobile__padding: @checkout-payment-method-title-mobile__padding;
14+
15+
@checkout-payment-option-title-icon__font-size: 32px;
16+
@checkout-payment-option-title-icon__line-height: 16px;
17+
@checkout-payment-option-title-icon__margin: 0;
18+
@checkout-payment-option-title-icon__color: @minicart-icons-color;
19+
@checkout-payment-option-title-icon__hover__color: @primary__color;
20+
21+
@checkout-payment-option-content__padding__xl: @checkout-payment-method-content__padding__xl;
22+
23+
//
24+
// Common
25+
// _____________________________________________
26+
27+
& when (@media-common = true) {
28+
.checkout-payment-method {
29+
.payment-option {
30+
&._active {
31+
.payment-option-title {
32+
.action-toggle {
33+
&:after {
34+
content: @icon-up;
35+
}
36+
}
37+
}
38+
}
39+
&._collapsible {
40+
.payment-option-title {
41+
cursor: pointer;
42+
}
43+
.payment-option-content {
44+
display: none;
45+
}
46+
}
47+
}
48+
49+
.payment-option-title {
50+
.lib-css(border-top, @checkout-payment-option-title__border);
51+
.lib-css(padding, @checkout-payment-option-title__padding 0);
52+
53+
.action-toggle {
54+
.lib-css(color, @checkout-payment-option-title__color);
55+
.lib-icon-font(
56+
@icon-down,
57+
@_icon-font-size: @checkout-payment-option-title-icon__font-size,
58+
@_icon-font-line-height: @checkout-payment-option-title-icon__line-height,
59+
@_icon-font-color: @checkout-payment-option-title-icon__color,
60+
@_icon-font-color-hover: @checkout-payment-option-title-icon__hover__color,
61+
@_icon-font-color-active: @checkout-payment-option-title-icon__color,
62+
@_icon-font-margin: @checkout-payment-option-title-icon__margin,
63+
@_icon-font-position: after
64+
);
65+
}
66+
}
67+
68+
.payment-option-content {
69+
.lib-css(padding, 0 0 @indent__base @checkout-payment-option-content__padding__xl);
70+
}
71+
72+
.payment-option-inner {
73+
margin: 0 0 @indent__base;
74+
}
75+
76+
.credit-card-types {
77+
padding: 0;
78+
.item {
79+
display: inline-block;
80+
list-style: none;
81+
margin: 0 @indent__xs 0 0;
82+
vertical-align: top;
83+
&._active {
84+
font-weight: @font-weight__bold;
85+
img {
86+
-webkit-filter: grayscale(0%);
87+
filter: grayscale(0%);
88+
filter: none;
89+
}
90+
}
91+
&._inactive {
92+
opacity: 0.4;
93+
filter: alpha(opacity=40);
94+
}
95+
span {
96+
display: inline-block;
97+
padding-top: 6px;
98+
vertical-align: top;
99+
}
100+
}
101+
img {
102+
-webkit-filter: grayscale(100%); // For Webkit browsers
103+
-webkit-transition: all .6s ease; // Fade to color for Chrome and Safari
104+
filter: grayscale(100%);
105+
filter: gray; // For IE 6 - 9
106+
}
107+
}
108+
109+
.ccard {
110+
.legend {
111+
&:extend(.abs-visually-hidden all);
112+
}
113+
.fields {
114+
> .year {
115+
padding-left: @indent__xs;
116+
}
117+
.select {
118+
padding-left: @indent__xs;
119+
padding-right: @indent__xs;
120+
}
121+
}
122+
.month {
123+
.select {
124+
width: 140px;
125+
}
126+
}
127+
.year {
128+
.select {
129+
width: 80px;
130+
}
131+
}
132+
.number {
133+
.input-text {
134+
width: 225px;
135+
}
136+
}
137+
138+
> .field.cvv {
139+
> .control {
140+
display: inline-block;
141+
padding-right: @indent__base;
142+
}
143+
}
144+
.cvv {
145+
.label {
146+
display: block;
147+
}
148+
.input-text {
149+
width: 55px;
150+
}
151+
}
152+
153+
&.fieldset {
154+
> .field {
155+
.fields.group.group-2 {
156+
.field {
157+
width: auto !important;
158+
}
159+
}
160+
}
161+
}
162+
}
163+
}
164+
}
165+
166+
//
167+
// Mobile
168+
// _____________________________________________
169+
170+
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
171+
.checkout-payment-method {
172+
.payment-option {
173+
.lib-css(margin, 0 -(@checkout-payment-option-title-mobile__padding));
174+
175+
.payment-option-title {
176+
.lib-css(padding, @checkout-payment-option-title-mobile__padding)
177+
}
178+
179+
.payment-option-content {
180+
.lib-css(padding, 0 @checkout-payment-option-title-mobile__padding @indent__base);
181+
}
182+
}
183+
}
184+
}
185+
186+
//
187+
// Desktop
188+
// _____________________________________________
189+
190+
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
191+
.checkout-payment-method {
192+
.payment-option-title {
193+
.lib-css(padding-left, @checkout-payment-option-content__padding__xl);
194+
}
195+
.payment-option-content {
196+
.payment-option-inner {
197+
+ .actions-toolbar {
198+
margin-left: 0;
199+
}
200+
}
201+
}
202+
}
203+
}

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,6 @@
7676
margin: 0 0 @indent__base;
7777
}
7878
}
79-
.field {
80-
&.cvv {
81-
.control {
82-
width: 40%;
83-
}
84-
}
85-
}
8679
}
8780

8881
.field-select-billing,
@@ -136,14 +129,6 @@
136129
.no-payments-block {
137130
margin: @indent__base 0;
138131
}
139-
.ccard {
140-
.legend {
141-
&:extend(.abs-visually-hidden all);
142-
}
143-
.year {
144-
padding-left: @indent__l;
145-
}
146-
}
147132
.payments {
148133
.legend {
149134
&:extend(.abs-visually-hidden all);

0 commit comments

Comments
 (0)