Skip to content

Commit 7df0f74

Browse files
jagankumar-egovjagankumar-egov
authored
Merge branch 'develop' into SN-245
2 parents fbc5c97 + 5e77e15 commit 7df0f74

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+7195
-256
lines changed

‎react/css/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## [0.0.2-beta.36] - 2024-09-23
4+
### Changed
5+
- Added Table css
6+
37
## [0.0.2-beta.35] - 2024-09-19
48
### Changed
59
- Added OTPInput css

‎react/css/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@egovernments/digit-ui-components-css",
3-
"version": "0.0.2-beta.35",
3+
"version": "0.0.2-beta.36",
44
"license": "MIT",
55
"main": "dist/index.css",
66
"author": "Jagankumar <jagan.kumar@egovernments.org>",

‎react/css/src/digitv2/components/accordionV2.scss

+38
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,25 @@
2626

2727
.digit-accordion-number {
2828
@extend .typography.heading-s;
29+
font-family: theme(digitv2.fontFamily.sans);
30+
font-style: theme(digitv2.fontStyle.normal);
31+
font-weight: theme(digitv2.fontWeight.bold);
32+
line-height: theme(digitv2.lineHeight.lineheight1);
33+
34+
@media (max-aspect-ratio: 9/16) {
35+
/* Media query for mobile */
36+
font-size: theme(digitv2.fontSize.heading-s.mobile);
37+
}
38+
39+
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
40+
/* Media query for tablets */
41+
font-size: theme(digitv2.fontSize.heading-s.tablet);
42+
}
43+
44+
@media (min-aspect-ratio: 3/4) {
45+
/* Media query for desktop */
46+
font-size: theme(digitv2.fontSize.heading-s.desktop);
47+
}
2948
color: theme(digitv2.lightTheme.text-primary);
3049
min-width: theme(digitv2.spacers.spacer6);
3150
height: theme(digitv2.spacers.spacer6);
@@ -36,6 +55,25 @@
3655

3756
.digit-accordion-header-title {
3857
@extend .typography.heading-s;
58+
font-family: theme(digitv2.fontFamily.sans);
59+
font-style: theme(digitv2.fontStyle.normal);
60+
font-weight: theme(digitv2.fontWeight.bold);
61+
line-height: theme(digitv2.lineHeight.lineheight1);
62+
63+
@media (max-aspect-ratio: 9/16) {
64+
/* Media query for mobile */
65+
font-size: theme(digitv2.fontSize.heading-s.mobile);
66+
}
67+
68+
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
69+
/* Media query for tablets */
70+
font-size: theme(digitv2.fontSize.heading-s.tablet);
71+
}
72+
73+
@media (min-aspect-ratio: 3/4) {
74+
/* Media query for desktop */
75+
font-size: theme(digitv2.fontSize.heading-s.desktop);
76+
}
3977
color: theme(digitv2.lightTheme.text-primary);
4078
margin-top: 0.18rem;
4179
flex-grow: 1;

‎react/css/src/digitv2/components/checkboxV2.scss

+29-2
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,18 @@
2626
@apply opacity-0;
2727
}
2828

29-
svg{
29+
svg {
3030
flex-shrink: 0;
3131
}
3232

3333
&:hover {
34-
@apply border-2 ;
34+
@apply border-2;
3535
border-color: theme(digitv2.lightTheme.primary-1);
3636
}
37+
38+
&.intermediate {
39+
border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
40+
}
3741
}
3842

3943
.digit-custom-checkbox-emp {
@@ -45,6 +49,10 @@
4549
border-color: theme(digitv2.lightTheme.primary-1);
4650
}
4751

52+
input:hover~.digit-custom-checkbox.intermediate{
53+
border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
54+
}
55+
4856
input:checked~.digit-custom-checkbox {
4957
border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
5058
}
@@ -60,6 +68,13 @@
6068
height: theme(digitv2.spacers.spacer4);
6169
}
6270

71+
.intermediate-square {
72+
width: theme(digitv2.spacers.spacer4);
73+
height: theme(digitv2.spacers.spacer4);
74+
background-color: theme(digitv2.lightTheme.primary-1);
75+
display: block;
76+
}
77+
6378
.label {
6479
@extend .typography.body-s;
6580
font-family: theme(digitv2.fontFamily.sans);
@@ -81,6 +96,7 @@
8196
/* Media query for desktop */
8297
font-size: theme(digitv2.fontSize.body-s.desktop);
8398
}
99+
84100
@apply text-left;
85101
word-break: break-word;
86102
letter-spacing: theme(digitv2.spacers.spacer0);
@@ -97,5 +113,16 @@
97113
input:checked~.digit-custom-checkbox {
98114
border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
99115
}
116+
117+
.digit-custom-checkbox.intermediate{
118+
border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
119+
}
120+
121+
.intermediate-square {
122+
width: theme(digitv2.spacers.spacer4);
123+
height: theme(digitv2.spacers.spacer4);
124+
background-color: theme(digitv2.lightTheme.text-disabled);
125+
display: block;
126+
}
100127
}
101128
}

