Skip to content

Commit 8f9395f

Browse files
gpressutto5FangedParakeet
gpressutto5
and
FangedParakeet
authored
Multibanco feature branch (#10227)
Co-authored-by: Samir Merchant <samir.merchant@automattic.com>
1 parent 40dd0ca commit 8f9395f

30 files changed

+1221
-6
lines changed

‎assets/css/admin.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@
139139
background-image: url( '../images/payment-methods/klarna.svg' );
140140
}
141141

142+
.payment-method__brand--multibanco {
143+
background-image: url( '../images/payment-methods/multibanco-icon.svg' );
144+
}
145+
142146
.payment-method__brand--grabpay {
143147
background-image: url( '../images/payment-methods/grabpay.svg' );
144148
}

‎assets/css/admin.rtl.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@
139139
background-image: url( '../images/payment-methods/klarna.svg' );
140140
}
141141

142+
.payment-method__brand--multibanco {
143+
background-image: url( '../images/payment-methods/multibanco-icon.svg' );
144+
}
145+
142146
.payment-method__brand--grabpay {
143147
background-image: url( '../images/payment-methods/grabpay.svg' );
144148
}

‎assets/css/success.css‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,169 @@
1818
.wc-payment-gateway-method-logo-wrapper.wc-payment-card-logo img {
1919
max-height: 1em;
2020
}
21+
22+
#wc-payment-gateway-multibanco-instructions-container {
23+
/* Default values */
24+
--woopayments-multibanco-text-color: rgb( 109, 109, 109 );
25+
--woopayments-multibanco-bg-color: rgba( 109, 109, 109, 0.06 );
26+
--woopayments-multibanco-border-color: rgba( 109, 109, 109, 0.16 );
27+
--woopayments-multibanco-card-bg-color: rgb( 255, 255, 255 );
28+
29+
display: flex;
30+
justify-content: center;
31+
margin: 2em 0;
32+
background-color: var( --woopayments-multibanco-bg-color );
33+
}
34+
35+
#wc-payment-gateway-multibanco-instructions-container .card {
36+
background-color: var( --woopayments-multibanco-card-bg-color );
37+
border: 1px solid var( --woopayments-multibanco-border-color );
38+
border-radius: 4px;
39+
padding: 20px;
40+
max-width: 500px;
41+
width: 100%;
42+
margin: 30px 0;
43+
}
44+
45+
#wc-payment-gateway-multibanco-instructions-container .print-btn {
46+
width: 100%;
47+
}
48+
49+
#wc-payment-gateway-multibanco-instructions-container .copy-link-btn {
50+
width: 100%;
51+
background: transparent;
52+
border: none;
53+
color: var( --woopayments-multibanco-text-color );
54+
font-weight: normal;
55+
}
56+
57+
#wc-payment-gateway-multibanco-instructions-container .copy-link-btn:focus {
58+
outline: none;
59+
}
60+
61+
#wc-payment-gateway-multibanco-instructions-container .payment-instructions p {
62+
margin-bottom: 0;
63+
}
64+
65+
#wc-payment-gateway-multibanco-instructions-container .payment-instructions ol {
66+
margin: 0;
67+
padding-left: 20px;
68+
}
69+
70+
#wc-payment-gateway-multibanco-instructions-container .card-header {
71+
display: flex;
72+
align-items: flex-start;
73+
gap: 12px;
74+
margin-bottom: 24px;
75+
}
76+
77+
#wc-payment-gateway-multibanco-instructions-container .logo-container {
78+
flex-shrink: 0;
79+
width: 57px;
80+
height: 57px;
81+
padding: 10px;
82+
background-color: #f6f7f7;
83+
border: 1px solid var( --woopayments-multibanco-border-color );
84+
border-radius: 4px;
85+
box-sizing: border-box;
86+
}
87+
88+
#wc-payment-gateway-multibanco-instructions-container .logo-container img {
89+
width: 100%;
90+
height: 100%;
91+
object-fit: contain;
92+
}
93+
94+
#wc-payment-gateway-multibanco-instructions-container .payment-details {
95+
flex-grow: 1;
96+
}
97+
98+
#wc-payment-gateway-multibanco-instructions-container .payment-header {
99+
font-size: 1.5rem;
100+
font-weight: 400;
101+
line-height: 1.2;
102+
margin-bottom: 5px;
103+
}
104+
105+
#wc-payment-gateway-multibanco-instructions-container .payment-box {
106+
background-color: var( --woopayments-multibanco-bg-color );
107+
border: 1px solid var( --woopayments-multibanco-border-color );
108+
border-radius: 4px;
109+
margin: 15px 0;
110+
}
111+
112+
#wc-payment-gateway-multibanco-instructions-container .payment-box-row {
113+
padding: 15px;
114+
display: flex;
115+
justify-content: space-between;
116+
align-items: center;
117+
}
118+
119+
#wc-payment-gateway-multibanco-instructions-container
120+
.payment-box-row:not( :last-child ) {
121+
border-bottom: 1px solid var( --woopayments-multibanco-border-color );
122+
}
123+
124+
#wc-payment-gateway-multibanco-instructions-container i.copy-icon {
125+
display: inline-block;
126+
width: 1.2em;
127+
height: 1.2em;
128+
mask-image: url( '../images/icons/copy.svg' );
129+
mask-size: contain;
130+
mask-repeat: no-repeat;
131+
mask-position: center;
132+
background-color: currentColor;
133+
vertical-align: middle;
134+
margin-left: 5px;
135+
}
136+
137+
#wc-payment-gateway-multibanco-instructions-container .copied i.copy-icon {
138+
mask-image: url( '../images/icons/check-green.svg' );
139+
}
140+
141+
#wc-payment-gateway-multibanco-instructions-container .badge {
142+
background-color: #fff2d7;
143+
border-radius: 4px;
144+
padding: 4px 6px;
145+
font-size: 12px;
146+
font-weight: 400;
147+
line-height: 16px;
148+
color: #4d3716;
149+
justify-self: start;
150+
width: max-content;
151+
margin-left: 5px;
152+
}
153+
154+
#wc-payment-gateway-multibanco-instructions-container .payment-box-value {
155+
background: none;
156+
border: none;
157+
padding: 0;
158+
margin: 0;
159+
font: inherit;
160+
color: inherit;
161+
cursor: pointer;
162+
display: inline-flex;
163+
align-items: center;
164+
font-weight: 600;
165+
}
166+
167+
#wc-payment-gateway-multibanco-instructions-container .payment-box-value:focus {
168+
outline: none;
169+
}
170+
171+
#wc-payment-gateway-multibanco-instructions-container .payment-box-value:hover {
172+
background-color: transparent;
173+
opacity: 0.7;
174+
175+
i {
176+
opacity: 0.7;
177+
}
178+
}
179+
180+
@media screen and ( max-width: 568px ) {
181+
#wc-payment-gateway-multibanco-instructions-container {
182+
margin: 0;
183+
width: 100%;
184+
background: none;
185+
}
186+
}

