@egovernments/digit-ui-components-css 0.0.2-beta.20 → 0.0.2-beta.22

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.20",
3
+ "version": "0.0.2-beta.22",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
@@ -0,0 +1,110 @@
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
+ }
17
+ }
18
+
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;
30
+ }
31
+
32
+ .digit-bottom-sheet.quarter {
33
+ height: 50vh;
34
+ }
35
+
36
+ .digit-bottom-sheet.intermediate {
37
+ height: 75vh;
38
+ }
39
+
40
+ .digit-bottom-sheet.full {
41
+ height: calc(100vh - 3.5rem);
42
+ }
43
+
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
+ }
60
+ }
61
+
62
+ .digit-bottom-sheet-content {
63
+ padding: theme(digitv2.spacers.spacer4);
64
+ overflow-y: scroll;
65
+ display: flex;
66
+ flex-direction: column;
67
+ gap: theme(digitv2.spacers.spacer4);
68
+ }
69
+
70
+
71
+ .digit-bottom-sheet-handle-indicator {
72
+ width: 6.25rem;
73
+ height: 0.375rem;
74
+ border-radius: theme(digitv2.spacers.spacer1);
75
+ background-color: #D9D9D9;
76
+ margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
77
+ }
78
+
79
+ .digit-bottom-sheet-actions {
80
+ padding: theme(digitv2.spacers.spacer4);
81
+ display: flex;
82
+ gap: theme(digitv2.spacers.spacer6);
83
+ background-color: #FFFFFF;
84
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.188rem 0.063rem #00000026;
85
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #0000004D;
86
+ justify-content: flex-end;
87
+
88
+ &.equallButtons{
89
+ justify-content: flex-start;
90
+ button {
91
+ flex: 1;
92
+ }
93
+ }
94
+
95
+ }
96
+
97
+ .digit-bottom-sheet-content::-webkit-scrollbar {
98
+ width: 0.375rem;
99
+ background-color: theme(digitv2.lightTheme.generic-background);
100
+ }
101
+
102
+ .digit-bottom-sheet-content::-webkit-scrollbar-track {
103
+ background-color: theme(digitv2.lightTheme.generic-background);
104
+ border-radius: 0.563rem;
105
+ }
106
+
107
+ .digit-bottom-sheet-content::-webkit-scrollbar-thumb {
108
+ background-color: theme(digitv2.lightTheme.generic-divider);
109
+ border-radius: 0.563rem;
110
+ }
@@ -0,0 +1,108 @@
1
+ .digit-switch-container {
2
+ display: flex;
3
+ align-items: center;
4
+ }
5
+
6
+ .digit-switch {
7
+ width: theme(digitv2.spacers.spacer11);
8
+ height: theme(digitv2.spacers.spacer6);
9
+ background-color: #BFBFBF;
10
+ border-radius: theme(digitv2.spacers.spacer4);
11
+ position: relative;
12
+ cursor: pointer;
13
+ transition: background-color 0.2s ease;
14
+ flex-shrink: 0;
15
+ animation-timing-function: ease-out;
16
+ animation-duration: 150ms;
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+
21
+ &:focus-within{
22
+ outline: none;
23
+ }
24
+ }
25
+
26
+ .digit-switch.checked {
27
+ background-color: theme(digitv2.lightTheme.primary-1);
28
+ }
29
+
30
+ .digit-switch-toggle {
31
+ width: 1.125rem;
32
+ height: 1.125rem;
33
+ background-color: theme(digitv2.lightTheme.paper-primary);
34
+ border-radius: 50%;
35
+ position: absolute;
36
+ left: 0.125rem;
37
+ transition: left 0.2s ease;
38
+ box-shadow: theme(digitv2.spacers.spacer0) 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00230B33;
39
+ }
40
+
41
+ .digit-switch.checked .digit-switch-toggle {
42
+ left: theme(digitv2.spacers.spacer6);
43
+ background-color: theme(digitv2.lightTheme.paper-primary);
44
+ }
45
+
46
+ .digit-switch-label {
47
+ @extend .typography.body-s;
48
+ margin-left: theme(digitv2.spacers.spacer2);
49
+ font-family: theme(digitv2.fontFamily.sans);
50
+ font-style: theme(digitv2.fontStyle.normal);
51
+ font-weight: theme(digitv2.fontWeight.regular);
52
+ line-height: theme(digitv2.lineHeight.lineheight2);
53
+
54
+ @media (max-aspect-ratio: 9/16) {
55
+ font-size: theme(digitv2.fontSize.body-s.mobile);
56
+ }
57
+
58
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
59
+ font-size: theme(digitv2.fontSize.body-s.tablet);
60
+ }
61
+
62
+ @media (min-aspect-ratio: 3/4) {
63
+ font-size: theme(digitv2.fontSize.body-s.desktop);
64
+ }
65
+
66
+ @apply text-left;
67
+ word-break: break-word;
68
+ letter-spacing: theme(digitv2.spacers.spacer0);
69
+ color: theme(digitv2.lightTheme.text-secondary);
70
+
71
+ &.labelFirst{
72
+ margin:theme(digitv2.spacers.spacer0);
73
+ margin-right:theme(digitv2.spacers.spacer2);
74
+ }
75
+ }
76
+
77
+
78
+ .digit-switch-shape-on {
79
+ position: absolute;
80
+ top: theme(digitv2.spacers.spacer2);
81
+ width: 0.125rem;
82
+ height: theme(digitv2.spacers.spacer2);
83
+ border-radius: 0.063rem;
84
+ left: 0.625rem;
85
+ background-color: theme(digitv2.lightTheme.primary-bg);
86
+ }
87
+
88
+ .digit-switch-shape-off {
89
+ position: absolute;
90
+ top: theme(digitv2.spacers.spacer2);
91
+ width: theme(digitv2.spacers.spacer2);
92
+ height: theme(digitv2.spacers.spacer2);
93
+ right: theme(digitv2.spacers.spacer2);
94
+ background-color: transparent;
95
+ border-radius: 50%;
96
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-background);
97
+ }
98
+
99
+ .digit-switch-container.switch-disabled {
100
+ .digit-switch {
101
+ cursor: not-allowed;
102
+ pointer-events: none;
103
+ }
104
+
105
+ .digit-switch-label {
106
+ color: theme(digitv2.lightTheme.text-disabled);
107
+ }
108
+ }
@@ -13,6 +13,9 @@
13
13
  pointer-events: none;
