@egovernments/digit-ui-components-css 0.0.2-beta.28 → 0.0.2-beta.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/index.css +46 -25
  3. package/dist/index.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/digitv2/components/accordionV2.scss +84 -93
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.28",
3
+ "version": "0.0.2-beta.29",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/accordionV2.scss CHANGED
@@ -1,4 +1,4 @@
1
- .digit-accordion-header {
1
+ .digit-accordion-title {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  cursor: pointer;
@@ -6,167 +6,158 @@
6
6
  gap: theme(digitv2.spacers.spacer5);
7
7
 
8
8
  @media (max-aspect-ratio: 9/16) {
9
- padding: theme(digitv2.spacers.spacer4);
9
+ padding: theme(digitv2.spacers.spacer4);
10
10
  }
11
11
 
12
12
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
13
- padding: theme(digitv2.spacers.spacer5);
13
+ padding: theme(digitv2.spacers.spacer5);
14
14
  }
15
15
 
16
16
  @media (min-aspect-ratio: 3/4) {
17
- padding: theme(digitv2.spacers.spacer6);
17
+ padding: theme(digitv2.spacers.spacer6);
18
18
  }
19
+ }
19
20
 
20
- }
21
-
22
- .digit-accordion-icon {
21
+ .digit-accordion-icon {
23
22
  width: theme(digitv2.spacers.spacer6);
24
23
  height: theme(digitv2.spacers.spacer6);
25
24
  flex-shrink: 0;
26
- }
27
-
28
- .digit-accordion-number {
25
+ }
26
+
27
+ .digit-accordion-number {
29
28
  @extend .typography.heading-s;
30
29
  color: theme(digitv2.lightTheme.text-primary);
31
30
  min-width: theme(digitv2.spacers.spacer6);
32
31
  height: theme(digitv2.spacers.spacer6);
33
32
  display: flex;
34
33
  align-items: center;
35
- }
36
-
37
- .digit-accordion-title {
34
+ }
35
+
36
+ .digit-accordion-header-title {
38
37
  @extend .typography.heading-s;
39
38
  color: theme(digitv2.lightTheme.text-primary);
40
39
  flex-grow: 1;
41
- }
42
-
43
- .digit-accordion-toggle {
44
- width: theme(digitv2.spacers.spacer8);
45
- height: theme(digitv2.spacers.spacer8);
46
- flex-shrink: 0;
47
- }
48
-
49
- .digit-accordion-content {
40
+ }
41
+
42
+ .digit-accordion-content {
43
+ max-height: 0;
44
+ overflow: hidden;
45
+ transition: max-height 0.3s ease, padding 0.3s ease;
50
46
  background-color: transparent;
51
47
  display: flex;
52
- gap:0.625rem;
48
+ gap: 0.625rem;
53
49
  flex-direction: column;
54
50
  @extend .typography.body-s;
55
51
  font-family: theme(digitv2.fontFamily.sans);
56
52
  font-style: theme(digitv2.fontStyle.normal);
57
53
  font-weight: theme(digitv2.fontWeight.regular);
58
54
  line-height: theme(digitv2.lineHeight.lineheight2);
55
+
59
56
  @media (max-aspect-ratio: 9/16) {
60
- /* Media query for mobile */
61
- font-size: theme(digitv2.fontSize.body-s.mobile);
62
- padding: theme(digitv2.spacers.spacer4);
57
+ font-size: theme(digitv2.fontSize.body-s.mobile);
58
+ padding: 0rem theme(digitv2.spacers.spacer4);
63
59
  }
64
60
 
65
61
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
66
- /* Media query for tablets */
67
- font-size: theme(digitv2.fontSize.body-s.tablet);
68
- padding: theme(digitv2.spacers.spacer5);
62
+ font-size: theme(digitv2.fontSize.body-s.tablet);
63
+ padding: 0rem theme(digitv2.spacers.spacer5);
69
64
  }
70
65
 
71
66
  @media (min-aspect-ratio: 3/4) {
72
- /* Media query for desktop */
73
- font-size: theme(digitv2.fontSize.body-s.desktop);
74
- padding: theme(digitv2.spacers.spacer6);
67
+ font-size: theme(digitv2.fontSize.body-s.desktop);
68
+ padding: 0rem theme(digitv2.spacers.spacer6);
75
69
  }
70
+
76
71
  color: theme(digitv2.lightTheme.text-primary);
77
- }
78
-
72
+ }
73
+
74
+ .digit-accordion-content.open {
75
+ max-height: fit-content;
79
76
 
80
- .digit-accordion-container {
77
+ @media (max-aspect-ratio: 9/16) {
78
+ padding: theme(digitv2.spacers.spacer4);
79
+ }
81
80
 
82
- &.border{
83
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
81
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
82
+ padding: theme(digitv2.spacers.spacer5);
84
83
  }
85
84
 
86
- &.borderRadius{
87
- border-radius: theme(digitv2.spacers.spacer1);
85
+ @media (min-aspect-ratio: 3/4) {
86
+ padding: theme(digitv2.spacers.spacer6);
88
87
  }
88
+ }
89
89
 
90
- &.divider{
91
- .digit-accordion-content{
92
- border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
93
- }
90
+ .digit-accordion {
91
+ &.border {
92
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
94
93
  }
95
94
 
96
- &.no-divider{
97
- .digit-accordion-header{
98
- padding-bottom: theme(digitv2.spacers.spacer0);
99
- }
95
+ &.borderRadius {
96
+ border-radius: theme(digitv2.spacers.spacer1);
100
97
  }
101
98
 
102
- &.cardBg{
103
- background-color: theme(digitv2.lightTheme.paper-secondary);
99
+ &.divider {
100
+ .digit-accordion-content {
101
+ border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
102
+ }
104
103
  }
105
- }
106
104
 
107
- @keyframes rotateOpen {
105
+ &.no-divider {
106
+ .digit-accordion-title {
107
+ padding-bottom: theme(digitv2.spacers.spacer0);
108
+ }
109
+ }
110
+
111
+ &.cardBg {
112
+ background-color: theme(digitv2.lightTheme.paper-secondary);
113
+ }
114
+ }
115
+
116
+ @keyframes rotateOpen {
108
117
  from {
109
- transform: rotate(-180deg);
118
+ transform: rotate(-180deg);
110
119
  }
120
+
111
121
  to {
112
- transform: rotate(-90deg);
122
+ transform: rotate(-90deg);
113
123
  }
114
- }
115
-
116
- @keyframes rotateClose {
124
+ }
125
+
126
+ @keyframes rotateClose {
117
127
  from {
118
- transform: rotate(-90deg);
128
+ transform: rotate(-90deg);
119
129
  }
130
+
120
131
  to {
121
- transform: rotate(-180deg);
132
+ transform: rotate(-180deg);
122
133
  }
123
- }
124
-
125
- .digit-accordion-toggle.animate-open svg {
134
+ }
135
+
136
+ .digit-accordion-toggle.animate-open svg {
126
137
  animation: rotateOpen 0.5s ease forwards;
127
- }
128
-
129
- .digit-accordion-toggle.animate-close svg {
138
+ }
139
+
140
+ .digit-accordion-toggle.animate-close svg {
130
141
  animation: rotateClose 0.5s ease forwards;
131
- }
132
-
133
-
134
- /* .digit-accordion-content {
135
- transform: scaleY(0);
136
- transform-origin: top;
137
- opacity: 0;
138
- height: 0;
139
- overflow: hidden;
140
- transition: transform 0.3s ease, opacity 0.3s ease;
141
- }
142
-
143
- .digit-accordion-content.open {
144
- transform: scaleY(1);
145
- opacity: 1;
146
- height: auto;
147
- overflow: visible;
148
- }*/
149
-
150
- .digit-accordion-wrapper{
142
+ }
143
+
144
+ .digit-accordion-wrapper {
151
145
  display: flex;
152
146
  flex-direction: column;
153
147
 
154
148
  @media (max-aspect-ratio: 9/16) {
155
- /* Media query for mobile */
156
- gap: theme(digitv2.spacers.spacer4);
149
+ gap: theme(digitv2.spacers.spacer4);
157
150
  }
158
151
 
159
152
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
160
- /* Media query for tablets */
161
- gap: theme(digitv2.spacers.spacer5);
153
+ gap: theme(digitv2.spacers.spacer5);
162
154
  }
163
155
 
164
156
  @media (min-aspect-ratio: 3/4) {
165
- /* Media query for desktop */
166
- gap: theme(digitv2.spacers.spacer6);
157
+ gap: theme(digitv2.spacers.spacer6);
167
158
  }
168
- }
159
+ }
169
160
 
170
- .digit-accordion-divider{
161
+ .digit-accordion-divider {
171
162
  width: 100%;
172
- }
163
+ }