@fremtind/jokul 5.0.0-next.2 → 5.0.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -13
- package/build/build-stats.html +1 -1
- package/build/cjs/components/text-area/BaseTextArea.cjs +1 -1
- package/build/cjs/components/text-area/BaseTextArea.cjs.map +1 -1
- package/build/cjs/components/text-area/counter.cjs +2 -0
- package/build/cjs/components/text-area/counter.cjs.map +1 -0
- package/build/cjs/components/text-area/counter.d.cts +2 -0
- package/build/cjs/components/text-area/types.d.cts +21 -1
- package/build/cjs/components/typography/Text.cjs +2 -0
- package/build/cjs/components/typography/Text.cjs.map +1 -0
- package/build/cjs/components/typography/Text.d.cts +5 -0
- package/build/cjs/components/typography/Title.cjs +2 -0
- package/build/cjs/components/typography/Title.cjs.map +1 -0
- package/build/cjs/components/typography/Title.d.cts +5 -0
- package/build/cjs/components/typography/index.cjs +2 -0
- package/build/cjs/components/typography/index.cjs.map +1 -0
- package/build/cjs/components/typography/index.d.cts +3 -0
- package/build/cjs/components/typography/types.cjs +2 -0
- package/build/cjs/components/typography/types.cjs.map +1 -0
- package/build/cjs/components/typography/types.d.cts +48 -0
- package/build/es/components/text-area/BaseTextArea.js +1 -1
- package/build/es/components/text-area/BaseTextArea.js.map +1 -1
- package/build/es/components/text-area/counter.d.ts +2 -0
- package/build/es/components/text-area/counter.js +2 -0
- package/build/es/components/text-area/counter.js.map +1 -0
- package/build/es/components/text-area/types.d.ts +21 -1
- package/build/es/components/typography/Text.d.ts +5 -0
- package/build/es/components/typography/Text.js +2 -0
- package/build/es/components/typography/Text.js.map +1 -0
- package/build/es/components/typography/Title.d.ts +5 -0
- package/build/es/components/typography/Title.js +2 -0
- package/build/es/components/typography/Title.js.map +1 -0
- package/build/es/components/typography/index.d.ts +3 -0
- package/build/es/components/typography/index.js +2 -0
- package/build/es/components/typography/index.js.map +1 -0
- package/build/es/components/typography/types.d.ts +48 -0
- package/build/es/components/typography/types.js +2 -0
- package/build/es/components/typography/types.js.map +1 -0
- package/package.json +1 -1
- package/src/fonts/brands/dnb/DNB-Bold.woff2 +0 -0
- package/src/fonts/brands/dnb/DNB-Medium.woff2 +0 -0
- package/src/fonts/brands/dnb/DNB-Regular.woff2 +0 -0
- package/src/fonts/brands/dnb/DNBMono-Regular.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-Bold.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-Light.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-Regular.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-SemiBold.woff2 +0 -0
- package/src/fonts/brands/fremtind/InterVariable-Italic.woff2 +0 -0
- package/src/fonts/brands/fremtind/InterVariable.woff2 +0 -0
- package/src/fonts/brands/sparebank1/SpareBank1-Medium-Web.woff2 +0 -0
- package/src/fonts/brands/sparebank1/SpareBank1-Regular-Web.woff2 +0 -0
- package/src/fonts/brands/sparebank1/SpareBank1-Title-Medium-Web.woff2 +0 -0
- package/styles/base.css +125 -18
- package/styles/base.min.css +1 -1
- package/styles/components/beta/nav-link/navlink.css +1 -1
- package/styles/components/beta/nav-link/navlink.min.css +1 -1
- package/styles/components/checkbox/checkbox.css +1 -1
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/checkbox-panel/development/styles.scss +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/_index.scss +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 +10 -10
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/icon/_base-styles.scss +12 -14
- package/styles/components/icon/icon.css +1 -1
- package/styles/components/icon/icon.min.css +1 -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/link/link.css +1 -1
- package/styles/components/link/link.min.css +1 -1
- package/styles/components/link-list/link-list.css +1 -1
- package/styles/components/link-list/link-list.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/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/pagination/development/styles.scss +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 +1 -1
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-panel/development/styles.scss +1 -1
- package/styles/components/search/search.css +2 -2
- package/styles/components/search/search.min.css +1 -1
- package/styles/components/search/search.scss +2 -2
- package/styles/components/segmented-control/segmented-control.css +4 -4
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +1 -1
- package/styles/components/summary-table/development/summary-table-example.scss +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/table-of-contents/table-of-contents.css +1 -1
- package/styles/components/table-of-contents/table-of-contents.min.css +1 -1
- package/styles/components/table-of-contents/table-of-contents.scss +2 -2
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/typography/_index.scss +2 -0
- package/styles/components/typography/text.css +38 -0
- package/styles/components/typography/text.min.css +1 -0
- package/styles/components/typography/text.scss +54 -0
- package/styles/components/typography/title.css +55 -0
- package/styles/components/typography/title.min.css +1 -0
- package/styles/components/typography/title.scss +59 -0
- package/styles/components.css +120 -33
- package/styles/components.min.css +2 -2
- package/styles/components.scss +53 -52
- package/styles/core/utility/_paragraphs.scss +39 -0
- package/styles/global/_base-class.scss +2 -2
- package/styles/global/_top-layer.scss +1 -1
- package/styles/hooks/stories/styles.scss +1 -1
- package/styles/jkl/_typography.scss +13 -21
- package/styles/theme/_dynamic-spacing.scss +3 -3
- package/styles/theme/_fonts.scss +16 -28
- package/styles/theme/_index.scss +3 -0
- package/styles/theme/_tokens.scss +3 -3
- package/styles/theme/brands/dnb/_fonts.scss +46 -0
- package/styles/theme/brands/eika/_fonts.scss +46 -0
- package/styles/theme/brands/jokul/_color-scheme.scss +119 -0
- package/styles/theme/brands/jokul/_fonts.scss +46 -0
- package/styles/theme/brands/sparebank1/_fonts.scss +38 -0
- package/styles/utility/_headings.scss +1 -1
- package/styles/utility/_paragraphs.scss +2 -2
- package/styles/utility/_screen-reader.scss +1 -1
- package/styles/utility/_spacing.scss +2 -2
- package/src/fonts/FremtindGrotesk-Bold-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Bold-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-BoldItalic-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-BoldItalic-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-Display-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Display-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-Italic-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Italic-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-Regular-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Regular-Web.woff2 +0 -0
- package/src/fonts/FremtindGroteskMono-Regular-Web.woff +0 -0
- package/src/fonts/FremtindGroteskMono-Regular-Web.woff2 +0 -0
- /package/src/fonts/{Fremtind-Material-Symbols.woff2 → brands/fremtind/Fremtind-Material-Symbols.woff2} +0 -0
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
margin-block-start: -0.1em;
|
|
163
163
|
padding-inline-start: 0.2em;
|
|
164
164
|
vertical-align: middle;
|
|
165
|
-
font-family: "
|
|
165
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
166
166
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
167
167
|
font-feature-settings: "liga";
|
|
168
168
|
-webkit-font-feature-settings: "liga";
|
|
@@ -336,22 +336,22 @@
|
|
|
336
336
|
animation: 2500ms linear infinite;
|
|
337
337
|
}
|
|
338
338
|
.jkl-loader__dot--left {
|
|
339
|
-
animation-name: jkl-loader-left-spin-
|
|
339
|
+
animation-name: jkl-loader-left-spin-u7l6dc2;
|
|
340
340
|
margin-right: calc(var(--jkl-loader-spacing) * 0.9);
|
|
341
341
|
}
|
|
342
342
|
.jkl-loader__dot--middle {
|
|
343
|
-
animation-name: jkl-loader-middle-spin-
|
|
343
|
+
animation-name: jkl-loader-middle-spin-u7l6dc7;
|
|
344
344
|
margin-right: var(--jkl-loader-spacing);
|
|
345
345
|
}
|
|
346
346
|
.jkl-loader__dot--right {
|
|
347
|
-
animation-name: jkl-loader-right-spin-
|
|
347
|
+
animation-name: jkl-loader-right-spin-u7l6dco;
|
|
348
348
|
}
|
|
349
349
|
@media screen and (forced-colors: active) {
|
|
350
350
|
.jkl-loader__dot {
|
|
351
351
|
background-color: CanvasText;
|
|
352
352
|
}
|
|
353
353
|
}
|
|
354
|
-
@keyframes jkl-loader-left-spin-
|
|
354
|
+
@keyframes jkl-loader-left-spin-u7l6dc2 {
|
|
355
355
|
0% {
|
|
356
356
|
transform: rotate(0) scale(0);
|
|
357
357
|
}
|
|
@@ -365,7 +365,7 @@
|
|
|
365
365
|
transform: rotate(180deg) scale(0);
|
|
366
366
|
}
|
|
367
367
|
}
|
|
368
|
-
@keyframes jkl-loader-middle-spin-
|
|
368
|
+
@keyframes jkl-loader-middle-spin-u7l6dc7 {
|
|
369
369
|
0% {
|
|
370
370
|
transform: rotate(20deg) scale(0);
|
|
371
371
|
}
|
|
@@ -382,7 +382,7 @@
|
|
|
382
382
|
transform: rotate(200deg) scale(0);
|
|
383
383
|
}
|
|
384
384
|
}
|
|
385
|
-
@keyframes jkl-loader-right-spin-
|
|
385
|
+
@keyframes jkl-loader-right-spin-u7l6dco {
|
|
386
386
|
0% {
|
|
387
387
|
transform: rotate(40deg) scale(0);
|
|
388
388
|
}
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
@media screen and (forced-colors: active) {
|
|
423
423
|
.jkl-skeleton-element {
|
|
424
424
|
border: 1px solid CanvasText;
|
|
425
|
-
animation: 2s ease infinite jkl-blink-
|
|
425
|
+
animation: 2s ease infinite jkl-blink-u7l6ddo;
|
|
426
426
|
}
|
|
427
427
|
}
|
|
428
428
|
.jkl-skeleton-input {
|
|
@@ -470,10 +470,10 @@
|
|
|
470
470
|
}
|
|
471
471
|
@media screen and (forced-colors: active) {
|
|
472
472
|
.jkl-skeleton-table {
|
|
473
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
473
|
+
animation: 2s ease-in-out infinite jkl-blink-u7l6ddo;
|
|
474
474
|
}
|
|
475
475
|
}
|
|
476
|
-
@keyframes jkl-blink-
|
|
476
|
+
@keyframes jkl-blink-u7l6ddo {
|
|
477
477
|
0% {
|
|
478
478
|
opacity: 1;
|
|
479
479
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:2px;--bg:transparent;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--jkl-color-text-default);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content__name{font:var(--jkl-text-style-paragraph-small);grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-error-background-container)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default);--link-color:var(--text-color);--jkl-color-border-strong:currentColor}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-default);color:inherit;outline:none;text-decoration:none;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}}@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-unit-02);pointer-events:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;transition-timing-function:var(--jkl-motion-easing-standard);translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uvv3cc8;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uvv3cd0;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uvv3cdt}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-uvv3cc8{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uvv3cd0{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uvv3cdt{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-uvv3cep 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-uvv3cep 2s ease-in-out infinite}}@keyframes jkl-blink-uvv3cep{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}@layer jokul.components{.jkl-file-input{--jkl-file-input-dropzone-padding:var(--jkl-unit-30);--jkl-file-input-dropzone-gap:var(--jkl-unit-30);--jkl-file-cta-gap:var(--jkl-unit-30);--jkl-file-cta-with-files-gap:var(--jkl-unit-15);--jkl-file-list-gap:var(--jkl-unit-10)}.jkl-file-input__dropzone{--border-color:var(--jkl-color-border-default);--background-color:transparent;align-items:center;background-color:var(--background-color);border:1px dashed var(--border-color);border-radius:.25rem;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);justify-content:center;padding:var(--jkl-file-input-dropzone-padding);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-strong);--background-color:var(--jkl-color-background-container);border-style:solid}.jkl-file-input__dropzone__drag-text{font:var(--jkl-text-style-paragraph-small)}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;transform:scale(1.05)}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active{transform:scale(1)}.jkl-file-input__dropzone-hint{margin-top:var(--jkl-unit-30)}.jkl-file-input--has-files .jkl-file-input__dropzone-hint{display:none}.jkl-file-input__max-size-text{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{display:flex;flex-direction:column;gap:var(--jkl-file-list-gap);list-style:none;margin:0;padding:0}.jkl-file-input--small .jkl-file-input__dropzone-hint{display:block;margin:0}.jkl-file-input--small .jkl-file-input__dropzone{flex-direction:row;gap:var(--jkl-unit-20);justify-content:flex-start;margin-bottom:var(--jkl-unit-20);max-width:-webkit-fit-content;max-width:fit-content;padding:var(--jkl-unit-20)}.jkl-file-input--small .jkl-file-input__call-to-action{flex-direction:row;font:var(--jkl-text-style-text-small);gap:var(--jkl-unit-15);justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-bottom:var(--jkl-unit-20);margin-top:calc(var(--jkl-unit-15)*-1)}}
|
|
1
|
+
@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:2px;--bg:transparent;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--jkl-color-text-default);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content__name{font:var(--jkl-text-style-paragraph-small);grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-error-background-container)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default);--link-color:var(--text-color);--jkl-color-border-strong:currentColor}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-default);color:inherit;outline:none;text-decoration:none;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:Jokul Material Symbols,Jokul Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}}@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-unit-02);pointer-events:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;transition-timing-function:var(--jkl-motion-easing-standard);translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-u7l6dc2;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-u7l6dc7;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-u7l6dco}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-u7l6dc2{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-u7l6dc7{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-u7l6dco{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u7l6ddo 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u7l6ddo 2s ease-in-out infinite}}@keyframes jkl-blink-u7l6ddo{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}@layer jokul.components{.jkl-file-input{--jkl-file-input-dropzone-padding:var(--jkl-unit-30);--jkl-file-input-dropzone-gap:var(--jkl-unit-30);--jkl-file-cta-gap:var(--jkl-unit-30);--jkl-file-cta-with-files-gap:var(--jkl-unit-15);--jkl-file-list-gap:var(--jkl-unit-10)}.jkl-file-input__dropzone{--border-color:var(--jkl-color-border-default);--background-color:transparent;align-items:center;background-color:var(--background-color);border:1px dashed var(--border-color);border-radius:.25rem;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);justify-content:center;padding:var(--jkl-file-input-dropzone-padding);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-strong);--background-color:var(--jkl-color-background-container);border-style:solid}.jkl-file-input__dropzone__drag-text{font:var(--jkl-text-style-paragraph-small)}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;transform:scale(1.05)}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active{transform:scale(1)}.jkl-file-input__dropzone-hint{margin-top:var(--jkl-unit-30)}.jkl-file-input--has-files .jkl-file-input__dropzone-hint{display:none}.jkl-file-input__max-size-text{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{display:flex;flex-direction:column;gap:var(--jkl-file-list-gap);list-style:none;margin:0;padding:0}.jkl-file-input--small .jkl-file-input__dropzone-hint{display:block;margin:0}.jkl-file-input--small .jkl-file-input__dropzone{flex-direction:row;gap:var(--jkl-unit-20);justify-content:flex-start;margin-bottom:var(--jkl-unit-20);max-width:-webkit-fit-content;max-width:fit-content;padding:var(--jkl-unit-20)}.jkl-file-input--small .jkl-file-input__call-to-action{flex-direction:row;font:var(--jkl-text-style-text-small);gap:var(--jkl-unit-15);justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-bottom:var(--jkl-unit-20);margin-top:calc(var(--jkl-unit-15)*-1)}}
|
|
@@ -5,19 +5,17 @@
|
|
|
5
5
|
/// av ikoner også der man ikke kan bruke jkl-icon-klassen.
|
|
6
6
|
/// @output Basestiler for Jøkul-ikoner
|
|
7
7
|
@mixin base-styles {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
display: inline-block;
|
|
19
|
-
-webkit-font-smoothing: antialiased;
|
|
8
|
+
font-family:
|
|
9
|
+
"Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
10
|
+
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
11
|
+
font-feature-settings: "liga";
|
|
12
|
+
-webkit-font-feature-settings: "liga";
|
|
13
|
+
font-size: 1.3em;
|
|
14
|
+
font-weight: 400;
|
|
15
|
+
line-height: 1;
|
|
16
|
+
display: inline-block;
|
|
17
|
+
-webkit-font-smoothing: antialiased;
|
|
20
18
|
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
@include jkl.motion("standard", "energetic");
|
|
20
|
+
transition-property: font-variation-settings, transform;
|
|
23
21
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@layer jokul.components {
|
|
5
5
|
.jkl-icon {
|
|
6
6
|
--jkl-icon-fill: 0;
|
|
7
|
-
font-family: "
|
|
7
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
8
8
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
9
9
|
font-feature-settings: "liga";
|
|
10
10
|
-webkit-font-feature-settings: "liga";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-icon{--jkl-icon-fill:0;display:inline-block;font-family:
|
|
1
|
+
@layer jokul.components{.jkl-icon{--jkl-icon-fill:0;display:inline-block;font-family:Jokul Material Symbols,Jokul Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-icon--filled{--jkl-icon-fill:1}.jkl-icon--animated{display:block}.jkl-icon-red-cross{--red-cross-circle:var(--jkl-color-error-background-action);--red-cross-path:var(--jkl-color-error-text-on-action);height:1.3em;width:1.3em}.jkl-icon-red-cross path{fill:var(--red-cross-path)}.jkl-icon-red-cross circle{fill:var(--red-cross-circle)}.jkl-icon-green-check{--green-check-circle:var(--jkl-color-success-background-action);--green-check-path:var(--jkl-color-success-text-on-action);height:1.3em;width:1.3em}.jkl-icon-green-check path{fill:var(--green-check-path)}.jkl-icon-green-check circle{fill:var(--green-check-circle)}.jkl-animated-horizontal-arrows,.jkl-animated-vertical-arrows{height:1.3em;overflow:hidden;width:1.3em}.jkl-animated-horizontal-arrows__slider,.jkl-animated-vertical-arrows__slider{display:flex;transition-delay:calc(var(--jkl-motion-timing-expressive)*.33333);transition-duration:var(--jkl-motion-timing-expressive);transition-property:transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-animated-horizontal-arrows__arrow,.jkl-animated-vertical-arrows__arrow{flex-shrink:0}.jkl-animated-vertical-arrows__slider{flex-direction:column;height:2.6em}.jkl-animated-vertical-arrows__slider[data-show=up]{transform:translateZ(0)}.jkl-animated-vertical-arrows__slider[data-show=down]{transform:translate3d(0,-50%,0)}.jkl-animated-horizontal-arrows__slider{flex-direction:row;width:2.6em}.jkl-animated-horizontal-arrows__slider[data-show=left]{transform:translateZ(0)}.jkl-animated-horizontal-arrows__slider[data-show=right]{transform:translate3d(-50%,0,0)}.jkl-icons-animated__plus{transform-origin:50% 50%;transition-duration:var(--jkl-motion-timing-expressive);transition-property:transform;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out)}.jkl-icons-animated__plus--plus{transform:rotate(0)}.jkl-icons-animated__plus--close{transform:rotate(135deg)}}
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
--color: var(--jkl-color-text-default);
|
|
63
63
|
}
|
|
64
64
|
.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 {
|
|
65
|
-
animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-
|
|
65
|
+
animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u3eeyza forwards;
|
|
66
66
|
}
|
|
67
67
|
.jkl-form-support-label--sr-only {
|
|
68
68
|
border: 0 !important;
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
.jkl-label:has(+ .jkl-input-group-description) {
|
|
117
117
|
margin-block-end: var(--jkl-spacing-4);
|
|
118
118
|
}
|
|
119
|
-
@keyframes jkl-support-icon-entrance-
|
|
119
|
+
@keyframes jkl-support-icon-entrance-u3eeyza {
|
|
120
120
|
0% {
|
|
121
121
|
margin-right: 0;
|
|
122
122
|
opacity: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font:var(--jkl-text-style-text-small);margin:var(--jkl-form-support-label-margin);transition-delay:var(--jkl-motion-timing-productive);transition-duration:var(--jkl-motion-timing-lazy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{fill:Canvas;stroke:CanvasText}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-
|
|
1
|
+
@layer jokul.components{.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font:var(--jkl-text-style-text-small);margin:var(--jkl-form-support-label-margin);transition-delay:var(--jkl-motion-timing-productive);transition-duration:var(--jkl-motion-timing-lazy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{fill:Canvas;stroke:CanvasText}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u3eeyza forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-label{color:var(--jkl-color-text-default);display:block;margin:0 0 var(--jkl-spacing-8) 0}.jkl-label--medium,.jkl-label--small{font:var(--jkl-text-style-text-medium)}.jkl-label--large{font:var(--jkl-text-style-text-large)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-u3eeyza{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:var(--jkl-spacing-8)}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:var(--jkl-spacing-8);opacity:1;transform:scale(1)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{fill:ButtonFace;stroke:ButtonText}}}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
margin-block-start: -0.1em;
|
|
31
31
|
padding-inline-start: 0.2em;
|
|
32
32
|
vertical-align: middle;
|
|
33
|
-
font-family: "
|
|
33
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
34
34
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
35
35
|
font-feature-settings: "liga";
|
|
36
36
|
-webkit-font-feature-settings: "liga";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-default);color:inherit;outline:none;text-decoration:none;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:
|
|
1
|
+
@charset "UTF-8";@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-default);color:inherit;outline:none;text-decoration:none;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:Jokul Material Symbols,Jokul Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}}
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
}
|
|
41
41
|
.jkl-link-list ul .jkl-link-list-link::after {
|
|
42
42
|
content: "arrow_forward"/"";
|
|
43
|
-
font-family: "
|
|
43
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
44
44
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
45
45
|
font-feature-settings: "liga";
|
|
46
46
|
-webkit-font-feature-settings: "liga";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-link-list{--border:1px solid var(--jkl-color-border-subdued);--text-color:var(--jkl-color-text-default);font:var(--jkl-text-style-paragraph-medium)}.jkl-link-list .jkl-link-list-title{-webkit-margin-after:var(--jkl-unit-10);font:var(--jkl-text-style-paragraph-small);margin-block-end:var(--jkl-unit-10)}.jkl-link-list ul{background:var(--jkl-color-background-page);border-radius:var(--jkl-unit-05);display:flex;flex-direction:column;height:-webkit-min-content;height:min-content;margin:0;overflow:hidden;padding:0;width:100%}.jkl-link-list ul .jkl-link-list-link{align-items:center;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);gap:var(--jkl-unit-20);justify-content:space-between;padding:var(--jkl-unit-20);text-decoration:none;text-wrap:balance;transition-duration:var(--jkl-motion-timing-productive);transition-property:background;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-link-list ul .jkl-link-list-link:after{content:"arrow_forward"/"";display:inline-block;font-family:
|
|
1
|
+
@layer jokul.components{.jkl-link-list{--border:1px solid var(--jkl-color-border-subdued);--text-color:var(--jkl-color-text-default);font:var(--jkl-text-style-paragraph-medium)}.jkl-link-list .jkl-link-list-title{-webkit-margin-after:var(--jkl-unit-10);font:var(--jkl-text-style-paragraph-small);margin-block-end:var(--jkl-unit-10)}.jkl-link-list ul{background:var(--jkl-color-background-page);border-radius:var(--jkl-unit-05);display:flex;flex-direction:column;height:-webkit-min-content;height:min-content;margin:0;overflow:hidden;padding:0;width:100%}.jkl-link-list ul .jkl-link-list-link{align-items:center;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);gap:var(--jkl-unit-20);justify-content:space-between;padding:var(--jkl-unit-20);text-decoration:none;text-wrap:balance;transition-duration:var(--jkl-motion-timing-productive);transition-property:background;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-link-list ul .jkl-link-list-link:after{content:"arrow_forward"/"";display:inline-block;font-family:Jokul Material Symbols,Jokul Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-duration:var(--jkl-motion-timing-productive);transition-property:font-variation-settings,transform;transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link-list ul .jkl-link-list-link:is(:hover,:focus-visible){background:var(--jkl-color-background-interactive-selected)}.jkl-link-list ul .jkl-link-list-link:is(:hover,:focus-visible):after{translate:4px 0}.jkl-link-list ul .jkl-link-list-link:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-link-list .jkl-link-list-item{display:flex}.jkl-link-list .jkl-link-list-item:not(:last-of-type) .jkl-link-list-link{-webkit-border-after:var(--border);border-block-end:var(--border)}.jkl-link-list:has(ul) .jkl-link-list-title{-webkit-margin-start:var(--jkl-unit-05);margin-inline-start:var(--jkl-unit-05)}}
|
|
@@ -19,22 +19,22 @@
|
|
|
19
19
|
animation: 2500ms linear infinite;
|
|
20
20
|
}
|
|
21
21
|
.jkl-loader__dot--left {
|
|
22
|
-
animation-name: jkl-loader-left-spin-
|
|
22
|
+
animation-name: jkl-loader-left-spin-ukh75xo;
|
|
23
23
|
margin-right: calc(var(--jkl-loader-spacing) * 0.9);
|
|
24
24
|
}
|
|
25
25
|
.jkl-loader__dot--middle {
|
|
26
|
-
animation-name: jkl-loader-middle-spin-
|
|
26
|
+
animation-name: jkl-loader-middle-spin-ukh75yb;
|
|
27
27
|
margin-right: var(--jkl-loader-spacing);
|
|
28
28
|
}
|
|
29
29
|
.jkl-loader__dot--right {
|
|
30
|
-
animation-name: jkl-loader-right-spin-
|
|
30
|
+
animation-name: jkl-loader-right-spin-ukh75yh;
|
|
31
31
|
}
|
|
32
32
|
@media screen and (forced-colors: active) {
|
|
33
33
|
.jkl-loader__dot {
|
|
34
34
|
background-color: CanvasText;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
@keyframes jkl-loader-left-spin-
|
|
37
|
+
@keyframes jkl-loader-left-spin-ukh75xo {
|
|
38
38
|
0% {
|
|
39
39
|
transform: rotate(0) scale(0);
|
|
40
40
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
transform: rotate(180deg) scale(0);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
@keyframes jkl-loader-middle-spin-
|
|
51
|
+
@keyframes jkl-loader-middle-spin-ukh75yb {
|
|
52
52
|
0% {
|
|
53
53
|
transform: rotate(20deg) scale(0);
|
|
54
54
|
}
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
transform: rotate(200deg) scale(0);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
@keyframes jkl-loader-right-spin-
|
|
68
|
+
@keyframes jkl-loader-right-spin-ukh75yh {
|
|
69
69
|
0% {
|
|
70
70
|
transform: rotate(40deg) scale(0);
|
|
71
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-
|
|
1
|
+
@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-ukh75xo;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-ukh75yb;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-ukh75yh}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-ukh75xo{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-ukh75yb{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-ukh75yh{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
@media screen and (forced-colors: active) {
|
|
27
27
|
.jkl-skeleton-element {
|
|
28
28
|
border: 1px solid CanvasText;
|
|
29
|
-
animation: 2s ease infinite jkl-blink-
|
|
29
|
+
animation: 2s ease infinite jkl-blink-u48zruk;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
.jkl-skeleton-input {
|
|
@@ -74,10 +74,10 @@
|
|
|
74
74
|
}
|
|
75
75
|
@media screen and (forced-colors: active) {
|
|
76
76
|
.jkl-skeleton-table {
|
|
77
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
77
|
+
animation: 2s ease-in-out infinite jkl-blink-u48zruk;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
@keyframes jkl-blink-
|
|
80
|
+
@keyframes jkl-blink-u48zruk {
|
|
81
81
|
0% {
|
|
82
82
|
opacity: 1;
|
|
83
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-
|
|
1
|
+
@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u48zruk 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u48zruk 2s ease-in-out infinite}}@keyframes jkl-blink-u48zruk{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
--border-color: var(--jkl-color-success-border-subdued);
|
|
149
149
|
}
|
|
150
150
|
.jkl-message--dismissed {
|
|
151
|
-
animation: jkl-dismiss-
|
|
151
|
+
animation: jkl-dismiss-uxaf8sz var(--jkl-motion-timing-lazy) ease-in-out forwards;
|
|
152
152
|
transition: visibility 0ms var(--jkl-motion-timing-lazy);
|
|
153
153
|
visibility: hidden;
|
|
154
154
|
}
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
.jkl-form-error-message {
|
|
171
171
|
padding-bottom: var(--jkl-unit-50);
|
|
172
172
|
}
|
|
173
|
-
@keyframes jkl-dismiss-
|
|
173
|
+
@keyframes jkl-dismiss-uxaf8sz {
|
|
174
174
|
from {
|
|
175
175
|
opacity: 1;
|
|
176
176
|
transform: translate3d(0, 0, 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-message{--jkl-message-icon-left:var(--jkl-unit-20);--jkl-message-icon-top:var(--jkl-unit-30);--jkl-message-title-margin:0 0 var(--jkl-unit-05) 0;--jkl-message-dismiss-button-size:var(--jkl-unit-50);--jkl-message-gap:var(--jkl-unit-20);--jkl-message-padding:var(--jkl-unit-25) var(--jkl-unit-15);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;font:var(--jkl-text-style-paragraph-medium);grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font:var(--jkl-text-style-paragraph-medium);margin-top:-.125rem}.jkl-message__title{font:var(--jkl-text-style-heading-5);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:transparent;border-style:none;color:inherit;cursor:pointer;display:grid;grid-area:dismiss;justify-self:end;outline:0;outline-style:none;padding:0;place-content:center;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";display:block;height:var(--jkl-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-message-dismiss-button-size)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--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-message--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-message--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-message--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-message--dismissed{animation:jkl-dismiss-
|
|
1
|
+
@layer jokul.components{.jkl-message{--jkl-message-icon-left:var(--jkl-unit-20);--jkl-message-icon-top:var(--jkl-unit-30);--jkl-message-title-margin:0 0 var(--jkl-unit-05) 0;--jkl-message-dismiss-button-size:var(--jkl-unit-50);--jkl-message-gap:var(--jkl-unit-20);--jkl-message-padding:var(--jkl-unit-25) var(--jkl-unit-15);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;font:var(--jkl-text-style-paragraph-medium);grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font:var(--jkl-text-style-paragraph-medium);margin-top:-.125rem}.jkl-message__title{font:var(--jkl-text-style-heading-5);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:transparent;border-style:none;color:inherit;cursor:pointer;display:grid;grid-area:dismiss;justify-self:end;outline:0;outline-style:none;padding:0;place-content:center;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";display:block;height:var(--jkl-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-message-dismiss-button-size)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--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-message--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-message--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-message--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-message--dismissed{animation:jkl-dismiss-uxaf8sz var(--jkl-motion-timing-lazy) ease-in-out forwards;transition:visibility 0s var(--jkl-motion-timing-lazy);visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}.jkl-form-error-message{padding-bottom:var(--jkl-unit-50)}@keyframes jkl-dismiss-uxaf8sz{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar{border-style:none;outline:0;outline-style:none}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{border-style:revert;outline:revert;outline-style:revert}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-progress-bar__tracker{transition-duration:var(--jkl-motion-timing-productive);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard)}@keyframes jkl-downcount-
|
|
1
|
+
@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar{border-style:none;outline:0;outline-style:none}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{border-style:revert;outline:revert;outline-style:revert}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-progress-bar__tracker{transition-duration:var(--jkl-motion-timing-productive);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard)}@keyframes jkl-downcount-ul9m2l1{0%{width:100%}to{width:0}}}
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
.jkl-radio-button__label::before {
|
|
76
76
|
content: "radio_button_unchecked";
|
|
77
77
|
margin-inline-end: 0.25em;
|
|
78
|
-
font-family: "
|
|
78
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
79
79
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
80
80
|
font-feature-settings: "liga";
|
|
81
81
|
-webkit-font-feature-settings: "liga";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-radio-button{--jkl-radio-button-error-color:#ab2e43;--jkl-radio-button-error-color:light-dark(#ab2e43,#d79ba5);border-style:none;display:flex;outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:
|
|
1
|
+
@layer jokul.components{.jkl-radio-button{--jkl-radio-button-error-color:#ab2e43;--jkl-radio-button-error-color:light-dark(#ab2e43,#d79ba5);border-style:none;display:flex;outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Jokul Material Symbols,Jokul Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-radio-button-error-color)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-bottom:var(--jkl-unit-10);margin-left:1.75em;margin-top:.25lh}}
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
justify-content: center;
|
|
61
61
|
height: 100%;
|
|
62
62
|
grid-column: 1;
|
|
63
|
-
font-family: "
|
|
63
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", monospace;
|
|
64
64
|
}
|
|
65
65
|
.jkl-search .input-wrapper:has(.clear-button) {
|
|
66
66
|
grid-template-columns: 1.3em 1fr 1.3em;
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
grid-row: 1;
|
|
91
91
|
grid-column: 1;
|
|
92
92
|
z-index: 1;
|
|
93
|
-
font-family: "
|
|
93
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
94
94
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
95
95
|
font-feature-settings: "liga";
|
|
96
96
|
-webkit-font-feature-settings: "liga";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.jkl-search{--icon-size:var(--jkl-text-input-height);--border-radius:var(--jkl-border-radius-s);--border-width:1px;--border:var(--border-width) solid var(--jkl-color-border-default);font:var(--jkl-text-style-text-medium);width:100%}.jkl-search input[type=search]{-webkit-appearance:none;appearance:none;background-color:transparent;color:var(--jkl-color-text-default);grid-column:2/3;padding:0}.jkl-search input[type=search]{border-style:none;outline:0;outline-style:none}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-search input[type=search]{border-style:revert;outline:revert;outline-style:revert}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:revert;outline-style:revert}}.jkl-search input[type=search]{font:var(--jkl-text-style-text-medium)}.jkl-search input[type=search]::-webkit-calendar-picker-indicator,.jkl-search input[type=search]::-webkit-search-cancel-button,.jkl-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none!important}.jkl-search .input-wrapper{border:var(--border);border-radius:var(--border-radius);box-sizing:border-box;display:grid;gap:.25em;grid-template-columns:1.3em 1fr;-webkit-padding-end:0;padding-inline-end:0;padding:calc(var(--jkl-unit-15) - var(--border-width))}.jkl-search .input-wrapper:before{align-items:center;content:attr(data-icon)/"";display:inline-flex;font-family:
|
|
1
|
+
.jkl-search{--icon-size:var(--jkl-text-input-height);--border-radius:var(--jkl-border-radius-s);--border-width:1px;--border:var(--border-width) solid var(--jkl-color-border-default);font:var(--jkl-text-style-text-medium);width:100%}.jkl-search input[type=search]{-webkit-appearance:none;appearance:none;background-color:transparent;color:var(--jkl-color-text-default);grid-column:2/3;padding:0}.jkl-search input[type=search]{border-style:none;outline:0;outline-style:none}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-search input[type=search]{border-style:revert;outline:revert;outline-style:revert}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:revert;outline-style:revert}}.jkl-search input[type=search]{font:var(--jkl-text-style-text-medium)}.jkl-search input[type=search]::-webkit-calendar-picker-indicator,.jkl-search input[type=search]::-webkit-search-cancel-button,.jkl-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none!important}.jkl-search .input-wrapper{border:var(--border);border-radius:var(--border-radius);box-sizing:border-box;display:grid;gap:.25em;grid-template-columns:1.3em 1fr;-webkit-padding-end:0;padding-inline-end:0;padding:calc(var(--jkl-unit-15) - var(--border-width))}.jkl-search .input-wrapper:before{align-items:center;content:attr(data-icon)/"";display:inline-flex;font-family:Jokul Material Symbols,Jokul Material Symbols Fallback,monospace;grid-column:1;height:100%;justify-content:center}.jkl-search .input-wrapper:has(.clear-button){grid-template-columns:1.3em 1fr 1.3em}.jkl-search:has(input:not(:valid),input:placeholder-shown) .clear-button{display:none}.jkl-search .clear-button{-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:100%;color:var(--jkl-color-text-default);cursor:pointer;display:grid;height:100%;padding:0;position:relative}.jkl-search .clear-button:before{align-items:center;content:"close"/"";display:inline-grid;justify-content:center;place-self:center;align-self:center;display:inline-block;font-family:Jokul Material Symbols,Jokul Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;grid-column:1;grid-row:1;line-height:1;z-index:1;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:after{--tap-size:1.25lh;background-color:var(--jkl-color-text-default);border-radius:inherit;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:hover:after{opacity:.15}.jkl-search .clear-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@use "../../jkl/index" as jkl;
|
|
2
|
-
@use "
|
|
2
|
+
@use "../icon/base-styles" as icon;
|
|
3
3
|
|
|
4
4
|
.jkl-search {
|
|
5
5
|
--icon-size: var(--jkl-text-input-height);
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
height: 100%;
|
|
48
48
|
grid-column: 1;
|
|
49
49
|
|
|
50
|
-
@include jkl.use-font-family("
|
|
50
|
+
@include jkl.use-font-family("Jokul Material Symbols");
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
&:has(.clear-button) {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
.jkl-radio-button__label::before {
|
|
76
76
|
content: "radio_button_unchecked";
|
|
77
77
|
margin-inline-end: 0.25em;
|
|
78
|
-
font-family: "
|
|
78
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
79
79
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
80
80
|
font-feature-settings: "liga";
|
|
81
81
|
-webkit-font-feature-settings: "liga";
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
--color: var(--jkl-color-text-default);
|
|
180
180
|
}
|
|
181
181
|
.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 {
|
|
182
|
-
animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-
|
|
182
|
+
animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-umjgmwi forwards;
|
|
183
183
|
}
|
|
184
184
|
.jkl-form-support-label--sr-only {
|
|
185
185
|
border: 0 !important;
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
.jkl-label:has(+ .jkl-input-group-description) {
|
|
234
234
|
margin-block-end: var(--jkl-spacing-4);
|
|
235
235
|
}
|
|
236
|
-
@keyframes jkl-support-icon-entrance-
|
|
236
|
+
@keyframes jkl-support-icon-entrance-umjgmwi {
|
|
237
237
|
0% {
|
|
238
238
|
margin-right: 0;
|
|
239
239
|
opacity: 0;
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
@layer jokul.components {
|
|
274
274
|
.jkl-icon {
|
|
275
275
|
--jkl-icon-fill: 0;
|
|
276
|
-
font-family: "
|
|
276
|
+
font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
|
|
277
277
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
|
|
278
278
|
font-feature-settings: "liga";
|
|
279
279
|
-webkit-font-feature-settings: "liga";
|