Skip to content

Commit c0f8c6c

Browse files
yeshamavaniyeshamavani
authored
Merge pull request #43 from sourcefuse/saas-ui-6
style(arc-saas): Responsive pages of on-boarding module
2 parents 3256c73 + 68610e6 commit c0f8c6c

File tree

6 files changed

+215
-29
lines changed

6 files changed

+215
-29
lines changed

‎angular.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
},
6262
{
6363
"type": "anyComponentStyle",
64-
"maximumWarning": "2kb",
65-
"maximumError": "4kb"
64+
"maximumWarning": "1mb",
65+
"maximumError": "2mb"
6666
}
6767
],
6868
"outputHashing": "all"
@@ -212,13 +212,13 @@
212212
"budgets": [
213213
{
214214
"type": "initial",
215-
"maximumWarning": "500kb",
216-
"maximumError": "1mb"
215+
"maximumWarning": "5mb",
216+
"maximumError": "4mb"
217217
},
218218
{
219219
"type": "anyComponentStyle",
220-
"maximumWarning": "2kb",
221-
"maximumError": "4kb"
220+
"maximumWarning": "1mb",
221+
"maximumError": "2mb"
222222
}
223223
],
224224
"outputHashing": "all"
@@ -311,13 +311,13 @@
311311
"budgets": [
312312
{
313313
"type": "initial",
314-
"maximumWarning": "500kb",
315-
"maximumError": "1mb"
314+
"maximumWarning": "5mb",
315+
"maximumError": "5mb"
316316
},
317317
{
318318
"type": "anyComponentStyle",
319-
"maximumWarning": "2kb",
320-
"maximumError": "4kb"
319+
"maximumWarning": "5mb",
320+
"maximumError": "5mb"
321321
}
322322
],
323323
"outputHashing": "all"

‎projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.scss

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../../styles/forms.style.scss' as *;
12
:host {
23
.logo {
34
padding-top: 10%;
@@ -16,26 +17,9 @@
1617
}
1718
}
1819

19-
.input-wrapper {
20-
display: flex;
21-
gap: 10px;
22-
justify-content: space-between;
23-
flex-wrap: wrap;
24-
}
2520

26-
.input-box {
27-
width: 48%;
28-
29-
.input {
30-
input {
31-
margin: 5px 0;
32-
width: 100% !important;
33-
max-width: 100%;
34-
border-radius: 0;
35-
background: #fff;
36-
}
37-
}
3821

22+
.input-box {
3923
.inputTags {
4024
input {
4125
margin: 5px 0;
@@ -74,3 +58,4 @@
7458
margin-top: 0 !important;
7559
}
7660
}
61+

‎projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use '../../../../../../arc-lib/src/lib/theme/styles/variables' as *;
33
@use '../../../../styles.scss' as *;
44
@use '../../../../themes.scss' as *;
5+
@use '../../styles/forms.style.scss' as *;
56

67
.input-wrapper {
78
display: flex;
@@ -55,3 +56,52 @@
5556
}
5657
}
5758
}
59+
60+
/* Media Queries for Responsiveness */
61+
62+
@media (max-width: 575px) {
63+
64+
.plan-card-container .plan-card-wrapper {
65+
flex-direction: column;
66+
}
67+
68+
.plan-card-container .plan-card-wrapper .plan-card-box {
69+
width: 100%;
70+
}
71+
}
72+
73+
/* Small devices */
74+
@media (min-width: 576px) and (max-width: 767px) {
75+
76+
.plan-card-container .plan-card-wrapper {
77+
flex-direction: column;
78+
}
79+
80+
.plan-card-container .plan-card-wrapper .plan-card-box {
81+
width: 100%;
82+
}
83+
}
84+
85+
/* Medium devices */
86+
@media (min-width: 768px) and (max-width: 991px) {
87+
88+
.plan-card-container .plan-card-wrapper {
89+
flex-direction: row;
90+
}
91+
92+
.plan-card-container .plan-card-wrapper .plan-card-box {
93+
width: calc(50% - 20px);
94+
}
95+
}
96+
97+
/* Large devices */
98+
@media (min-width: 992px) {
99+
100+
.plan-card-container .plan-card-wrapper {
101+
flex-direction: row;
102+
}
103+
104+
.plan-card-container .plan-card-wrapper .plan-card-box {
105+
width: calc(33.33% - 20px);
106+
}
107+
}

