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

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 (48) hide show
  1. package/CHANGELOG.md +88 -84
  2. package/README.md +80 -80
  3. package/dist/index.css +612 -26
  4. package/dist/index.min.css +2 -2
  5. package/package.json +69 -69
  6. package/src/digitv2/components/FormComposerV2.scss +118 -118
  7. package/src/digitv2/components/actionbarV2.scss +207 -0
  8. package/src/digitv2/components/backLinkV2.scss +36 -36
  9. package/src/digitv2/components/bodyContainerV2.scss +39 -39
  10. package/src/digitv2/components/breadcrumbV2.scss +56 -56
  11. package/src/digitv2/components/buttonsV2.scss +451 -426
  12. package/src/digitv2/components/cardV2.scss +497 -484
  13. package/src/digitv2/components/cardbasedoptionsV2.scss +46 -46
  14. package/src/digitv2/components/cardlabelV2.scss +7 -7
  15. package/src/digitv2/components/checkboxV2.scss +83 -83
  16. package/src/digitv2/components/chipV2.scss +129 -129
  17. package/src/digitv2/components/dividerV2.scss +10 -10
  18. package/src/digitv2/components/errorMessageV2.scss +20 -20
  19. package/src/digitv2/components/fieldV1.scss +96 -96
  20. package/src/digitv2/components/headerdropdownV2.scss +152 -0
  21. package/src/digitv2/components/infoCardV2.scss +139 -139
  22. package/src/digitv2/components/infobuttonV2.scss +75 -75
  23. package/src/digitv2/components/labelFieldPairV2.scss +66 -66
  24. package/src/digitv2/components/mobileNumberV2.scss +65 -65
  25. package/src/digitv2/components/multiSelectDropdownV2.scss +315 -315
  26. package/src/digitv2/components/panelCardV2.scss +160 -160
  27. package/src/digitv2/components/panelV2.scss +114 -114
  28. package/src/digitv2/components/popUpV2.scss +330 -319
  29. package/src/digitv2/components/radiobtnV2.scss +115 -115
  30. package/src/digitv2/components/selectDropdownV2.scss +364 -364
  31. package/src/digitv2/components/stepperV2.scss +147 -147
  32. package/src/digitv2/components/textInputV2.scss +462 -462
  33. package/src/digitv2/components/textareaV2.scss +99 -99
  34. package/src/digitv2/components/textblockV2.scss +46 -46
  35. package/src/digitv2/components/timelineV2.scss +171 -159
  36. package/src/digitv2/components/toastV2.scss +80 -80
  37. package/src/digitv2/components/toggleV2.scss +72 -72
  38. package/src/digitv2/components/topbarV2.scss +388 -0
  39. package/src/digitv2/components/treeSelectV2.scss +132 -132
  40. package/src/digitv2/components/uploaderV2.scss +556 -556
  41. package/src/digitv2/components/viewCardFieldPairV2.scss +44 -44
  42. package/src/digitv2/index.scss +169 -168
  43. package/src/digitv2/pages/employee/index.scss +1 -1
  44. package/src/digitv2/pages/employee/workbench.scss +615 -615
  45. package/src/digitv2/typography.scss +638 -638
  46. package/src/index.scss +681 -681
  47. package/src/pages/employee/index.scss +625 -625
  48. package/src/pages/employee/login.scss +220 -220
