Skip to content

Commit 126f4eb

Browse files
poojarazorpoojarazor
committed
design fix
1 parent c34185b commit 126f4eb

File tree

2 files changed

+115
-99
lines changed

2 files changed

+115
-99
lines changed

‎public/css/1cc-product-checkout.css

+114-98
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,151 @@
11
#btn-1cc-mini-cart {
2-
display: block !important;
3-
width: 100%;
2+
display: block !important;
3+
width: 100%;
44
}
55
#rzp-spinner-backdrop {
6-
position: fixed;
7-
top: 0;
8-
left: 0;
9-
z-index: 9999;
10-
width: 100%;
11-
height: 100%;
12-
background: rgba(0, 0, 0);
13-
visibility: hidden;
14-
opacity: 0;
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
z-index: 9999;
10+
width: 100%;
11+
height: 100%;
12+
background: rgba(0, 0, 0);
13+
visibility: hidden;
14+
opacity: 0;
1515
}
1616
#rzp-spinner-backdrop.show {
17-
visibility: visible;
18-
opacity: 0.4;
17+
visibility: visible;
18+
opacity: 0.4;
1919
}
2020
#rzp-spinner {
21-
visibility: hidden;
22-
opacity: 0;
23-
/* positioning and centering */
24-
position: fixed;
25-
left: 0;
26-
top: 0;
27-
bottom: 0;
28-
right: 0;
29-
margin: auto;
30-
z-index: 10000;
31-
display: flex !important;
32-
align-items: center;
33-
justify-content: center;
21+
visibility: hidden;
22+
opacity: 0;
23+
/* positioning and centering */
24+
position: fixed;
25+
left: 0;
26+
top: 0;
27+
bottom: 0;
28+
right: 0;
29+
margin: auto;
30+
z-index: 10000;
31+
display: flex !important;
32+
align-items: center;
33+
justify-content: center;
3434
}
3535
#rzp-spinner.show {
36-
visibility: visible;
37-
opacity: 1;
36+
visibility: visible;
37+
opacity: 1;
3838
}
3939
@keyframes rotate {
40-
0% {
41-
transform: rotate(0);
42-
}
43-
100% {
44-
transform: rotate(360deg);
45-
}
40+
0% {
41+
transform: rotate(0);
42+
}
43+
100% {
44+
transform: rotate(360deg);
45+
}
4646
}
4747
#loading-indicator {
48-
border-radius: 50%;
49-
width: 80px;
50-
height: 80px;
51-
border: 4px solid;
52-
border-color: rgb(59, 124, 245) transparent rgb(59, 124, 245) rgb(59, 124, 245) !important;
53-
animation: 1s linear 0s infinite normal none running rotate;
54-
margin-top: 2px;
55-
box-sizing: content-box;
48+
border-radius: 50%;
49+
width: 80px;
50+
height: 80px;
51+
border: 4px solid;
52+
border-color: rgb(59, 124, 245) transparent rgb(59, 124, 245) rgb(59, 124, 245) !important;
53+
animation: 1s linear 0s infinite normal none running rotate;
54+
margin-top: 2px;
55+
box-sizing: content-box;
5656
}
5757
#icon {
58-
position: absolute;
58+
position: absolute;
5959
}
60-
#rzp-logo {
61-
width: auto;
62-
height: 80px !important;
60+
#rzp-logo{
61+
width: auto;
62+
height: 80px !important;
6363
}
6464
@media (max-device-height: 768px), (max-device-width: 768px) {
65-
#loading-indicator {
66-
width: 45px;
67-
height: 45px;
68-
}
69-
#rzp-logo {
70-
height: 45px !important;
71-
}
65+
#loading-indicator {
66+
width: 45px;
67+
height: 45px;
68+
}
69+
#rzp-logo {
70+
height: 45px !important;
71+
}
7272
}
7373
.button-1cc-wrapper {
74-
display: flex;
75-
font-size: 11px;
76-
align-items: center;
77-
justify-content: center;
74+
display: flex;
75+
font-size: 11px;
76+
align-items: center;
77+
justify-content: center;
7878
}
7979
.button-1cc-text {
80-
padding-left: 5px;
81-
color: #fff !important;
82-
padding-top: 3px;
80+
padding-left: 5px;
81+
color: #fff !important;
82+
padding-top: 3px;
8383
}
8484
.btn-1cc-container {
85-
background-image: linear-gradient(to right, #005BF2, #1E4C9C) !important;
86-
margin-left: 5px;
87-
color: white;
88-
margin-top: 12px;
89-
border-radius: 4px !important;
90-
font-weight: bold;
91-
margin: 0px;
92-
}
85+
background-image: linear-gradient(to right, #005BF2, #1E4C9C) !important;
86+
margin-left: 5px;
87+
color: white;
88+
margin-top: 12px;
89+
border-radius: 4px !important;
90+
font-weight: bold;
91+
margin: 0px;
92+
}
9393
.rzp-btn-icon {
94-
display: flex;
95-
justify-content: center;
96-
padding: 5px 0px 10px
94+
display: flex;
95+
justify-content: center;
96+
padding: 5px 0px 10px
9797
}
9898
.btn-1cc-section {
99-
display: flex;
100-
flex-direction: column;
101-
width: 100%;
102-
align-items: center;
99+
display: flex;
100+
flex-direction: column;
101+
width: 100%;
102+
align-items: center;
103103
}
104104
#btn-1cc-pdp {
105-
display: flex;
106-
align-items: center;
107-
margin-left: 5px;
108-
justify-content: center;
109-
margin-bottom: 0px;
110-
border: transparent;
111-
padding: 10px 20px;
105+
display: flex;
106+
align-items: center;
107+
margin-left: 5px;
108+
justify-content: center;
109+
margin-bottom: 0px;
110+
border: transparent;
111+
padding: 10px 20px;
112+
position: relative;
113+
z-index: 1;
112114
}
113115
#btn-1cc-pdp:before {
114-
content: '' !important;
115-
margin: 0px;
116+
content: '' !important;
117+
margin: 0px;
116118
}
117119
#btn-1cc-pdp:after {
118-
content: '' !important;
120+
content: '' !important;
119121
}
120122
#btn-1cc:after {
121-
content: '' !important;
123+
content: '' !important;
122124
}
123125
#btn-1cc {
124-
display: flex !important;
125-
justify-content: center;
126-
align-items: center;
127-
width: 100%;
128-
margin-bottom: 0px;
129-
border: transparent;
130-
}
131-
#btn-1cc-mini-cart {
132-
background: linear-gradient(to right, #005BF2, #1E4C9C) !important;
133-
border: transparent;
134-
margin-bottom: 0px;
135-
}
126+
display: flex !important;
127+
justify-content: center;
128+
align-items: center;
129+
width: 100%;
130+
margin-bottom: 0px;
131+
border: transparent;
132+
}
133+
#btn-1cc-mini-cart{
134+
background: linear-gradient(to right, #005BF2, #1E4C9C) !important;
135+
border: transparent;
136+
margin-bottom: 0px;
137+
}
138+
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
149+
150+
151+

‎templates/rzp-dual-checkout-btn.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
<div>
2+
<div class="rzp-magic-wrapper">
33
<button
44
id="btn-1cc"
55
class="rzp-dual-checkout-button checkout-button button alt wc-forward btn-1cc-container"

0 commit comments

Comments
 (0)