aeico-components 0.1.2 → 0.1.3
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/index.cjs +1182 -1182
- package/dist/index.js +1182 -1182
- package/package.json +63 -63
- package/src/styles/color.css +117 -117
- package/src/styles/components/alert.css +104 -104
- package/src/styles/components/badge.css +67 -67
- package/src/styles/components/breadcrumb-item.css +59 -59
- package/src/styles/components/breadcrumb.css +19 -19
- package/src/styles/components/button-group.css +25 -25
- package/src/styles/components/button.css +213 -213
- package/src/styles/components/card.css +64 -64
- package/src/styles/components/checkbox.css +78 -78
- package/src/styles/components/detail.css +127 -127
- package/src/styles/components/dialog.css +103 -103
- package/src/styles/components/divider.css +18 -18
- package/src/styles/components/dropdown-item.css +91 -91
- package/src/styles/components/dropdown.css +179 -179
- package/src/styles/components/icon-button.css +116 -116
- package/src/styles/components/icon.css +29 -29
- package/src/styles/components/navbar.css +250 -250
- package/src/styles/components/radio-group.css +360 -360
- package/src/styles/components/select-option.css +43 -43
- package/src/styles/components/select.css +222 -222
- package/src/styles/components/slider.css +326 -326
- package/src/styles/components/switch.css +117 -117
- package/src/styles/components/tab-panel.css +8 -8
- package/src/styles/components/tab.css +44 -44
- package/src/styles/components/tabs.css +16 -16
- package/src/styles/components/tag.css +107 -107
- package/src/styles/components/text-input.css +110 -110
- package/src/styles/layout.css +43 -43
- package/src/styles/size.css +7 -7
- package/src/styles/variables.css +368 -368
package/package.json
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "aeico-components",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Built-in UI components for the Aeico Web Components framework",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/index.cjs",
|
|
7
|
-
"module": "./dist/index.js",
|
|
8
|
-
"types": "./dist/types/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/types/index.d.ts",
|
|
12
|
-
"import": "./dist/index.js",
|
|
13
|
-
"require": "./dist/index.cjs"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"files": [
|
|
17
|
-
"dist",
|
|
18
|
-
"!dist/*.tsbuildinfo",
|
|
19
|
-
"src"
|
|
20
|
-
],
|
|
21
|
-
"sideEffects": false,
|
|
22
|
-
"scripts": {
|
|
23
|
-
"build": "vite build && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
|
|
24
|
-
"dev": "vite build --watch",
|
|
25
|
-
"dev:example": "vite --config vite.example.config.ts",
|
|
26
|
-
"type-check": "tsc --noEmit",
|
|
27
|
-
"lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
|
|
28
|
-
"lint:fix": "eslint \"src/**/*.ts\" \"test/**/*.ts\" --fix",
|
|
29
|
-
"format": "prettier --write \"src/**/*.ts\"",
|
|
30
|
-
"format:check": "prettier --check \"src/**/*.ts\"",
|
|
31
|
-
"test": "web-test-runner --config web-test-runner.config.mjs",
|
|
32
|
-
"test:watch": "web-test-runner --config web-test-runner.config.mjs --watch",
|
|
33
|
-
"prepublishOnly": "npm run build"
|
|
34
|
-
},
|
|
35
|
-
"keywords": [
|
|
36
|
-
"web-components",
|
|
37
|
-
"custom-elements",
|
|
38
|
-
"ui",
|
|
39
|
-
"components",
|
|
40
|
-
"aeico"
|
|
41
|
-
],
|
|
42
|
-
"author": "",
|
|
43
|
-
"license": "ISC",
|
|
44
|
-
"dependencies": {
|
|
45
|
-
"aeico": "^0.1.
|
|
46
|
-
"aeico-localize": "^0.1.1"
|
|
47
|
-
},
|
|
48
|
-
"devDependencies": {
|
|
49
|
-
"@eslint/js": "^10.0.1",
|
|
50
|
-
"@esm-bundle/chai": "^4.3.4-fix.0",
|
|
51
|
-
"@types/mocha": "^10.0.10",
|
|
52
|
-
"@web/dev-server-esbuild": "^1.0.5",
|
|
53
|
-
"@web/test-runner": "^0.20.2",
|
|
54
|
-
"@web/test-runner-playwright": "^0.11.1",
|
|
55
|
-
"eslint": "^10.1.0",
|
|
56
|
-
"eslint-config-prettier": "^10.1.8",
|
|
57
|
-
"globals": "^16.0.0",
|
|
58
|
-
"prettier": "^3.8.1",
|
|
59
|
-
"typescript": "^5.7.3",
|
|
60
|
-
"typescript-eslint": "^8.57.1",
|
|
61
|
-
"vite": "^6.2.0"
|
|
62
|
-
}
|
|
63
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "aeico-components",
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "Built-in UI components for the Aeico Web Components framework",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/types/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/types/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"!dist/*.tsbuildinfo",
|
|
19
|
+
"src"
|
|
20
|
+
],
|
|
21
|
+
"sideEffects": false,
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "vite build && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
|
|
24
|
+
"dev": "vite build --watch",
|
|
25
|
+
"dev:example": "vite --config vite.example.config.ts",
|
|
26
|
+
"type-check": "tsc --noEmit",
|
|
27
|
+
"lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
|
|
28
|
+
"lint:fix": "eslint \"src/**/*.ts\" \"test/**/*.ts\" --fix",
|
|
29
|
+
"format": "prettier --write \"src/**/*.ts\"",
|
|
30
|
+
"format:check": "prettier --check \"src/**/*.ts\"",
|
|
31
|
+
"test": "web-test-runner --config web-test-runner.config.mjs",
|
|
32
|
+
"test:watch": "web-test-runner --config web-test-runner.config.mjs --watch",
|
|
33
|
+
"prepublishOnly": "npm run build"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [
|
|
36
|
+
"web-components",
|
|
37
|
+
"custom-elements",
|
|
38
|
+
"ui",
|
|
39
|
+
"components",
|
|
40
|
+
"aeico"
|
|
41
|
+
],
|
|
42
|
+
"author": "",
|
|
43
|
+
"license": "ISC",
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"aeico": "^0.1.3",
|
|
46
|
+
"aeico-localize": "^0.1.1"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@eslint/js": "^10.0.1",
|
|
50
|
+
"@esm-bundle/chai": "^4.3.4-fix.0",
|
|
51
|
+
"@types/mocha": "^10.0.10",
|
|
52
|
+
"@web/dev-server-esbuild": "^1.0.5",
|
|
53
|
+
"@web/test-runner": "^0.20.2",
|
|
54
|
+
"@web/test-runner-playwright": "^0.11.1",
|
|
55
|
+
"eslint": "^10.1.0",
|
|
56
|
+
"eslint-config-prettier": "^10.1.8",
|
|
57
|
+
"globals": "^16.0.0",
|
|
58
|
+
"prettier": "^3.8.1",
|
|
59
|
+
"typescript": "^5.7.3",
|
|
60
|
+
"typescript-eslint": "^8.57.1",
|
|
61
|
+
"vite": "^6.2.0"
|
|
62
|
+
}
|
|
63
|
+
}
|
package/src/styles/color.css
CHANGED
|
@@ -1,117 +1,117 @@
|
|
|
1
|
-
:host {
|
|
2
|
-
--color-solid: var(--color-gray);
|
|
3
|
-
--color-solid-hover: color-mix(in srgb, var(--color-solid), var(--color-mix-hover));
|
|
4
|
-
--color-solid-active: color-mix(in srgb, var(--color-solid), var(--color-mix-active));
|
|
5
|
-
--color-on-solid: var(--color-text-main);
|
|
6
|
-
--color-border: var(--color-gray);
|
|
7
|
-
--color-border-hover: color-mix(in srgb, var(--color-border), var(--color-mix-hover));
|
|
8
|
-
--color-accent: var(--color-text-muted);
|
|
9
|
-
--color-accent-hover: var(--color-text-main);
|
|
10
|
-
--color-subtle: var(--border-subtle);
|
|
11
|
-
--color-subtle-hover: var(--border-default);
|
|
12
|
-
--color-bg-subtle: var(--border-subtle);
|
|
13
|
-
--color-text-subtle: var(--color-text-muted);
|
|
14
|
-
--color-border-subtle: var(--border-default);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([color="primary"]) {
|
|
18
|
-
--color-solid: var(--color-primary);
|
|
19
|
-
--color-on-solid: white;
|
|
20
|
-
--color-border: var(--color-primary);
|
|
21
|
-
--color-accent: var(--color-text-link);
|
|
22
|
-
--color-accent-hover: var(--color-text-link-hover);
|
|
23
|
-
--color-subtle: var(--color-primary-bg-subtle);
|
|
24
|
-
--color-subtle-hover: rgb(from var(--blue) r g b / 0.15);
|
|
25
|
-
--color-bg-subtle: var(--color-primary-bg-subtle);
|
|
26
|
-
--color-text-subtle: var(--color-primary-text-emphasis);
|
|
27
|
-
--color-border-subtle: var(--color-primary-border-subtle);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
:host([color="secondary"]) {
|
|
31
|
-
--color-solid: var(--color-secondary);
|
|
32
|
-
--color-on-solid: white;
|
|
33
|
-
--color-border: var(--color-secondary-hover);
|
|
34
|
-
--color-accent: var(--color-secondary-text-emphasis);
|
|
35
|
-
--color-accent-hover: var(--color-text-main);
|
|
36
|
-
--color-subtle: rgb(from var(--slate) r g b / 0.06);
|
|
37
|
-
--color-subtle-hover: rgb(from var(--slate) r g b / 0.12);
|
|
38
|
-
--color-bg-subtle: var(--color-secondary-bg-subtle);
|
|
39
|
-
--color-text-subtle: var(--color-secondary-text-emphasis);
|
|
40
|
-
--color-border-subtle: var(--color-secondary-border-subtle);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
:host([color="success"]) {
|
|
44
|
-
--color-solid: var(--color-success);
|
|
45
|
-
--color-on-solid: white;
|
|
46
|
-
--color-border: var(--color-success);
|
|
47
|
-
--color-accent: var(--color-success-text-emphasis);
|
|
48
|
-
--color-accent-hover: var(--color-success-hover);
|
|
49
|
-
--color-subtle: var(--color-success-bg-subtle);
|
|
50
|
-
--color-subtle-hover: rgb(from var(--green) r g b / 0.15);
|
|
51
|
-
--color-bg-subtle: var(--color-success-bg-subtle);
|
|
52
|
-
--color-text-subtle: var(--color-success-text-emphasis);
|
|
53
|
-
--color-border-subtle: var(--color-success-border-subtle);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
:host([color="danger"]) {
|
|
57
|
-
--color-solid: var(--color-danger);
|
|
58
|
-
--color-on-solid: white;
|
|
59
|
-
--color-border: var(--color-danger);
|
|
60
|
-
--color-accent: var(--color-danger-text-emphasis);
|
|
61
|
-
--color-accent-hover: var(--color-danger-hover);
|
|
62
|
-
--color-subtle: var(--color-danger-bg-subtle);
|
|
63
|
-
--color-subtle-hover: rgb(from var(--red) r g b / 0.15);
|
|
64
|
-
--color-bg-subtle: var(--color-danger-bg-subtle);
|
|
65
|
-
--color-text-subtle: var(--color-danger-text-emphasis);
|
|
66
|
-
--color-border-subtle: var(--color-danger-border-subtle);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:host([color="warning"]) {
|
|
70
|
-
--color-solid: var(--color-warning);
|
|
71
|
-
--color-on-solid: var(--gray-900);
|
|
72
|
-
--color-border: var(--color-warning);
|
|
73
|
-
--color-accent: var(--color-warning-text-emphasis);
|
|
74
|
-
--color-accent-hover: var(--color-warning-hover);
|
|
75
|
-
--color-subtle: var(--color-warning-bg-subtle);
|
|
76
|
-
--color-subtle-hover: rgb(from var(--yellow) r g b / 0.15);
|
|
77
|
-
--color-bg-subtle: var(--color-warning-bg-subtle);
|
|
78
|
-
--color-text-subtle: var(--color-warning-text-emphasis);
|
|
79
|
-
--color-border-subtle: var(--color-warning-border-subtle);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
:host([color="info"]) {
|
|
83
|
-
--color-solid: var(--color-info);
|
|
84
|
-
--color-on-solid: white;
|
|
85
|
-
--color-border: var(--color-info);
|
|
86
|
-
--color-accent: var(--color-info-text-emphasis);
|
|
87
|
-
--color-accent-hover: var(--color-info-hover);
|
|
88
|
-
--color-subtle: var(--color-info-bg-subtle);
|
|
89
|
-
--color-subtle-hover: rgb(from var(--cyan) r g b / 0.15);
|
|
90
|
-
--color-bg-subtle: var(--color-info-bg-subtle);
|
|
91
|
-
--color-text-subtle: var(--color-info-text-emphasis);
|
|
92
|
-
--color-border-subtle: var(--color-info-border-subtle);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
:host([color="light"]) {
|
|
96
|
-
--color-solid: var(--light);
|
|
97
|
-
--color-on-solid: var(--gray-900);
|
|
98
|
-
--color-border: var(--border-hover);
|
|
99
|
-
--color-subtle: var(--color-light-bg-subtle);
|
|
100
|
-
--color-subtle-hover: var(--color-light-border-subtle);
|
|
101
|
-
--color-bg-subtle: var(--color-light-bg-subtle);
|
|
102
|
-
--color-text-subtle: var(--color-text-muted);
|
|
103
|
-
--color-border-subtle: var(--color-light-border-subtle);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
:host([color="dark"]) {
|
|
107
|
-
--color-solid: var(--dark-500);
|
|
108
|
-
--color-on-solid: white;
|
|
109
|
-
--color-border: var(--dark-500);
|
|
110
|
-
--color-accent: var(--color-text-main);
|
|
111
|
-
--color-accent-hover: var(--color-text-main);
|
|
112
|
-
--color-subtle: var(--color-dark-bg-subtle);
|
|
113
|
-
--color-subtle-hover: var(--color-dark-border-subtle);
|
|
114
|
-
--color-bg-subtle: var(--color-dark-bg-subtle);
|
|
115
|
-
--color-text-subtle: var(--color-text-main);
|
|
116
|
-
--color-border-subtle: var(--color-dark-border-subtle);
|
|
117
|
-
}
|
|
1
|
+
:host {
|
|
2
|
+
--color-solid: var(--color-gray);
|
|
3
|
+
--color-solid-hover: color-mix(in srgb, var(--color-solid), var(--color-mix-hover));
|
|
4
|
+
--color-solid-active: color-mix(in srgb, var(--color-solid), var(--color-mix-active));
|
|
5
|
+
--color-on-solid: var(--color-text-main);
|
|
6
|
+
--color-border: var(--color-gray);
|
|
7
|
+
--color-border-hover: color-mix(in srgb, var(--color-border), var(--color-mix-hover));
|
|
8
|
+
--color-accent: var(--color-text-muted);
|
|
9
|
+
--color-accent-hover: var(--color-text-main);
|
|
10
|
+
--color-subtle: var(--border-subtle);
|
|
11
|
+
--color-subtle-hover: var(--border-default);
|
|
12
|
+
--color-bg-subtle: var(--border-subtle);
|
|
13
|
+
--color-text-subtle: var(--color-text-muted);
|
|
14
|
+
--color-border-subtle: var(--border-default);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host([color="primary"]) {
|
|
18
|
+
--color-solid: var(--color-primary);
|
|
19
|
+
--color-on-solid: white;
|
|
20
|
+
--color-border: var(--color-primary);
|
|
21
|
+
--color-accent: var(--color-text-link);
|
|
22
|
+
--color-accent-hover: var(--color-text-link-hover);
|
|
23
|
+
--color-subtle: var(--color-primary-bg-subtle);
|
|
24
|
+
--color-subtle-hover: rgb(from var(--blue) r g b / 0.15);
|
|
25
|
+
--color-bg-subtle: var(--color-primary-bg-subtle);
|
|
26
|
+
--color-text-subtle: var(--color-primary-text-emphasis);
|
|
27
|
+
--color-border-subtle: var(--color-primary-border-subtle);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:host([color="secondary"]) {
|
|
31
|
+
--color-solid: var(--color-secondary);
|
|
32
|
+
--color-on-solid: white;
|
|
33
|
+
--color-border: var(--color-secondary-hover);
|
|
34
|
+
--color-accent: var(--color-secondary-text-emphasis);
|
|
35
|
+
--color-accent-hover: var(--color-text-main);
|
|
36
|
+
--color-subtle: rgb(from var(--slate) r g b / 0.06);
|
|
37
|
+
--color-subtle-hover: rgb(from var(--slate) r g b / 0.12);
|
|
38
|
+
--color-bg-subtle: var(--color-secondary-bg-subtle);
|
|
39
|
+
--color-text-subtle: var(--color-secondary-text-emphasis);
|
|
40
|
+
--color-border-subtle: var(--color-secondary-border-subtle);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:host([color="success"]) {
|
|
44
|
+
--color-solid: var(--color-success);
|
|
45
|
+
--color-on-solid: white;
|
|
46
|
+
--color-border: var(--color-success);
|
|
47
|
+
--color-accent: var(--color-success-text-emphasis);
|
|
48
|
+
--color-accent-hover: var(--color-success-hover);
|
|
49
|
+
--color-subtle: var(--color-success-bg-subtle);
|
|
50
|
+
--color-subtle-hover: rgb(from var(--green) r g b / 0.15);
|
|
51
|
+
--color-bg-subtle: var(--color-success-bg-subtle);
|
|
52
|
+
--color-text-subtle: var(--color-success-text-emphasis);
|
|
53
|
+
--color-border-subtle: var(--color-success-border-subtle);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
:host([color="danger"]) {
|
|
57
|
+
--color-solid: var(--color-danger);
|
|
58
|
+
--color-on-solid: white;
|
|
59
|
+
--color-border: var(--color-danger);
|
|
60
|
+
--color-accent: var(--color-danger-text-emphasis);
|
|
61
|
+
--color-accent-hover: var(--color-danger-hover);
|
|
62
|
+
--color-subtle: var(--color-danger-bg-subtle);
|
|
63
|
+
--color-subtle-hover: rgb(from var(--red) r g b / 0.15);
|
|
64
|
+
--color-bg-subtle: var(--color-danger-bg-subtle);
|
|
65
|
+
--color-text-subtle: var(--color-danger-text-emphasis);
|
|
66
|
+
--color-border-subtle: var(--color-danger-border-subtle);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:host([color="warning"]) {
|
|
70
|
+
--color-solid: var(--color-warning);
|
|
71
|
+
--color-on-solid: var(--gray-900);
|
|
72
|
+
--color-border: var(--color-warning);
|
|
73
|
+
--color-accent: var(--color-warning-text-emphasis);
|
|
74
|
+
--color-accent-hover: var(--color-warning-hover);
|
|
75
|
+
--color-subtle: var(--color-warning-bg-subtle);
|
|
76
|
+
--color-subtle-hover: rgb(from var(--yellow) r g b / 0.15);
|
|
77
|
+
--color-bg-subtle: var(--color-warning-bg-subtle);
|
|
78
|
+
--color-text-subtle: var(--color-warning-text-emphasis);
|
|
79
|
+
--color-border-subtle: var(--color-warning-border-subtle);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:host([color="info"]) {
|
|
83
|
+
--color-solid: var(--color-info);
|
|
84
|
+
--color-on-solid: white;
|
|
85
|
+
--color-border: var(--color-info);
|
|
86
|
+
--color-accent: var(--color-info-text-emphasis);
|
|
87
|
+
--color-accent-hover: var(--color-info-hover);
|
|
88
|
+
--color-subtle: var(--color-info-bg-subtle);
|
|
89
|
+
--color-subtle-hover: rgb(from var(--cyan) r g b / 0.15);
|
|
90
|
+
--color-bg-subtle: var(--color-info-bg-subtle);
|
|
91
|
+
--color-text-subtle: var(--color-info-text-emphasis);
|
|
92
|
+
--color-border-subtle: var(--color-info-border-subtle);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([color="light"]) {
|
|
96
|
+
--color-solid: var(--light);
|
|
97
|
+
--color-on-solid: var(--gray-900);
|
|
98
|
+
--color-border: var(--border-hover);
|
|
99
|
+
--color-subtle: var(--color-light-bg-subtle);
|
|
100
|
+
--color-subtle-hover: var(--color-light-border-subtle);
|
|
101
|
+
--color-bg-subtle: var(--color-light-bg-subtle);
|
|
102
|
+
--color-text-subtle: var(--color-text-muted);
|
|
103
|
+
--color-border-subtle: var(--color-light-border-subtle);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
:host([color="dark"]) {
|
|
107
|
+
--color-solid: var(--dark-500);
|
|
108
|
+
--color-on-solid: white;
|
|
109
|
+
--color-border: var(--dark-500);
|
|
110
|
+
--color-accent: var(--color-text-main);
|
|
111
|
+
--color-accent-hover: var(--color-text-main);
|
|
112
|
+
--color-subtle: var(--color-dark-bg-subtle);
|
|
113
|
+
--color-subtle-hover: var(--color-dark-border-subtle);
|
|
114
|
+
--color-bg-subtle: var(--color-dark-bg-subtle);
|
|
115
|
+
--color-text-subtle: var(--color-text-main);
|
|
116
|
+
--color-border-subtle: var(--color-dark-border-subtle);
|
|
117
|
+
}
|
|
@@ -1,104 +1,104 @@
|
|
|
1
|
-
.alert {
|
|
2
|
-
position: relative;
|
|
3
|
-
padding: 12px 16px;
|
|
4
|
-
margin-bottom: 12px;
|
|
5
|
-
border-radius: 4px;
|
|
6
|
-
font-size: 12px;
|
|
7
|
-
line-height: 1.6;
|
|
8
|
-
background-color: var(--alert-solid-bg);
|
|
9
|
-
color: var(--alert-solid-color);
|
|
10
|
-
border: 1px solid var(--alert-solid-bg);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.alert:last-child {
|
|
14
|
-
margin-bottom: 0;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host {
|
|
18
|
-
--color-solid: var(--color-primary);
|
|
19
|
-
--color-on-solid: var(--color-text-main);
|
|
20
|
-
--color-border: var(--color-primary);
|
|
21
|
-
--color-bg-subtle: var(--color-primary-bg-subtle);
|
|
22
|
-
--color-text-subtle: var(--color-primary-text-emphasis);
|
|
23
|
-
--color-border-subtle: var(--color-primary-border-subtle);
|
|
24
|
-
|
|
25
|
-
--alert-solid-bg: var(--color-solid);
|
|
26
|
-
--alert-solid-color: var(--color-on-solid);
|
|
27
|
-
--alert-border: var(--color-border);
|
|
28
|
-
--alert-subtle-bg: var(--color-bg-subtle);
|
|
29
|
-
--alert-subtle-color: var(--color-text-subtle);
|
|
30
|
-
--alert-subtle-border:var(--color-border-subtle);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
:host([variant="faint"]) .alert {
|
|
35
|
-
background-color: var(--alert-subtle-bg);
|
|
36
|
-
color: var(--alert-subtle-color);
|
|
37
|
-
border-color: var(--alert-subtle-border);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:host([variant="subtle"]) .alert {
|
|
41
|
-
background-color: var(--alert-subtle-bg);
|
|
42
|
-
color: var(--alert-subtle-color);
|
|
43
|
-
border-color: transparent;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
:host([variant="filled"]) .alert {
|
|
47
|
-
background-color: var(--alert-solid-bg);
|
|
48
|
-
color: var(--alert-solid-color);
|
|
49
|
-
border-color: var(--alert-solid-bg);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
:host([variant="outlined"]) .alert {
|
|
53
|
-
background-color: transparent;
|
|
54
|
-
color: var(--alert-subtle-color);
|
|
55
|
-
border-color: var(--alert-border);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
:host([dismissible]) .alert {
|
|
59
|
-
padding-right: 40px;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
:host([icon]) .alert {
|
|
63
|
-
display: flex;
|
|
64
|
-
align-items: flex-start;
|
|
65
|
-
gap: 10px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
:host([icon]) .alert::before {
|
|
69
|
-
content: '';
|
|
70
|
-
flex-shrink: 0;
|
|
71
|
-
width: 16px;
|
|
72
|
-
height: 16px;
|
|
73
|
-
margin-top: 2px;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.alert-close {
|
|
77
|
-
position: absolute;
|
|
78
|
-
top: 50%;
|
|
79
|
-
right: 12px;
|
|
80
|
-
transform: translateY(-50%);
|
|
81
|
-
background: transparent;
|
|
82
|
-
border: none;
|
|
83
|
-
color: inherit;
|
|
84
|
-
opacity: 0.6;
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
padding: 4px;
|
|
87
|
-
font-size: 18px;
|
|
88
|
-
line-height: 1;
|
|
89
|
-
transition: opacity 0.15s;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.alert-close:hover {
|
|
93
|
-
opacity: 1;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
:host([size="sm"]) .alert {
|
|
97
|
-
padding: 8px 12px;
|
|
98
|
-
font-size: 11px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
:host([size="lg"]) .alert {
|
|
102
|
-
padding: 16px 20px;
|
|
103
|
-
font-size: 13px;
|
|
104
|
-
}
|
|
1
|
+
.alert {
|
|
2
|
+
position: relative;
|
|
3
|
+
padding: 12px 16px;
|
|
4
|
+
margin-bottom: 12px;
|
|
5
|
+
border-radius: 4px;
|
|
6
|
+
font-size: 12px;
|
|
7
|
+
line-height: 1.6;
|
|
8
|
+
background-color: var(--alert-solid-bg);
|
|
9
|
+
color: var(--alert-solid-color);
|
|
10
|
+
border: 1px solid var(--alert-solid-bg);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.alert:last-child {
|
|
14
|
+
margin-bottom: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host {
|
|
18
|
+
--color-solid: var(--color-primary);
|
|
19
|
+
--color-on-solid: var(--color-text-main);
|
|
20
|
+
--color-border: var(--color-primary);
|
|
21
|
+
--color-bg-subtle: var(--color-primary-bg-subtle);
|
|
22
|
+
--color-text-subtle: var(--color-primary-text-emphasis);
|
|
23
|
+
--color-border-subtle: var(--color-primary-border-subtle);
|
|
24
|
+
|
|
25
|
+
--alert-solid-bg: var(--color-solid);
|
|
26
|
+
--alert-solid-color: var(--color-on-solid);
|
|
27
|
+
--alert-border: var(--color-border);
|
|
28
|
+
--alert-subtle-bg: var(--color-bg-subtle);
|
|
29
|
+
--alert-subtle-color: var(--color-text-subtle);
|
|
30
|
+
--alert-subtle-border:var(--color-border-subtle);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
:host([variant="faint"]) .alert {
|
|
35
|
+
background-color: var(--alert-subtle-bg);
|
|
36
|
+
color: var(--alert-subtle-color);
|
|
37
|
+
border-color: var(--alert-subtle-border);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:host([variant="subtle"]) .alert {
|
|
41
|
+
background-color: var(--alert-subtle-bg);
|
|
42
|
+
color: var(--alert-subtle-color);
|
|
43
|
+
border-color: transparent;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host([variant="filled"]) .alert {
|
|
47
|
+
background-color: var(--alert-solid-bg);
|
|
48
|
+
color: var(--alert-solid-color);
|
|
49
|
+
border-color: var(--alert-solid-bg);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([variant="outlined"]) .alert {
|
|
53
|
+
background-color: transparent;
|
|
54
|
+
color: var(--alert-subtle-color);
|
|
55
|
+
border-color: var(--alert-border);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host([dismissible]) .alert {
|
|
59
|
+
padding-right: 40px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:host([icon]) .alert {
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: flex-start;
|
|
65
|
+
gap: 10px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:host([icon]) .alert::before {
|
|
69
|
+
content: '';
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
width: 16px;
|
|
72
|
+
height: 16px;
|
|
73
|
+
margin-top: 2px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.alert-close {
|
|
77
|
+
position: absolute;
|
|
78
|
+
top: 50%;
|
|
79
|
+
right: 12px;
|
|
80
|
+
transform: translateY(-50%);
|
|
81
|
+
background: transparent;
|
|
82
|
+
border: none;
|
|
83
|
+
color: inherit;
|
|
84
|
+
opacity: 0.6;
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
padding: 4px;
|
|
87
|
+
font-size: 18px;
|
|
88
|
+
line-height: 1;
|
|
89
|
+
transition: opacity 0.15s;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.alert-close:hover {
|
|
93
|
+
opacity: 1;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:host([size="sm"]) .alert {
|
|
97
|
+
padding: 8px 12px;
|
|
98
|
+
font-size: 11px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([size="lg"]) .alert {
|
|
102
|
+
padding: 16px 20px;
|
|
103
|
+
font-size: 13px;
|
|
104
|
+
}
|