@egovernments/digit-ui-components-css 0.0.2-beta.11 → 0.0.2-beta.12

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 (46) hide show
  1. package/CHANGELOG.md +88 -88
  2. package/README.md +80 -80
  3. package/package.json +69 -69
  4. package/src/digitv2/components/FormComposerV2.scss +118 -118
  5. package/src/digitv2/components/actionbarV2.scss +206 -206
  6. package/src/digitv2/components/backLinkV2.scss +36 -36
  7. package/src/digitv2/components/bodyContainerV2.scss +39 -39
  8. package/src/digitv2/components/breadcrumbV2.scss +56 -56
  9. package/src/digitv2/components/buttonsV2.scss +451 -451
  10. package/src/digitv2/components/cardV2.scss +497 -497
  11. package/src/digitv2/components/cardbasedoptionsV2.scss +46 -46
  12. package/src/digitv2/components/cardlabelV2.scss +7 -7
  13. package/src/digitv2/components/checkboxV2.scss +83 -83
  14. package/src/digitv2/components/chipV2.scss +129 -129
  15. package/src/digitv2/components/dividerV2.scss +10 -10
  16. package/src/digitv2/components/errorMessageV2.scss +20 -20
  17. package/src/digitv2/components/fieldV1.scss +96 -96
  18. package/src/digitv2/components/headerdropdownV2.scss +151 -151
  19. package/src/digitv2/components/infoCardV2.scss +139 -139
  20. package/src/digitv2/components/infobuttonV2.scss +75 -75
  21. package/src/digitv2/components/labelFieldPairV2.scss +66 -66
  22. package/src/digitv2/components/mobileNumberV2.scss +65 -65
  23. package/src/digitv2/components/multiSelectDropdownV2.scss +315 -315
  24. package/src/digitv2/components/panelCardV2.scss +160 -160
  25. package/src/digitv2/components/panelV2.scss +114 -114
  26. package/src/digitv2/components/popUpV2.scss +330 -330
  27. package/src/digitv2/components/radiobtnV2.scss +115 -115
  28. package/src/digitv2/components/selectDropdownV2.scss +364 -364
  29. package/src/digitv2/components/stepperV2.scss +147 -147
  30. package/src/digitv2/components/textInputV2.scss +462 -462
  31. package/src/digitv2/components/textareaV2.scss +99 -99
  32. package/src/digitv2/components/textblockV2.scss +46 -46
  33. package/src/digitv2/components/timelineV2.scss +170 -170
  34. package/src/digitv2/components/toastV2.scss +80 -80
  35. package/src/digitv2/components/toggleV2.scss +72 -72
  36. package/src/digitv2/components/topbarV2.scss +387 -387
  37. package/src/digitv2/components/treeSelectV2.scss +132 -132
  38. package/src/digitv2/components/uploaderV2.scss +556 -556
  39. package/src/digitv2/components/viewCardFieldPairV2.scss +44 -44
  40. package/src/digitv2/index.scss +169 -169
  41. package/src/digitv2/pages/employee/index.scss +1 -1
  42. package/src/digitv2/pages/employee/workbench.scss +615 -615
  43. package/src/digitv2/typography.scss +638 -638
  44. package/src/index.scss +681 -681
  45. package/src/pages/employee/index.scss +625 -625
  46. package/src/pages/employee/login.scss +220 -220
