@digigov/css 0.13.1 → 0.16.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 (41) hide show
  1. package/CHANGELOG.json +59 -0
  2. package/CHANGELOG.md +28 -1
  3. package/colors/color-values.js +52 -51
  4. package/dist/base/index.css +3 -3
  5. package/dist/base.css +3 -3
  6. package/dist/base.js +1 -1
  7. package/dist/components.css +1 -1
  8. package/dist/components.js +1 -1
  9. package/dist/digigov.css +3 -3
  10. package/package.json +2 -2
  11. package/src/components/accordion.css +1 -1
  12. package/src/components/admin-layout.css +3 -4
  13. package/src/components/breadcrumbs.css +1 -1
  14. package/src/components/button.css +4 -5
  15. package/src/components/details.css +1 -1
  16. package/src/components/drawer.css +28 -0
  17. package/src/components/dropdown.css +4 -4
  18. package/src/components/filter.css +1 -4
  19. package/src/components/footer.css +33 -34
  20. package/src/components/form.css +52 -54
  21. package/src/components/full-page-background.css +7 -0
  22. package/src/components/header.css +3 -4
  23. package/src/components/index.css +3 -0
  24. package/src/components/layout.css +17 -26
  25. package/src/components/loader.css +47 -0
  26. package/src/components/misc.css +1 -20
  27. package/src/components/modal.css +1 -1
  28. package/src/components/nav.css +24 -30
  29. package/src/components/notification-banner.css +4 -4
  30. package/src/components/pagination.css +11 -10
  31. package/src/components/phase-banner.css +0 -2
  32. package/src/components/radios.css +0 -1
  33. package/src/components/svg-icons.css +18 -4
  34. package/src/components/table.css +6 -16
  35. package/src/components/tabs.css +10 -11
  36. package/src/components/typography.css +17 -48
  37. package/src/pages/index.js +245 -317
  38. package/src/pages/pagination.js +20 -19
  39. package/src/utilities/index.css +1 -1
  40. package/src/utilities/utilities.css +1 -1
  41. package/tailwind.config.js +3 -35
package/src/components/svg-icons.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .govgr-svg-icon {
2
- @apply h-4 w-4 inline transition-all;
2
+ @apply h-4 w-4 inline transition-transform;
3
3
  fill: var(--color-base-content);
4
4
  }
5
5
  .govgr-btn-primary, .govgr-btn-warning {
@@ -18,7 +18,6 @@
18
18
  @apply h-6 w-6;
19
19
  }
20
20
  }
21
-
22
21
  .govgr-link {
23
22
  .govgr-svg-icon {
24
23
  fill:var(--color-link);
@@ -32,7 +31,23 @@
32
31
  .govgr-svg-icon {
33
32
  fill:var(--color-link-active);
34
33
  }
35
-
34
+ }
35
+ }
36
+ .govgr-header {
37
+ .govgr-link {
38
+ .govgr-svg-icon {
39
+ fill:var(--color-gray-100);
40
+ }
41
+ &:hover {
42
+ .govgr-svg-icon {
43
+ fill:var(--color-gray-100);
44
+ }
45
+ }
46
+ &:focus {
47
+ .govgr-svg-icon {
48
+ fill:var(--color-link-active);
49
+ }
50
+ }
36
51
  }
37
52
  }
38
53
  .govgr-svg-icon--dark {
@@ -62,7 +77,6 @@
62
77
  .govgr-svg-icon--link {
63
78
  fill: var(--color-link) !important;
64
79
  }
65
-
66
80
  .govgr-svg-icon--s {
67
81
  @apply h-3 w-3;
68
82
  }
package/src/components/table.css CHANGED
@@ -13,41 +13,32 @@
13
13
  .govgr-table--with-vertical-lines {
14
14
  .govgr-table__cell {
15
15
  @apply border-l border-r border-solid border-gray-50 !important;
16
- }
17
-
18
-
16
+ }
19
17
  }
