@fremtind/jokul 1.6.0 → 1.6.1
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/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +190 -5
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -3
- package/styles/components/checkbox-panel/checkbox-panel.scss +3 -5
- 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 +11 -11
- package/styles/components/file-input/file-input.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/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 +4 -4
- 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/styles.css +37 -39
- package/styles/styles.min.css +1 -3
package/styles/styles.css
CHANGED
|
@@ -597,7 +597,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
597
597
|
--color: var(--jkl-color-text-default);
|
|
598
598
|
}
|
|
599
599
|
.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 {
|
|
600
|
-
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-
|
|
600
|
+
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uy8zi63 forwards;
|
|
601
601
|
}
|
|
602
602
|
.jkl-form-support-label--sr-only {
|
|
603
603
|
border: 0 !important;
|
|
@@ -685,7 +685,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
685
685
|
text-wrap: pretty;
|
|
686
686
|
}
|
|
687
687
|
|
|
688
|
-
@keyframes jkl-support-icon-entrance-
|
|
688
|
+
@keyframes jkl-support-icon-entrance-uy8zi63 {
|
|
689
689
|
0% {
|
|
690
690
|
margin-right: 0;
|
|
691
691
|
opacity: 0;
|
|
@@ -1085,15 +1085,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1085
1085
|
animation: 2500ms linear infinite;
|
|
1086
1086
|
}
|
|
1087
1087
|
.jkl-loader__dot--left {
|
|
1088
|
-
animation-name: jkl-loader-left-spin-
|
|
1088
|
+
animation-name: jkl-loader-left-spin-uy8zi6e;
|
|
1089
1089
|
margin-right: 1.71em;
|
|
1090
1090
|
}
|
|
1091
1091
|
.jkl-loader__dot--middle {
|
|
1092
|
-
animation-name: jkl-loader-middle-spin-
|
|
1092
|
+
animation-name: jkl-loader-middle-spin-uy8zi6n;
|
|
1093
1093
|
margin-right: 1.9em;
|
|
1094
1094
|
}
|
|
1095
1095
|
.jkl-loader__dot--right {
|
|
1096
|
-
animation-name: jkl-loader-right-spin-
|
|
1096
|
+
animation-name: jkl-loader-right-spin-uy8zi6x;
|
|
1097
1097
|
}
|
|
1098
1098
|
@media screen and (forced-colors: active) {
|
|
1099
1099
|
.jkl-loader__dot {
|
|
@@ -1120,7 +1120,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1120
1120
|
.jkl-loader--small > .jkl-loader__dot--middle {
|
|
1121
1121
|
margin-right: 0.3em;
|
|
1122
1122
|
}
|
|
1123
|
-
@keyframes jkl-loader-left-spin-
|
|
1123
|
+
@keyframes jkl-loader-left-spin-uy8zi6e {
|
|
1124
1124
|
0% {
|
|
1125
1125
|
transform: rotate(0) scale(0);
|
|
1126
1126
|
}
|
|
@@ -1134,7 +1134,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1134
1134
|
transform: rotate(180deg) scale(0);
|
|
1135
1135
|
}
|
|
1136
1136
|
}
|
|
1137
|
-
@keyframes jkl-loader-middle-spin-
|
|
1137
|
+
@keyframes jkl-loader-middle-spin-uy8zi6n {
|
|
1138
1138
|
0% {
|
|
1139
1139
|
transform: rotate(20deg) scale(0);
|
|
1140
1140
|
}
|
|
@@ -1151,7 +1151,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1151
1151
|
transform: rotate(200deg) scale(0);
|
|
1152
1152
|
}
|
|
1153
1153
|
}
|
|
1154
|
-
@keyframes jkl-loader-right-spin-
|
|
1154
|
+
@keyframes jkl-loader-right-spin-uy8zi6x {
|
|
1155
1155
|
0% {
|
|
1156
1156
|
transform: rotate(40deg) scale(0);
|
|
1157
1157
|
}
|
|
@@ -1199,7 +1199,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1199
1199
|
bottom: 0;
|
|
1200
1200
|
width: 12.5rem;
|
|
1201
1201
|
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%);
|
|
1202
|
-
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-
|
|
1202
|
+
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uy8zi7p;
|
|
1203
1203
|
}
|
|
1204
1204
|
@media (width >= 0) and (max-width: 679px) {
|
|
1205
1205
|
.jkl-skeleton-animation {
|
|
@@ -1229,7 +1229,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1229
1229
|
@media screen and (forced-colors: active) {
|
|
1230
1230
|
.jkl-skeleton-element {
|
|
1231
1231
|
border: 1px solid CanvasText;
|
|
1232
|
-
animation: 2s ease infinite jkl-blink-
|
|
1232
|
+
animation: 2s ease infinite jkl-blink-uy8zi7u;
|
|
1233
1233
|
}
|
|
1234
1234
|
}
|
|
1235
1235
|
.jkl-skeleton-input {
|
|
@@ -1283,10 +1283,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1283
1283
|
}
|
|
1284
1284
|
@media screen and (forced-colors: active) {
|
|
1285
1285
|
.jkl-skeleton-table {
|
|
1286
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
1286
|
+
animation: 2s ease-in-out infinite jkl-blink-uy8zi7u;
|
|
1287
1287
|
}
|
|
1288
1288
|
}
|
|
1289
|
-
@keyframes jkl-sweep-
|
|
1289
|
+
@keyframes jkl-sweep-uy8zi7p {
|
|
1290
1290
|
0% {
|
|
1291
1291
|
transform: translateX(calc(0vw - 200px));
|
|
1292
1292
|
}
|
|
@@ -1294,7 +1294,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1294
1294
|
transform: translateX(calc(100vw + 400px));
|
|
1295
1295
|
}
|
|
1296
1296
|
}
|
|
1297
|
-
@keyframes jkl-blink-
|
|
1297
|
+
@keyframes jkl-blink-uy8zi7u {
|
|
1298
1298
|
0% {
|
|
1299
1299
|
opacity: 1;
|
|
1300
1300
|
}
|
|
@@ -1514,7 +1514,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1514
1514
|
--jkl-checkbox-box-size: 1.125rem;
|
|
1515
1515
|
--jkl-checkbox-line-height: 1.5rem;
|
|
1516
1516
|
}
|
|
1517
|
-
@keyframes jkl-checkbox-checked-
|
|
1517
|
+
@keyframes jkl-checkbox-checked-uy8zi8q {
|
|
1518
1518
|
0% {
|
|
1519
1519
|
width: 0;
|
|
1520
1520
|
height: 0;
|
|
@@ -1528,7 +1528,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1528
1528
|
height: 58%;
|
|
1529
1529
|
}
|
|
1530
1530
|
}
|
|
1531
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
1531
|
+
@keyframes jkl-checkbox-indeterminate-uy8zi9g {
|
|
1532
1532
|
0% {
|
|
1533
1533
|
width: 0;
|
|
1534
1534
|
}
|
|
@@ -1557,11 +1557,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1557
1557
|
left: calc(-0.5 * var(--jkl-checkbox-box-size));
|
|
1558
1558
|
}
|
|
1559
1559
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
1560
|
-
animation: jkl-checkbox-checked-
|
|
1560
|
+
animation: jkl-checkbox-checked-uy8zi8q 150ms ease-in-out forwards;
|
|
1561
1561
|
opacity: 1;
|
|
1562
1562
|
}
|
|
1563
1563
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
1564
|
-
animation: jkl-checkbox-indeterminate-
|
|
1564
|
+
animation: jkl-checkbox-indeterminate-uy8zi9g 150ms ease-in-out forwards;
|
|
1565
1565
|
opacity: 1;
|
|
1566
1566
|
}
|
|
1567
1567
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -1732,7 +1732,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1732
1732
|
--outer-border-thickness: 0.125rem;
|
|
1733
1733
|
}
|
|
1734
1734
|
|
|
1735
|
-
@keyframes jkl-checkbox-checked-
|
|
1735
|
+
@keyframes jkl-checkbox-checked-uy8zi9z {
|
|
1736
1736
|
0% {
|
|
1737
1737
|
width: 0;
|
|
1738
1738
|
height: 0;
|
|
@@ -1796,13 +1796,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1796
1796
|
}
|
|
1797
1797
|
}
|
|
1798
1798
|
.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
|
|
1799
|
-
animation: jkl-checkbox-checked-
|
|
1799
|
+
animation: jkl-checkbox-checked-uy8zi9z 150ms ease-in-out forwards;
|
|
1800
1800
|
opacity: 1;
|
|
1801
1801
|
}
|
|
1802
1802
|
.jkl-checkbox-panel:has([aria-invalid=true]) {
|
|
1803
|
-
--checkbox-background-color: var(
|
|
1804
|
-
--jkl-color-background-alert-error
|
|
1805
|
-
);
|
|
1803
|
+
--checkbox-background-color: var(--jkl-color-background-alert-error);
|
|
1806
1804
|
--checkbox-check-color: var(--jkl-color-text-on-alert);
|
|
1807
1805
|
}
|
|
1808
1806
|
}
|
|
@@ -2493,10 +2491,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
2493
2491
|
}
|
|
2494
2492
|
}
|
|
2495
2493
|
.jkl-countdown__tracker {
|
|
2496
|
-
animation: jkl-downcount-
|
|
2494
|
+
animation: jkl-downcount-uy8ziaj var(--duration) linear forwards;
|
|
2497
2495
|
animation-play-state: var(--play-state, running);
|
|
2498
2496
|
}
|
|
2499
|
-
@keyframes jkl-downcount-
|
|
2497
|
+
@keyframes jkl-downcount-uy8ziaj {
|
|
2500
2498
|
from {
|
|
2501
2499
|
width: 100%;
|
|
2502
2500
|
}
|
|
@@ -3110,7 +3108,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3110
3108
|
}
|
|
3111
3109
|
}
|
|
3112
3110
|
|
|
3113
|
-
@keyframes jkl-show-
|
|
3111
|
+
@keyframes jkl-show-uy8zibf {
|
|
3114
3112
|
from {
|
|
3115
3113
|
transform: translate3d(0, 0.5rem, 0);
|
|
3116
3114
|
opacity: 0;
|
|
@@ -3145,7 +3143,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3145
3143
|
}
|
|
3146
3144
|
}
|
|
3147
3145
|
.jkl-feedback__fade-in {
|
|
3148
|
-
animation: jkl-show-
|
|
3146
|
+
animation: jkl-show-uy8zibf 0.25s ease-out;
|
|
3149
3147
|
}
|
|
3150
3148
|
.jkl-feedback__buttons {
|
|
3151
3149
|
display: flex;
|
|
@@ -3387,7 +3385,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3387
3385
|
--background-color: var(--jkl-color-background-alert-success);
|
|
3388
3386
|
}
|
|
3389
3387
|
.jkl-message--dismissed {
|
|
3390
|
-
animation: jkl-dismiss-
|
|
3388
|
+
animation: jkl-dismiss-uy8zibi 400ms ease-in-out forwards;
|
|
3391
3389
|
transition: visibility 0ms 400ms;
|
|
3392
3390
|
visibility: hidden;
|
|
3393
3391
|
}
|
|
@@ -3407,7 +3405,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3407
3405
|
}
|
|
3408
3406
|
}
|
|
3409
3407
|
|
|
3410
|
-
@keyframes jkl-dismiss-
|
|
3408
|
+
@keyframes jkl-dismiss-uy8zibi {
|
|
3411
3409
|
from {
|
|
3412
3410
|
opacity: 1;
|
|
3413
3411
|
transform: translate3d(0, 0, 0);
|
|
@@ -3464,7 +3462,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3464
3462
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
3465
3463
|
}
|
|
3466
3464
|
|
|
3467
|
-
@keyframes jkl-dot-in-
|
|
3465
|
+
@keyframes jkl-dot-in-uy8ziby {
|
|
3468
3466
|
0% {
|
|
3469
3467
|
transform: scale(0.8);
|
|
3470
3468
|
}
|
|
@@ -3510,7 +3508,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3510
3508
|
}
|
|
3511
3509
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
3512
3510
|
--dot-color: var(--jkl-color-border-action);
|
|
3513
|
-
animation: jkl-dot-in-
|
|
3511
|
+
animation: jkl-dot-in-uy8ziby 150ms ease;
|
|
3514
3512
|
}
|
|
3515
3513
|
@media screen and (forced-colors: active) {
|
|
3516
3514
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -4598,7 +4596,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4598
4596
|
transition-timing-function: ease;
|
|
4599
4597
|
transition-duration: 150ms;
|
|
4600
4598
|
}
|
|
4601
|
-
@keyframes jkl-downcount-
|
|
4599
|
+
@keyframes jkl-downcount-uy8zicq {
|
|
4602
4600
|
from {
|
|
4603
4601
|
width: 100%;
|
|
4604
4602
|
}
|
|
@@ -4608,7 +4606,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4608
4606
|
}
|
|
4609
4607
|
}
|
|
4610
4608
|
@layer jokul.components {
|
|
4611
|
-
@keyframes jkl-dot-in-
|
|
4609
|
+
@keyframes jkl-dot-in-uy8zidg {
|
|
4612
4610
|
0% {
|
|
4613
4611
|
transform: scale(0.8);
|
|
4614
4612
|
}
|
|
@@ -4656,7 +4654,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4656
4654
|
}
|
|
4657
4655
|
}
|
|
4658
4656
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
|
|
4659
|
-
animation: jkl-dot-in-
|
|
4657
|
+
animation: jkl-dot-in-uy8zidg 150ms ease;
|
|
4660
4658
|
}
|
|
4661
4659
|
.jkl-radio-panel:has(:checked) {
|
|
4662
4660
|
--radio-dot-color: var(--jkl-color-border-action);
|
|
@@ -4958,7 +4956,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4958
4956
|
margin-bottom: 0;
|
|
4959
4957
|
}
|
|
4960
4958
|
.jkl-system-message--dismissed {
|
|
4961
|
-
animation: jkl-dismiss-
|
|
4959
|
+
animation: jkl-dismiss-uy8zie2 400ms forwards;
|
|
4962
4960
|
transition: block 400ms 400ms;
|
|
4963
4961
|
}
|
|
4964
4962
|
.jkl-system-message--info {
|
|
@@ -4989,7 +4987,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4989
4987
|
}
|
|
4990
4988
|
}
|
|
4991
4989
|
|
|
4992
|
-
@keyframes jkl-dismiss-
|
|
4990
|
+
@keyframes jkl-dismiss-uy8zie2 {
|
|
4993
4991
|
from {
|
|
4994
4992
|
opacity: 1;
|
|
4995
4993
|
transform: translateY(0);
|
|
@@ -5883,14 +5881,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
5883
5881
|
|
|
5884
5882
|
.jkl-toast[data-animation=entering],
|
|
5885
5883
|
.jkl-toast[data-animation=queued] {
|
|
5886
|
-
animation: jkl-entering-
|
|
5884
|
+
animation: jkl-entering-uy8zieb 200ms ease-out forwards;
|
|
5887
5885
|
}
|
|
5888
5886
|
|
|
5889
5887
|
.jkl-toast[data-animation=exiting] {
|
|
5890
|
-
animation: jkl-exiting-
|
|
5888
|
+
animation: jkl-exiting-uy8zief 150ms ease-in forwards;
|
|
5891
5889
|
}
|
|
5892
5890
|
|
|
5893
|
-
@keyframes jkl-entering-
|
|
5891
|
+
@keyframes jkl-entering-uy8zieb {
|
|
5894
5892
|
from {
|
|
5895
5893
|
opacity: 0;
|
|
5896
5894
|
transform: translate3d(0, 50%, 0);
|
|
@@ -5900,7 +5898,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
5900
5898
|
transform: translate3d(0, 0, 0);
|
|
5901
5899
|
}
|
|
5902
5900
|
}
|
|
5903
|
-
@keyframes jkl-exiting-
|
|
5901
|
+
@keyframes jkl-exiting-uy8zief {
|
|
5904
5902
|
from {
|
|
5905
5903
|
opacity: 1;
|
|
5906
5904
|
transform: translate3d(0, 0, 0);
|