@fremtind/jokul 5.0.4 → 5.0.5
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/menu/Menu.cjs +1 -1
- package/build/cjs/components/menu/Menu.cjs.map +1 -1
- package/build/cjs/components/popover/Popover.cjs +1 -1
- package/build/cjs/components/popover/Popover.cjs.map +1 -1
- package/build/cjs/components/popover/types.d.cts +10 -0
- package/build/cjs/components/select/Select.cjs +1 -1
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/es/components/menu/Menu.js +1 -1
- package/build/es/components/menu/Menu.js.map +1 -1
- package/build/es/components/popover/Popover.js +1 -1
- package/build/es/components/popover/Popover.js.map +1 -1
- package/build/es/components/popover/types.d.ts +10 -0
- package/build/es/components/select/Select.js +1 -1
- package/build/es/components/select/Select.js.map +1 -1
- package/package.json +3 -1
- package/src/tokens/metadata/color.metadata.dark.json +165 -0
- package/src/tokens/metadata/color.metadata.light.json +165 -0
- package/src/tokens/metadata/color.metadata.saturated.dark.json +165 -0
- package/src/tokens/metadata/color.metadata.saturated.light.json +165 -0
- 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/file-input/file-input.css +9 -9
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/help/help.css +2 -1
- package/styles/components/help/help.min.css +1 -1
- package/styles/components/help/help.scss +2 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/menu/_menu-item.scss +1 -1
- package/styles/components/menu/menu.css +3 -2
- package/styles/components/menu/menu.min.css +1 -1
- package/styles/components/menu/menu.scss +2 -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/segmented-control/segmented-control.css +3 -2
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/select/select.css +0 -8
- package/styles/components/select/select.min.css +1 -1
- package/styles/components/select/select.scss +0 -9
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/tooltip/tooltip.css +1 -0
- package/styles/components/tooltip/tooltip.min.css +1 -1
- package/styles/components/tooltip/tooltip.scss +1 -0
- package/styles/components.css +30 -35
- package/styles/components.min.css +1 -1
|
@@ -136,15 +136,8 @@
|
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
&__options-menu {
|
|
139
|
-
position: absolute;
|
|
140
|
-
left: jkl.rem(-1px);
|
|
141
|
-
right: jkl.rem(-1px);
|
|
142
|
-
top: 100%;
|
|
143
|
-
z-index: jkl.$z-index--dropdown;
|
|
144
|
-
|
|
145
139
|
background-color: var(--jkl-color-background-container);
|
|
146
140
|
border: jkl.rem(2px) solid var(--jkl-color-border-strong);
|
|
147
|
-
border-top: none;
|
|
148
141
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
149
142
|
box-sizing: border-box;
|
|
150
143
|
// Strekker seg ut over kantene på trigger-knappen for å dekke
|
|
@@ -231,8 +224,6 @@
|
|
|
231
224
|
&--open {
|
|
232
225
|
.jkl-select__search-input,
|
|
233
226
|
.jkl-select__button {
|
|
234
|
-
border-bottom-left-radius: 0;
|
|
235
|
-
border-bottom-right-radius: 0;
|
|
236
227
|
border-color: var(--jkl-color-border-strong);
|
|
237
228
|
background-color: var(--jkl-color-background-container);
|
|
238
229
|
box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
margin-bottom: 0;
|
|
121
121
|
}
|
|
122
122
|
.jkl-system-message--dismissed {
|
|
123
|
-
animation: jkl-dismiss-
|
|
123
|
+
animation: jkl-dismiss-uvwo3fk var(--jkl-motion-timing-lazy) forwards;
|
|
124
124
|
transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
|
|
125
125
|
}
|
|
126
126
|
.jkl-system-message--info {
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
border-width: 4px;
|
|
159
159
|
}
|
|
160
160
|
}
|
|
161
|
-
@keyframes jkl-dismiss-
|
|
161
|
+
@keyframes jkl-dismiss-uvwo3fk {
|
|
162
162
|
from {
|
|
163
163
|
opacity: 1;
|
|
164
164
|
transform: translateY(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-unit-20);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;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{color:var(--icon-color);flex-shrink:0;height:var(--jkl-system-message-icon-height)}@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:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;display:grid;flex-shrink:0;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:var(--jkl-color-text-subdued)}@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-strong);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
|
+
@layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-unit-20);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;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{color:var(--icon-color);flex-shrink:0;height:var(--jkl-system-message-icon-height)}@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:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;display:grid;flex-shrink:0;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:var(--jkl-color-text-subdued)}@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-strong);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-uvwo3fk var(--jkl-motion-timing-lazy) forwards;transition:block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy)}.jkl-system-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--icon-color:var(--jkl-color-info-background-contrast)}.jkl-system-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--icon-color:var(--jkl-color-warning-background-contrast)}.jkl-system-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--icon-color:var(--jkl-color-error-background-contrast)}.jkl-system-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--icon-color:var(--jkl-color-success-background-contrast)}@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-uvwo3fk{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
|
|
@@ -161,12 +161,12 @@
|
|
|
161
161
|
}
|
|
162
162
|
.jkl-toast[data-animation=entering],
|
|
163
163
|
.jkl-toast[data-animation=queued] {
|
|
164
|
-
animation: jkl-entering-
|
|
164
|
+
animation: jkl-entering-uhkvpon var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
|
|
165
165
|
}
|
|
166
166
|
.jkl-toast[data-animation=exiting] {
|
|
167
|
-
animation: jkl-exiting-
|
|
167
|
+
animation: jkl-exiting-uhkvpoy var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
|
|
168
168
|
}
|
|
169
|
-
@keyframes jkl-entering-
|
|
169
|
+
@keyframes jkl-entering-uhkvpon {
|
|
170
170
|
from {
|
|
171
171
|
opacity: 0;
|
|
172
172
|
transform: translate3d(0, 50%, 0);
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
transform: translate3d(0, 0, 0);
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
|
-
@keyframes jkl-exiting-
|
|
179
|
+
@keyframes jkl-exiting-uhkvpoy {
|
|
180
180
|
from {
|
|
181
181
|
opacity: 1;
|
|
182
182
|
transform: translate3d(0, 0, 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{inset:0 0 auto;position:absolute}.jkl-toast .jkl-countdown{--track-color:transparent;--bar-color:var(--jkl-color-background-contrast);border-radius:0}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--info .jkl-countdown{--bar-color:var(--jkl-color-info-background-contrast)}.jkl-toast--info .jkl-toast__icon{color:var(--jkl-color-info-background-contrast)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--warning .jkl-countdown{--bar-color:var(--jkl-color-warning-background-contrast)}.jkl-toast--warning .jkl-toast__icon{color:var(--jkl-color-warning-background-contrast)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--error .jkl-countdown{--bar-color:var(--jkl-color-error-background-contrast)}.jkl-toast--error .jkl-toast__icon{color:var(--jkl-color-error-background-contrast)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}.jkl-toast--success .jkl-countdown{--bar-color:var(--jkl-color-success-background-contrast)}.jkl-toast--success .jkl-toast__icon{color:var(--jkl-color-success-background-contrast)}@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
|
+
@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{inset:0 0 auto;position:absolute}.jkl-toast .jkl-countdown{--track-color:transparent;--bar-color:var(--jkl-color-background-contrast);border-radius:0}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--info .jkl-countdown{--bar-color:var(--jkl-color-info-background-contrast)}.jkl-toast--info .jkl-toast__icon{color:var(--jkl-color-info-background-contrast)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--warning .jkl-countdown{--bar-color:var(--jkl-color-warning-background-contrast)}.jkl-toast--warning .jkl-toast__icon{color:var(--jkl-color-warning-background-contrast)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--error .jkl-countdown{--bar-color:var(--jkl-color-error-background-contrast)}.jkl-toast--error .jkl-toast__icon{color:var(--jkl-color-error-background-contrast)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}.jkl-toast--success .jkl-countdown{--bar-color:var(--jkl-color-success-background-contrast)}.jkl-toast--success .jkl-toast__icon{color:var(--jkl-color-success-background-contrast)}@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-uhkvpon var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uhkvpoy var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-uhkvpon{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uhkvpoy{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);background-color:var(--background-color);color:var(--jkl-color-text-on-contrast);display:inline-block;font:var(--jkl-text-style-paragraph-small);max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-default);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}
|
|
1
|
+
@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);color:var(--jkl-color-text-on-contrast);display:inline-block;font:var(--jkl-text-style-paragraph-small);max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-default);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}
|
|
@@ -24,6 +24,7 @@ $_focus-ring-width: jkl.rem(2px);
|
|
|
24
24
|
background-color: var(--background-color);
|
|
25
25
|
color: var(--jkl-color-text-on-contrast);
|
|
26
26
|
display: inline-block;
|
|
27
|
+
border-radius: var(--jkl-border-radius-s);
|
|
27
28
|
min-width: min-content;
|
|
28
29
|
max-width: min(jkl.rem(310px),
|
|
29
30
|
100%); // 10px mindre enn smaleste støttede skjerm
|
package/styles/components.css
CHANGED
|
@@ -433,7 +433,7 @@
|
|
|
433
433
|
--color: var(--jkl-color-text-default);
|
|
434
434
|
}
|
|
435
435
|
.jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
|
|
436
|
-
animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-
|
|
436
|
+
animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uumgn13 forwards;
|
|
437
437
|
}
|
|
438
438
|
.jkl-form-support-label--sr-only {
|
|
439
439
|
border: 0 !important;
|
|
@@ -487,7 +487,7 @@
|
|
|
487
487
|
.jkl-label:has(+ .jkl-input-group-description) {
|
|
488
488
|
margin-block-end: var(--jkl-spacing-4);
|
|
489
489
|
}
|
|
490
|
-
@keyframes jkl-support-icon-entrance-
|
|
490
|
+
@keyframes jkl-support-icon-entrance-uumgn13 {
|
|
491
491
|
0% {
|
|
492
492
|
margin-right: 0;
|
|
493
493
|
opacity: 0;
|
|
@@ -540,6 +540,7 @@
|
|
|
540
540
|
background-color: var(--background-color);
|
|
541
541
|
color: var(--jkl-color-text-on-contrast);
|
|
542
542
|
display: inline-block;
|
|
543
|
+
border-radius: var(--jkl-border-radius-s);
|
|
543
544
|
min-width: min-content;
|
|
544
545
|
max-width: min(19.375rem, 100%);
|
|
545
546
|
padding: var(--content-padding);
|
|
@@ -846,22 +847,22 @@
|
|
|
846
847
|
animation: 2500ms linear infinite;
|
|
847
848
|
}
|
|
848
849
|
.jkl-loader__dot--left {
|
|
849
|
-
animation-name: jkl-loader-left-spin-
|
|
850
|
+
animation-name: jkl-loader-left-spin-uumgn1i;
|
|
850
851
|
margin-right: calc(var(--jkl-loader-spacing) * 0.9);
|
|
851
852
|
}
|
|
852
853
|
.jkl-loader__dot--middle {
|
|
853
|
-
animation-name: jkl-loader-middle-spin-
|
|
854
|
+
animation-name: jkl-loader-middle-spin-uumgn1z;
|
|
854
855
|
margin-right: var(--jkl-loader-spacing);
|
|
855
856
|
}
|
|
856
857
|
.jkl-loader__dot--right {
|
|
857
|
-
animation-name: jkl-loader-right-spin-
|
|
858
|
+
animation-name: jkl-loader-right-spin-uumgn2n;
|
|
858
859
|
}
|
|
859
860
|
@media screen and (forced-colors: active) {
|
|
860
861
|
.jkl-loader__dot {
|
|
861
862
|
background-color: CanvasText;
|
|
862
863
|
}
|
|
863
864
|
}
|
|
864
|
-
@keyframes jkl-loader-left-spin-
|
|
865
|
+
@keyframes jkl-loader-left-spin-uumgn1i {
|
|
865
866
|
0% {
|
|
866
867
|
transform: rotate(0) scale(0);
|
|
867
868
|
}
|
|
@@ -875,7 +876,7 @@
|
|
|
875
876
|
transform: rotate(180deg) scale(0);
|
|
876
877
|
}
|
|
877
878
|
}
|
|
878
|
-
@keyframes jkl-loader-middle-spin-
|
|
879
|
+
@keyframes jkl-loader-middle-spin-uumgn1z {
|
|
879
880
|
0% {
|
|
880
881
|
transform: rotate(20deg) scale(0);
|
|
881
882
|
}
|
|
@@ -892,7 +893,7 @@
|
|
|
892
893
|
transform: rotate(200deg) scale(0);
|
|
893
894
|
}
|
|
894
895
|
}
|
|
895
|
-
@keyframes jkl-loader-right-spin-
|
|
896
|
+
@keyframes jkl-loader-right-spin-uumgn2n {
|
|
896
897
|
0% {
|
|
897
898
|
transform: rotate(40deg) scale(0);
|
|
898
899
|
}
|
|
@@ -932,7 +933,7 @@
|
|
|
932
933
|
@media screen and (forced-colors: active) {
|
|
933
934
|
.jkl-skeleton-element {
|
|
934
935
|
border: 1px solid CanvasText;
|
|
935
|
-
animation: 2s ease infinite jkl-blink-
|
|
936
|
+
animation: 2s ease infinite jkl-blink-uumgn2s;
|
|
936
937
|
}
|
|
937
938
|
}
|
|
938
939
|
.jkl-skeleton-input {
|
|
@@ -980,10 +981,10 @@
|
|
|
980
981
|
}
|
|
981
982
|
@media screen and (forced-colors: active) {
|
|
982
983
|
.jkl-skeleton-table {
|
|
983
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
984
|
+
animation: 2s ease-in-out infinite jkl-blink-uumgn2s;
|
|
984
985
|
}
|
|
985
986
|
}
|
|
986
|
-
@keyframes jkl-blink-
|
|
987
|
+
@keyframes jkl-blink-uumgn2s {
|
|
987
988
|
0% {
|
|
988
989
|
opacity: 1;
|
|
989
990
|
}
|
|
@@ -2121,10 +2122,10 @@
|
|
|
2121
2122
|
}
|
|
2122
2123
|
}
|
|
2123
2124
|
.jkl-countdown__tracker {
|
|
2124
|
-
animation: jkl-downcount-
|
|
2125
|
+
animation: jkl-downcount-uumgn3u var(--duration) linear forwards;
|
|
2125
2126
|
animation-play-state: var(--play-state, running);
|
|
2126
2127
|
}
|
|
2127
|
-
@keyframes jkl-downcount-
|
|
2128
|
+
@keyframes jkl-downcount-uumgn3u {
|
|
2128
2129
|
from {
|
|
2129
2130
|
width: 100%;
|
|
2130
2131
|
}
|
|
@@ -2625,12 +2626,12 @@
|
|
|
2625
2626
|
font: var(--jkl-text-style-paragraph-small);
|
|
2626
2627
|
}
|
|
2627
2628
|
.jkl-feedback__fade-in {
|
|
2628
|
-
animation: jkl-show-
|
|
2629
|
+
animation: jkl-show-uumgn4b 0.25s ease-out;
|
|
2629
2630
|
}
|
|
2630
2631
|
.jkl-feedback__buttons {
|
|
2631
2632
|
display: flex;
|
|
2632
2633
|
}
|
|
2633
|
-
@keyframes jkl-show-
|
|
2634
|
+
@keyframes jkl-show-uumgn4b {
|
|
2634
2635
|
from {
|
|
2635
2636
|
transform: translate3d(0, 0.5rem, 0);
|
|
2636
2637
|
opacity: 0;
|
|
@@ -2842,7 +2843,7 @@
|
|
|
2842
2843
|
--icon-color: var(--jkl-color-success-background-contrast);
|
|
2843
2844
|
}
|
|
2844
2845
|
.jkl-message--dismissed {
|
|
2845
|
-
animation: jkl-dismiss-
|
|
2846
|
+
animation: jkl-dismiss-uumgn4l var(--jkl-motion-timing-lazy) ease-in-out forwards;
|
|
2846
2847
|
transition: visibility 0ms var(--jkl-motion-timing-lazy);
|
|
2847
2848
|
visibility: hidden;
|
|
2848
2849
|
}
|
|
@@ -2864,7 +2865,7 @@
|
|
|
2864
2865
|
.jkl-form-error-message {
|
|
2865
2866
|
padding-bottom: var(--jkl-unit-50);
|
|
2866
2867
|
}
|
|
2867
|
-
@keyframes jkl-dismiss-
|
|
2868
|
+
@keyframes jkl-dismiss-uumgn4l {
|
|
2868
2869
|
from {
|
|
2869
2870
|
opacity: 1;
|
|
2870
2871
|
transform: translate3d(0, 0, 0);
|
|
@@ -3638,7 +3639,7 @@
|
|
|
3638
3639
|
@layer jokul.components {
|
|
3639
3640
|
.jkl-menu-item {
|
|
3640
3641
|
--jkl-menu-item-height: var(--jkl-unit-60);
|
|
3641
|
-
--jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-
|
|
3642
|
+
--jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-20);
|
|
3642
3643
|
--background-color: transparent;
|
|
3643
3644
|
background-color: var(--background-color);
|
|
3644
3645
|
color: var(--jkl-color-text-default);
|
|
@@ -3722,9 +3723,10 @@
|
|
|
3722
3723
|
align-items: flex-start;
|
|
3723
3724
|
flex-wrap: nowrap;
|
|
3724
3725
|
box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
|
|
3725
|
-
border-radius:
|
|
3726
|
+
border-radius: var(--jkl-border-radius-s);
|
|
3726
3727
|
border: 2px solid var(--border-color);
|
|
3727
3728
|
z-index: 7000;
|
|
3729
|
+
padding-block: var(--jkl-unit-15);
|
|
3728
3730
|
}
|
|
3729
3731
|
.jkl-menu:focus-visible {
|
|
3730
3732
|
outline: none;
|
|
@@ -4250,14 +4252,8 @@
|
|
|
4250
4252
|
color: var(--jkl-color-error-text-default);
|
|
4251
4253
|
}
|
|
4252
4254
|
.jkl-select__options-menu {
|
|
4253
|
-
position: absolute;
|
|
4254
|
-
left: -0.0625rem;
|
|
4255
|
-
right: -0.0625rem;
|
|
4256
|
-
top: 100%;
|
|
4257
|
-
z-index: 7000;
|
|
4258
4255
|
background-color: var(--jkl-color-background-container);
|
|
4259
4256
|
border: 0.125rem solid var(--jkl-color-border-strong);
|
|
4260
|
-
border-top: none;
|
|
4261
4257
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
4262
4258
|
box-sizing: border-box;
|
|
4263
4259
|
margin-inline: -0.0625rem;
|
|
@@ -4320,8 +4316,6 @@
|
|
|
4320
4316
|
}
|
|
4321
4317
|
.jkl-select--open .jkl-select__search-input,
|
|
4322
4318
|
.jkl-select--open .jkl-select__button {
|
|
4323
|
-
border-bottom-left-radius: 0;
|
|
4324
|
-
border-bottom-right-radius: 0;
|
|
4325
4319
|
border-color: var(--jkl-color-border-strong);
|
|
4326
4320
|
background-color: var(--jkl-color-background-container);
|
|
4327
4321
|
box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-strong);
|
|
@@ -4465,7 +4459,7 @@
|
|
|
4465
4459
|
transition-timing-function: var(--jkl-motion-easing-standard);
|
|
4466
4460
|
transition-duration: var(--jkl-motion-timing-productive);
|
|
4467
4461
|
}
|
|
4468
|
-
@keyframes jkl-downcount-
|
|
4462
|
+
@keyframes jkl-downcount-uumgn5e {
|
|
4469
4463
|
from {
|
|
4470
4464
|
width: 100%;
|
|
4471
4465
|
}
|
|
@@ -4959,7 +4953,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
|
|
|
4959
4953
|
margin-bottom: 0;
|
|
4960
4954
|
}
|
|
4961
4955
|
.jkl-system-message--dismissed {
|
|
4962
|
-
animation: jkl-dismiss-
|
|
4956
|
+
animation: jkl-dismiss-uumgn6x var(--jkl-motion-timing-lazy) forwards;
|
|
4963
4957
|
transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
|
|
4964
4958
|
}
|
|
4965
4959
|
.jkl-system-message--info {
|
|
@@ -4997,7 +4991,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
|
|
|
4997
4991
|
border-width: 4px;
|
|
4998
4992
|
}
|
|
4999
4993
|
}
|
|
5000
|
-
@keyframes jkl-dismiss-
|
|
4994
|
+
@keyframes jkl-dismiss-uumgn6x {
|
|
5001
4995
|
from {
|
|
5002
4996
|
opacity: 1;
|
|
5003
4997
|
transform: translateY(0);
|
|
@@ -5825,12 +5819,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
|
|
|
5825
5819
|
}
|
|
5826
5820
|
.jkl-toast[data-animation=entering],
|
|
5827
5821
|
.jkl-toast[data-animation=queued] {
|
|
5828
|
-
animation: jkl-entering-
|
|
5822
|
+
animation: jkl-entering-uumgn7v var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
|
|
5829
5823
|
}
|
|
5830
5824
|
.jkl-toast[data-animation=exiting] {
|
|
5831
|
-
animation: jkl-exiting-
|
|
5825
|
+
animation: jkl-exiting-uumgn84 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
|
|
5832
5826
|
}
|
|
5833
|
-
@keyframes jkl-entering-
|
|
5827
|
+
@keyframes jkl-entering-uumgn7v {
|
|
5834
5828
|
from {
|
|
5835
5829
|
opacity: 0;
|
|
5836
5830
|
transform: translate3d(0, 50%, 0);
|
|
@@ -5840,7 +5834,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
|
|
|
5840
5834
|
transform: translate3d(0, 0, 0);
|
|
5841
5835
|
}
|
|
5842
5836
|
}
|
|
5843
|
-
@keyframes jkl-exiting-
|
|
5837
|
+
@keyframes jkl-exiting-uumgn84 {
|
|
5844
5838
|
from {
|
|
5845
5839
|
opacity: 1;
|
|
5846
5840
|
transform: translate3d(0, 0, 0);
|
|
@@ -7508,11 +7502,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
|
|
|
7508
7502
|
.jkl-help-popover {
|
|
7509
7503
|
width: max-content;
|
|
7510
7504
|
max-width: min(40ch, 80vw);
|
|
7511
|
-
padding: var(--jkl-unit-
|
|
7505
|
+
padding: var(--jkl-unit-15);
|
|
7512
7506
|
margin: var(--jkl-unit-05);
|
|
7513
7507
|
position-anchor: --trigger;
|
|
7514
7508
|
background-color: var(--jkl-color-background-contrast);
|
|
7515
7509
|
color: var(--jkl-color-text-on-contrast);
|
|
7510
|
+
border-radius: var(--jkl-border-radius-s);
|
|
7516
7511
|
anchor-name: --help-box;
|
|
7517
7512
|
}
|
|
7518
7513
|
.jkl-help-popover[data-position=top] {
|