14
14
  width: max-content;
15
15
  transition: all 0.5s ease;
16
+ display: flex;
17
+ justify-content: center;
18
+ flex-direction: column;
16
19
 
17
20
  min-width: 4.125rem;
18
21
  max-width: 14.563rem;
@@ -35,62 +38,229 @@
35
38
  }
36
39
  }
37
40
 
38
- .tooltip-content.tooltip-left{
39
- left: -10rem;
41
+ .tooltip-content.tooltip-bottom-start {
42
+ top: theme(digitv2.spacers.spacer12);
43
+ left: 0;
44
+
45
+ &.with-arrow{
46
+ border-top-left-radius: theme(digitv2.spacers.spacer0);
47
+ }
48
+
49
+ }
50
+
51
+ .tooltip-content.tooltip-bottom {
52
+ top: theme(digitv2.spacers.spacer12);
53
+ left: 50%;
54
+ transform: translateX(-50%);
40
55
  }
41
56
 
42
- .tooltip-content.tooltip-right{
43
- left: 10rem;
57
+ .tooltip-content.tooltip-bottom-end {
58
+ top: theme(digitv2.spacers.spacer12);
59
+ right: 0;
60
+
61
+ &.with-arrow{
62
+ border-top-right-radius: 0px;
63
+ }
44
64
  }
45
65
 
46
- .tooltip-content.tooltip-top{
47
- top: -3.75rem;
66
+ .tooltip-content.tooltip-top-start {
67
+ bottom: theme(digitv2.spacers.spacer12);
68
+ left: 0;
69
+
70
+ &.with-arrow{
71
+ border-bottom-left-radius: theme(digitv2.spacers.spacer0);
72
+ }
48
73
  }
49
74
 
50
- .tooltip-content.tooltip-bottom{
51
- top: 3.75rem;
75
+ .tooltip-content.tooltip-top {
76
+ bottom: theme(digitv2.spacers.spacer12);
77
+ left: 50%;
78
+ transform: translateX(-50%);
79
+ }
80
+
81
+
82
+ .tooltip-content.tooltip-top-end {
83
+ bottom: theme(digitv2.spacers.spacer12);
84
+ right: 0;
85
+
86
+ &.with-arrow{
87
+ border-bottom-right-radius: theme(digitv2.spacers.spacer0);
88
+ }
89
+ }
90
+
91
+ .tooltip-content.tooltip-left-start {
92
+ right: calc(100% + theme(digitv2.spacers.spacer2));
93
+ top: 0;
94
+
95
+ &.with-arrow{
96
+ border-top-right-radius: theme(digitv2.spacers.spacer0);
97
+ }
52
98
  }
53
99
 
54
- .tooltip-left:before{
100
+ .tooltip-content.tooltip-left {
101
+ right: calc(100% + theme(digitv2.spacers.spacer2));
102
+ top: 50%;
103
+ transform: translateY(-50%);
104
+ }
105
+
106
+ .tooltip-content.tooltip-left-end {
107
+ right: calc(100% + theme(digitv2.spacers.spacer2));
108
+ bottom: 0;
109
+
110
+ &.with-arrow{
111
+ border-bottom-right-radius: theme(digitv2.spacers.spacer0);
112
+ }
113
+ }
114
+
115
+ .tooltip-content.tooltip-right-start {
116
+ left: calc(100% + theme(digitv2.spacers.spacer2));
117
+ top: 0;
118
+
119
+ &.with-arrow{
120
+ border-top-left-radius: theme(digitv2.spacers.spacer0);
121
+ }
122
+ }
123
+
124
+ .tooltip-content.tooltip-right {
125
+ left: calc(100% + theme(digitv2.spacers.spacer2));
126
+ top: 50%;
127
+ transform: translateY(-50%);
128
+ }
129
+
130
+ .tooltip-content.tooltip-right-end {
131
+ left: calc(100% + theme(digitv2.spacers.spacer2));
132
+ bottom: 0;
133
+
134
+ &.with-arrow{
135
+ border-bottom-left-radius: theme(digitv2.spacers.spacer0);
136
+ }
137
+ }
138
+
139
+
140
+ .tooltip-bottom-start.with-arrow:before{
55
141
  content: "";
56
142
  position: absolute;
57
- top: 0;
58
- right:-0.625rem;
59
- border-left:0.625rem solid transparent;
60
- border-right:0.625rem solid transparent;
61
- border-top:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
62
- border-bottom:0.625rem solid transparent;
143
+ top: -0.5rem;
144
+ left:theme(digitv2.spacers.spacer1);
145
+ transform: translateX(-50%);
146
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
147
+ border-right:theme(digitv2.spacers.spacer2) solid transparent;
63
148
  }
64
149
 
65
- .tooltip-right:before{
150
+ .tooltip-bottom.with-arrow:before{
66
151
  content: "";
67
152
  position: absolute;
68
- top: 0;
69
- left:-0.625rem;
70
- border-left:0.625rem solid transparent;
71
- border-right:0.625rem solid transparent;
72
- border-top:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
73
- border-bottom:0.625rem solid transparent;
153
+ top: -0.5rem;
154
+ left: 50%;
155
+ transform: translateX(-50%);
156
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
157
+ border-left: theme(digitv2.spacers.spacer1) solid transparent;
158
+ border-right: theme(digitv2.spacers.spacer1) solid transparent;
159
+ }
160
+
161
+
162
+ .tooltip-bottom-end.with-arrow:before {
163
+ content: "";
164
+ position: absolute;
165
+ top: -0.5rem;
166
+ left:calc(100% -0.25rem);
167
+ transform: translateX(-50%);
168
+ border-bottom:theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
169
+ border-left: theme(digitv2.spacers.spacer2) solid transparent;
74
170
  }
75
171
 
76
- .tooltip-top:before{
172
+
173
+ .tooltip-top-start.with-arrow:before{
77
174
  content: "";
78
175
  position: absolute;
79
- bottom:-0.625rem;
80
- right:0rem;
81
- border-left:0.625rem solid transparent;
82
- border-right:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
83
- border-top:0.625rem solid transparent;
84
- border-bottom:0.625rem solid transparent;
176
+ bottom: -0.5rem;
177
+ left: theme(digitv2.spacers.spacer1);
178
+ transform: translateX(-50%);
179
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
180
+ border-right: theme(digitv2.spacers.spacer2) solid transparent;
85
181
  }
86
182
 
87
- .tooltip-bottom:before{
183
+ .tooltip-top.with-arrow:before{
184
+ content: "";
185
+ position: absolute;
186
+ bottom: -0.5rem;
187
+ left: 50%;
188
+ transform: translateX(-50%);
189
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
190
+ border-left: theme(digitv2.spacers.spacer1) solid transparent;
191
+ border-right: theme(digitv2.spacers.spacer1) solid transparent;
192
+ }
193
+
194
+ .tooltip-top-end.with-arrow:before {
195
+ content: "";
196
+ position: absolute;
197
+ bottom: -0.5rem;
198
+ left:calc(100% -0.25rem);
199
+ transform: translateX(-50%);
200
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
201
+ border-left: theme(digitv2.spacers.spacer2) solid transparent;
202
+ }
203
+
204
+
205
+ .tooltip-left-start.with-arrow:before{
206
+ content: "";
207
+ position: absolute;
208
+ top: theme(digitv2.spacers.spacer1);
209
+ right: -0.45rem;
210
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
211
+ border-bottom: theme(digitv2.spacers.spacer2) solid transparent;
212
+ transform: translateY(-50%);
213
+ }
214
+
215
+ .tooltip-left.with-arrow:before {
216
+ content: "";
217
+ position: absolute;
218
+ top: 50%;
219
+ right: -0.5rem;
220
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
221
+ border-top: theme(digitv2.spacers.spacer1) solid transparent;
222
+ border-bottom: theme(digitv2.spacers.spacer1) solid transparent;
223
+ transform: translateY(-50%);
224
+ }
225
+
226
+ .tooltip-left-end.with-arrow:before {
227
+ content: "";
228
+ position: absolute;
229
+ top:calc(100% -0.25rem);
230
+ right: -0.45rem;
231
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
232
+ border-top: theme(digitv2.spacers.spacer2) solid transparent;
233
+ transform: translateY(-50%);
234
+ }
235
+
236
+ .tooltip-right-start.with-arrow:before{
237
+ content: "";
238
+ position: absolute;
239
+ top: theme(digitv2.spacers.spacer1);
240
+ left: -0.45rem;
241
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
242
+ border-bottom: theme(digitv2.spacers.spacer2) solid transparent;
243
+ transform: translateY(-50%);
244
+ }
245
+
246
+ .tooltip-right.with-arrow:before{
247
+ content: "";
248
+ position: absolute;
249
+ top: 50%;
250
+ left: -0.5rem;
251
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
252
+ border-top: theme(digitv2.spacers.spacer1) solid transparent;
253
+ border-bottom: theme(digitv2.spacers.spacer1) solid transparent;
254
+ transform: translateY(-50%);
255
+ }
256
+
257
+
258
+ .tooltip-right-end.with-arrow:before {
88
259
  content: "";
89
260
  position: absolute;
90
- top:-0.625rem;
91
- left:0rem;
92
- border-left:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
93
- border-right:0.625rem solid transparent;
94
- border-top:0.625rem solid transparent;
95
- border-bottom:0.625rem solid transparent;
261
+ top:calc(100% -0.25rem);
262
+ left: -0.45rem;
263
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
264
+ border-top: theme(digitv2.spacers.spacer2) solid transparent;
265
+ transform: translateY(-50%);
96
266
  }
@@ -1,5 +1,6 @@
1
1
  @import url("./components/backLinkV2.scss");
2
2
  @import url("./components/bodyContainerV2.scss");
3
+ @import url("./components/bottomSheetV2.scss");
3
4
  @import url("./components/breadcrumbV2.scss");
4
5
  @import url("./components/buttonsV2.scss");
5
6
  @import url("./components/cardlabelV2.scss");
@@ -22,6 +23,7 @@
22
23
  @import url("./components/chipV2.scss");
23
24
  @import url("./components/selectDropdownV2.scss");
24
25
  @import url("./components/stepperV2.scss");
26
+ @import url("./components/switchV2.scss");
25
27
  @import url("./components/selectionCardV2.scss");
26
28
  @import url("./components/textareaV2.scss");
27
29
  @import url("./components/textblockV2.scss");