‎projects/saas-ui/src/app/on-boarding/components/email-verification/email-verification.component.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* email-verification-success.component.css */
2+
@use '../../styles/forms.style.scss' as *;
23
:host {
34
display: flex;
45
justify-content: center;
@@ -7,7 +8,6 @@
78
}
89

910
nb-card {
10-
width: 500px;
1111
text-align: center;
1212
}
1313

@@ -18,3 +18,7 @@ h2 {
1818
p {
1919
margin-bottom: 20px;
2020
}
21+
22+
.verifiaction-wrapper {
23+
padding: 0 18px;
24+
}

‎projects/saas-ui/src/app/on-boarding/components/verification-complete/verification-complete.component.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* registration-complete.component.css */
2+
@use '../../styles/forms.style.scss' as *;
23
:host {
34
display: flex;
45
justify-content: center;

‎projects/saas-ui/src/app/on-boarding/styles/forms.style.scss

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
2+
.card-row {
3+
margin: 0;
4+
padding: 0 !important;
5+
}
6+
7+
.input-wrapper {
8+
display: flex;
9+
gap: 10px;
10+
justify-content: space-between;
11+
flex-wrap: wrap;
12+
}
13+
14+
.input-box {
15+
width: 48%;
16+
17+
.input {
18+
input {
19+
margin: 5px 0;
20+
width: 100% !important;
21+
max-width: 100%;
22+
border-radius: 0;
23+
background: #fff;
24+
}
25+
}
26+
}
27+
28+
/* Media Queries for Responsiveness for Lead and tenant */
29+
30+
@media (max-width: 575px) {
31+
.input-wrapper {
32+
flex-direction: column;
33+
}
34+
35+
.input-box {
36+
width: 100%;
37+
}
38+
39+
.add-lead-wrapper .btn {
40+
text-align: center;
41+
}
42+
43+
:host {
44+
padding: 15px;
45+
}
46+
47+
h2 {
48+
font-size: 1.25rem;
49+
}
50+
51+
p {
52+
font-size: 0.9rem;
53+
}
54+
}
55+
56+
/* Small devices*/
57+
@media (min-width: 576px) and (max-width: 767px) {
58+
.input-wrapper {
59+
gap: 8px;
60+
}
61+
62+
.input-box {
63+
width: 100%;
64+
}
65+
66+
.add-lead-wrapper .btn {
67+
text-align: center;
68+
}
69+
70+
:host {
71+
padding: 15px;
72+
}
73+
74+
h2 {
75+
font-size: 1.4rem;
76+
}
77+
78+
p {
79+
font-size: 0.95rem;
80+
}
81+
}
82+
83+
/* Medium devices */
84+
@media (min-width: 768px) and (max-width: 991px) {
85+
.input-wrapper {
86+
gap: 10px;
87+
}
88+
89+
.input-box {
90+
width: 48%;
91+
}
92+
93+
.address-input-box {
94+
width: 100%;
95+
}
96+
97+
.add-lead-wrapper .btn {
98+
text-align: right;
99+
}
100+
:host {
101+
padding: 20px;
102+
}
103+
104+
h2 {
105+
font-size: 1.5rem;
106+
}
107+
108+
p {
109+
font-size: 1rem;
110+
}
111+
}
112+
113+
114+
/* Large devices */
115+
@media (min-width: 992px) {
116+
.input-wrapper {
117+
gap: 15px;
118+
}
119+
120+
.input-box {
121+
width: 48%;
122+
}
123+
124+
.address-input-box {
125+
width: 100%;
126+
}
127+
128+
.add-lead-wrapper .btn {
129+
text-align: right;
130+
}
131+
:host {
132+
padding: 25px;
133+
}
134+
135+
h2 {
136+
font-size: 1.6rem;
137+
}
138+
139+
p {
140+
font-size: 1.05rem;
141+
}
142+
}
143+
144+
145+
146+

0 commit comments

Comments
 (0)