@fremtind/jokul 1.7.1 → 1.7.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/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +6 -6
- 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 +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/core/core.css +7 -0
- package/styles/core/core.min.css +1 -1
- package/styles/core/global/_base-class.scss +8 -0
- package/styles/styles.css +36 -36
- package/styles/styles.min.css +1 -1
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-u27tyea 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-u27tyea {
|
|
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-u27tyeg;
|
|
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-u27tyff;
|
|
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-u27tyg2;
|
|
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-u27tyeg {
|
|
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-u27tyff {
|
|
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-u27tyg2 {
|
|
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-u27tygy;
|
|
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-u27tygz;
|
|
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-u27tygz;
|
|
1287
1287
|
}
|
|
1288
1288
|
}
|
|
1289
|
-
@keyframes jkl-sweep-
|
|
1289
|
+
@keyframes jkl-sweep-u27tygy {
|
|
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-u27tygz {
|
|
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-u27tyh9 {
|
|
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-u27tyi8 {
|
|
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-u27tyh9 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-u27tyi8 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-u27tyif {
|
|
1736
1736
|
0% {
|
|
1737
1737
|
width: 0;
|
|
1738
1738
|
height: 0;
|
|
@@ -1796,7 +1796,7 @@ 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-u27tyif 150ms ease-in-out forwards;
|
|
1800
1800
|
opacity: 1;
|
|
1801
1801
|
}
|
|
1802
1802
|
.jkl-checkbox-panel:has([aria-invalid=true]) {
|
|
@@ -2491,10 +2491,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
2491
2491
|
}
|
|
2492
2492
|
}
|
|
2493
2493
|
.jkl-countdown__tracker {
|
|
2494
|
-
animation: jkl-downcount-
|
|
2494
|
+
animation: jkl-downcount-u27tyii var(--duration) linear forwards;
|
|
2495
2495
|
animation-play-state: var(--play-state, running);
|
|
2496
2496
|
}
|
|
2497
|
-
@keyframes jkl-downcount-
|
|
2497
|
+
@keyframes jkl-downcount-u27tyii {
|
|
2498
2498
|
from {
|
|
2499
2499
|
width: 100%;
|
|
2500
2500
|
}
|
|
@@ -3170,7 +3170,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3170
3170
|
}
|
|
3171
3171
|
}
|
|
3172
3172
|
|
|
3173
|
-
@keyframes jkl-show-
|
|
3173
|
+
@keyframes jkl-show-u27tyja {
|
|
3174
3174
|
from {
|
|
3175
3175
|
transform: translate3d(0, 0.5rem, 0);
|
|
3176
3176
|
opacity: 0;
|
|
@@ -3205,7 +3205,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3205
3205
|
}
|
|
3206
3206
|
}
|
|
3207
3207
|
.jkl-feedback__fade-in {
|
|
3208
|
-
animation: jkl-show-
|
|
3208
|
+
animation: jkl-show-u27tyja 0.25s ease-out;
|
|
3209
3209
|
}
|
|
3210
3210
|
.jkl-feedback__buttons {
|
|
3211
3211
|
display: flex;
|
|
@@ -3447,7 +3447,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3447
3447
|
--background-color: var(--jkl-color-background-alert-success);
|
|
3448
3448
|
}
|
|
3449
3449
|
.jkl-message--dismissed {
|
|
3450
|
-
animation: jkl-dismiss-
|
|
3450
|
+
animation: jkl-dismiss-u27tyk9 400ms ease-in-out forwards;
|
|
3451
3451
|
transition: visibility 0ms 400ms;
|
|
3452
3452
|
visibility: hidden;
|
|
3453
3453
|
}
|
|
@@ -3467,7 +3467,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3467
3467
|
}
|
|
3468
3468
|
}
|
|
3469
3469
|
|
|
3470
|
-
@keyframes jkl-dismiss-
|
|
3470
|
+
@keyframes jkl-dismiss-u27tyk9 {
|
|
3471
3471
|
from {
|
|
3472
3472
|
opacity: 1;
|
|
3473
3473
|
transform: translate3d(0, 0, 0);
|
|
@@ -3524,7 +3524,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3524
3524
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
3525
3525
|
}
|
|
3526
3526
|
|
|
3527
|
-
@keyframes jkl-dot-in-
|
|
3527
|
+
@keyframes jkl-dot-in-u27tyl7 {
|
|
3528
3528
|
0% {
|
|
3529
3529
|
transform: scale(0.8);
|
|
3530
3530
|
}
|
|
@@ -3570,7 +3570,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3570
3570
|
}
|
|
3571
3571
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
3572
3572
|
--dot-color: var(--jkl-color-border-action);
|
|
3573
|
-
animation: jkl-dot-in-
|
|
3573
|
+
animation: jkl-dot-in-u27tyl7 150ms ease;
|
|
3574
3574
|
}
|
|
3575
3575
|
@media screen and (forced-colors: active) {
|
|
3576
3576
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -4722,7 +4722,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4722
4722
|
transition-timing-function: ease;
|
|
4723
4723
|
transition-duration: 150ms;
|
|
4724
4724
|
}
|
|
4725
|
-
@keyframes jkl-downcount-
|
|
4725
|
+
@keyframes jkl-downcount-u27tym3 {
|
|
4726
4726
|
from {
|
|
4727
4727
|
width: 100%;
|
|
4728
4728
|
}
|
|
@@ -4732,7 +4732,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4732
4732
|
}
|
|
4733
4733
|
}
|
|
4734
4734
|
@layer jokul.components {
|
|
4735
|
-
@keyframes jkl-dot-in-
|
|
4735
|
+
@keyframes jkl-dot-in-u27tymh {
|
|
4736
4736
|
0% {
|
|
4737
4737
|
transform: scale(0.8);
|
|
4738
4738
|
}
|
|
@@ -4780,7 +4780,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4780
4780
|
}
|
|
4781
4781
|
}
|
|
4782
4782
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
|
|
4783
|
-
animation: jkl-dot-in-
|
|
4783
|
+
animation: jkl-dot-in-u27tymh 150ms ease;
|
|
4784
4784
|
}
|
|
4785
4785
|
.jkl-radio-panel:has(:checked) {
|
|
4786
4786
|
--radio-dot-color: var(--jkl-color-border-action);
|
|
@@ -5082,7 +5082,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
5082
5082
|
margin-bottom: 0;
|
|
5083
5083
|
}
|
|
5084
5084
|
.jkl-system-message--dismissed {
|
|
5085
|
-
animation: jkl-dismiss-
|
|
5085
|
+
animation: jkl-dismiss-u27tynd 400ms forwards;
|
|
5086
5086
|
transition: block 400ms 400ms;
|
|
5087
5087
|
}
|
|
5088
5088
|
.jkl-system-message--info {
|
|
@@ -5113,7 +5113,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
5113
5113
|
}
|
|
5114
5114
|
}
|
|
5115
5115
|
|
|
5116
|
-
@keyframes jkl-dismiss-
|
|
5116
|
+
@keyframes jkl-dismiss-u27tynd {
|
|
5117
5117
|
from {
|
|
5118
5118
|
opacity: 1;
|
|
5119
5119
|
transform: translateY(0);
|
|
@@ -6007,14 +6007,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6007
6007
|
|
|
6008
6008
|
.jkl-toast[data-animation=entering],
|
|
6009
6009
|
.jkl-toast[data-animation=queued] {
|
|
6010
|
-
animation: jkl-entering-
|
|
6010
|
+
animation: jkl-entering-u27tyno 200ms ease-out forwards;
|
|
6011
6011
|
}
|
|
6012
6012
|
|
|
6013
6013
|
.jkl-toast[data-animation=exiting] {
|
|
6014
|
-
animation: jkl-exiting-
|
|
6014
|
+
animation: jkl-exiting-u27tyol 150ms ease-in forwards;
|
|
6015
6015
|
}
|
|
6016
6016
|
|
|
6017
|
-
@keyframes jkl-entering-
|
|
6017
|
+
@keyframes jkl-entering-u27tyno {
|
|
6018
6018
|
from {
|
|
6019
6019
|
opacity: 0;
|
|
6020
6020
|
transform: translate3d(0, 50%, 0);
|
|
@@ -6024,7 +6024,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6024
6024
|
transform: translate3d(0, 0, 0);
|
|
6025
6025
|
}
|
|
6026
6026
|
}
|
|
6027
|
-
@keyframes jkl-exiting-
|
|
6027
|
+
@keyframes jkl-exiting-u27tyol {
|
|
6028
6028
|
from {
|
|
6029
6029
|
opacity: 1;
|
|
6030
6030
|
transform: translate3d(0, 0, 0);
|