‎assets/css/success.rtl.css‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,169 @@
1818
.wc-payment-gateway-method-logo-wrapper.wc-payment-card-logo img {
1919
max-height: 1em;
2020
}
21+
22+
#wc-payment-gateway-multibanco-instructions-container {
23+
/* Default values */
24+
--woopayments-multibanco-text-color: rgb( 109, 109, 109 );
25+
--woopayments-multibanco-bg-color: rgba( 109, 109, 109, 0.06 );
26+
--woopayments-multibanco-border-color: rgba( 109, 109, 109, 0.16 );
27+
--woopayments-multibanco-card-bg-color: rgb( 255, 255, 255 );
28+
29+
display: flex;
30+
justify-content: center;
31+
margin: 2em 0;
32+
background-color: var( --woopayments-multibanco-bg-color );
33+
}
34+
35+
#wc-payment-gateway-multibanco-instructions-container .card {
36+
background-color: var( --woopayments-multibanco-card-bg-color );
37+
border: 1px solid var( --woopayments-multibanco-border-color );
38+
border-radius: 4px;
39+
padding: 20px;
40+
max-width: 500px;
41+
width: 100%;
42+
margin: 30px 0;
43+
}
44+
45+
#wc-payment-gateway-multibanco-instructions-container .print-btn {
46+
width: 100%;
47+
}
48+
49+
#wc-payment-gateway-multibanco-instructions-container .copy-link-btn {
50+
width: 100%;
51+
background: transparent;
52+
border: none;
53+
color: var( --woopayments-multibanco-text-color );
54+
font-weight: normal;
55+
}
56+
57+
#wc-payment-gateway-multibanco-instructions-container .copy-link-btn:focus {
58+
outline: none;
59+
}
60+
61+
#wc-payment-gateway-multibanco-instructions-container .payment-instructions p {
62+
margin-bottom: 0;
63+
}
64+
65+
#wc-payment-gateway-multibanco-instructions-container .payment-instructions ol {
66+
margin: 0;
67+
padding-right: 20px;
68+
}
69+
70+
#wc-payment-gateway-multibanco-instructions-container .card-header {
71+
display: flex;
72+
align-items: flex-start;
73+
gap: 12px;
74+
margin-bottom: 24px;
75+
}
76+
77+
#wc-payment-gateway-multibanco-instructions-container .logo-container {
78+
flex-shrink: 0;
79+
width: 57px;
80+
height: 57px;
81+
padding: 10px;
82+
background-color: #f6f7f7;
83+
border: 1px solid var( --woopayments-multibanco-border-color );
84+
border-radius: 4px;
85+
box-sizing: border-box;
86+
}
87+
88+
#wc-payment-gateway-multibanco-instructions-container .logo-container img {
89+
width: 100%;
90+
height: 100%;
91+
object-fit: contain;
92+
}
93+
94+
#wc-payment-gateway-multibanco-instructions-container .payment-details {
95+
flex-grow: 1;
96+
}
97+
98+
#wc-payment-gateway-multibanco-instructions-container .payment-header {
99+
font-size: 1.5rem;
100+
font-weight: 400;
101+
line-height: 1.2;
102+
margin-bottom: 5px;
103+
}
104+
105+
#wc-payment-gateway-multibanco-instructions-container .payment-box {
106+
background-color: var( --woopayments-multibanco-bg-color );
107+
border: 1px solid var( --woopayments-multibanco-border-color );
108+
border-radius: 4px;
109+
margin: 15px 0;
110+
}
111+
112+
#wc-payment-gateway-multibanco-instructions-container .payment-box-row {
113+
padding: 15px;
114+
display: flex;
115+
justify-content: space-between;
116+
align-items: center;
117+
}
118+
119+
#wc-payment-gateway-multibanco-instructions-container
120+
.payment-box-row:not( :last-child ) {
121+
border-bottom: 1px solid var( --woopayments-multibanco-border-color );
122+
}
123+
124+
#wc-payment-gateway-multibanco-instructions-container i.copy-icon {
125+
display: inline-block;
126+
width: 1.2em;
127+
height: 1.2em;
128+
mask-image: url( '../images/icons/copy.svg' );
129+
mask-size: contain;
130+
mask-repeat: no-repeat;
131+
mask-position: center;
132+
background-color: currentColor;
133+
vertical-align: middle;
134+
margin-right: 5px;
135+
}
136+
137+
#wc-payment-gateway-multibanco-instructions-container .copied i.copy-icon {
138+
mask-image: url( '../images/icons/check-green.svg' );
139+
}
140+
141+
#wc-payment-gateway-multibanco-instructions-container .badge {
142+
background-color: #fff2d7;
143+
border-radius: 4px;
144+
padding: 4px 6px;
145+
font-size: 12px;
146+
font-weight: 400;
147+
line-height: 16px;
148+
color: #4d3716;
149+
justify-self: start;
150+
width: max-content;
151+
margin-left: 5px;
152+
}
153+
154+
#wc-payment-gateway-multibanco-instructions-container .payment-box-value {
155+
background: none;
156+
border: none;
157+
padding: 0;
158+
margin: 0;
159+
font: inherit;
160+
color: inherit;
161+
cursor: pointer;
162+
display: inline-flex;
163+
align-items: center;
164+
font-weight: 600;
165+
}
166+
167+
#wc-payment-gateway-multibanco-instructions-container .payment-box-value:focus {
168+
outline: none;
169+
}
170+
171+
#wc-payment-gateway-multibanco-instructions-container .payment-box-value:hover {
172+
background-color: transparent;
173+
opacity: 0.7;
174+
175+
i {
176+
opacity: 0.7;
177+
}
178+
}
179+
180+
@media screen and ( max-width: 568px ) {
181+
#wc-payment-gateway-multibanco-instructions-container {
182+
margin: 0;
183+
width: 100%;
184+
background: none;
185+
}
186+
}

‎assets/images/payment-methods/multibanco-icon.svg‎

Lines changed: 11 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)