Skip to content

Commit 66d5c6b

Browse files
lazy-godvdvibhu20
lazy-god
authored and
vdvibhu20
committed
Add: media-query refactoring for oneauth designs (#235)
* Add: media-query refactoring * media query refactoring - 2 * nav bar card * refactor: - moved border-card to media query: arrangement - removed heading-u-red from individual files * moved button-row to media.arrangement
1 parent 27df595 commit 66d5c6b

9 files changed

+120
-384
lines changed

‎sass/styles/_media-query.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@import "media-query/media.o-otp-enroll";
1414
@import "media-query/media.o-pb";
1515
@import "media-query/media.item-card";
16+
@import "media-query/media.arrangement";
1617
@import "media-query/media.o-profile.card";
1718
@import "media-query/media.o-profile.card.edit";
1819
@import "media-query/media.checkout-card";

‎sass/styles/media-query/media.arrangement.scss

Lines changed: 115 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,120 @@
1-
@media screen and (max-width: 767px) {
2-
.e-arrangement{
1+
@media screen and (max-width: 1200px) {
2+
.o-arrangement {
3+
.card {
4+
@include padding-mixin(40px, 40px, 40px, 40px);
5+
font-size: $font-xs;
6+
}
7+
8+
.input-text {
9+
font-size: $font-xs;
10+
}
11+
12+
.heading-u-red {
13+
@include padding-mixin(0, 140px, 33px, 0);
14+
}
15+
16+
.attributes {
17+
.detail-row {
18+
width: 100%;
19+
}
20+
}
21+
22+
.button-dashed {
23+
font-size: $global-font-size;
24+
}
25+
26+
.button-solid {
27+
font-size: $global-font-size;
28+
}
29+
30+
.nav-info {
31+
.card {
32+
@include padding-mixin (90px, 0, 50px, 0);
33+
text-align: center;
34+
}
35+
}
36+
}
37+
}
38+
39+
@media screen and (min-width: 576px) and (max-width: 767px) {
40+
.o-arrangement{
341
.nav-info {
442
display: none;
543
}
44+
45+
.card {
46+
@include padding-mixin(55px, 30px, 25px, 30px);
47+
font-size: $font-xs;
48+
}
49+
50+
.input-text{
51+
height: 50px;
52+
}
53+
54+
.border-card{
55+
width: 100%;
56+
}
57+
58+
.heading-u-red {
59+
@include padding-mixin(0, 180px, 20px, 0);
60+
font-size: $font-mds;
61+
}
62+
}
63+
}
64+
65+
@media screen and (max-width: 575px) {
66+
.o-arrangement {
67+
.nav-info {
68+
display: none;
69+
}
70+
71+
.heading {
72+
font-size: $global-font-size;
73+
}
74+
75+
.card {
76+
@include padding-mixin(25px, 20px, 25px, 20px);
77+
font-size: $card-sm;
78+
font-weight: $font-medium;
79+
}
80+
81+
82+
.button-dashed {
83+
font-size: $card-sm;
84+
}
85+
86+
.button-solid {
87+
font-size: $card-sm;
88+
}
89+
90+
.heading-u-red {
91+
@include padding-mixin(0, 93px, 13px, 0);
92+
margin-bottom: 20px;
93+
font-size: $font-xs;
94+
}
95+
96+
.attributes {
97+
.flex-row {
98+
@include padding-mixin(20px, 0, 10px, 0);
99+
justify-content: space-between;
100+
}
101+
102+
.input-text {
103+
height: 40px;
104+
font-size: $card-sm;
105+
width: 70%;
106+
}
107+
}
108+
109+
.border-card {
110+
width: 100%;
111+
padding-bottom: 90px;
112+
padding-top: 20px;
113+
}
114+
115+
.button-row {
116+
bottom: 30px;
117+
}
118+
6119
}
7120
}

‎sass/styles/media-query/media.o-add-address.scss

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,15 @@
11
@media screen and (max-width: 1200px) {
22
.o-add-address {
3-
.card {
4-
@include padding-mixin(40px, 40px, 40px, 40px);
5-
}
6-
7-
.heading-u-red {
8-
@include padding-mixin(0, 180px, 33px, 0);
9-
}
10-
11-
.input-text {
12-
font-size: $font-xs;
13-
}
14-
153
.attributes {
164
.detail-row {
175
@include margin(20px, 0, 20px, 0);
18-
width: 100%;
196
}
207
}
218
}
229
}
2310

2411
@media screen and (min-width: 575px) and (max-width: 767px) {
2512
.o-add-address {
26-
.card {
27-
@include padding-mixin(55px, 30px, 25px, 30px);
28-
font-size: $global-font-size;
29-
}
30-
31-
.heading-u-red {
32-
@include padding-mixin(0, 180px, 10px, 0);
33-
}
34-
35-
.input-text{
36-
height: 50px;
37-
}
38-
3913
.button-solid {
4014
@include margin(0, 20px, 0, 0);
4115
}
@@ -44,40 +18,17 @@
4418

4519
@media screen and (max-width: 575px) {
4620
.o-add-address {
47-
.card {
48-
@include padding-mixin(25px, 20px, 25px, 20px);
49-
font-size: $card-sm;
50-
font-weight: $font-medium;
51-
}
52-
53-
.button-solid {
54-
font-size: $card-sm;
55-
}
56-
57-
.heading-u-red {
58-
@include padding-mixin(0, 150px, 13px, 0);
59-
font-size: $font-xs;
60-
}
61-
6221
.button-solid {
6322
height: 35px;
64-
font-size: $card-sm;
6523
}
6624

6725
.attributes {
68-
.input-text {
69-
height: 50px;
70-
font-size: $card-sm;
71-
width: 70%;
72-
}
73-
7426
.label-input {
7527
width: 30%;
7628
}
7729

7830
.detail-row {
7931
@include margin(10px, 0, 10px, 0);
80-
width: 100%;
8132
}
8233
}
8334
}

‎sass/styles/media-query/media.o-address-page.scss

Lines changed: 2 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,11 @@
11
@media screen and (max-width: 1200px) {
2-
.o-address-page {
3-
.card {
4-
@include padding-mixin(40px, 40px, 40px, 40px);
5-
}
6-
7-
.heading-u-red {
8-
@include padding-mixin(0, 100px, 33px, 0);
9-
}
10-
11-
.button-dashed {
12-
font-size: $global-font-size;
13-
}
14-
15-
.button-solid {
16-
font-size: $global-font-size;
17-
}
18-
}
2+
193
}
204

215
@media screen and (min-width: 576px) and (max-width: 767px) {
22-
.o-address-page{
23-
.card {
24-
@include padding-mixin(40px, 30px, 25px, 30px);
25-
}
266

27-
.border-card {
28-
width: 100%;
29-
}
30-
31-
.heading-u-red {
32-
@include padding-mixin(0, 100px, 10px, 0);
33-
}
34-
}
357
}
368

379
@media screen and (max-width: 575px) {
38-
.o-address-page{
39-
.card {
40-
@include padding-mixin(25px, 20px, 25px, 20px);
41-
font-size: $card-md;
42-
font-weight: $font-medium;
43-
}
44-
45-
.heading {
46-
font-size: $global-font-size;
47-
}
48-
49-
.button-dashed {
50-
font-size: $card-md;
51-
}
52-
53-
.button-solid {
54-
font-size: $card-md;
55-
}
56-
57-
.border-card {
58-
width: 100%;
59-
padding-bottom: 90px;
60-
padding-top: 20px;
61-
}
62-
63-
.button-row {
64-
bottom: 30px;
65-
}
66-
67-
.heading-u-red {
68-
@include padding-mixin(0, 60px, 13px, 0);
69-
font-size: $font-xs;
70-
}
71-
}
10+
7211
}

‎sass/styles/media-query/media.o-app-page.scss

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,15 @@
11
@media screen and (max-width: 1200px) {
2-
.o-app-page {
3-
.card {
4-
@include padding-mixin(40px, 40px, 40px, 40px);
5-
font-size: $font-xs;
6-
}
7-
8-
.heading-u-red {
9-
@include padding-mixin(0, 280px, 33px, 0);
10-
}
112

12-
.button-dashed {
13-
font-size: $global-font-size;
14-
}
15-
}
163
}
174

185
@media screen and (min-width: 576px) and (max-width: 767px) {
19-
.o-app-page{
20-
.card {
21-
@include padding-mixin(40px, 30px, 25px, 30px);
22-
}
23-
24-
.border-card {
25-
width: 100%;
26-
}
27-
28-
.heading-u-red {
29-
@include padding-mixin(0, 180px, 10px, 0);
30-
font-size: $font-mds;
31-
}
32-
}
6+
337
}
348

359
@media screen and (max-width: 575px) {
3610
.o-app-page{
37-
.card {
38-
@include padding-mixin(25px, 20px, 25px, 20px);
39-
font-size: $card-md;
40-
font-weight: $font-medium;
41-
}
42-
43-
.heading {
44-
font-size: $global-font-size;
45-
}
46-
4711
.button-dashed {
48-
font-size: $card-md;
4912
width: 30%;
5013
}
51-
52-
.border-card {
53-
width: 100%;
54-
padding-bottom: 90px;
55-
padding-top: 20px;
56-
}
57-
58-
.button-row {
59-
bottom: 30px;
60-
}
61-
62-
.heading-u-red {
63-
@include padding-mixin(0, 150px, 13px, 0);
64-
font-size: $font-xs;
65-
}
6614
}
6715
}

0 commit comments

Comments
 (0)