20
-
21
18
  .govgr-table--with-vertical-lines.govgr-table--light {
22
19
  th, td {
23
20
  @apply px-4 !important;
24
21
  }
25
22
  }
26
-
27
23
  .govgr-table--dark, .govgr-table--zebra {
28
24
  th, td {
29
25
  @apply px-4 !important;
30
26
  }
31
27
  }
32
-
33
28
  .govgr-table--with-vertical-lines.govgr-table--light .govgr-table__body .govgr-table__header {
34
29
  @apply border-l border-solid border-gray-50 !important;
35
30
  }
36
-
37
31
  .govgr-table--with-vertical-lines.govgr-table--dense.govgr-table--dark {
38
- .govgr-table__head .govgr-table__row .govgr-table__header:first-child{
39
- @apply border-b-0 border-l border-solid border-primary !important;
40
- }
32
+ .govgr-table__head .govgr-table__row .govgr-table__header:first-child {
33
+ @apply border-b-0 border-l border-solid border-primary !important;
34
+ }
41
35
  }
42
-
43
-
44
36
  .govgr-table--with-vertical-lines.govgr-table--dark{
45
- .govgr-table__head .govgr-table__row .govgr-table__header:last-child{
37
+ .govgr-table__head .govgr-table__row .govgr-table__header:last-child {
46
38
  @apply border-b-0 border-r border-solid border-primary !important;
47
39
  }
48
40
  }
49
-
50
- .govgr-table--dark{
41
+ .govgr-table--dark {
51
42
  th {
52
43
  @apply border-none bg-primary text-white;
53
44
  }
@@ -58,7 +49,6 @@
58
49
  @apply border-r border-solid border-gray-50 !important;
59
50
  }
60
51
  }
61
-
62
52
  .govgr-table--zebra {
63
53
  .govgr-table__body {
64
54
  .govgr-table__row:nth-child(even) {
package/src/components/tabs.css CHANGED
@@ -12,16 +12,16 @@
12
12
  @apply float-left relative md:border md:border-base-100 md:bg-base-100 md:rounded-t-sm md:px-4 md:py-2 m-0 md:mr-2 shadow-none
13
13
  cursor-pointer;
14
14
  &.govgr-tabs__list-item-selected {
15
- @apply no-underline md:border-base-150 bg-white z-20 md:border-b-0;
16
- margin-top: -5px;
17
- margin-bottom: -1px;
18
- padding-top: 14px;
19
- padding-right: 19px;
20
- padding-bottom: 16px;
21
- padding-left: 19px;
22
- border: 1px solid #b1b4b6;
23
- border-bottom: 0;
24
- background-color: #fff;
15
+ @apply no-underline md:border-base-150 bg-white z-20 md:border-b-0;
16
+ margin-top: -5px;
17
+ margin-bottom: -1px;
18
+ padding-top: 14px;
19
+ padding-right: 19px;
20
+ padding-bottom: 16px;
21
+ padding-left: 19px;
22
+ border: 1px solid var(--color-gray-200);
23
+ border-bottom: 0;
24
+ background-color: var(--color-white);
25
25
  &:hover {
26
26
  text-decoration-thickness: 2px;
27
27
  }
@@ -48,7 +48,6 @@
48
48
  }
49
49
 
50
50
  }
51
-
52
51
  }
53
52
  .govgr-tabs__panel {
54
53
  @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-150 md:z-10 mb-0;
package/src/components/typography.css CHANGED
@@ -24,7 +24,6 @@
24
24
  }
25
25
  .govgr-\!-font-size-16 {
26
26
  @apply text-sm md:text-base !important;
27
-
28
27
  }
29
28
  .govgr-\!-font-size-19 {
30
29
  @apply text-base md:text-lg !important;
@@ -68,7 +67,6 @@
68
67
  .govgr-body-s {
69
68
  @apply lg:text-base text-sm;
70
69
  }
71
-
72
70
  .govgr-hint-l {
73
71
  @apply mb-4 lg:text-2xl text-lg text-base-300;
74
72
  }
@@ -83,29 +81,27 @@
83
81
  @apply opacity-70 text-white;
84
82
  }
85
83
  }
86
-
87
84
  .govgr-\!-font-weight-regular {
88
85
  @apply font-normal !important;
89
86
  }
90
87
  .govgr-\!-font-weight-bold {
91
88
  @apply font-bold !important;
92
89
  }
93
-
94
90
  .govgr-link {
95
- @apply text-link hover:text-link-hover focus:text-link-active underline items-center cursor-pointer flex gap-2;
96
-
97
- .right-arrow::after {
98
- content: "";
99
- @apply w-06rem h-06rem bg-primary rounded-xl border-white block border-t-2_5 border-r-2_5 ml-3 transform rotate-45;
100
- }
91
+ @apply text-link hover:text-link-hover focus:text-link-active underline items-center cursor-pointer inline-flex gap-1;
101
92
  &:hover {
102
93
  text-decoration-thickness: 2px;
103
94
  }
104
95
  &:focus {
105
- background-color: var(--color-focus);
106
- box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
107
- text-decoration:none;
108
- outline: none;
96
+ background-color: var(--color-focus);
97
+ box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
98
+ text-decoration:none;
99
+ outline: none;
100
+ }
101
+ }
102
+ .govgr-header {
103
+ .govgr-link {
104
+ @apply text-gray-100 focus:text-link-active;
109
105
  }
110
106
  }
111
107
  .govgr-link--no-underline {
@@ -129,13 +125,13 @@
129
125
  width: fit-content;
130
126
  @apply text-base-content underline flex items-center mb-4 cursor-pointer;
131
127
  &:hover {
132
- text-decoration-thickness: 2px;
133
- }
128
+ text-decoration-thickness: 2px;
129
+ }
134
130
  &:focus {
135
- background-color: var(--color-focus);
136
- box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
137
- text-decoration:none;
138
- outline: none;
131
+ background-color: var(--color-focus);
132
+ box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
133
+ text-decoration:none;
134
+ outline: none;
139
135
  }
140
136
  .govgr-caret--left {
141
137
  fill:var(--color-base-content);
@@ -144,33 +140,6 @@
144
140
  }
145
141
  .govgr-background-dark {
146
142
  .govgr-back-link {
147
- @apply text-white;
143
+ @apply text-white;
148
144
  }
149
145
  }
150
-
151
- .colors {
152
- @apply flex flex-wrap text-center;
153
- div {
154
- @apply h-8 w-12 m-1 rounded;
155
- }
156
- .c-primary { @apply bg-primary text-content-dark hover:bg-primary-focus w-24; }
157
- .c-primary-200 { @apply bg-primary-200 text-content-dark ; }
158
- .c-primary-focus { @apply bg-primary-focus text-content-dark; }
159
- .c-secondary-50 { @apply bg-secondary-50 text-content-dark; }
160
- .c-secondary-200 { @apply bg-secondary-200 text-content-dark hover:bg-secondary-focus w-24; }
161
- .c-secondary-400 { @apply bg-secondary-400 text-content-dark; }
162
- .c-secondary-600 { @apply bg-secondary-600 text-content-dark; }
163
- .c-secondary-800 { @apply bg-secondary-800 text-content-dark; }
164
- .c-accent { @apply bg-accent text-accent-content; }
165
- .c-accent-focus { @apply bg-accent-focus text-accent-content; }
166
- .c-neutral { @apply bg-neutral text-neutral-content; }
167
- .c-neutral-focus { @apply bg-neutral-focus text-neutral-content; }
168
- .c-base-100 { @apply bg-base-100 text-base-content; }
169
- .c-base-150 { @apply bg-base-150 text-base-content; }
170
- .c-base-200 { @apply bg-base-200 text-base-content; }
171
- .c-base-300 { @apply bg-base-300 text-base-300-content; }
172
- .c-info { @apply bg-info; }
173
- .c-success { @apply bg-success hover:bg-success-hover; }
174
- .c-warning { @apply bg-warning ; }
175
- .c-error { @apply bg-error hover:bg-error-hover; }
176
- }