@fremtind/jokul 1.2.1 → 1.2.2
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/package.json +1 -1
- package/src/fonts/styles/webfonts.scss +9 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +12 -12
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/icon/_base-styles.scss +1 -1
- 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/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -5
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +2 -2
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +5 -5
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/fonts/webfonts.css +8 -1
- package/styles/fonts/webfonts.min.css +1 -1
- package/styles/fonts/webfonts.scss +9 -1
- package/styles/styles.css +38 -38
- package/styles/styles.min.css +1 -1
package/styles/styles.css
CHANGED
|
@@ -357,7 +357,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
357
357
|
|
|
358
358
|
.jkl-icon {
|
|
359
359
|
--jkl-icon-fill: 0;
|
|
360
|
-
font-family: "Fremtind Material Symbols",
|
|
360
|
+
font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
|
|
361
361
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
|
|
362
362
|
font-feature-settings: "liga";
|
|
363
363
|
-webkit-font-feature-settings: "liga";
|
|
@@ -599,7 +599,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
599
599
|
--color: var(--jkl-color-text-default);
|
|
600
600
|
}
|
|
601
601
|
.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 {
|
|
602
|
-
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-
|
|
602
|
+
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uj5ybpo forwards;
|
|
603
603
|
}
|
|
604
604
|
.jkl-form-support-label--sr-only {
|
|
605
605
|
border: 0 !important;
|
|
@@ -674,7 +674,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
674
674
|
white-space: nowrap !important; /* 3 */
|
|
675
675
|
}
|
|
676
676
|
|
|
677
|
-
@keyframes jkl-support-icon-entrance-
|
|
677
|
+
@keyframes jkl-support-icon-entrance-uj5ybpo {
|
|
678
678
|
0% {
|
|
679
679
|
margin-right: 0;
|
|
680
680
|
opacity: 0;
|
|
@@ -873,7 +873,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
873
873
|
margin-block-start: -0.1em;
|
|
874
874
|
padding-inline-start: 0.2em;
|
|
875
875
|
vertical-align: middle;
|
|
876
|
-
font-family: "Fremtind Material Symbols",
|
|
876
|
+
font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
|
|
877
877
|
font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
|
|
878
878
|
font-feature-settings: "liga";
|
|
879
879
|
-webkit-font-feature-settings: "liga";
|
|
@@ -1070,15 +1070,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1070
1070
|
animation: 2500ms linear infinite;
|
|
1071
1071
|
}
|
|
1072
1072
|
.jkl-loader__dot--left {
|
|
1073
|
-
animation-name: jkl-loader-left-spin-
|
|
1073
|
+
animation-name: jkl-loader-left-spin-uj5ybq2;
|
|
1074
1074
|
margin-right: 1.71em;
|
|
1075
1075
|
}
|
|
1076
1076
|
.jkl-loader__dot--middle {
|
|
1077
|
-
animation-name: jkl-loader-middle-spin-
|
|
1077
|
+
animation-name: jkl-loader-middle-spin-uj5ybqh;
|
|
1078
1078
|
margin-right: 1.9em;
|
|
1079
1079
|
}
|
|
1080
1080
|
.jkl-loader__dot--right {
|
|
1081
|
-
animation-name: jkl-loader-right-spin-
|
|
1081
|
+
animation-name: jkl-loader-right-spin-uj5ybre;
|
|
1082
1082
|
}
|
|
1083
1083
|
@media screen and (forced-colors: active) {
|
|
1084
1084
|
.jkl-loader__dot {
|
|
@@ -1106,7 +1106,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1106
1106
|
margin-right: 0.3em;
|
|
1107
1107
|
}
|
|
1108
1108
|
|
|
1109
|
-
@keyframes jkl-loader-left-spin-
|
|
1109
|
+
@keyframes jkl-loader-left-spin-uj5ybq2 {
|
|
1110
1110
|
0% {
|
|
1111
1111
|
transform: rotate(0) scale(0);
|
|
1112
1112
|
}
|
|
@@ -1120,7 +1120,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1120
1120
|
transform: rotate(180deg) scale(0);
|
|
1121
1121
|
}
|
|
1122
1122
|
}
|
|
1123
|
-
@keyframes jkl-loader-middle-spin-
|
|
1123
|
+
@keyframes jkl-loader-middle-spin-uj5ybqh {
|
|
1124
1124
|
0% {
|
|
1125
1125
|
transform: rotate(20deg) scale(0);
|
|
1126
1126
|
}
|
|
@@ -1137,7 +1137,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1137
1137
|
transform: rotate(200deg) scale(0);
|
|
1138
1138
|
}
|
|
1139
1139
|
}
|
|
1140
|
-
@keyframes jkl-loader-right-spin-
|
|
1140
|
+
@keyframes jkl-loader-right-spin-uj5ybre {
|
|
1141
1141
|
0% {
|
|
1142
1142
|
transform: rotate(40deg) scale(0);
|
|
1143
1143
|
}
|
|
@@ -1185,7 +1185,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1185
1185
|
bottom: 0;
|
|
1186
1186
|
width: 12.5rem;
|
|
1187
1187
|
background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
|
|
1188
|
-
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-
|
|
1188
|
+
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uj5ybrp;
|
|
1189
1189
|
}
|
|
1190
1190
|
@media (width >= 0) and (max-width: 679px) {
|
|
1191
1191
|
.jkl-skeleton-animation {
|
|
@@ -1216,7 +1216,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1216
1216
|
@media screen and (forced-colors: active) {
|
|
1217
1217
|
.jkl-skeleton-element {
|
|
1218
1218
|
border: 1px solid CanvasText;
|
|
1219
|
-
animation: 2s ease infinite jkl-blink-
|
|
1219
|
+
animation: 2s ease infinite jkl-blink-uj5ybso;
|
|
1220
1220
|
}
|
|
1221
1221
|
}
|
|
1222
1222
|
|
|
@@ -1272,11 +1272,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1272
1272
|
}
|
|
1273
1273
|
@media screen and (forced-colors: active) {
|
|
1274
1274
|
.jkl-skeleton-table {
|
|
1275
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
1275
|
+
animation: 2s ease-in-out infinite jkl-blink-uj5ybso;
|
|
1276
1276
|
}
|
|
1277
1277
|
}
|
|
1278
1278
|
|
|
1279
|
-
@keyframes jkl-sweep-
|
|
1279
|
+
@keyframes jkl-sweep-uj5ybrp {
|
|
1280
1280
|
0% {
|
|
1281
1281
|
transform: translateX(calc(0vw - 200px));
|
|
1282
1282
|
}
|
|
@@ -1284,7 +1284,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1284
1284
|
transform: translateX(calc(100vw + 400px));
|
|
1285
1285
|
}
|
|
1286
1286
|
}
|
|
1287
|
-
@keyframes jkl-blink-
|
|
1287
|
+
@keyframes jkl-blink-uj5ybso {
|
|
1288
1288
|
0% {
|
|
1289
1289
|
opacity: 1;
|
|
1290
1290
|
}
|
|
@@ -1501,7 +1501,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1501
1501
|
--jkl-checkbox-line-height: 1.5rem;
|
|
1502
1502
|
}
|
|
1503
1503
|
|
|
1504
|
-
@keyframes jkl-checkbox-checked-
|
|
1504
|
+
@keyframes jkl-checkbox-checked-uj5ybsz {
|
|
1505
1505
|
0% {
|
|
1506
1506
|
width: 0;
|
|
1507
1507
|
height: 0;
|
|
@@ -1515,7 +1515,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1515
1515
|
height: 58%;
|
|
1516
1516
|
}
|
|
1517
1517
|
}
|
|
1518
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
1518
|
+
@keyframes jkl-checkbox-indeterminate-uj5ybtf {
|
|
1519
1519
|
0% {
|
|
1520
1520
|
width: 0;
|
|
1521
1521
|
}
|
|
@@ -1544,11 +1544,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1544
1544
|
left: calc(-0.5 * var(--jkl-checkbox-box-size));
|
|
1545
1545
|
}
|
|
1546
1546
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
1547
|
-
animation: jkl-checkbox-checked-
|
|
1547
|
+
animation: jkl-checkbox-checked-uj5ybsz 150ms ease-in-out forwards;
|
|
1548
1548
|
opacity: 1;
|
|
1549
1549
|
}
|
|
1550
1550
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
1551
|
-
animation: jkl-checkbox-indeterminate-
|
|
1551
|
+
animation: jkl-checkbox-indeterminate-uj5ybtf 150ms ease-in-out forwards;
|
|
1552
1552
|
opacity: 1;
|
|
1553
1553
|
}
|
|
1554
1554
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -1719,7 +1719,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1719
1719
|
--outer-border-thickness: 0.125rem;
|
|
1720
1720
|
}
|
|
1721
1721
|
|
|
1722
|
-
@keyframes jkl-checkbox-checked-
|
|
1722
|
+
@keyframes jkl-checkbox-checked-uj5ybty {
|
|
1723
1723
|
0% {
|
|
1724
1724
|
width: 0;
|
|
1725
1725
|
height: 0;
|
|
@@ -1782,7 +1782,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1782
1782
|
}
|
|
1783
1783
|
}
|
|
1784
1784
|
.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
|
|
1785
|
-
animation: jkl-checkbox-checked-
|
|
1785
|
+
animation: jkl-checkbox-checked-uj5ybty 150ms ease-in-out forwards;
|
|
1786
1786
|
opacity: 1;
|
|
1787
1787
|
}
|
|
1788
1788
|
.jkl-checkbox-panel:has([aria-invalid=true]) {
|
|
@@ -2482,11 +2482,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
2482
2482
|
}
|
|
2483
2483
|
}
|
|
2484
2484
|
.jkl-countdown__tracker {
|
|
2485
|
-
animation: jkl-downcount-
|
|
2485
|
+
animation: jkl-downcount-uj5ybuc var(--duration) linear forwards;
|
|
2486
2486
|
animation-play-state: var(--play-state, running);
|
|
2487
2487
|
}
|
|
2488
2488
|
|
|
2489
|
-
@keyframes jkl-downcount-
|
|
2489
|
+
@keyframes jkl-downcount-uj5ybuc {
|
|
2490
2490
|
from {
|
|
2491
2491
|
width: 100%;
|
|
2492
2492
|
}
|
|
@@ -3098,7 +3098,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3098
3098
|
}
|
|
3099
3099
|
}
|
|
3100
3100
|
|
|
3101
|
-
@keyframes jkl-show-
|
|
3101
|
+
@keyframes jkl-show-uj5ybuy {
|
|
3102
3102
|
from {
|
|
3103
3103
|
transform: translate3d(0, 0.5rem, 0);
|
|
3104
3104
|
opacity: 0;
|
|
@@ -3133,7 +3133,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3133
3133
|
}
|
|
3134
3134
|
}
|
|
3135
3135
|
.jkl-feedback__fade-in {
|
|
3136
|
-
animation: jkl-show-
|
|
3136
|
+
animation: jkl-show-uj5ybuy 0.25s ease-out;
|
|
3137
3137
|
}
|
|
3138
3138
|
.jkl-feedback__buttons {
|
|
3139
3139
|
display: flex;
|
|
@@ -3375,7 +3375,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3375
3375
|
--background-color: var(--jkl-color-background-alert-success);
|
|
3376
3376
|
}
|
|
3377
3377
|
.jkl-message--dismissed {
|
|
3378
|
-
animation: jkl-dismiss-
|
|
3378
|
+
animation: jkl-dismiss-uj5ybvr 400ms ease-in-out forwards;
|
|
3379
3379
|
transition: visibility 0ms 400ms;
|
|
3380
3380
|
visibility: hidden;
|
|
3381
3381
|
}
|
|
@@ -3395,7 +3395,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3395
3395
|
}
|
|
3396
3396
|
}
|
|
3397
3397
|
|
|
3398
|
-
@keyframes jkl-dismiss-
|
|
3398
|
+
@keyframes jkl-dismiss-uj5ybvr {
|
|
3399
3399
|
from {
|
|
3400
3400
|
opacity: 1;
|
|
3401
3401
|
transform: translate3d(0, 0, 0);
|
|
@@ -3452,7 +3452,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3452
3452
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
3453
3453
|
}
|
|
3454
3454
|
|
|
3455
|
-
@keyframes jkl-dot-in-
|
|
3455
|
+
@keyframes jkl-dot-in-uj5ybwn {
|
|
3456
3456
|
0% {
|
|
3457
3457
|
transform: scale(0.8);
|
|
3458
3458
|
}
|
|
@@ -3498,7 +3498,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3498
3498
|
}
|
|
3499
3499
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
3500
3500
|
--dot-color: var(--jkl-color-border-action);
|
|
3501
|
-
animation: jkl-dot-in-
|
|
3501
|
+
animation: jkl-dot-in-uj5ybwn 150ms ease;
|
|
3502
3502
|
}
|
|
3503
3503
|
@media screen and (forced-colors: active) {
|
|
3504
3504
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -4589,7 +4589,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4589
4589
|
transition-duration: 150ms;
|
|
4590
4590
|
}
|
|
4591
4591
|
|
|
4592
|
-
@keyframes jkl-downcount-
|
|
4592
|
+
@keyframes jkl-downcount-uj5ybx6 {
|
|
4593
4593
|
from {
|
|
4594
4594
|
width: 100%;
|
|
4595
4595
|
}
|
|
@@ -4597,7 +4597,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4597
4597
|
width: 0%;
|
|
4598
4598
|
}
|
|
4599
4599
|
}
|
|
4600
|
-
@keyframes jkl-dot-in-
|
|
4600
|
+
@keyframes jkl-dot-in-uj5ybxu {
|
|
4601
4601
|
0% {
|
|
4602
4602
|
transform: scale(0.8);
|
|
4603
4603
|
}
|
|
@@ -4645,7 +4645,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4645
4645
|
}
|
|
4646
4646
|
}
|
|
4647
4647
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
|
|
4648
|
-
animation: jkl-dot-in-
|
|
4648
|
+
animation: jkl-dot-in-uj5ybxu 150ms ease;
|
|
4649
4649
|
}
|
|
4650
4650
|
.jkl-radio-panel:has(:checked) {
|
|
4651
4651
|
--radio-dot-color: var(--jkl-color-border-action);
|
|
@@ -4948,7 +4948,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4948
4948
|
margin-bottom: 0;
|
|
4949
4949
|
}
|
|
4950
4950
|
.jkl-system-message--dismissed {
|
|
4951
|
-
animation: jkl-dismiss-
|
|
4951
|
+
animation: jkl-dismiss-uj5ybyk 400ms forwards;
|
|
4952
4952
|
transition: block 400ms 400ms;
|
|
4953
4953
|
}
|
|
4954
4954
|
.jkl-system-message--info {
|
|
@@ -4979,7 +4979,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4979
4979
|
}
|
|
4980
4980
|
}
|
|
4981
4981
|
|
|
4982
|
-
@keyframes jkl-dismiss-
|
|
4982
|
+
@keyframes jkl-dismiss-uj5ybyk {
|
|
4983
4983
|
from {
|
|
4984
4984
|
opacity: 1;
|
|
4985
4985
|
transform: translateY(0);
|
|
@@ -5879,14 +5879,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
5879
5879
|
|
|
5880
5880
|
.jkl-toast[data-animation=entering],
|
|
5881
5881
|
.jkl-toast[data-animation=queued] {
|
|
5882
|
-
animation: jkl-entering-
|
|
5882
|
+
animation: jkl-entering-uj5ybyo 200ms ease-out forwards;
|
|
5883
5883
|
}
|
|
5884
5884
|
|
|
5885
5885
|
.jkl-toast[data-animation=exiting] {
|
|
5886
|
-
animation: jkl-exiting-
|
|
5886
|
+
animation: jkl-exiting-uj5ybyv 150ms ease-in forwards;
|
|
5887
5887
|
}
|
|
5888
5888
|
|
|
5889
|
-
@keyframes jkl-entering-
|
|
5889
|
+
@keyframes jkl-entering-uj5ybyo {
|
|
5890
5890
|
from {
|
|
5891
5891
|
opacity: 0;
|
|
5892
5892
|
transform: translate3d(0, 50%, 0);
|
|
@@ -5896,7 +5896,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
5896
5896
|
transform: translate3d(0, 0, 0);
|
|
5897
5897
|
}
|
|
5898
5898
|
}
|
|
5899
|
-
@keyframes jkl-exiting-
|
|
5899
|
+
@keyframes jkl-exiting-uj5ybyv {
|
|
5900
5900
|
from {
|
|
5901
5901
|
opacity: 1;
|
|
5902
5902
|
transform: translate3d(0, 0, 0);
|