@digigov/css 2.0.0-aefd0709 → 2.0.0-b15d5d44
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/dist/components.js +1 -1
- package/dist/digigov.css +1 -1
- package/package.json +6 -6
- package/src/components/button.common.css +1 -1
- package/src/components/form.css +1 -1
- package/src/components/layout.css +1 -1
- package/src/components/notification-banner.css +19 -1
- package/src/components/pagination.css +2 -1
- package/src/components/skeleton.common.css +20 -0
- package/src/components/skeleton.css +7 -10
- package/src/components/skeleton.native.css +53 -0
- package/src/components/warning-text.css +5 -5
- package/src/index.native.css +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digigov/css",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-b15d5d44",
|
|
4
4
|
"description": "Digigov CSS - Tailwind CSS Components",
|
|
5
5
|
"author": "GRNET Devs <devs@lists.grnet.gr>",
|
|
6
6
|
"license": "BSD-2-Clause",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
]
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@digigov/cli": "2.0.0-
|
|
42
|
+
"@digigov/cli": "2.0.0-b15d5d44",
|
|
43
43
|
"autoprefixer": "10.4.16",
|
|
44
44
|
"postcss-cli": "8.3.0",
|
|
45
45
|
"postcss-import": "13.0.0",
|
|
@@ -48,16 +48,16 @@
|
|
|
48
48
|
"tailwindcss": "3.4.13",
|
|
49
49
|
"nodemon": "2.0.7",
|
|
50
50
|
"next": "13.1.1",
|
|
51
|
-
"@digigov/postcss-banner": "1.0.5-
|
|
52
|
-
"@digigov/cli-build-tailwind": "2.0.0-
|
|
51
|
+
"@digigov/postcss-banner": "1.0.5-b15d5d44",
|
|
52
|
+
"@digigov/cli-build-tailwind": "2.0.0-b15d5d44",
|
|
53
53
|
"rimraf": "3.0.2",
|
|
54
54
|
"publint": "0.1.8",
|
|
55
55
|
"stylelint": "15.11.0",
|
|
56
|
-
"stylelint-plugin-digigov": "1.1.0-
|
|
56
|
+
"stylelint-plugin-digigov": "1.1.0-b15d5d44",
|
|
57
57
|
"prettier": "3.4.2"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@digigov/theme-default": "1.0.0-
|
|
60
|
+
"@digigov/theme-default": "1.0.0-b15d5d44",
|
|
61
61
|
"@fontsource/roboto": "4.4.0",
|
|
62
62
|
"cssnano": "4.1.10",
|
|
63
63
|
"publint": "0.1.8",
|
package/src/components/form.css
CHANGED
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
&.ds-notification-banner--error
|
|
27
|
+
&.ds-notification-banner--error,
|
|
28
|
+
&.ds-notification-banner--error-group {
|
|
28
29
|
@apply util-notification-banner--error;
|
|
29
30
|
.ds-notification-banner__link {
|
|
30
31
|
&:link:not(:focus) {
|
|
@@ -32,6 +33,23 @@
|
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
}
|
|
36
|
+
&.ds-notification-banner--error-group {
|
|
37
|
+
@apply border-0 border-l-5;
|
|
38
|
+
.ds-notification-error-group-banner__content {
|
|
39
|
+
@apply flex gap-3 w-full p-3 md:p-4 bg-base-200 print:bg-white;
|
|
40
|
+
.ds-notification-banner__icon--error-group {
|
|
41
|
+
@apply text-base-content-invert font-bold bg-error text-3xl leading-10 text-center
|
|
42
|
+
rounded-3xl md:min-h-10 min-w-10 h-fit
|
|
43
|
+
print:bg-white print:border-2 print:border-base-content print:text-base-content;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
.ds-notification-banner__text-error-group {
|
|
47
|
+
@apply mt-1;
|
|
48
|
+
.ds-list {
|
|
49
|
+
@apply mb-2;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
35
53
|
}
|
|
36
54
|
.ds-notification-banner__header {
|
|
37
55
|
@apply text-white p-0 m-0 text-base md:text-lg
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
.ds-pagination {
|
|
2
|
-
@apply flex flex-wrap items-center justify-items-center justify-between
|
|
2
|
+
@apply flex flex-wrap items-center justify-items-center justify-between
|
|
3
|
+
gap-y-2 md:gap-y-4 gap-x-6 mb-4 md:mb-8;
|
|
3
4
|
&.ds-pagination--sm {
|
|
4
5
|
.ds-pagination__label,
|
|
5
6
|
.ds-pagination__item--current {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@tailwind utilities;
|
|
2
|
+
|
|
3
|
+
@layer utilities {
|
|
4
|
+
.util-skeleton {
|
|
5
|
+
@apply bg-base-300 w-full max-w-full;
|
|
6
|
+
}
|
|
7
|
+
.util-skeleton--circular {
|
|
8
|
+
@apply rounded-full;
|
|
9
|
+
}
|
|
10
|
+
.util-skeleton--rectangular {
|
|
11
|
+
@apply h-4;
|
|
12
|
+
}
|
|
13
|
+
.util-skeleton--button {
|
|
14
|
+
@apply mb-8 min-h-10 md:min-h-12 px-6
|
|
15
|
+
border-b-2 border-gray-400 flex items-center justify-center;
|
|
16
|
+
}
|
|
17
|
+
.util-skeleton__line {
|
|
18
|
+
@apply bg-base-400 w-full max-w-full max-h-full;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
.
|
|
2
|
-
@apply block bg-base-300 h-auto w-full max-w-full rounded-sm;
|
|
1
|
+
@import './skeleton.common.css';
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
.ds-skeleton {
|
|
4
|
+
@apply util-skeleton block h-auto rounded-sm;
|
|
5
5
|
&.ds-skeleton--text {
|
|
6
|
-
/* @apply text-lg; */
|
|
7
6
|
&::before {
|
|
8
7
|
content: '\00a0';
|
|
9
8
|
visibility: hidden;
|
|
@@ -26,16 +25,15 @@
|
|
|
26
25
|
}
|
|
27
26
|
}
|
|
28
27
|
&.ds-skeleton--circular {
|
|
29
|
-
|
|
28
|
+
@apply util-skeleton--circular;
|
|
30
29
|
}
|
|
31
30
|
&.ds-skeleton--rectangular {
|
|
31
|
+
@apply util-skeleton--rectangular;
|
|
32
32
|
}
|
|
33
33
|
&.ds-skeleton--button {
|
|
34
|
-
@apply
|
|
35
|
-
border-b-2 border-gray-400
|
|
36
|
-
flex items-center justify-center;
|
|
34
|
+
@apply util-skeleton--button py-3 w-fit;
|
|
37
35
|
.ds-skeleton__line {
|
|
38
|
-
@apply
|
|
36
|
+
@apply util-skeleton__line visible;
|
|
39
37
|
&::before {
|
|
40
38
|
content: '\00a0';
|
|
41
39
|
}
|
|
@@ -50,7 +48,6 @@
|
|
|
50
48
|
@apply w-fit;
|
|
51
49
|
}
|
|
52
50
|
&.ds-skeleton--animate {
|
|
53
|
-
/* @apply animate-pulse; */
|
|
54
51
|
position: relative;
|
|
55
52
|
overflow: hidden;
|
|
56
53
|
mask-image: radial-gradient(white, black);
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@import './skeleton.common.css';
|
|
2
|
+
|
|
3
|
+
.ds-skeleton {
|
|
4
|
+
@apply util-skeleton min-h-8 flex-1 rounded-md;
|
|
5
|
+
}
|
|
6
|
+
.ds-skeleton--text {
|
|
7
|
+
@apply flex-1 h-4;
|
|
8
|
+
}
|
|
9
|
+
.ds-skeleton--font-xs {
|
|
10
|
+
@apply h-4 mb-3 !important;
|
|
11
|
+
}
|
|
12
|
+
.ds-skeleton--font-sm {
|
|
13
|
+
@apply h-6 mb-4 !important;
|
|
14
|
+
}
|
|
15
|
+
.ds-skeleton--font-md {
|
|
16
|
+
@apply h-10 mb-5 !important;
|
|
17
|
+
}
|
|
18
|
+
.ds-skeleton--font-lg {
|
|
19
|
+
@apply h-14 mb-6 !important;
|
|
20
|
+
}
|
|
21
|
+
.ds-skeleton--font-xl {
|
|
22
|
+
@apply h-16 mb-8 !important;
|
|
23
|
+
}
|
|
24
|
+
.ds-skeleton--circular {
|
|
25
|
+
@apply util-skeleton--circular;
|
|
26
|
+
}
|
|
27
|
+
.ds-skeleton--rectangular {
|
|
28
|
+
@apply util-skeleton--rectangular;
|
|
29
|
+
}
|
|
30
|
+
.ds-skeleton--button {
|
|
31
|
+
@apply util-skeleton--button py-6;
|
|
32
|
+
}
|
|
33
|
+
.ds-skeleton__line {
|
|
34
|
+
@apply util-skeleton__line h-4;
|
|
35
|
+
}
|
|
36
|
+
.ds-skeleton__line--size-default {
|
|
37
|
+
@apply h-4 w-36;
|
|
38
|
+
}
|
|
39
|
+
.ds-skeleton--width-fit-content {
|
|
40
|
+
@apply flex-1;
|
|
41
|
+
}
|
|
42
|
+
.ds-skeleton--animate {
|
|
43
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
44
|
+
}
|
|
45
|
+
@keyframes pulse {
|
|
46
|
+
0%,
|
|
47
|
+
100% {
|
|
48
|
+
@apply opacity-100;
|
|
49
|
+
}
|
|
50
|
+
50% {
|
|
51
|
+
@apply opacity-50;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
.ds-warning-text__content {
|
|
16
16
|
@apply flex items-center;
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
}
|
|
19
|
+
.ds-warning-text__assistive {
|
|
20
|
+
@apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
|
|
21
|
+
clip: rect(0 0 0 0) !important;
|
|
22
|
+
clip-path: inset(50%) !important;
|
|
23
23
|
}
|
package/src/index.native.css
CHANGED