@egovernments/digit-ui-components-css 0.0.2-beta.27 → 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 (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.css +78 -62
  3. package/dist/index.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/digitv2/components/accordionV2.scss +84 -93
  6. package/src/digitv2/components/bottomSheetV2.scss +75 -91
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.27",
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
+ }
package/src/digitv2/components/bottomSheetV2.scss CHANGED
@@ -1,121 +1,105 @@
1
1
  .digit-bottom-sheet {
2
- position: fixed;
3
- left: 0;
4
- right: 0;
5
- bottom: 0;
6
- transition: height 0.3s ease;
7
- background-color: theme(digitv2.lightTheme.paper-primary);
8
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem theme(digitv2.spacers.spacer1) -0.063rem #00000026;
9
- overflow: hidden;
10
- border-radius: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
11
- display: flex;
12
- flex-direction: column;
13
-
14
- &.full{
15
- border-radius: theme(digitv2.spacers.spacer0);
16
- }
2
+ position: fixed;
3
+ left: 0;
4
+ right: 0;
5
+ bottom: 0;
6
+ transition: height 0.3s ease;
7
+ background-color: theme(digitv2.lightTheme.paper-primary);
8
+ box-shadow: theme(digitv2.spacers.spacer0) -0.063rem theme(digitv2.spacers.spacer1) -0.063rem #00000026;
9
+ overflow: hidden;
10
+ border-radius: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
11
+ display: flex;
12
+ flex-direction: column;
13
+
14
+ &.full {
15
+ border-radius: theme(digitv2.spacers.spacer0);
16
+ }
17
17
  }
18
18
 
19
19
  .digit-bottom-sheet.closed {
20
- height: theme(digitv2.spacers.spacer10);
21
-
22
- &.actionsEnabled {
23
- height: fit-content;
24
- }
25
- }
26
-
27
-
28
- .digit-bottom-sheet.fixed {
29
- height: 30vh;
20
+ &.actionsEnabled {
21
+ height: fit-content;
22
+ }
30
23
  }
31
24
 
32
- .digit-bottom-sheet.quarter {
33
- height: 50vh;
34
- }
25
+ .digit-bottom-sheet-header {
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ height: theme(digitv2.spacers.spacer10);
35
30
 
36
- .digit-bottom-sheet.intermediate {
37
- height: 75vh;
31
+ &.actionsEnabled {
32
+ height: theme(digitv2.spacers.spacer6);
33
+ }
38
34
  }
39
35
 
40
- .digit-bottom-sheet.full {
41
- height: calc(100vh - 3.5rem);
36
+ .digit-bottom-sheet-drag-cursor {
37
+ position: absolute;
38
+ top: 0;
39
+ left: 50%;
40
+ transform: translateX(-50%);
41
+ width: 100%;
42
+ height: 100%;
43
+ background-color: transparent;
44
+ cursor: ns-resize;
42
45
  }
43
46
 
44
- .digit-bottom-sheet-header {
45
- display: flex;
46
- justify-content: center;
47
- height: theme(digitv2.spacers.spacer10);
48
- cursor: pointer;
49
-
50
- &.fixed,
51
- &.quarter,
52
- &.intermediate,
53
- &.full{
54
- height: 1.875rem;
55
- }
56
-
57
- &.actionsEnabled {
58
- height: theme(digitv2.spacers.spacer6);
59
- }
47
+ .digit-bottom-sheet-handle-indicator {
48
+ width: 6.25rem;
49
+ height: 0.375rem;
50
+ border-radius: theme(digitv2.spacers.spacer1);
51
+ background-color: #D9D9D9;
52
+ margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
60
53
  }
61
54
 
62
55
  .digit-bottom-sheet-content {
63
- padding: theme(digitv2.spacers.spacer4);
64
- overflow-y: scroll;
65
- display: flex;
66
- flex-direction: column;
67
-
68
- @media (max-aspect-ratio: 9/16) {
69
- gap:theme(digitv2.spacers.spacer4);
70
- }
71
-
72
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
73
- gap:theme(digitv2.spacers.spacer5);
74
- }
75
-
76
- @media (min-aspect-ratio: 3/4) {
77
- gap:theme(digitv2.spacers.spacer6);
78
- }
79
- }
56
+ padding: theme(digitv2.spacers.spacer4);
57
+ overflow-y: scroll;
58
+ display: flex;
59
+ flex-direction: column;
80
60
 
61
+ @media (max-aspect-ratio: 9/16) {
62
+ gap: theme(digitv2.spacers.spacer4);
63
+ }
81
64
 
82
- .digit-bottom-sheet-handle-indicator {
83
- width: 6.25rem;
84
- height: 0.375rem;
85
- border-radius: theme(digitv2.spacers.spacer1);
86
- background-color: #D9D9D9;
87
- margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
65
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
66
+ gap: theme(digitv2.spacers.spacer5);
67
+ }
68
+
69
+ @media (min-aspect-ratio: 3/4) {
70
+ gap: theme(digitv2.spacers.spacer6);
71
+ }
88
72
  }
89
73
 
90
74
  .digit-bottom-sheet-actions {
91
- padding: theme(digitv2.spacers.spacer4);
92
- display: flex;
93
- gap: theme(digitv2.spacers.spacer6);
94
- background-color: #FFFFFF;
95
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.188rem 0.063rem #00000026;
96
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #0000004D;
97
- justify-content: flex-end;
98
-
99
- &.equallButtons{
100
- justify-content: flex-start;
101
- button {
102
- flex: 1;
75
+ padding: theme(digitv2.spacers.spacer4);
76
+ display: flex;
77
+ gap: theme(digitv2.spacers.spacer6);
78
+ background-color: #FFFFFF;
79
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.188rem 0.063rem #00000026;
80
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #0000004D;
81
+ justify-content: flex-end;
82
+
83
+ &.equalButtons {
84
+ justify-content: flex-start;
85
+
86
+ button {
87
+ flex: 1;
88
+ }
103
89
  }
104
- }
105
-
106
90
  }
107
91
 
108
92
  .digit-bottom-sheet-content::-webkit-scrollbar {
109
- width: 0.375rem;
110
- background-color: theme(digitv2.lightTheme.generic-background);
93
+ width: 0.375rem;
94
+ background-color: theme(digitv2.lightTheme.generic-background);
111
95
  }
112
96
 
113
97
  .digit-bottom-sheet-content::-webkit-scrollbar-track {
114
- background-color: theme(digitv2.lightTheme.generic-background);
115
- border-radius: 0.563rem;
98
+ background-color: theme(digitv2.lightTheme.generic-background);
99
+ border-radius: 0.563rem;
116
100
  }
117
101
 
118
102
  .digit-bottom-sheet-content::-webkit-scrollbar-thumb {
119
- background-color: theme(digitv2.lightTheme.generic-divider);
120
- border-radius: 0.563rem;
103
+ background-color: theme(digitv2.lightTheme.generic-divider);
104
+ border-radius: 0.563rem;
121
105
  }