‎react/css/src/digitv2/components/formCardV2.scss

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
.digit-form-card{
2+
width: 100%;
3+
max-width: 100%;
4+
height: fit-content;
5+
background-color: theme(digitv2.lightTheme.paper-primary);
6+
display: flex;
7+
flex-direction: column;
8+
9+
.digit-form-card-header {
10+
@apply flex-col;
11+
display: flex !important;
12+
gap: theme(digitv2.spacers.spacer4);
13+
14+
&.with-shadow {
15+
box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
16+
}
17+
18+
@media (min-width: 48rem) {
19+
padding: theme(digitv2.spacers.spacer6);
20+
padding-bottom: theme(digitv2.spacers.spacer0);
21+
22+
&.with-shadow {
23+
padding-bottom: theme(digitv2.spacers.spacer6);
24+
}
25+
}
26+
27+
@media (min-width: 30.063rem) and (max-width: 47.938rem) {
28+
padding: theme(digitv2.spacers.spacer5);
29+
padding-bottom: theme(digitv2.spacers.spacer0);
30+
31+
&.with-shadow {
32+
padding-bottom: theme(digitv2.spacers.spacer5);
33+
}
34+
}
35+
36+
@media (max-width: 30rem) {
37+
padding: theme(digitv2.spacers.spacer4);
38+
padding-bottom: theme(digitv2.spacers.spacer0);
39+
40+
&.with-shadow {
41+
padding-bottom: theme(digitv2.spacers.spacer4);
42+
}
43+
}
44+
45+
}
46+
47+
.digit-form-card-content {
48+
@extend .typography.body-s;
49+
position: relative;
50+
font-family: theme(digitv2.fontFamily.sans);
51+
font-style: theme(digitv2.fontStyle.normal);
52+
font-weight: theme(digitv2.fontWeight.regular);
53+
line-height: theme(digitv2.lineHeight.lineheight2);
54+
55+
@media (max-aspect-ratio: 9/16) {
56+
/* Media query for mobile */
57+
font-size: theme(digitv2.fontSize.body-s.mobile);
58+
}
59+
60+
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
61+
/* Media query for tablets */
62+
font-size: theme(digitv2.fontSize.body-s.tablet);
63+
}
64+
65+
@media (min-aspect-ratio: 3/4) {
66+
/* Media query for desktop */
67+
font-size: theme(digitv2.fontSize.body-s.desktop);
68+
}
69+
@apply overflow-hidden overflow-y-auto flex-col;
70+
display: flex;
71+
flex: 1;
72+
color: theme(digitv2.lightTheme.text-primary);
73+
74+
&.inline {
75+
flex-direction: row;
76+
}
77+
78+
@media (min-width: 48rem) {
79+
gap: theme(digitv2.spacers.spacer6);
80+
padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
81+
82+
&.with-shadow,
83+
&.without-footer{
84+
padding: theme(digitv2.spacers.spacer6);
85+
}
86+
87+
}
88+
89+
@media (min-width: 30.063rem) and (max-width: 47.938rem) {
90+
gap: theme(digitv2.spacers.spacer5);
91+
padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
92+
93+
&.with-shadow,
94+
&.without-footer{
95+
padding: theme(digitv2.spacers.spacer5);
96+
}
97+
98+
}
99+
100+
@media (max-width: 30rem) {
101+
gap: theme(digitv2.spacers.spacer4);
102+
padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
103+
104+
&.with-shadow,
105+
&.without-footer{
106+
padding: theme(digitv2.spacers.spacer4);
107+
}
108+
}
109+
110+
.digit-label-field-pair {
111+
margin-bottom: unset;
112+
}
113+
114+
.digit-radio-options-wrap {
115+
margin-bottom: unset;
116+
}
117+
}
118+
119+
.digit-form-card-footer {
120+
@apply flex-wrap;
121+
display: flex;
122+
gap: theme(digitv2.spacers.spacer4);
123+
124+
&.with-shadow {
125+
box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
126+
}
127+
128+
@media (min-width: 48rem) {
129+
padding: theme(digitv2.spacers.spacer6);
130+
}
131+
132+
@media (min-width: 30.063rem) and (max-width: 47.938rem) {
133+
@apply w-full;
134+
padding: theme(digitv2.spacers.spacer5);
135+
}
136+
137+
@media (max-width: 30rem) {
138+
@apply flex-col;
139+
padding: theme(digitv2.spacers.spacer4);
140+
}
141+
142+
143+
.digit-form-card-buttons {
144+
margin-left: auto;
145+
display: flex;
146+
gap: theme(digitv2.spacers.spacer4);
147+
@apply max-w-full flex-wrap;
148+
149+
@media (min-width: 30.063rem) and (max-width: 47.938rem) {
150+
@apply w-full;
151+
152+
button {
153+
flex: 1;
154+
}
155+
}
156+
157+
@media (max-width: 30rem) {
158+
@apply flex-col;
159+
margin: theme(digitv2.spacers.spacer0);
160+
161+
button {
162+
width: 100%;
163+
}
164+
}
165+
166+
&.equal-buttons{
167+
width: 100%;
168+
169+
@media (min-width: 30.063rem) {
170+
171+
button {
172+
flex: 1;
173+
}
174+
}
175+
}
176+
}
177+
}
178+
179+
.vertical-formcard-divider{
180+
position: absolute;
181+
182+
@media (max-aspect-ratio: 9/16) {
183+
/* Media query for mobile */
184+
top: theme(digitv2.spacers.spacer4);
185+
height: calc(100% - 2rem);
186+
}
187+
188+
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
189+
/* Media query for tablets */
190+
top: theme(digitv2.spacers.spacer5);
191+
height: calc(100% - 2.5rem);
192+
}
193+
194+
@media (min-aspect-ratio: 3/4) {
195+
/* Media query for desktop */
196+
top: theme(digitv2.spacers.spacer6);
197+
height: calc(100% - 3rem);
198+
}
199+
border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
200+
z-index: 1;
201+
}
202+
}

0 commit comments

Comments
 (0)