@entit/digit-ui-css 1.5.6 → 2.0.0

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 (105) hide show
  1. package/dist/index.css +2302 -400
  2. package/dist/index.min.css +1 -1
  3. package/package.json +64 -64
  4. package/src/components/CardBasedOptions.scss +110 -44
  5. package/src/components/CitizenHomeCard.scss +57 -46
  6. package/src/components/EllipsisMenu.scss +16 -16
  7. package/src/components/EventCalendarView.scss +9 -9
  8. package/src/components/FAQ.scss +64 -0
  9. package/src/components/OnGroundEventCard.scss +71 -71
  10. package/src/components/PageBasedInput.scss +31 -23
  11. package/src/components/PopupHeadingLabel.scss +14 -14
  12. package/src/components/PropertySearchForm.scss +58 -58
  13. package/src/components/SearchForm.scss +55 -55
  14. package/src/components/SearchOnRadioButton.scss +9 -9
  15. package/src/components/StandaloneSearchBar.scss +9 -9
  16. package/src/components/TimeLine.scss +67 -67
  17. package/src/components/WhatsNewCard.scss +12 -12
  18. package/src/components/actionLink.scss +3 -3
  19. package/src/components/actionbar.scss +97 -58
  20. package/src/components/bannercomponents.scss +137 -131
  21. package/src/components/body.scss +146 -118
  22. package/src/components/buttons.scss +50 -47
  23. package/src/components/card.scss +412 -389
  24. package/src/components/cardHeaderWithOptions.scss +13 -13
  25. package/src/components/changeLanguage.scss +3 -3
  26. package/src/components/charts.scss +318 -185
  27. package/src/components/checkbox.scss +84 -53
  28. package/src/components/checkpoint.scss +65 -63
  29. package/src/components/citizenInfoLabel.scss +14 -14
  30. package/src/components/custombtn.scss +11 -11
  31. package/src/components/datatable.scss +76 -72
  32. package/src/components/datewrap.scss +21 -21
  33. package/src/components/detailscard.scss +6 -6
  34. package/src/components/detailscontainer.scss +13 -13
  35. package/src/components/filters.scss +97 -97
  36. package/src/components/grey.scss +3 -3
  37. package/src/components/hoc/InboxComposer.scss +115 -22
  38. package/src/components/howItWorks.scss +71 -0
  39. package/src/components/imageviewer.scss +33 -33
  40. package/src/components/info-banner.scss +35 -34
  41. package/src/components/inputotp.scss +15 -15
  42. package/src/components/keynote.scss +27 -27
  43. package/src/components/languageSelector.scss +24 -23
  44. package/src/components/loader.scss +96 -96
  45. package/src/components/map.scss +30 -30
  46. package/src/components/metricsTable.scss +26 -26
  47. package/src/components/multiLink.scss +87 -72
  48. package/src/components/multiSelectDropdown.scss +72 -72
  49. package/src/components/navbar.scss +308 -110
  50. package/src/components/plusMinus.scss +15 -0
  51. package/src/components/popup.scss +15 -15
  52. package/src/components/radiobtn.scss +56 -44
  53. package/src/components/ratingstar.scss +33 -33
  54. package/src/components/roundedLabel.scss +10 -10
  55. package/src/components/searchAction.scss +20 -20
  56. package/src/components/sectionalDropdown.scss +43 -43
  57. package/src/components/selectdropdown.scss +199 -173
  58. package/src/components/staticDynamicMessages.scss +107 -0
  59. package/src/components/staticSideBar.scss +27 -0
  60. package/src/components/statushighlight.scss +17 -17
  61. package/src/components/submiterrors.scss +11 -11
  62. package/src/components/summary.scss +28 -25
  63. package/src/components/table.scss +178 -167
  64. package/src/components/tag.scss +27 -27
  65. package/src/components/telephone.scss +17 -17
  66. package/src/components/textfields.scss +108 -90
  67. package/src/components/toast.scss +31 -31
  68. package/src/components/toggleSwitch.scss +41 -0
  69. package/src/components/topbar.scss +148 -134
  70. package/src/components/uploadcomponents.scss +113 -95
  71. package/src/index.scss +768 -544
  72. package/src/pages/citizen/CitizenEngagementNotificationWrapper.scss +8 -5
  73. package/src/pages/citizen/DocumentList.scss +304 -304
  74. package/src/pages/citizen/Events.scss +46 -46
  75. package/src/pages/citizen/HomePageWrapper.scss +163 -99
  76. package/src/pages/citizen/SurveyList.scss +21 -21
  77. package/src/pages/citizen/citizenDocument.scss +21 -21
  78. package/src/pages/citizen/container.scss +19 -19
  79. package/src/pages/citizen/payment/payment-type.scss +2 -2
  80. package/src/pages/citizen/updatePropertyNumber.scss +46 -46
  81. package/src/pages/employee/EmployeeLogin.scss +6 -6
  82. package/src/pages/employee/cardfix.scss +13 -12
  83. package/src/pages/employee/container.scss +73 -73
  84. package/src/pages/employee/dss.scss +249 -116
  85. package/src/pages/employee/form-fields.scss +13 -13
  86. package/src/pages/employee/iframe.scss +65 -65
  87. package/src/pages/employee/inbox.scss +687 -455
  88. package/src/pages/employee/index.scss +625 -337
  89. package/src/pages/employee/login.scss +260 -185
  90. package/src/pages/employee/oldMobileInbox.scss +4 -4
  91. package/src/pages/employee/popupmodule.scss +47 -34
  92. package/src/pages/employee/response.scss +2 -2
  93. package/src/pages/employee/scroll-table.scss +113 -113
  94. package/src/pages/employee/surveys.scss +272 -273
  95. package/src/pages/employee/tooltip.scss +35 -35
  96. package/src/pages/employee/updateNumber.scss +12 -12
  97. package/svg/camera.svg +4 -4
  98. package/svg/check.svg +3 -3
  99. package/svg/close.svg +4 -4
  100. package/svg/error.svg +3 -3
  101. package/svg/error2.svg +5 -5
  102. package/svg/searchicon.svg +3 -3
  103. package/svg/starempty.svg +3 -3
  104. package/svg/starfilled.svg +4 -4
  105. package/svg/success.svg +3 -3
