@fremtind/jokul 0.57.8 → 0.58.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/build/build-stats.html +1 -1
- package/build/cjs/components/text-input/BaseTextInput.cjs +1 -1
- package/build/cjs/components/text-input/BaseTextInput.cjs.map +1 -1
- package/build/es/components/text-input/BaseTextInput.js +1 -1
- package/build/es/components/text-input/BaseTextInput.js.map +1 -1
- package/build/style.css +1 -1
- package/package.json +2 -2
- package/styles/components/button/button.css +3 -3
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/icon-button/icon-button.css +0 -1
- package/styles/components/icon-button/icon-button.min.css +1 -1
- package/styles/components/icon-button/icon-button.scss +0 -2
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/list/list.css +3 -3
- package/styles/components/list/list.min.css +1 -1
- package/styles/components/list/list.scss +3 -3
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -5
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +2 -2
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/text-area/text-area.css +23 -108
- package/styles/components/text-area/text-area.min.css +1 -1
- package/styles/components/text-area/text-area.scss +2 -6
- package/styles/components/text-input/text-input.css +21 -104
- package/styles/components/text-input/text-input.min.css +1 -1
- package/styles/components/text-input/text-input.scss +0 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/shared/input/shared-input-styles.css +0 -62
- package/styles/shared/input/shared-input-styles.min.css +1 -1
- package/styles/shared/input/shared-input-styles.scss +27 -99
- package/styles/styles.css +86 -193
- package/styles/styles.min.css +1 -1
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
margin-bottom: 0;
|
|
145
145
|
}
|
|
146
146
|
.jkl-system-message--dismissed {
|
|
147
|
-
animation: jkl-dismiss-
|
|
147
|
+
animation: jkl-dismiss-usl6omg 400ms ease-in forwards;
|
|
148
148
|
transition: visibility 0ms 400ms;
|
|
149
149
|
visibility: hidden;
|
|
150
150
|
}
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
-
@keyframes jkl-dismiss-
|
|
179
|
+
@keyframes jkl-dismiss-usl6omg {
|
|
180
180
|
from {
|
|
181
181
|
opacity: 1;
|
|
182
182
|
transform: translate3d(0, 0, 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-usl6omg .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-usl6omg{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}
|
|
@@ -2,68 +2,6 @@
|
|
|
2
2
|
* Do not edit directly
|
|
3
3
|
* Generated on Wed, 18 Dec 2024 12:25:37 GMT
|
|
4
4
|
*/
|
|
5
|
-
@media screen and (prefers-color-scheme: light) {
|
|
6
|
-
:root {
|
|
7
|
-
--jkl-text-input-border-color: #636060;
|
|
8
|
-
--jkl-text-input-text-color: #1b1917;
|
|
9
|
-
--jkl-text-input-placeholder-color: #636060;
|
|
10
|
-
--jkl-text-input-unit-color: #1b1917;
|
|
11
|
-
--jkl-text-input-background-color: #ffffff;
|
|
12
|
-
--jkl-text-input-focus-color: #1b1917;
|
|
13
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
14
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
15
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
16
|
-
--jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
|
|
17
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
18
|
-
--jkl-text-area-counter-count-color: #636060;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
[data-theme=light] {
|
|
22
|
-
--jkl-text-input-border-color: #636060;
|
|
23
|
-
--jkl-text-input-text-color: #1b1917;
|
|
24
|
-
--jkl-text-input-placeholder-color: #636060;
|
|
25
|
-
--jkl-text-input-unit-color: #1b1917;
|
|
26
|
-
--jkl-text-input-background-color: #ffffff;
|
|
27
|
-
--jkl-text-input-focus-color: #1b1917;
|
|
28
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
29
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
30
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
31
|
-
--jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
|
|
32
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
33
|
-
--jkl-text-area-counter-count-color: #636060;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@media screen and (prefers-color-scheme: dark) {
|
|
37
|
-
:root {
|
|
38
|
-
--jkl-text-input-border-color: #c8c5c3;
|
|
39
|
-
--jkl-text-input-text-color: #f9f9f9;
|
|
40
|
-
--jkl-text-input-placeholder-color: #c8c5c3;
|
|
41
|
-
--jkl-text-input-unit-color: #f9f9f9;
|
|
42
|
-
--jkl-text-input-background-color: #313030;
|
|
43
|
-
--jkl-text-input-focus-color: #f9f9f9;
|
|
44
|
-
--jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
|
|
45
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
46
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
47
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
48
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
49
|
-
--jkl-text-area-counter-count-color: #c8c5c3;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
[data-theme=dark] {
|
|
53
|
-
--jkl-text-input-border-color: #c8c5c3;
|
|
54
|
-
--jkl-text-input-text-color: #f9f9f9;
|
|
55
|
-
--jkl-text-input-placeholder-color: #c8c5c3;
|
|
56
|
-
--jkl-text-input-unit-color: #f9f9f9;
|
|
57
|
-
--jkl-text-input-background-color: #313030;
|
|
58
|
-
--jkl-text-input-focus-color: #f9f9f9;
|
|
59
|
-
--jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
|
|
60
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
61
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
62
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
63
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
64
|
-
--jkl-text-area-counter-count-color: #c8c5c3;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
5
|
:root,
|
|
68
6
|
[data-layout-density=comfortable],
|
|
69
7
|
[data-density=comfortable] {
|
|
@@ -106,6 +44,10 @@
|
|
|
106
44
|
}
|
|
107
45
|
|
|
108
46
|
.jkl-text-area-wrapper {
|
|
47
|
+
--text-color: var(--jkl-color-text-default);
|
|
48
|
+
--background-color: var(--jkl-color-background-input-base);
|
|
49
|
+
--border-color: var(--jkl-color-border-input);
|
|
50
|
+
--placeholder-color: var(--jkl-color-text-subdued);
|
|
109
51
|
border-radius: 0.1875rem;
|
|
110
52
|
box-sizing: border-box;
|
|
111
53
|
max-width: 100%;
|
|
@@ -119,26 +61,27 @@
|
|
|
119
61
|
transition-timing-function: ease;
|
|
120
62
|
transition-duration: 150ms;
|
|
121
63
|
transition-property: color, box-shadow, background-color;
|
|
122
|
-
color: var(--
|
|
123
|
-
|
|
124
|
-
|
|
64
|
+
background-color: var(--background-color);
|
|
65
|
+
color: var(--text-color);
|
|
66
|
+
box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
|
|
125
67
|
}
|
|
126
|
-
.jkl-text-area-wrapper
|
|
127
|
-
background-color: var(--jkl-
|
|
128
|
-
|
|
68
|
+
.jkl-text-area-wrapper:focus-within {
|
|
69
|
+
--background-color: var(--jkl-color-background-input-focus);
|
|
70
|
+
}
|
|
71
|
+
.jkl-text-area-wrapper[data-invalid=true]:not(:focus-within) {
|
|
72
|
+
--background-color: var(--jkl-color-background-alert-error);
|
|
73
|
+
--text-color: var(--jkl-color-text-on-alert);
|
|
74
|
+
--placeholder-color: color(from currentColor sRGB r g b / 0.75);
|
|
129
75
|
}
|
|
130
76
|
.jkl-text-area-wrapper:hover {
|
|
131
|
-
|
|
132
|
-
border-color
|
|
77
|
+
--border-color: var(--jkl-color-border-input-focus);
|
|
78
|
+
box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
|
|
133
79
|
}
|
|
134
80
|
@media screen and (forced-colors: active) {
|
|
135
81
|
.jkl-text-area-wrapper:hover {
|
|
136
82
|
border: 0.125rem solid ButtonText;
|
|
137
83
|
}
|
|
138
84
|
}
|
|
139
|
-
.jkl-text-area-wrapper:focus-within {
|
|
140
|
-
background-color: var(--jkl-text-input-background-color);
|
|
141
|
-
}
|
|
142
85
|
html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible) {
|
|
143
86
|
outline: 3px solid var(--jkl-color-border-action);
|
|
144
87
|
outline-offset: 3px;
|
|
@@ -150,7 +93,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
|
|
|
150
93
|
}
|
|
151
94
|
@media screen and (forced-colors: active) {
|
|
152
95
|
.jkl-text-area-wrapper > .jkl-icon-button:focus-visible {
|
|
153
|
-
--
|
|
96
|
+
--border-color: ButtonText;
|
|
154
97
|
}
|
|
155
98
|
}
|
|
156
99
|
.jkl-text-area-wrapper > .jkl-text-input-action-button {
|
|
@@ -169,7 +112,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
|
|
|
169
112
|
width: var(--jkl-text-input-action-button-icon-size);
|
|
170
113
|
}
|
|
171
114
|
.jkl-text-area-wrapper > .jkl-text-input-action-button:hover {
|
|
172
|
-
color: var(--jkl-text-
|
|
115
|
+
color: var(--jkl-color-text-interactive-hover);
|
|
173
116
|
}
|
|
174
117
|
@media screen and (forced-colors: active) {
|
|
175
118
|
.jkl-text-area-wrapper > .jkl-text-input-action-button:hover {
|
|
@@ -200,7 +143,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
|
|
|
200
143
|
transition-property: height, min-height, max-height, padding;
|
|
201
144
|
background: none;
|
|
202
145
|
-webkit-appearance: none;
|
|
203
|
-
color:
|
|
146
|
+
color: inherit;
|
|
204
147
|
font-size: var(--jkl-text-input-font-size);
|
|
205
148
|
line-height: var(--jkl-text-input-line-height);
|
|
206
149
|
font-weight: var(--jkl-text-input-font-weight);
|
|
@@ -243,35 +186,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
|
|
|
243
186
|
}
|
|
244
187
|
.jkl-text-area__text-area::placeholder {
|
|
245
188
|
opacity: 1;
|
|
246
|
-
color: var(--
|
|
189
|
+
color: var(--placeholder-color);
|
|
247
190
|
}
|
|
248
191
|
.jkl-text-area__text-area::selection {
|
|
249
|
-
background-color:
|
|
250
|
-
}
|
|
251
|
-
[data-theme=dark] .jkl-text-area__text-area::selection {
|
|
252
|
-
background-color: var(--jkl-text-input-selection-color);
|
|
253
|
-
}
|
|
254
|
-
.jkl-text-area__text-area[aria-invalid=true] {
|
|
255
|
-
color: var(--jkl-text-input-error-text-color);
|
|
256
|
-
}
|
|
257
|
-
.jkl-text-area__text-area[aria-invalid=true]::placeholder {
|
|
258
|
-
color: var(--jkl-text-input-error-placeholder-color);
|
|
259
|
-
}
|
|
260
|
-
.jkl-text-area__text-area[aria-invalid=true]::selection {
|
|
261
|
-
background-color: var(--jkl-text-input-error-selection-color);
|
|
262
|
-
}
|
|
263
|
-
.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button {
|
|
264
|
-
color: var(--jkl-color-text-on-alert);
|
|
265
|
-
}
|
|
266
|
-
.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
|
|
267
|
-
color: var(--jkl-text-input-error-text-color);
|
|
268
|
-
}
|
|
269
|
-
html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button:focus::after {
|
|
270
|
-
box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-error-text-color);
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input__unit {
|
|
274
|
-
color: var(--jkl-text-input-error-text-color);
|
|
192
|
+
background-color: color(from currentColor sRGB r g b/0.25);
|
|
275
193
|
}
|
|
276
194
|
.jkl-text-area .jkl-text-area-wrapper {
|
|
277
195
|
height: auto;
|
|
@@ -302,7 +220,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
|
|
|
302
220
|
}
|
|
303
221
|
.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count {
|
|
304
222
|
padding: var(--jkl-text-input-padding);
|
|
305
|
-
color: var(--
|
|
223
|
+
color: var(--text-color);
|
|
306
224
|
font-size: 1rem;
|
|
307
225
|
line-height: 1.5rem;
|
|
308
226
|
font-weight: 400;
|
|
@@ -321,7 +239,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
|
|
|
321
239
|
width: var(--progress-width, 100%);
|
|
322
240
|
display: block;
|
|
323
241
|
height: 0.25rem;
|
|
324
|
-
background-color: var(--
|
|
242
|
+
background-color: var(--border-color);
|
|
325
243
|
transition-property: width;
|
|
326
244
|
transition-timing-function: ease;
|
|
327
245
|
transition-duration: 400ms;
|
|
@@ -330,9 +248,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
|
|
|
330
248
|
opacity: 1;
|
|
331
249
|
transition-delay: 150ms;
|
|
332
250
|
}
|
|
333
|
-
.jkl-text-area:has(.jkl-text-area__counter) [aria-invalid=true] ~ .jkl-text-area__counter {
|
|
334
|
-
color: var(--jkl-text-input-error-text-color);
|
|
335
|
-
}
|
|
336
251
|
|
|
337
252
|
.jkl-text-area__text-area--3-rows:focus,
|
|
338
253
|
.jkl-text-area__text-area--3-rows:not(:placeholder-shown),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@media screen and (prefers-color-scheme:light){:root{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}}[data-theme=light]{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}}[data-theme=dark]{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-area-wrapper{align-items:center;background-color:transparent;border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--jkl-text-input-text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-text-area-wrapper[data-invalid=true]{background-color:var(--jkl-text-input-error-background-color);color:var(--jkl-text-input-error-text-color)}.jkl-text-area-wrapper:hover{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}.jkl-text-area-wrapper:focus-within{background-color:var(--jkl-text-input-background-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--jkl-color-border-action:ButtonText}}.jkl-text-area-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-area-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-height:var(--jkl-text-input-height);min-height:var(--jkl-text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-area__text-area[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-color-text-on-alert)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper[data-has-content=true]{padding-bottom:calc(var(--jkl-text-input-height) + .25rem)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--jkl-text-area-counter-count-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding);--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:.25rem;overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--jkl-color);content:"";display:block;height:.25rem;transition-duration:.4s;transition-property:width;transition-timing-function:ease;width:var(--progress-width,100%)}.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter{opacity:1;transition-delay:.15s}.jkl-text-area:has(.jkl-text-area__counter) [aria-invalid=true]~.jkl-text-area__counter{color:var(--jkl-text-input-error-text-color)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*3);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*4);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*5);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*6);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*7);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*8);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*9);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*10);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-area-wrapper{--text-color:var(--jkl-color-text-default);--background-color:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-text-area-wrapper:focus-within{--background-color:var(--jkl-color-background-input-focus)}.jkl-text-area-wrapper[data-invalid=true]:not(:focus-within){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/0.75)}.jkl-text-area-wrapper:hover{--border-color:var(--jkl-color-border-input-focus);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-area-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-area-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-height:var(--jkl-text-input-height);min-height:var(--jkl-text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-area__text-area::selection{background-color:color(from currentColor sRGB r g b/.25)}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper[data-has-content=true]{padding-bottom:calc(var(--jkl-text-input-height) + .25rem)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--text-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding);--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:.25rem;overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--border-color);content:"";display:block;height:.25rem;transition-duration:.4s;transition-property:width;transition-timing-function:ease;width:var(--progress-width,100%)}.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter{opacity:1;transition-delay:.15s}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*3);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*4);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*5);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*6);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*7);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*8);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*9);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*10);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
|
|
71
71
|
&-count {
|
|
72
72
|
padding: var(--jkl-text-input-padding);
|
|
73
|
-
color: var(--
|
|
73
|
+
color: var(--text-color);
|
|
74
74
|
@include jkl.text-style("small");
|
|
75
75
|
}
|
|
76
76
|
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
width: var(--progress-width, 100%);
|
|
86
86
|
display: block;
|
|
87
87
|
height: $progress-bar-height;
|
|
88
|
-
background-color: var(--
|
|
88
|
+
background-color: var(--border-color);
|
|
89
89
|
transition-property: width;
|
|
90
90
|
@include jkl.motion("standard", "lazy");
|
|
91
91
|
}
|
|
@@ -98,10 +98,6 @@
|
|
|
98
98
|
"productive"
|
|
99
99
|
); // Vent med å fade inn til feltet er ekspandert
|
|
100
100
|
}
|
|
101
|
-
|
|
102
|
-
[aria-invalid="true"] ~ .jkl-text-area__counter {
|
|
103
|
-
color: var(--jkl-text-input-error-text-color);
|
|
104
|
-
}
|
|
105
101
|
}
|
|
106
102
|
}
|
|
107
103
|
|
|
@@ -2,68 +2,6 @@
|
|
|
2
2
|
* Do not edit directly
|
|
3
3
|
* Generated on Wed, 18 Dec 2024 12:25:37 GMT
|
|
4
4
|
*/
|
|
5
|
-
@media screen and (prefers-color-scheme: light) {
|
|
6
|
-
:root {
|
|
7
|
-
--jkl-text-input-border-color: #636060;
|
|
8
|
-
--jkl-text-input-text-color: #1b1917;
|
|
9
|
-
--jkl-text-input-placeholder-color: #636060;
|
|
10
|
-
--jkl-text-input-unit-color: #1b1917;
|
|
11
|
-
--jkl-text-input-background-color: #ffffff;
|
|
12
|
-
--jkl-text-input-focus-color: #1b1917;
|
|
13
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
14
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
15
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
16
|
-
--jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
|
|
17
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
18
|
-
--jkl-text-area-counter-count-color: #636060;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
[data-theme=light] {
|
|
22
|
-
--jkl-text-input-border-color: #636060;
|
|
23
|
-
--jkl-text-input-text-color: #1b1917;
|
|
24
|
-
--jkl-text-input-placeholder-color: #636060;
|
|
25
|
-
--jkl-text-input-unit-color: #1b1917;
|
|
26
|
-
--jkl-text-input-background-color: #ffffff;
|
|
27
|
-
--jkl-text-input-focus-color: #1b1917;
|
|
28
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
29
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
30
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
31
|
-
--jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
|
|
32
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
33
|
-
--jkl-text-area-counter-count-color: #636060;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@media screen and (prefers-color-scheme: dark) {
|
|
37
|
-
:root {
|
|
38
|
-
--jkl-text-input-border-color: #c8c5c3;
|
|
39
|
-
--jkl-text-input-text-color: #f9f9f9;
|
|
40
|
-
--jkl-text-input-placeholder-color: #c8c5c3;
|
|
41
|
-
--jkl-text-input-unit-color: #f9f9f9;
|
|
42
|
-
--jkl-text-input-background-color: #313030;
|
|
43
|
-
--jkl-text-input-focus-color: #f9f9f9;
|
|
44
|
-
--jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
|
|
45
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
46
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
47
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
48
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
49
|
-
--jkl-text-area-counter-count-color: #c8c5c3;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
[data-theme=dark] {
|
|
53
|
-
--jkl-text-input-border-color: #c8c5c3;
|
|
54
|
-
--jkl-text-input-text-color: #f9f9f9;
|
|
55
|
-
--jkl-text-input-placeholder-color: #c8c5c3;
|
|
56
|
-
--jkl-text-input-unit-color: #f9f9f9;
|
|
57
|
-
--jkl-text-input-background-color: #313030;
|
|
58
|
-
--jkl-text-input-focus-color: #f9f9f9;
|
|
59
|
-
--jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
|
|
60
|
-
--jkl-text-input-error-background-color: #f6b3b3;
|
|
61
|
-
--jkl-text-input-error-text-color: #1b1917;
|
|
62
|
-
--jkl-text-input-error-placeholder-color: #636060;
|
|
63
|
-
--jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
|
|
64
|
-
--jkl-text-area-counter-count-color: #c8c5c3;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
5
|
:root,
|
|
68
6
|
[data-layout-density=comfortable],
|
|
69
7
|
[data-density=comfortable] {
|
|
@@ -106,6 +44,10 @@
|
|
|
106
44
|
}
|
|
107
45
|
|
|
108
46
|
.jkl-text-input-wrapper {
|
|
47
|
+
--text-color: var(--jkl-color-text-default);
|
|
48
|
+
--background-color: var(--jkl-color-background-input-base);
|
|
49
|
+
--border-color: var(--jkl-color-border-input);
|
|
50
|
+
--placeholder-color: var(--jkl-color-text-subdued);
|
|
109
51
|
border-radius: 0.1875rem;
|
|
110
52
|
box-sizing: border-box;
|
|
111
53
|
max-width: 100%;
|
|
@@ -119,26 +61,27 @@
|
|
|
119
61
|
transition-timing-function: ease;
|
|
120
62
|
transition-duration: 150ms;
|
|
121
63
|
transition-property: color, box-shadow, background-color;
|
|
122
|
-
color: var(--
|
|
123
|
-
|
|
124
|
-
|
|
64
|
+
background-color: var(--background-color);
|
|
65
|
+
color: var(--text-color);
|
|
66
|
+
box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
|
|
125
67
|
}
|
|
126
|
-
.jkl-text-input-wrapper
|
|
127
|
-
background-color: var(--jkl-
|
|
128
|
-
|
|
68
|
+
.jkl-text-input-wrapper:focus-within {
|
|
69
|
+
--background-color: var(--jkl-color-background-input-focus);
|
|
70
|
+
}
|
|
71
|
+
.jkl-text-input-wrapper[data-invalid=true]:not(:focus-within) {
|
|
72
|
+
--background-color: var(--jkl-color-background-alert-error);
|
|
73
|
+
--text-color: var(--jkl-color-text-on-alert);
|
|
74
|
+
--placeholder-color: color(from currentColor sRGB r g b / 0.75);
|
|
129
75
|
}
|
|
130
76
|
.jkl-text-input-wrapper:hover {
|
|
131
|
-
|
|
132
|
-
border-color
|
|
77
|
+
--border-color: var(--jkl-color-border-input-focus);
|
|
78
|
+
box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
|
|
133
79
|
}
|
|
134
80
|
@media screen and (forced-colors: active) {
|
|
135
81
|
.jkl-text-input-wrapper:hover {
|
|
136
82
|
border: 0.125rem solid ButtonText;
|
|
137
83
|
}
|
|
138
84
|
}
|
|
139
|
-
.jkl-text-input-wrapper:focus-within {
|
|
140
|
-
background-color: var(--jkl-text-input-background-color);
|
|
141
|
-
}
|
|
142
85
|
html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
|
|
143
86
|
outline: 3px solid var(--jkl-color-border-action);
|
|
144
87
|
outline-offset: 3px;
|
|
@@ -150,7 +93,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
150
93
|
}
|
|
151
94
|
@media screen and (forced-colors: active) {
|
|
152
95
|
.jkl-text-input-wrapper > .jkl-icon-button:focus-visible {
|
|
153
|
-
--
|
|
96
|
+
--border-color: ButtonText;
|
|
154
97
|
}
|
|
155
98
|
}
|
|
156
99
|
.jkl-text-input-wrapper > .jkl-text-input-action-button {
|
|
@@ -169,7 +112,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
169
112
|
width: var(--jkl-text-input-action-button-icon-size);
|
|
170
113
|
}
|
|
171
114
|
.jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
|
|
172
|
-
color: var(--jkl-text-
|
|
115
|
+
color: var(--jkl-color-text-interactive-hover);
|
|
173
116
|
}
|
|
174
117
|
@media screen and (forced-colors: active) {
|
|
175
118
|
.jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
|
|
@@ -192,7 +135,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
192
135
|
width: 100%;
|
|
193
136
|
background: none;
|
|
194
137
|
-webkit-appearance: none;
|
|
195
|
-
color:
|
|
138
|
+
color: inherit;
|
|
196
139
|
font-size: var(--jkl-text-input-font-size);
|
|
197
140
|
line-height: var(--jkl-text-input-line-height);
|
|
198
141
|
font-weight: var(--jkl-text-input-font-weight);
|
|
@@ -235,35 +178,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
235
178
|
}
|
|
236
179
|
.jkl-text-input__input::placeholder {
|
|
237
180
|
opacity: 1;
|
|
238
|
-
color: var(--
|
|
181
|
+
color: var(--placeholder-color);
|
|
239
182
|
}
|
|
240
183
|
.jkl-text-input__input::selection {
|
|
241
|
-
background-color:
|
|
242
|
-
}
|
|
243
|
-
[data-theme=dark] .jkl-text-input__input::selection {
|
|
244
|
-
background-color: var(--jkl-text-input-selection-color);
|
|
245
|
-
}
|
|
246
|
-
.jkl-text-input__input[aria-invalid=true] {
|
|
247
|
-
color: var(--jkl-text-input-error-text-color);
|
|
248
|
-
}
|
|
249
|
-
.jkl-text-input__input[aria-invalid=true]::placeholder {
|
|
250
|
-
color: var(--jkl-text-input-error-placeholder-color);
|
|
251
|
-
}
|
|
252
|
-
.jkl-text-input__input[aria-invalid=true]::selection {
|
|
253
|
-
background-color: var(--jkl-text-input-error-selection-color);
|
|
254
|
-
}
|
|
255
|
-
.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button {
|
|
256
|
-
color: var(--jkl-color-text-on-alert);
|
|
257
|
-
}
|
|
258
|
-
.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
|
|
259
|
-
color: var(--jkl-text-input-error-text-color);
|
|
260
|
-
}
|
|
261
|
-
html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button:focus::after {
|
|
262
|
-
box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-error-text-color);
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input__unit {
|
|
266
|
-
color: var(--jkl-text-input-error-text-color);
|
|
184
|
+
background-color: color(from currentColor sRGB r g b/0.25);
|
|
267
185
|
}
|
|
268
186
|
.jkl-text-input__input--align-right {
|
|
269
187
|
text-align: right;
|
|
@@ -271,7 +189,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__in
|
|
|
271
189
|
.jkl-text-input__unit {
|
|
272
190
|
padding-inline-end: var(--jkl-text-input-horizontal-padding);
|
|
273
191
|
padding-block: var(--jkl-text-input-vertical-padding);
|
|
274
|
-
color: var(--jkl-text-input-unit-color);
|
|
275
192
|
}
|
|
276
193
|
.jkl-text-input__action-button {
|
|
277
194
|
margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-input-wrapper{--text-color:var(--jkl-color-text-default);--background-color:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-text-input-wrapper:focus-within{--background-color:var(--jkl-color-background-input-focus)}.jkl-text-input-wrapper[data-invalid=true]:not(:focus-within){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/0.75)}.jkl-text-input-wrapper:hover{--border-color:var(--jkl-color-border-input-focus);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-input-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-input-wrapper{border:.125rem inset ButtonText}}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:inherit;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);line-height:var(--jkl-text-input-line-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-input__input{border:none;outline:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-input__input::selection{background-color:color(from currentColor sRGB r g b/.25)}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}
|
|
@@ -185,14 +185,14 @@
|
|
|
185
185
|
|
|
186
186
|
.jkl-toast[data-animation=entering],
|
|
187
187
|
.jkl-toast[data-animation=queued] {
|
|
188
|
-
animation: jkl-entering-
|
|
188
|
+
animation: jkl-entering-udbvddo 200ms ease-out forwards;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
191
|
.jkl-toast[data-animation=exiting] {
|
|
192
|
-
animation: jkl-exiting-
|
|
192
|
+
animation: jkl-exiting-udbvde1 150ms ease-in forwards;
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
-
@keyframes jkl-entering-
|
|
195
|
+
@keyframes jkl-entering-udbvddo {
|
|
196
196
|
from {
|
|
197
197
|
opacity: 0;
|
|
198
198
|
transform: translate3d(0, 50%, 0);
|
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
transform: translate3d(0, 0, 0);
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
|
-
@keyframes jkl-exiting-
|
|
205
|
+
@keyframes jkl-exiting-udbvde1 {
|
|
206
206
|
from {
|
|
207
207
|
opacity: 1;
|
|
208
208
|
transform: translate3d(0, 0, 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*2)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*1.5)}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:calc(var(--jkl-unit-10)*3);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:calc(var(--jkl-unit-10)*3)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*2)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*1.5)}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:calc(var(--jkl-unit-10)*3);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:calc(var(--jkl-unit-10)*3)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-udbvddo .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-udbvde1 .15s ease-in forwards}@keyframes jkl-entering-udbvddo{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-udbvde1{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}
|