@digigov/css 2.0.0-rc.6 → 2.0.0-rc.7

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": "@digigov/css",
3
- "version": "2.0.0-rc.6",
3
+ "version": "2.0.0-rc.7",
4
4
  "description": "Digigov CSS - Tailwind CSS Components",
5
5
  "author": "GRNET Devs <devs@lists.grnet.gr>",
6
6
  "license": "BSD-2-Clause",
@@ -55,7 +55,7 @@
55
55
  "rimraf": "3.0.2",
56
56
  "publint": "0.1.8",
57
57
  "stylelint": "15.11.0",
58
- "stylelint-plugin-digigov": "1.1.0-rc.6",
58
+ "stylelint-plugin-digigov": "1.1.0-rc.7",
59
59
  "prettier": "3.2.5"
60
60
  },
61
61
  "dependencies": {
@@ -3,7 +3,8 @@
3
3
  border-bottom-style: solid;
4
4
  }
5
5
  .ds-admin-header__content {
6
- @apply px-4 py-2 mx-auto max-w-full w-full flex justify-between items-center;
6
+ @apply px-4 py-2 mx-auto max-w-full w-full flex justify-between items-center
7
+ flex-wrap sm:flex-nowrap print:px-0 gap-3;
7
8
  }
8
9
 
9
10
  /* overrides */
@@ -13,7 +14,7 @@
13
14
  @apply print:hidden;
14
15
  }
15
16
  .ds-dropdown__button.ds-link {
16
- @apply text-lg text-white focus:text-base-content print:text-base-800;
17
+ @apply text-lg text-white focus:text-base-content print:text-base-800 text-right;
17
18
  }
18
19
  .ds-link {
19
20
  &:hover {
@@ -30,36 +30,39 @@
30
30
  @apply p-2;
31
31
  }
32
32
  }
33
- .ds-dropdown__button {
34
- @apply w-fit print:text-base-content;
35
- &::marker {
36
- font-size: 0;
37
- }
38
- &::-webkit-details-marker {
39
- display: none;
40
- }
33
+ }
34
+ .ds-dropdown__button {
35
+ @apply w-fit print:text-base-content;
36
+ &::marker {
37
+ font-size: 0;
41
38
  }
42
- .ds-dropdown__button.ds-link + .ds-dropdown__content {
43
- @apply mt-4 print:text-base-content;
39
+ &::-webkit-details-marker {
40
+ display: none;
44
41
  }
45
- .ds-btn-group .ds-btn + .ds-dropdown__content {
46
- @apply mt-4;
42
+ }
43
+ .ds-dropdown__button.ds-link + .ds-dropdown__content {
44
+ @apply mt-4 print:text-base-content;
45
+ }
46
+ .ds-btn-group .ds-btn + .ds-dropdown__content {
47
+ @apply mt-4;
48
+ }
49
+ .ds-dropdown__content {
50
+ @apply border border-base-400 p-4 bg-base-100 border-t-0
51
+ max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
52
+ -webkit-box-box-shadow:
53
+ 0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
54
+ 0 -2px 0 var(--color-base-500);
55
+ box-shadow:
56
+ 0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
57
+ 0 -2px 0 var(--color-base-500);
58
+ &.ds-dropdown__content--full-width {
59
+ @apply min-w-full;
47
60
  }
48
- .ds-dropdown__content {
49
- @apply border border-base-400 p-4 bg-base-100 border-t-0
50
- max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
51
- -webkit-box-box-shadow:
52
- 0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
53
- 0 -2px 0 var(--color-base-500);
54
- box-shadow:
55
- 0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
56
- 0 -2px 0 var(--color-base-500);
57
- &.ds-dropdown__content--full-width {
58
- @apply min-w-full;
59
- }
60
- *:last-child {
61
- @apply mb-0;
62
- }
61
+ &.ds-dropdown__content--scrollable {
62
+ @apply overflow-y-auto max-h-96;
63
+ }
64
+ *:last-child {
65
+ @apply mb-0;
63
66
  }
64
67
  }
65
68
 
@@ -108,8 +111,7 @@
108
111
  }
109
112
  }
110
113
  .ds-svg-icon {
111
- @apply w-5 h-6 md:h-8;
112
- @apply print:hidden;
114
+ @apply w-5 h-6 md:h-8 min-w-4 print:hidden;
113
115
  }
114
116
  }
115
117
  .ds-dropdown__content {
@@ -121,6 +123,12 @@
121
123
  }
122
124
  > .ds-nav__list {
123
125
  @apply w-auto -mx-4 flex-col;
126
+ &:nth-child(1) {
127
+ @apply -mt-4;
128
+ }
129
+ &:last-child {
130
+ @apply -mb-4 !important;
131
+ }
124
132
  .ds-nav__list-item {
125
133
  @apply border-b border-base-300 py-2 px-4;
126
134
  &:last-child {
@@ -5,12 +5,15 @@
5
5
  border-width: var(--header-border-width);
6
6
  }
7
7
  .ds-header__content {
8
- @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center
8
+ @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center flex-wrap sm:flex-nowrap
9
9
  print:px-0 gap-3;
10
10
  }
11
11
  .ds-header__section {
12
12
  @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2
13
13
  print:gap-1;
14
+ &:last-child:not(:first-child) {
15
+ @apply flex-1 justify-end sm:flex-none sm:justify-start;
16
+ }
14
17
  }
15
18
  .ds-header__logo {
16
19
  @apply h-12 print:hidden;
@@ -29,10 +32,10 @@
29
32
  text-decoration: none;
30
33
  }
31
34
  .ds-header__title {
32
- color: var(--header__title-color);
33
35
  @apply font-bold text-2xl leading-10 tracking-wide no-underline
34
36
  w-auto align-middle hover:no-underline
35
37
  print:text-base-content;
38
+ color: var(--header__title-color);
36
39
  &:hover {
37
40
  /* @apply text-white; */
38
41
  color: var(--header__title-color-hover);
@@ -54,8 +57,8 @@
54
57
  .ds-header__section {
55
58
  > .ds-link,
56
59
  > .ds-dropdown .ds-dropdown__button.ds-link {
57
- color: var(--color-header-text);
58
60
  @apply focus:text-link-active print:text-base-content;
61
+ color: var(--color-header-text);
59
62
  }
60
63
  }
61
64
  .ds-dropdown {
@@ -65,9 +68,6 @@
65
68
  @apply sm:w-max;
66
69
  }
67
70
  .ds-link {
68
- .ds-svg-icon {
69
- fill: var(--color-header-text);
70
- }
71
71
  &:hover {
72
72
  .ds-svg-icon {
73
73
  fill: var(--color-header-text-hover);
@@ -83,8 +83,8 @@
83
83
  }
84
84
  }
85
85
  .ds-phase-banner__text {
86
- color: var(--color-header-text);
87
86
  @apply print:text-base-content;
87
+ color: var(--color-header-text);
88
88
  }
89
89
  }
90
90
  .ds-header__section {
@@ -258,9 +258,6 @@
258
258
  }
259
259
  }
260
260
  .ds-table__header {
261
- .ds-dropdown__content {
262
- @apply py-0;
263
- }
264
261
  .ds-dropdown__button:not(:focus) {
265
262
  @apply no-underline font-bold text-base-content !important;
266
263
  }
@@ -130,6 +130,7 @@ module.exports = {
130
130
  fit: "fit-content",
131
131
  },
132
132
  minWidth: {
133
+ 4: "1rem",
133
134
  10: "2.5rem",
134
135
  32: "8rem",
135
136
  52: "13rem",