package/src/digitv2/components/toastV2.scss CHANGED
@@ -1,81 +1,81 @@
1
- .digit-toast-success {
2
- @apply fixed flex z-20 w-full max-w-full left-0 items-center;
3
- bottom: -(theme(digitv2.spacers.spacer12));
4
- gap: theme(digitv2.spacers.spacer2);
5
- height: theme(digitv2.spacers.spacer12);
6
- padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) !important;
7
- background-color: theme(digitv2.lightTheme.alert-success);
8
- transition: bottom 0.5s ease;
9
-
10
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
11
- @apply w-auto max-w-full;
12
- min-width: 30rem;
13
- left:50%;
14
- transform: translate(-50%);
15
- }
16
-
17
- @media (max-aspect-ratio: 9/16) {
18
- @apply w-full;
19
- }
20
-
21
- @media (min-aspect-ratio: 3/4){
22
- @apply w-auto max-w-full;
23
- min-width: 50rem;
24
- left:50%;
25
- transform: translate(-50%);
26
- }
27
-
28
- &.digit-error {
29
- background-color: theme(digitv2.lightTheme.alert-error);
30
- }
31
-
32
- &.digit-warning {
33
- background-color: #F19100;
34
-
35
- &.digit-warning-buttons {
36
- @apply block;
37
- }
38
- }
39
-
40
- .toast-label {
41
- @extend .typography.caption-s;
42
- @apply text-left overflow-hidden whitespace-no-wrap flex-grow flex items-center h-6;
43
- letter-spacing: theme(digitv2.spacers.spacer0);
44
- color: theme(digitv2.lightTheme.paper-primary);
45
- margin: theme(digitv2.spacers.spacer0);
46
- text-overflow: ellipsis;
47
- }
48
-
49
- &.digit-info {
50
- background-color: theme(digitv2.lightTheme.alert-info);
51
- }
52
-
53
- .digit-warning-button-container {
54
- @apply w-full flex justify-end;
55
-
56
- button {
57
- margin-left: 0.625rem;
58
- }
59
- }
60
-
61
- .digit-toast-sub-container {
62
- @apply flex;
63
- }
64
-
65
- svg {
66
- @apply flex-shrink-0;
67
- }
68
- }
69
-
70
- @keyframes slideInFromBottom {
71
- from {
72
- bottom: -(theme(digitv2.spacers.spacer12));
73
- }
74
- to {
75
- bottom: 4rem;
76
- }
77
- }
78
-
79
- .digit-toast-success.animate {
80
- animation: slideInFromBottom 0.5s ease forwards;
1
+ .digit-toast-success {
2
+ @apply fixed flex z-20 w-full max-w-full left-0 items-center;
3
+ bottom: -(theme(digitv2.spacers.spacer12));
4
+ gap: theme(digitv2.spacers.spacer2);
5
+ height: theme(digitv2.spacers.spacer12);
6
+ padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) !important;
7
+ background-color: theme(digitv2.lightTheme.alert-success);
8
+ transition: bottom 0.5s ease;
9
+
10
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
11
+ @apply w-auto max-w-full;
12
+ min-width: 30rem;
13
+ left:50%;
14
+ transform: translate(-50%);
15
+ }
16
+
17
+ @media (max-aspect-ratio: 9/16) {
18
+ @apply w-full;
19
+ }
20
+
21
+ @media (min-aspect-ratio: 3/4){
22
+ @apply w-auto max-w-full;
23
+ min-width: 50rem;
24
+ left:50%;
25
+ transform: translate(-50%);
26
+ }
27
+
28
+ &.digit-error {
29
+ background-color: theme(digitv2.lightTheme.alert-error);
30
+ }
31
+
32
+ &.digit-warning {
33
+ background-color: #F19100;
34
+
35
+ &.digit-warning-buttons {
36
+ @apply block;
37
+ }
38
+ }
39
+
40
+ .toast-label {
41
+ @extend .typography.caption-s;
42
+ @apply text-left overflow-hidden whitespace-no-wrap flex-grow flex items-center h-6;
43
+ letter-spacing: theme(digitv2.spacers.spacer0);
44
+ color: theme(digitv2.lightTheme.paper-primary);
45
+ margin: theme(digitv2.spacers.spacer0);
46
+ text-overflow: ellipsis;
47
+ }
48
+
49
+ &.digit-info {
50
+ background-color: theme(digitv2.lightTheme.alert-info);
51
+ }
52
+
53
+ .digit-warning-button-container {
54
+ @apply w-full flex justify-end;
55
+
56
+ button {
57
+ margin-left: 0.625rem;
58
+ }
59
+ }
60
+
61
+ .digit-toast-sub-container {
62
+ @apply flex;
63
+ }
64
+
65
+ svg {
66
+ @apply flex-shrink-0;
67
+ }
68
+ }
69
+
70
+ @keyframes slideInFromBottom {
71
+ from {
72
+ bottom: -(theme(digitv2.spacers.spacer12));
73
+ }
74
+ to {
75
+ bottom: 4rem;
76
+ }
77
+ }
78
+
79
+ .digit-toast-success.animate {
80
+ animation: slideInFromBottom 0.5s ease forwards;
81
81
  }
