@elenajs/components 0.4.0 → 0.5.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.
- package/dist/bundle.css +1 -1
- package/dist/button.css +7 -3
- package/dist/stack.css +1 -0
- package/package.json +3 -3
package/dist/bundle.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
elena-button{--elena-button-bg:transparent;--elena-button-text:#333;--elena-button-border:#f19c77;--elena-button-radius:10rem;--elena-button-font:sans-serif;all:
|
|
1
|
+
elena-button{--elena-button-bg:transparent;--elena-button-text:#333;--elena-button-border:#f19c77;--elena-button-radius:10rem;--elena-button-font:sans-serif;all:initial;display:inline-block}elena-button .elena-button{all:initial;display:inline-flex}:is(elena-button:not(.elena-hydrated),.elena-button){-webkit-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;background:var(--elena-button-bg);color:var(--elena-button-text);border-radius:var(--elena-button-radius);border:2px solid var(--elena-button-border);font-family:var(--elena-button-font);font-size:1rem;font-weight:700;padding:0.75rem 1.25rem;cursor:pointer}:is(elena-button:not(.elena-hydrated))::after{content:attr(label)}elena-button:hover{opacity:0.8}elena-button:active{opacity:0.6}elena-button:focus-within{box-shadow:0 0 0 3px red}elena-button[disabled]{--elena-button-bg:#2b1c15;--elena-button-text:#fff;--elena-button-border:#2b1c15;opacity:0.3;pointer-events:none}elena-button[variant="primary"]{--elena-button-bg:#f19c77;--elena-button-text:#2b1c15}elena-button[variant="danger"]{--elena-button-text:red;--elena-button-border:red}elena-input{--elena-input-bg:transparent;--elena-input-text:#333;--elena-input-border:#333;--elena-input-radius:4px;--elena-input-font:sans-serif;all:unset;min-inline-size:300px;box-sizing:border-box;display:inline-block;flex-direction:column;gap:5px}:is(elena-input:not(.elena-hydrated),.elena-input){-webkit-appearance:none;appearance:none;display:inline-flex;-webkit-user-select:none;user-select:none;line-height:1;block-size:3rem;background:var(--elena-input-bg);color:var(--elena-input-text);border-radius:var(--elena-input-radius);border:1px solid var(--elena-input-border);font-family:var(--elena-input-font);font-weight:700;padding:0.75rem 1.25rem;cursor:text;position:relative}elena-input:not(.elena-hydrated){margin-block-start:1.82rem}elena-input:not(.elena-hydrated)::before{content:attr(label);position:absolute;font-weight:700;top:-1.78rem;left:-1px;display:block;inline-size:100%}elena-input:not(.elena-hydrated)::after{content:attr(placeholder);display:flex;align-items:center;block-size:100%;color:#aaa}elena-input .elena-input{font-size:100%;box-sizing:border-box;inline-size:100%}elena-input label{font-weight:700;display:block;block-size:1.5rem;margin:0;inline-size:100%}.elena-input-container{inline-size:100%}elena-input input:focus{box-shadow:0 0 0 1px red}elena-input input::placeholder{opacity:1;color:#aaa}elena-input[error]{--elena-input-border:red}elena-input .elena-error{color:red}elena-stack{display:flex;justify-content:flex-start;align-items:flex-start;flex-flow:column wrap;gap:0.5rem}elena-stack[direction="row"]{flex-direction:row}
|
package/dist/button.css
CHANGED
|
@@ -10,10 +10,15 @@ elena-button {
|
|
|
10
10
|
--elena-button-radius: 10rem;
|
|
11
11
|
--elena-button-font: sans-serif;
|
|
12
12
|
|
|
13
|
-
all:
|
|
13
|
+
all: initial;
|
|
14
14
|
display: inline-block;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
elena-button .elena-button {
|
|
18
|
+
all: initial;
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
}
|
|
21
|
+
|
|
17
22
|
/**
|
|
18
23
|
* For overall visual styles, we want to target both
|
|
19
24
|
* non-hydrated element and the internal button element
|
|
@@ -21,10 +26,8 @@ elena-button {
|
|
|
21
26
|
* the same before & after client side hydration.
|
|
22
27
|
*/
|
|
23
28
|
:is(elena-button:not(.elena-hydrated), .elena-button) {
|
|
24
|
-
all: unset;
|
|
25
29
|
-webkit-appearance: none;
|
|
26
30
|
appearance: none;
|
|
27
|
-
display: inline-flex;
|
|
28
31
|
-webkit-user-select: none;
|
|
29
32
|
user-select: none;
|
|
30
33
|
background: var(--elena-button-bg);
|
|
@@ -32,6 +35,7 @@ elena-button {
|
|
|
32
35
|
border-radius: var(--elena-button-radius);
|
|
33
36
|
border: 2px solid var(--elena-button-border);
|
|
34
37
|
font-family: var(--elena-button-font);
|
|
38
|
+
font-size: 1rem;
|
|
35
39
|
font-weight: 700;
|
|
36
40
|
padding: 0.75rem 1.25rem;
|
|
37
41
|
cursor: pointer;
|
package/dist/stack.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elenajs/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Elena component library demonstrating how to build progressive web components.",
|
|
5
5
|
"author": "Elena <hi@elenajs.com>",
|
|
6
6
|
"homepage": "https://elenajs.com/",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"clean": "rm -rf dist/"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@elenajs/core": "^0.
|
|
36
|
+
"@elenajs/core": "^0.5.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@elenajs/bundler": "^0.0.8",
|
|
40
40
|
"@web/dev-server": "0.4.6"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "07f778059a88d5afa61e5917eea501f72bce20f5"
|
|
43
43
|
}
|