package/src/digitv2/components/treeSelectV2.scss CHANGED
@@ -1,133 +1,133 @@
1
- .digit-tree-select-options-container.first-level:nth-of-type(even) {
2
- .digit-tree-select-option.level-0,
3
- .digit-tree-multiselect-option.level-0:not(.checked){
4
- background-color: theme(digitv2.lightTheme.paper-secondary);
5
- }
6
- }
7
- .digit-tree-select-options-container.first-level:nth-of-type(odd) {
8
- .digit-tree-select-option.level-0,
9
- .digit-tree-multiselect-option.level-0:not(.checked){
10
- background-color: theme(digitv2.lightTheme.paper-primary);
11
- }
12
- }
13
- .container.innerlevel {
14
- border-left: 0.063rem solid #D6D5D4;
15
- }
16
- .digit-tree-select-option,
17
- .digit-tree-multiselect-option {
18
- @apply relative cursor-pointer flex items-center;
19
- height: 2.4375rem;
20
- gap: theme(digitv2.spacers.spacer1);
21
- padding: theme(digitv2.spacers.spacer4) 0.625rem;
22
- &:hover {
23
- background: theme(digitv2.lightTheme.primary-bg);
24
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
25
- }
26
- &.expanded {
27
- .digit-option-label {
28
- @extend .typography.heading-s;
29
- color: theme(digitv2.lightTheme.text-primary);
30
- /*font-size: 1rem;
31
- font-weight: theme(digitv2.fontWeight.bold);
32
- line-height: 1.188rem;*/
33
- }
34
- }
35
- input {
36
- @apply absolute opacity-0 cursor-pointer;
37
- margin: 0;
38
- }
39
- .digit-toggle-dropdown {
40
- width: theme(digitv2.spacers.spacer6);
41
- height: theme(digitv2.spacers.spacer6);
42
- }
43
- .digit-custom-checkbox {
44
- height: theme(digitv2.spacers.spacer5);
45
- width: theme(digitv2.spacers.spacer5);
46
- @apply flex items-center justify-center;
47
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
48
- svg {
49
- @apply opacity-0 z-10;
50
- }
51
- &.checked {
52
- border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
53
- svg {
54
- @apply opacity-100;
55
- width: theme(digitv2.spacers.spacer4);
56
- height: theme(digitv2.spacers.spacer4);
57
- }
58
- }
59
- &.intermediate {
60
- border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
61
- .intermediate-state {
62
- width: theme(digitv2.spacers.spacer3);
63
- height: theme(digitv2.spacers.spacer3);
64
- background-color: theme(digitv2.lightTheme.primary-1);
65
- opacity: 1;
66
- }
67
- }
68
- }
69
- }
70
- .container .digit-tree-multiselect-option.parent.checked.all-child-selected+.child-options-container,
71
- .container .digit-tree-multiselect-option.parent.checked.all-child-selected .child-options-container {
72
- background-color: theme(digitv2.lightTheme.primary-bg);
73
- .digit-tree-multiselect-option.checked {
74
- background: theme(digitv2.lightTheme.primary-bg) !important;
75
- .digit-toggle-dropdown.svg {
76
- fill: #0B0C0C;
77
- }
78
- .digit-custom-checkbox {
79
- border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
80
- }
81
- .digit-option-label {
82
- color: theme(digitv2.lightTheme.text-primary);
83
- }
84
- }
85
- .container {
86
- border: none;
87
- }
88
- }
89
- .digit-tree-select-option {
90
- &.expanded{
91
- &.level-0{
92
- background-color: theme(digitv2.lightTheme.paper-secondary) !important;
93
- }
94
- }
95
- &.child {
96
- .digit-option-label {
97
- padding-left: theme(digitv2.spacers.spacer7);
98
- }
99
- }
100
- }
101
- .digit-tree-multiselect-option {
102
- &.expanded{
103
- &.level-0:not(.checked){
104
- background-color: theme(digitv2.lightTheme.paper-secondary) !important;
105
- }
106
- }
107
- &.checked {
108
- background-color: theme(digitv2.lightTheme.primary-1);
109
- .digit-custom-checkbox {
110
- border: 0.125rem solid theme(digitv2.lightTheme.paper-primary);
111
- }
112
- .digit-option-label {
113
- @extend .typography.heading-s;
114
- color: theme(digitv2.lightTheme.paper-primary);
115
- }
116
- }
117
- &.child {
118
- .digit-custom-checkbox {
119
- margin-left: 2.25rem;
120
- }
121
- }
122
- .digit-option-checkbox {
123
- display: none;
124
- }
125
- }
126
- .digit-option-label {
127
- @extend .typography.body-s;
128
- @apply overflow-hidden w-full;
129
- flex: 1;
130
- color: theme(digitv2.lightTheme.text-primary);}
131
- .digit-toggle-dropdown {
132
- @apply cursor-pointer;
1
+ .digit-tree-select-options-container.first-level:nth-of-type(even) {
2
+ .digit-tree-select-option.level-0,
3
+ .digit-tree-multiselect-option.level-0:not(.checked){
4
+ background-color: theme(digitv2.lightTheme.paper-secondary);
5
+ }
6
+ }
7
+ .digit-tree-select-options-container.first-level:nth-of-type(odd) {
8
+ .digit-tree-select-option.level-0,
9
+ .digit-tree-multiselect-option.level-0:not(.checked){
10
+ background-color: theme(digitv2.lightTheme.paper-primary);
11
+ }
12
+ }
13
+ .container.innerlevel {
14
+ border-left: 0.063rem solid #D6D5D4;
15
+ }
16
+ .digit-tree-select-option,
17
+ .digit-tree-multiselect-option {
18
+ @apply relative cursor-pointer flex items-center;
19
+ height: 2.4375rem;
20
+ gap: theme(digitv2.spacers.spacer1);
21
+ padding: theme(digitv2.spacers.spacer4) 0.625rem;
22
+ &:hover {
23
+ background: theme(digitv2.lightTheme.primary-bg);
24
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
25
+ }
26
+ &.expanded {
27
+ .digit-option-label {
28
+ @extend .typography.heading-s;
29
+ color: theme(digitv2.lightTheme.text-primary);
30
+ /*font-size: 1rem;
31
+ font-weight: theme(digitv2.fontWeight.bold);
32
+ line-height: 1.188rem;*/
33
+ }
34
+ }
35
+ input {
36
+ @apply absolute opacity-0 cursor-pointer;
37
+ margin: 0;
38
+ }
39
+ .digit-toggle-dropdown {
40
+ width: theme(digitv2.spacers.spacer6);
41
+ height: theme(digitv2.spacers.spacer6);
42
+ }
43
+ .digit-custom-checkbox {
44
+ height: theme(digitv2.spacers.spacer5);
45
+ width: theme(digitv2.spacers.spacer5);
46
+ @apply flex items-center justify-center;
47
+ border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
48
+ svg {
49
+ @apply opacity-0 z-10;
50
+ }
51
+ &.checked {
52
+ border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
53
+ svg {
54
+ @apply opacity-100;
55
+ width: theme(digitv2.spacers.spacer4);
56
+ height: theme(digitv2.spacers.spacer4);
57
+ }
58
+ }
59
+ &.intermediate {
60
+ border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
61
+ .intermediate-state {
62
+ width: theme(digitv2.spacers.spacer3);
63
+ height: theme(digitv2.spacers.spacer3);
64
+ background-color: theme(digitv2.lightTheme.primary-1);
65
+ opacity: 1;
66
+ }
67
+ }
68
+ }
69
+ }
70
+ .container .digit-tree-multiselect-option.parent.checked.all-child-selected+.child-options-container,
71
+ .container .digit-tree-multiselect-option.parent.checked.all-child-selected .child-options-container {
72
+ background-color: theme(digitv2.lightTheme.primary-bg);
73
+ .digit-tree-multiselect-option.checked {
74
+ background: theme(digitv2.lightTheme.primary-bg) !important;
75
+ .digit-toggle-dropdown.svg {
76
+ fill: #0B0C0C;
77
+ }
78
+ .digit-custom-checkbox {
79
+ border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
80
+ }
81
+ .digit-option-label {
82
+ color: theme(digitv2.lightTheme.text-primary);
83
+ }
84
+ }
85
+ .container {
86
+ border: none;
87
+ }
88
+ }
89
+ .digit-tree-select-option {
90
+ &.expanded{
91
+ &.level-0{
92
+ background-color: theme(digitv2.lightTheme.paper-secondary) !important;
93
+ }
94
+ }
95
+ &.child {
96
+ .digit-option-label {
97
+ padding-left: theme(digitv2.spacers.spacer7);
98
+ }
99
+ }
100
+ }
101
+ .digit-tree-multiselect-option {
102
+ &.expanded{
103
+ &.level-0:not(.checked){
104
+ background-color: theme(digitv2.lightTheme.paper-secondary) !important;
105
+ }
106
+ }
107
+ &.checked {
108
+ background-color: theme(digitv2.lightTheme.primary-1);
109
+ .digit-custom-checkbox {
110
+ border: 0.125rem solid theme(digitv2.lightTheme.paper-primary);
111
+ }
112
+ .digit-option-label {
113
+ @extend .typography.heading-s;
114
+ color: theme(digitv2.lightTheme.paper-primary);
115
+ }
116
+ }
117
+ &.child {
118
+ .digit-custom-checkbox {
119
+ margin-left: 2.25rem;
120
+ }
121
+ }
122
+ .digit-option-checkbox {
123
+ display: none;
124
+ }
125
+ }
126
+ .digit-option-label {
127
+ @extend .typography.body-s;
128
+ @apply overflow-hidden w-full;
129
+ flex: 1;
130
+ color: theme(digitv2.lightTheme.text-primary);}
131
+ .digit-toggle-dropdown {
132
+ @apply cursor-pointer;
133
133
  }