@fremtind/jokul 0.30.7 → 0.30.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/package.json +2 -2
- package/styles/components/button/button.css +3 -3
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +1 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.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/input-panel/checkbox-panel.css +2 -2
- package/styles/components/input-panel/checkbox-panel.min.css +1 -1
- package/styles/components/input-panel/radio-panel.css +2 -2
- package/styles/components/input-panel/radio-panel.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 +2 -2
- 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/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 +38 -38
- package/styles/styles.min.css +1 -1
package/styles/styles.css
CHANGED
|
@@ -521,7 +521,7 @@
|
|
|
521
521
|
--background-color: transparent;
|
|
522
522
|
--border-radius: 0;
|
|
523
523
|
--border-width: 0.0625rem;
|
|
524
|
-
display: block;
|
|
524
|
+
display: inline-block;
|
|
525
525
|
cursor: pointer;
|
|
526
526
|
user-select: none;
|
|
527
527
|
background-color: var(--background-color);
|
|
@@ -620,7 +620,7 @@
|
|
|
620
620
|
height: 1rem;
|
|
621
621
|
}
|
|
622
622
|
html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
623
|
-
animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-
|
|
623
|
+
animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-unab252;
|
|
624
624
|
}
|
|
625
625
|
:not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
|
|
626
626
|
scale: 1.05;
|
|
@@ -664,7 +664,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
664
664
|
--background-color: var(--jkl-color-background-interactive-hover);
|
|
665
665
|
}
|
|
666
666
|
|
|
667
|
-
@keyframes jkl-tertiary-flash-
|
|
667
|
+
@keyframes jkl-tertiary-flash-unab252 {
|
|
668
668
|
0% {
|
|
669
669
|
opacity: 0.5;
|
|
670
670
|
scale: 1;
|
|
@@ -689,15 +689,15 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
689
689
|
animation: 2500ms linear infinite;
|
|
690
690
|
}
|
|
691
691
|
.jkl-loader__dot--left {
|
|
692
|
-
animation-name: jkl-loader-left-spin-
|
|
692
|
+
animation-name: jkl-loader-left-spin-unab25b;
|
|
693
693
|
margin-right: 1.71em;
|
|
694
694
|
}
|
|
695
695
|
.jkl-loader__dot--middle {
|
|
696
|
-
animation-name: jkl-loader-middle-spin-
|
|
696
|
+
animation-name: jkl-loader-middle-spin-unab25x;
|
|
697
697
|
margin-right: 1.9em;
|
|
698
698
|
}
|
|
699
699
|
.jkl-loader__dot--right {
|
|
700
|
-
animation-name: jkl-loader-right-spin-
|
|
700
|
+
animation-name: jkl-loader-right-spin-unab26n;
|
|
701
701
|
}
|
|
702
702
|
@media screen and (forced-colors: active) {
|
|
703
703
|
.jkl-loader__dot {
|
|
@@ -725,7 +725,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
725
725
|
margin-right: 0.3em;
|
|
726
726
|
}
|
|
727
727
|
|
|
728
|
-
@keyframes jkl-loader-left-spin-
|
|
728
|
+
@keyframes jkl-loader-left-spin-unab25b {
|
|
729
729
|
0% {
|
|
730
730
|
transform: rotate(0) scale(0);
|
|
731
731
|
}
|
|
@@ -739,7 +739,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
739
739
|
transform: rotate(180deg) scale(0);
|
|
740
740
|
}
|
|
741
741
|
}
|
|
742
|
-
@keyframes jkl-loader-middle-spin-
|
|
742
|
+
@keyframes jkl-loader-middle-spin-unab25x {
|
|
743
743
|
0% {
|
|
744
744
|
transform: rotate(20deg) scale(0);
|
|
745
745
|
}
|
|
@@ -756,7 +756,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
756
756
|
transform: rotate(200deg) scale(0);
|
|
757
757
|
}
|
|
758
758
|
}
|
|
759
|
-
@keyframes jkl-loader-right-spin-
|
|
759
|
+
@keyframes jkl-loader-right-spin-unab26n {
|
|
760
760
|
0% {
|
|
761
761
|
transform: rotate(40deg) scale(0);
|
|
762
762
|
}
|
|
@@ -804,7 +804,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
804
804
|
bottom: 0;
|
|
805
805
|
width: 12.5rem;
|
|
806
806
|
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%);
|
|
807
|
-
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-
|
|
807
|
+
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-unab26v;
|
|
808
808
|
}
|
|
809
809
|
@media (width >= 0) and (max-width: 679px) {
|
|
810
810
|
.jkl-skeleton-animation {
|
|
@@ -835,7 +835,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
835
835
|
@media screen and (forced-colors: active) {
|
|
836
836
|
.jkl-skeleton-element {
|
|
837
837
|
border: 1px solid CanvasText;
|
|
838
|
-
animation: 2s ease infinite jkl-blink-
|
|
838
|
+
animation: 2s ease infinite jkl-blink-unab27g;
|
|
839
839
|
}
|
|
840
840
|
}
|
|
841
841
|
|
|
@@ -891,11 +891,11 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
891
891
|
}
|
|
892
892
|
@media screen and (forced-colors: active) {
|
|
893
893
|
.jkl-skeleton-table {
|
|
894
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
894
|
+
animation: 2s ease-in-out infinite jkl-blink-unab27g;
|
|
895
895
|
}
|
|
896
896
|
}
|
|
897
897
|
|
|
898
|
-
@keyframes jkl-sweep-
|
|
898
|
+
@keyframes jkl-sweep-unab26v {
|
|
899
899
|
0% {
|
|
900
900
|
transform: translateX(calc(0vw - 200px));
|
|
901
901
|
}
|
|
@@ -903,7 +903,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
903
903
|
transform: translateX(calc(100vw + 400px));
|
|
904
904
|
}
|
|
905
905
|
}
|
|
906
|
-
@keyframes jkl-blink-
|
|
906
|
+
@keyframes jkl-blink-unab27g {
|
|
907
907
|
0% {
|
|
908
908
|
opacity: 1;
|
|
909
909
|
}
|
|
@@ -1468,7 +1468,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
1468
1468
|
--jkl-checkbox-line-height: 1.5rem;
|
|
1469
1469
|
}
|
|
1470
1470
|
|
|
1471
|
-
@keyframes jkl-checkbox-checked-
|
|
1471
|
+
@keyframes jkl-checkbox-checked-unab28d {
|
|
1472
1472
|
0% {
|
|
1473
1473
|
width: 0;
|
|
1474
1474
|
height: 0;
|
|
@@ -1482,7 +1482,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
1482
1482
|
height: 58%;
|
|
1483
1483
|
}
|
|
1484
1484
|
}
|
|
1485
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
1485
|
+
@keyframes jkl-checkbox-indeterminate-unab290 {
|
|
1486
1486
|
0% {
|
|
1487
1487
|
width: 0;
|
|
1488
1488
|
}
|
|
@@ -1510,11 +1510,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
1510
1510
|
top: -6px;
|
|
1511
1511
|
}
|
|
1512
1512
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
1513
|
-
animation: jkl-checkbox-checked-
|
|
1513
|
+
animation: jkl-checkbox-checked-unab28d 150ms ease-in-out forwards;
|
|
1514
1514
|
opacity: 1;
|
|
1515
1515
|
}
|
|
1516
1516
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
1517
|
-
animation: jkl-checkbox-indeterminate-
|
|
1517
|
+
animation: jkl-checkbox-indeterminate-unab290 150ms ease-in-out forwards;
|
|
1518
1518
|
opacity: 1;
|
|
1519
1519
|
}
|
|
1520
1520
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -2040,7 +2040,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
2040
2040
|
--color: var(--jkl-color-text-default);
|
|
2041
2041
|
}
|
|
2042
2042
|
.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 {
|
|
2043
|
-
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-
|
|
2043
|
+
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-unab2a0 forwards;
|
|
2044
2044
|
}
|
|
2045
2045
|
.jkl-form-support-label--sr-only {
|
|
2046
2046
|
border: 0 !important;
|
|
@@ -2115,7 +2115,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
2115
2115
|
white-space: nowrap !important; /* 3 */
|
|
2116
2116
|
}
|
|
2117
2117
|
|
|
2118
|
-
@keyframes jkl-support-icon-entrance-
|
|
2118
|
+
@keyframes jkl-support-icon-entrance-unab2a0 {
|
|
2119
2119
|
0% {
|
|
2120
2120
|
margin-right: 0;
|
|
2121
2121
|
opacity: 0;
|
|
@@ -3539,7 +3539,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
|
|
|
3539
3539
|
padding: 1rem 0 2.5rem 0;
|
|
3540
3540
|
}
|
|
3541
3541
|
|
|
3542
|
-
@keyframes jkl-show-
|
|
3542
|
+
@keyframes jkl-show-unab2a9 {
|
|
3543
3543
|
from {
|
|
3544
3544
|
transform: translate3d(0, 0.5rem, 0);
|
|
3545
3545
|
opacity: 0;
|
|
@@ -3574,7 +3574,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
|
|
|
3574
3574
|
}
|
|
3575
3575
|
}
|
|
3576
3576
|
.jkl-feedback__fade-in {
|
|
3577
|
-
animation: jkl-show-
|
|
3577
|
+
animation: jkl-show-unab2a9 0.25s ease-out;
|
|
3578
3578
|
}
|
|
3579
3579
|
.jkl-feedback__buttons {
|
|
3580
3580
|
display: flex;
|
|
@@ -3812,7 +3812,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3812
3812
|
--background-color: var(--jkl-color-background-alert-success);
|
|
3813
3813
|
}
|
|
3814
3814
|
.jkl-message--dismissed {
|
|
3815
|
-
animation: jkl-dismiss-
|
|
3815
|
+
animation: jkl-dismiss-unab2az 400ms ease-in-out forwards;
|
|
3816
3816
|
transition: visibility 0ms 400ms;
|
|
3817
3817
|
visibility: hidden;
|
|
3818
3818
|
}
|
|
@@ -3832,7 +3832,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3832
3832
|
}
|
|
3833
3833
|
}
|
|
3834
3834
|
|
|
3835
|
-
@keyframes jkl-dismiss-
|
|
3835
|
+
@keyframes jkl-dismiss-unab2az {
|
|
3836
3836
|
from {
|
|
3837
3837
|
opacity: 1;
|
|
3838
3838
|
transform: translate3d(0, 0, 0);
|
|
@@ -3888,7 +3888,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3888
3888
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
3889
3889
|
}
|
|
3890
3890
|
|
|
3891
|
-
@keyframes jkl-dot-in-
|
|
3891
|
+
@keyframes jkl-dot-in-unab2bj {
|
|
3892
3892
|
0% {
|
|
3893
3893
|
transform: scale(0.8);
|
|
3894
3894
|
}
|
|
@@ -3931,7 +3931,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3931
3931
|
}
|
|
3932
3932
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
3933
3933
|
--dot-color: var(--jkl-color-border-action);
|
|
3934
|
-
animation: jkl-dot-in-
|
|
3934
|
+
animation: jkl-dot-in-unab2bj 150ms ease;
|
|
3935
3935
|
}
|
|
3936
3936
|
@media screen and (forced-colors: active) {
|
|
3937
3937
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -4081,7 +4081,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4081
4081
|
--background-color: var(--jkl-color-background-container-high);
|
|
4082
4082
|
}
|
|
4083
4083
|
|
|
4084
|
-
@keyframes jkl-dot-in-
|
|
4084
|
+
@keyframes jkl-dot-in-unab2ch {
|
|
4085
4085
|
0% {
|
|
4086
4086
|
transform: scale(0.8);
|
|
4087
4087
|
}
|
|
@@ -4129,7 +4129,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4129
4129
|
}
|
|
4130
4130
|
}
|
|
4131
4131
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
|
|
4132
|
-
animation: jkl-dot-in-
|
|
4132
|
+
animation: jkl-dot-in-unab2ch 150ms ease;
|
|
4133
4133
|
}
|
|
4134
4134
|
.jkl-radio-panel:has(:checked) {
|
|
4135
4135
|
--radio-dot-color: var(--jkl-color-border-action);
|
|
@@ -4141,7 +4141,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4141
4141
|
--radio-dot-color: var(--jkl-color-text-on-alert);
|
|
4142
4142
|
}
|
|
4143
4143
|
|
|
4144
|
-
@keyframes jkl-checkbox-checked-
|
|
4144
|
+
@keyframes jkl-checkbox-checked-unab2dg {
|
|
4145
4145
|
0% {
|
|
4146
4146
|
width: 0;
|
|
4147
4147
|
height: 0;
|
|
@@ -4204,7 +4204,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4204
4204
|
}
|
|
4205
4205
|
}
|
|
4206
4206
|
.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
|
|
4207
|
-
animation: jkl-checkbox-checked-
|
|
4207
|
+
animation: jkl-checkbox-checked-unab2dg 150ms ease-in-out forwards;
|
|
4208
4208
|
opacity: 1;
|
|
4209
4209
|
}
|
|
4210
4210
|
.jkl-checkbox-panel:has([aria-invalid=true]) {
|
|
@@ -4968,11 +4968,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4968
4968
|
}
|
|
4969
4969
|
|
|
4970
4970
|
.jkl-countdown__tracker {
|
|
4971
|
-
animation: jkl-downcount-
|
|
4971
|
+
animation: jkl-downcount-unab2e2 var(--duration) linear forwards;
|
|
4972
4972
|
animation-play-state: var(--play-state, running);
|
|
4973
4973
|
}
|
|
4974
4974
|
|
|
4975
|
-
@keyframes jkl-downcount-
|
|
4975
|
+
@keyframes jkl-downcount-unab2e2 {
|
|
4976
4976
|
from {
|
|
4977
4977
|
width: 100%;
|
|
4978
4978
|
}
|
|
@@ -5171,7 +5171,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
|
|
|
5171
5171
|
margin-bottom: 0;
|
|
5172
5172
|
}
|
|
5173
5173
|
.jkl-system-message--dismissed {
|
|
5174
|
-
animation: jkl-dismiss-
|
|
5174
|
+
animation: jkl-dismiss-unab2eu 400ms ease-in forwards;
|
|
5175
5175
|
transition: visibility 0ms 400ms;
|
|
5176
5176
|
visibility: hidden;
|
|
5177
5177
|
}
|
|
@@ -5203,7 +5203,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
|
|
|
5203
5203
|
}
|
|
5204
5204
|
}
|
|
5205
5205
|
|
|
5206
|
-
@keyframes jkl-dismiss-
|
|
5206
|
+
@keyframes jkl-dismiss-unab2eu {
|
|
5207
5207
|
from {
|
|
5208
5208
|
opacity: 1;
|
|
5209
5209
|
transform: translate3d(0, 0, 0);
|
|
@@ -6078,14 +6078,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6078
6078
|
|
|
6079
6079
|
.jkl-toast[data-animation=entering],
|
|
6080
6080
|
.jkl-toast[data-animation=queued] {
|
|
6081
|
-
animation: jkl-entering-
|
|
6081
|
+
animation: jkl-entering-unab2f9 200ms ease-out forwards;
|
|
6082
6082
|
}
|
|
6083
6083
|
|
|
6084
6084
|
.jkl-toast[data-animation=exiting] {
|
|
6085
|
-
animation: jkl-exiting-
|
|
6085
|
+
animation: jkl-exiting-unab2fr 150ms ease-in forwards;
|
|
6086
6086
|
}
|
|
6087
6087
|
|
|
6088
|
-
@keyframes jkl-entering-
|
|
6088
|
+
@keyframes jkl-entering-unab2f9 {
|
|
6089
6089
|
from {
|
|
6090
6090
|
opacity: 0;
|
|
6091
6091
|
transform: translate3d(0, 50%, 0);
|
|
@@ -6095,7 +6095,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6095
6095
|
transform: translate3d(0, 0, 0);
|
|
6096
6096
|
}
|
|
6097
6097
|
}
|
|
6098
|
-
@keyframes jkl-exiting-
|
|
6098
|
+
@keyframes jkl-exiting-unab2fr {
|
|
6099
6099
|
from {
|
|
6100
6100
|
opacity: 1;
|
|
6101
6101
|
transform: translate3d(0, 0, 0);
|