@@ -1,63 +1,65 @@
1
- .checkpoint-connect-wrap {
2
- padding-bottom: 40px;
3
- @apply relative;
4
- }
5
- .checkpoint-done {
6
- @apply flex;
7
-
8
- h2 {
9
- width: 24px;
10
- height: 24px;
11
- border-radius: 50%;
12
- @apply border-b border-solid border-primary-main bg-primary-main;
13
- }
14
-
15
- header {
16
- @apply text-heading-s ml-md;
17
-
18
- p {
19
- margin-top: 4px;
20
- @apply text-heading-s text-text-secondary;
21
- }
22
- }
23
- }
24
-
25
- .checkpoint {
26
- @apply flex;
27
-
28
- h2 {
29
- width: 24px;
30
- height: 24px;
31
- border-radius: 50%;
32
- --text-opacity: 1;
33
- @apply border-b border-solid border-border bg-border;
34
- }
35
-
36
- header {
37
- @apply text-heading-s ml-md;
38
-
39
- p {
40
- margin-top: 4px;
41
- @apply text-heading-s text-text-secondary;
42
- }
43
- }
44
- }
45
-
46
- .checkpoint-connect {
47
- margin-left: 12px;
48
- margin-top: 22px;
49
- @apply absolute top-0 left-0 h-full border-l border-solid border-border;
50
- }
51
-
52
- .checkpoint-comments-wrap {
53
- max-width: 560px;
54
- @apply bg-grey-mid p-sm mt-sm;
55
-
56
- h4{
57
- @apply text-text-primary text-heading-s;
58
- }
59
-
60
- p{
61
- @apply text-text-secondary text-body-s-dt;
62
- }
63
- }
1
+ .checkpoint-connect-wrap {
2
+ padding-bottom: 4px;
3
+ @apply relative;
4
+ }
5
+ .checkpoint-done {
6
+ @apply flex;
7
+
8
+ h2 {
9
+ width: 24px;
10
+ height: 24px;
11
+ border-radius: 50%;
12
+ @apply border-b border-solid border-primary-main bg-primary-main;
13
+ }
14
+
15
+ header {
16
+ @apply text-heading-s ml-md;
17
+
18
+ p {
19
+ margin-top: 4px;
20
+ @apply text-heading-s text-text-secondary;
21
+ }
22
+ }
23
+ }
24
+
25
+ .checkpoint {
26
+ @apply flex;
27
+
28
+ h2 {
29
+ width: 24px;
30
+ height: 24px;
31
+ border-radius: 50%;
32
+ --text-opacity: 1;
33
+ @apply border-b border-solid border-border bg-border;
34
+ }
35
+
36
+ header {
37
+ @apply text-heading-s ml-md;
38
+
39
+ p {
40
+ margin-top: 4px;
41
+ @apply text-heading-s text-text-secondary;
42
+ }
43
+ }
44
+ }
45
+
46
+ .checkpoint-connect {
47
+ margin-left: 12px;
48
+ margin-top: 22px;
49
+ @apply absolute top-0 left-0 h-full border-l border-solid border-border;
50
+ }
51
+
52
+ .checkpoint-comments-wrap {
53
+ max-width: 560px;
54
+ padding: 4px;
55
+ margin-top: 4px;
56
+ @apply bg-grey-mid p-sm mt-sm;
57
+
58
+ h4{
59
+ @apply text-text-primary text-heading-s;
60
+ }
61
+
62
+ p{
63
+ @apply text-text-secondary text-body-s-dt;
64
+ }
65
+ }
@@ -1,14 +1,14 @@
1
- .citizen-info-label {
2
- @apply p-sm border-4 border-solid border-link-normal text-heading-m m-sm;
3
- max-width: 960px;
4
-
5
- p {
6
- @apply text-link-normal font-bold mt-xs text-heading-s;
7
- }
8
- }
9
-
10
- @screen dt {
11
- .citizen-info-label {
12
- margin: 0;
13
- }
14
- }
1
+ .citizen-info-label {
2
+ @apply p-sm border-4 border-solid border-link-normal text-heading-m m-sm;
3
+ max-width: 960px;
4
+
5
+ p {
6
+ @apply text-link-normal font-bold mt-xs text-heading-s;
7
+ }
8
+ }
9
+
10
+ @screen dt {
11
+ .citizen-info-label {
12
+ margin: 0;
13
+ }
14
+ }
@@ -1,11 +1,11 @@
1
- .customBtn {
2
- @apply bg-white text-text-primary box-border inline-block outline-none px-sm border border-solid border-primary-main;
3
- margin: 0px 4.65% 0px 0px;
4
- height: 30px;
5
- line-height: 30px;
6
- }
7
-
8
- .customBtn-selected {
9
- @extend .customBtn;
10
- @apply bg-primary-main text-white font-medium;
11
- }
1
+ .customBtn {
2
+ @apply bg-white text-text-primary box-border inline-block outline-none px-sm border border-solid border-primary-main;
3
+ margin: 0px 4.65% 0px 0px;
4
+ height: 30px;
5
+ line-height: 30px;
6
+ }
7
+
8
+ .customBtn-selected {
9
+ @extend .customBtn;
10
+ @apply bg-primary-main text-white font-medium;
11
+ }
@@ -1,72 +1,76 @@
1
- .data-table {
2
- @apply text-text-primary;
3
-
4
- .row {
5
- @apply flex border-b border-border pb-sm mb-sm;
6
-
7
- span {
8
- width: 70%;
9
- display: contents;
10
- }
11
-
12
- h2 {
13
- width: 40%;
14
- @apply font-bold text-heading-s;
15
- }
16
-
17
- .value {
18
- width: 50%;
19
- @apply text-heading-s;
20
- word-break: break-all;
21
- }
22
- .caption {
23
- width: 70%;
24
- @apply text-heading-s text-text-secondary;
25
- }
26
- }
27
-
28
- .last {
29
- border: none;
30
- padding: 0;
31
- margin: 0;
32
- }
33
- }
34
-
35
- .employee-data-table {
36
- .row {
37
- @apply flex pb-sm mb-sm;
38
-
39
- span {
40
- width: 70%;
41
- display: contents;
42
- }
43
-
44
- h2 {
45
- width: 30%;
46
- @apply font-bold text-heading-s;
47
- }
48
-
49
- .value {
50
- width: 50%;
51
- @apply text-heading-s;
52
- }
53
-
54
- .caption {
55
- width: 70%;
56
- @apply text-heading-s text-text-secondary;
57
- }
58
- }
59
-
60
- .last {
61
- border: none;
62
- padding: 0;
63
- margin: 0;
64
- }
65
- }
66
-
67
-
68
-
69
- .pt-citizen {.data-table {.row {
70
- justify-content: space-between;
71
-
72
- }}}
1
+ .data-table {
2
+ @apply text-text-primary;
3
+
4
+ .row {
5
+ @apply flex border-b border-border pb-sm mb-sm;
6
+
7
+ span {
8
+ width: 70%;
9
+ display: contents;
10
+ }
11
+
12
+ h2 {
13
+ width: 40%;
14
+ @apply font-bold text-heading-s;
15
+ }
16
+
17
+ .value {
18
+ width: 50%;
19
+ @apply text-heading-s;
20
+ word-break: break-all;
21
+ }
22
+ .caption {
23
+ width: 70%;
24
+ @apply text-heading-s text-text-secondary;
25
+ }
26
+ }
27
+
28
+ .last {
29
+ border: none;
30
+ padding: 0;
31
+ margin: 0;
32
+ }
33
+ }
34
+
35
+ .employee-data-table {
36
+ .row {
37
+ @apply flex pb-sm mb-sm;
38
+
39
+ span {
40
+ width: 70%;
41
+ display: contents;
42
+ }
43
+
44
+ h2 {
45
+ width: 30%;
46
+ @apply font-bold text-heading-s;
47
+ }
48
+
49
+ .value {
50
+ width: 50%;
51
+ @apply text-heading-s;
52
+ }
53
+
54
+ .caption {
55
+ width: 70%;
56
+ @apply text-heading-s text-text-secondary;
57
+ }
58
+ }
59
+ .vendor-details-row {
60
+ margin-left: 15px !important;
61
+ }
62
+
63
+ .last {
64
+ border: none;
65
+ padding: 0;
66
+ margin: 0;
67
+ }
68
+ }
69
+
70
+ .pt-citizen {
71
+ .data-table {
72
+ .row {
73
+ justify-content: space-between;
74
+ }
75
+ }
76
+ }
@@ -1,21 +1,21 @@
1
- .date-wrap {
2
- @apply flex mb-md;
3
-
4
- img,
5
- svg {
6
- height: 22px;
7
- width: 20px;
8
- }
9
-
10
- p {
11
- @apply text-text-primary text-body-l pl-sm;
12
- }
13
- }
14
-
15
- @screen dt {
16
- .date-wrap {
17
- p {
18
- @apply text-body-l-dt;
19
- }
20
- }
21
- }
1
+ .date-wrap {
2
+ @apply flex mb-md;
3
+
4
+ img,
5
+ svg {
6
+ height: 22px;
7
+ width: 20px;
8
+ }
9
+
10
+ p {
11
+ @apply text-text-primary text-body-l pl-sm;
12
+ }
13
+ }
14
+
15
+ @screen dt {
16
+ .date-wrap {
17
+ p {
18
+ @apply text-body-l-dt;
19
+ }
20
+ }
21
+ }
@@ -1,6 +1,6 @@
1
- .details-card {
2
- @apply bg-white m-sm px-sm pt-sm pb-lg shadow-card;
3
- .card-label {
4
- @apply font-bold text-legend text-text-primary mb-md;
5
- }
6
- }
1
+ .details-card {
2
+ @apply bg-white m-sm px-sm pt-sm pb-lg shadow-card;
3
+ .card-label {
4
+ @apply font-bold text-legend text-text-primary mb-md;
5
+ }
6
+ }
@@ -1,13 +1,13 @@
1
- .details-container {
2
- @apply flex flex-col m-sm pt-md pb-md pl-sm pr-sm bg-white rounded;
3
- .detail {
4
- @apply grid grid-cols-2 gap-2 items-baseline;
5
- .label {
6
- width: 138px;
7
- @apply font-bold text-heading-s text-text-primary mb-md;
8
- }
9
- .name {
10
- @apply pt-md;
11
- }
12
- }
13
- }
1
+ .details-container {
2
+ @apply flex flex-col m-sm pt-md pb-md pl-sm pr-sm bg-white rounded;
3
+ .detail {
4
+ @apply grid grid-cols-2 gap-2 items-baseline;
5
+ .label {
6
+ width: 138px;
7
+ @apply font-bold text-heading-s text-text-primary mb-md;
8
+ }
9
+ .name {
10
+ @apply pt-md;
11
+ }
12
+ }
13
+ }
@@ -1,98 +1,98 @@
1
- .filters-wrapper {
2
- display: none;
3
- padding: 20px 0px 0px;
4
- z-index: 1;
5
-
6
- .filters-input {
7
- flex-basis: 22%;
8
- }
9
-
10
- .filters-input:not(:first-of-type) {
11
- margin-left: 5%;
12
- }
13
-
14
- .switch-wrapper {
15
- display: flex;
16
- justify-content: space-between;
17
- max-width: 200px;
18
-
19
- .radio-switch {
20
- display: none;
21
-
22
- &:checked ~ label {
23
- border-color: #F47738;
24
- color: #F47738;
25
- }
26
- }
27
-
28
- label {
29
- border: 1px solid;
30
- padding: 6px 10px;
31
- display: block;
32
- @apply border border-solid border-input-border;
33
- &:hover{
34
- @apply border-2 border-solid border-primary-main;
35
- }
36
- }
37
- }
38
- }
39
-
40
- .pickerShadow {
41
- box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
42
- }
43
-
44
- .filter-close {
45
- @apply flex justify-end;
46
- }
47
-
48
- .filter-header {
49
- @apply flex;
50
-
51
- p {
52
- font-weight: bold;
53
- font-size: 24px;
54
- line-height: 1;
55
- margin: 0 12px 20px 8px;
56
- }
57
- }
58
-
59
- .clearText {
60
- display: none;
61
- }
62
-
63
- @screen dt {
64
- .filters-wrapper {
65
- display: flex;
66
- }
67
-
68
- .filter-close,
69
- .filter-header {
70
- display: none;
71
- }
72
-
73
- .clearText {
74
- display: block;
75
- text-align: right;
76
- color: #f47738;
77
- margin-top: 20px;
78
- margin-left: 10px;
79
- }
80
- }
81
-
82
- @media (max-width: 780px) {
83
- .filters-modal {
84
- display: block;
85
- position: fixed;
86
- width: 100%;
87
- height: 100vh;
88
- left: 0;
89
- top: 130px;
90
- padding: 16px;
91
- background-color: #fff;
92
- z-index: 99;
93
- }
94
-
95
- .rdrDefinedRangesWrapper {
96
- display: none;
97
- }
1
+ .filters-wrapper {
2
+ display: none;
3
+ padding: 20px 0px 0px;
4
+ z-index: 1;
5
+
6
+ .filters-input {
7
+ flex-basis: 22%;
8
+ }
9
+
10
+ .filters-input:not(:first-of-type) {
11
+ margin-left: 5%;
12
+ }
13
+
14
+ .switch-wrapper {
15
+ display: flex;
16
+ justify-content: space-between;
17
+ max-width: 200px;
18
+
19
+ .radio-switch {
20
+ display: none;
21
+
22
+ &:checked ~ label {
23
+ border-color: #a82227;
24
+ color: #a82227;
25
+ }
26
+ }
27
+
28
+ label {
29
+ border: 1px solid;
30
+ padding: 6px 10px;
31
+ display: block;
32
+ @apply border border-solid border-input-border;
33
+ &:hover{
34
+ @apply border-2 border-solid border-primary-main;
35
+ }
36
+ }
37
+ }
38
+ }
39
+
40
+ .pickerShadow {
41
+ box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
42
+ }
43
+
44
+ .filter-close {
45
+ @apply flex justify-end;
46
+ }
47
+
48
+ .filter-header {
49
+ @apply flex;
50
+
51
+ p {
52
+ font-weight: bold;
53
+ font-size: 24px;
54
+ line-height: 1;
55
+ margin: 0 12px 20px 8px;
56
+ }
57
+ }
58
+
59
+ .clearText {
60
+ display: none;
61
+ }
62
+
63
+ @screen dt {
64
+ .filters-wrapper {
65
+ display: flex;
66
+ }
67
+
68
+ .filter-close,
69
+ .filter-header {
70
+ display: none;
71
+ }
72
+
73
+ .clearText {
74
+ display: block;
75
+ text-align: right;
76
+ color: #a82227;
77
+ margin-top: 20px;
78
+ margin-left: 10px;
79
+ }
80
+ }
81
+
82
+ @media (max-width: 780px) {
83
+ .filters-modal {
84
+ display: block;
85
+ position: fixed;
86
+ width: 100%;
87
+ height: 100vh;
88
+ left: 0;
89
+ top: 130px;
90
+ padding: 16px;
91
+ background-color: #fff;
92
+ z-index: 99;
93
+ }
94
+
95
+ .rdrDefinedRangesWrapper {
96
+ display: none;
97
+ }
98
98
  }
@@ -1,3 +1,3 @@
1
- .grey {
2
- @apply text-text-secondary;
3
- }
1
+ .grey {
2
+ @apply text-text-secondary;
3
+ }