package/src/digitv2/components/toggleV2.scss CHANGED
@@ -1,73 +1,73 @@
1
- @import url("../index.scss");
2
-
3
-
4
- .digit-toggle-toolbar {
5
- @apply flex justify-start w-full;
6
- max-width: 37.5rem;
7
- min-width: 7.5rem;
8
- }
9
-
10
-
11
- .toggle-option-container {
12
- @apply inline-flex items-center;
13
- gap: theme(digitv2.spacers.spacer2);
14
- }
15
-
16
- .digit-toggle-btn-wrap {
17
- @apply flex items-center justify-center cursor-pointer bg-white overflow-hidden text-center;
18
- padding: 0.125rem theme(digitv2.spacers.spacer0);
19
- width: 7rem;
20
- height: theme(digitv2.spacers.spacer8);
21
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
22
- text-overflow: ellipsis;
23
-
24
- .digit-toggle-label {
25
- @extend .typography.body-xs;
26
- @apply w-full overflow-hidden whitespace-no-wrap;
27
- color: theme(digitv2.lightTheme.text-disabled);
28
- text-overflow: ellipsis;
29
- }
30
-
31
- &:hover,
32
- &:active {
33
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
34
- background: theme(digitv2.lightTheme.paper-primary);
35
- width: 7.125rem;
36
- color: theme(digitv2.lightTheme.primary-1);
37
-
38
- .digit-toggle-label {
39
- color: theme(digitv2.lightTheme.primary-1) !important;
40
- }
41
- }
42
-
43
- &:active {
44
- box-shadow: theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) 0.375rem theme(digitv2.spacers.spacer0) #F4773840;
45
- }
46
-
47
- input:checked+.digit-toggle-label {
48
- @extend .typography.heading-s;
49
- background-color: theme(digitv2.lightTheme.primary-1);
50
- color: theme(digitv2.lightTheme.paper-primary) !important;
51
- }
52
-
53
- &.checked {
54
- background-color: theme(digitv2.lightTheme.primary-1);
55
- width: 7.125rem;
56
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
57
-
58
- .digit-toggle-label {
59
- @extend .typography.heading-s;
60
- color: theme(digitv2.lightTheme.paper-primary);
61
- }
62
- }
63
- }
64
-
65
-
66
- .digit-toggle-input {
67
- @apply absolute opacity-0;
68
- }
69
-
70
- .digit-toggle-label {
71
- color: theme(digitv2.lightTheme.text-disabled);
72
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
1
+ @import url("../index.scss");
2
+
3
+
4
+ .digit-toggle-toolbar {
5
+ @apply flex justify-start w-full;
6
+ max-width: 37.5rem;
7
+ min-width: 7.5rem;
8
+ }
9
+
10
+
11
+ .toggle-option-container {
12
+ @apply inline-flex items-center;
13
+ gap: theme(digitv2.spacers.spacer2);
14
+ }
15
+
16
+ .digit-toggle-btn-wrap {
17
+ @apply flex items-center justify-center cursor-pointer bg-white overflow-hidden text-center;
18
+ padding: 0.125rem theme(digitv2.spacers.spacer0);
19
+ width: 7rem;
20
+ height: theme(digitv2.spacers.spacer8);
21
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
22
+ text-overflow: ellipsis;
23
+
24
+ .digit-toggle-label {
25
+ @extend .typography.body-xs;
26
+ @apply w-full overflow-hidden whitespace-no-wrap;
27
+ color: theme(digitv2.lightTheme.text-disabled);
28
+ text-overflow: ellipsis;
29
+ }
30
+
31
+ &:hover,
32
+ &:active {
33
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
34
+ background: theme(digitv2.lightTheme.paper-primary);
35
+ width: 7.125rem;
36
+ color: theme(digitv2.lightTheme.primary-1);
37
+
38
+ .digit-toggle-label {
39
+ color: theme(digitv2.lightTheme.primary-1) !important;
40
+ }
41
+ }
42
+
43
+ &:active {
44
+ box-shadow: theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) 0.375rem theme(digitv2.spacers.spacer0) #F4773840;
45
+ }
46
+
47
+ input:checked+.digit-toggle-label {
48
+ @extend .typography.heading-s;
49
+ background-color: theme(digitv2.lightTheme.primary-1);
50
+ color: theme(digitv2.lightTheme.paper-primary) !important;
51
+ }
52
+
53
+ &.checked {
54
+ background-color: theme(digitv2.lightTheme.primary-1);
55
+ width: 7.125rem;
56
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
57
+
58
+ .digit-toggle-label {
59
+ @extend .typography.heading-s;
60
+ color: theme(digitv2.lightTheme.paper-primary);
61
+ }
62
+ }
63
+ }
64
+
65
+
66
+ .digit-toggle-input {
67
+ @apply absolute opacity-0;
68
+ }
69
+
70
+ .digit-toggle-label {
71
+ color: theme(digitv2.lightTheme.text-disabled);
72
+ padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
73
73
  }