@fremtind/jokul 0.30.3 → 0.30.4
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 +2 -2
- package/styles/components/button/button.css +5 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +4 -0
- 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 +40 -37
- package/styles/styles.min.css +1 -1
package/styles/styles.css
CHANGED
|
@@ -521,6 +521,7 @@
|
|
|
521
521
|
--background-color: transparent;
|
|
522
522
|
--border-radius: 0;
|
|
523
523
|
--border-width: 0.0625rem;
|
|
524
|
+
display: block;
|
|
524
525
|
cursor: pointer;
|
|
525
526
|
user-select: none;
|
|
526
527
|
background-color: var(--background-color);
|
|
@@ -567,6 +568,7 @@
|
|
|
567
568
|
transition-timing-function: ease;
|
|
568
569
|
transition-duration: 250ms;
|
|
569
570
|
transition-property: translate;
|
|
571
|
+
width: 100%;
|
|
570
572
|
display: flex;
|
|
571
573
|
flex-direction: row;
|
|
572
574
|
align-items: center;
|
|
@@ -585,6 +587,7 @@
|
|
|
585
587
|
pointer-events: none;
|
|
586
588
|
}
|
|
587
589
|
.jkl-button__text {
|
|
590
|
+
width: 100%;
|
|
588
591
|
max-width: 100%;
|
|
589
592
|
overflow: hidden;
|
|
590
593
|
white-space: nowrap;
|
|
@@ -617,7 +620,7 @@
|
|
|
617
620
|
height: 1rem;
|
|
618
621
|
}
|
|
619
622
|
html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
620
|
-
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-uacknlz;
|
|
621
624
|
}
|
|
622
625
|
:not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
|
|
623
626
|
scale: 1.05;
|
|
@@ -661,7 +664,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
661
664
|
--background-color: var(--jkl-color-background-interactive-hover);
|
|
662
665
|
}
|
|
663
666
|
|
|
664
|
-
@keyframes jkl-tertiary-flash-
|
|
667
|
+
@keyframes jkl-tertiary-flash-uacknlz {
|
|
665
668
|
0% {
|
|
666
669
|
opacity: 0.5;
|
|
667
670
|
scale: 1;
|
|
@@ -686,15 +689,15 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
686
689
|
animation: 2500ms linear infinite;
|
|
687
690
|
}
|
|
688
691
|
.jkl-loader__dot--left {
|
|
689
|
-
animation-name: jkl-loader-left-spin-
|
|
692
|
+
animation-name: jkl-loader-left-spin-uacknmz;
|
|
690
693
|
margin-right: 1.71em;
|
|
691
694
|
}
|
|
692
695
|
.jkl-loader__dot--middle {
|
|
693
|
-
animation-name: jkl-loader-middle-spin-
|
|
696
|
+
animation-name: jkl-loader-middle-spin-uacknnv;
|
|
694
697
|
margin-right: 1.9em;
|
|
695
698
|
}
|
|
696
699
|
.jkl-loader__dot--right {
|
|
697
|
-
animation-name: jkl-loader-right-spin-
|
|
700
|
+
animation-name: jkl-loader-right-spin-uacknoe;
|
|
698
701
|
}
|
|
699
702
|
@media screen and (forced-colors: active) {
|
|
700
703
|
.jkl-loader__dot {
|
|
@@ -722,7 +725,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
722
725
|
margin-right: 0.3em;
|
|
723
726
|
}
|
|
724
727
|
|
|
725
|
-
@keyframes jkl-loader-left-spin-
|
|
728
|
+
@keyframes jkl-loader-left-spin-uacknmz {
|
|
726
729
|
0% {
|
|
727
730
|
transform: rotate(0) scale(0);
|
|
728
731
|
}
|
|
@@ -736,7 +739,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
736
739
|
transform: rotate(180deg) scale(0);
|
|
737
740
|
}
|
|
738
741
|
}
|
|
739
|
-
@keyframes jkl-loader-middle-spin-
|
|
742
|
+
@keyframes jkl-loader-middle-spin-uacknnv {
|
|
740
743
|
0% {
|
|
741
744
|
transform: rotate(20deg) scale(0);
|
|
742
745
|
}
|
|
@@ -753,7 +756,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
753
756
|
transform: rotate(200deg) scale(0);
|
|
754
757
|
}
|
|
755
758
|
}
|
|
756
|
-
@keyframes jkl-loader-right-spin-
|
|
759
|
+
@keyframes jkl-loader-right-spin-uacknoe {
|
|
757
760
|
0% {
|
|
758
761
|
transform: rotate(40deg) scale(0);
|
|
759
762
|
}
|
|
@@ -801,7 +804,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
801
804
|
bottom: 0;
|
|
802
805
|
width: 12.5rem;
|
|
803
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%);
|
|
804
|
-
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-
|
|
807
|
+
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uacknon;
|
|
805
808
|
}
|
|
806
809
|
@media (width >= 0) and (max-width: 679px) {
|
|
807
810
|
.jkl-skeleton-animation {
|
|
@@ -832,7 +835,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
832
835
|
@media screen and (forced-colors: active) {
|
|
833
836
|
.jkl-skeleton-element {
|
|
834
837
|
border: 1px solid CanvasText;
|
|
835
|
-
animation: 2s ease infinite jkl-blink-
|
|
838
|
+
animation: 2s ease infinite jkl-blink-uacknot;
|
|
836
839
|
}
|
|
837
840
|
}
|
|
838
841
|
|
|
@@ -888,11 +891,11 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
888
891
|
}
|
|
889
892
|
@media screen and (forced-colors: active) {
|
|
890
893
|
.jkl-skeleton-table {
|
|
891
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
894
|
+
animation: 2s ease-in-out infinite jkl-blink-uacknot;
|
|
892
895
|
}
|
|
893
896
|
}
|
|
894
897
|
|
|
895
|
-
@keyframes jkl-sweep-
|
|
898
|
+
@keyframes jkl-sweep-uacknon {
|
|
896
899
|
0% {
|
|
897
900
|
transform: translateX(calc(0vw - 200px));
|
|
898
901
|
}
|
|
@@ -900,7 +903,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
900
903
|
transform: translateX(calc(100vw + 400px));
|
|
901
904
|
}
|
|
902
905
|
}
|
|
903
|
-
@keyframes jkl-blink-
|
|
906
|
+
@keyframes jkl-blink-uacknot {
|
|
904
907
|
0% {
|
|
905
908
|
opacity: 1;
|
|
906
909
|
}
|
|
@@ -1465,7 +1468,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
1465
1468
|
--jkl-checkbox-line-height: 1.5rem;
|
|
1466
1469
|
}
|
|
1467
1470
|
|
|
1468
|
-
@keyframes jkl-checkbox-checked-
|
|
1471
|
+
@keyframes jkl-checkbox-checked-uacknpq {
|
|
1469
1472
|
0% {
|
|
1470
1473
|
width: 0;
|
|
1471
1474
|
height: 0;
|
|
@@ -1479,7 +1482,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
1479
1482
|
height: 58%;
|
|
1480
1483
|
}
|
|
1481
1484
|
}
|
|
1482
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
1485
|
+
@keyframes jkl-checkbox-indeterminate-uacknqn {
|
|
1483
1486
|
0% {
|
|
1484
1487
|
width: 0;
|
|
1485
1488
|
}
|
|
@@ -1507,11 +1510,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
1507
1510
|
top: -6px;
|
|
1508
1511
|
}
|
|
1509
1512
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
1510
|
-
animation: jkl-checkbox-checked-
|
|
1513
|
+
animation: jkl-checkbox-checked-uacknpq 150ms ease-in-out forwards;
|
|
1511
1514
|
opacity: 1;
|
|
1512
1515
|
}
|
|
1513
1516
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
1514
|
-
animation: jkl-checkbox-indeterminate-
|
|
1517
|
+
animation: jkl-checkbox-indeterminate-uacknqn 150ms ease-in-out forwards;
|
|
1515
1518
|
opacity: 1;
|
|
1516
1519
|
}
|
|
1517
1520
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -2037,7 +2040,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
2037
2040
|
--color: var(--jkl-color-text-default);
|
|
2038
2041
|
}
|
|
2039
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 {
|
|
2040
|
-
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-uacknr9 forwards;
|
|
2041
2044
|
}
|
|
2042
2045
|
.jkl-form-support-label--sr-only {
|
|
2043
2046
|
border: 0 !important;
|
|
@@ -2112,7 +2115,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
|
|
|
2112
2115
|
white-space: nowrap !important; /* 3 */
|
|
2113
2116
|
}
|
|
2114
2117
|
|
|
2115
|
-
@keyframes jkl-support-icon-entrance-
|
|
2118
|
+
@keyframes jkl-support-icon-entrance-uacknr9 {
|
|
2116
2119
|
0% {
|
|
2117
2120
|
margin-right: 0;
|
|
2118
2121
|
opacity: 0;
|
|
@@ -3536,7 +3539,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
|
|
|
3536
3539
|
padding: 1rem 0 2.5rem 0;
|
|
3537
3540
|
}
|
|
3538
3541
|
|
|
3539
|
-
@keyframes jkl-show-
|
|
3542
|
+
@keyframes jkl-show-uacknrz {
|
|
3540
3543
|
from {
|
|
3541
3544
|
transform: translate3d(0, 0.5rem, 0);
|
|
3542
3545
|
opacity: 0;
|
|
@@ -3571,7 +3574,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
|
|
|
3571
3574
|
}
|
|
3572
3575
|
}
|
|
3573
3576
|
.jkl-feedback__fade-in {
|
|
3574
|
-
animation: jkl-show-
|
|
3577
|
+
animation: jkl-show-uacknrz 0.25s ease-out;
|
|
3575
3578
|
}
|
|
3576
3579
|
|
|
3577
3580
|
.jkl-feedback-smileys {
|
|
@@ -3806,7 +3809,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3806
3809
|
--background-color: var(--jkl-color-background-alert-success);
|
|
3807
3810
|
}
|
|
3808
3811
|
.jkl-message--dismissed {
|
|
3809
|
-
animation: jkl-dismiss-
|
|
3812
|
+
animation: jkl-dismiss-uacknsw 400ms ease-in-out forwards;
|
|
3810
3813
|
transition: visibility 0ms 400ms;
|
|
3811
3814
|
visibility: hidden;
|
|
3812
3815
|
}
|
|
@@ -3826,7 +3829,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3826
3829
|
}
|
|
3827
3830
|
}
|
|
3828
3831
|
|
|
3829
|
-
@keyframes jkl-dismiss-
|
|
3832
|
+
@keyframes jkl-dismiss-uacknsw {
|
|
3830
3833
|
from {
|
|
3831
3834
|
opacity: 1;
|
|
3832
3835
|
transform: translate3d(0, 0, 0);
|
|
@@ -3882,7 +3885,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3882
3885
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
3883
3886
|
}
|
|
3884
3887
|
|
|
3885
|
-
@keyframes jkl-dot-in-
|
|
3888
|
+
@keyframes jkl-dot-in-uackntq {
|
|
3886
3889
|
0% {
|
|
3887
3890
|
transform: scale(0.8);
|
|
3888
3891
|
}
|
|
@@ -3925,7 +3928,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3925
3928
|
}
|
|
3926
3929
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
3927
3930
|
--dot-color: var(--jkl-color-border-action);
|
|
3928
|
-
animation: jkl-dot-in-
|
|
3931
|
+
animation: jkl-dot-in-uackntq 150ms ease;
|
|
3929
3932
|
}
|
|
3930
3933
|
@media screen and (forced-colors: active) {
|
|
3931
3934
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -4075,7 +4078,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4075
4078
|
--background-color: var(--jkl-color-background-container-high);
|
|
4076
4079
|
}
|
|
4077
4080
|
|
|
4078
|
-
@keyframes jkl-dot-in-
|
|
4081
|
+
@keyframes jkl-dot-in-uackntr {
|
|
4079
4082
|
0% {
|
|
4080
4083
|
transform: scale(0.8);
|
|
4081
4084
|
}
|
|
@@ -4123,7 +4126,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4123
4126
|
}
|
|
4124
4127
|
}
|
|
4125
4128
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
|
|
4126
|
-
animation: jkl-dot-in-
|
|
4129
|
+
animation: jkl-dot-in-uackntr 150ms ease;
|
|
4127
4130
|
}
|
|
4128
4131
|
.jkl-radio-panel:has(:checked) {
|
|
4129
4132
|
--radio-dot-color: var(--jkl-color-border-action);
|
|
@@ -4135,7 +4138,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4135
4138
|
--radio-dot-color: var(--jkl-color-text-on-alert);
|
|
4136
4139
|
}
|
|
4137
4140
|
|
|
4138
|
-
@keyframes jkl-checkbox-checked-
|
|
4141
|
+
@keyframes jkl-checkbox-checked-uacknub {
|
|
4139
4142
|
0% {
|
|
4140
4143
|
width: 0;
|
|
4141
4144
|
height: 0;
|
|
@@ -4198,7 +4201,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4198
4201
|
}
|
|
4199
4202
|
}
|
|
4200
4203
|
.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
|
|
4201
|
-
animation: jkl-checkbox-checked-
|
|
4204
|
+
animation: jkl-checkbox-checked-uacknub 150ms ease-in-out forwards;
|
|
4202
4205
|
opacity: 1;
|
|
4203
4206
|
}
|
|
4204
4207
|
.jkl-checkbox-panel:has([aria-invalid=true]) {
|
|
@@ -4962,11 +4965,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
4962
4965
|
}
|
|
4963
4966
|
|
|
4964
4967
|
.jkl-countdown__tracker {
|
|
4965
|
-
animation: jkl-downcount-
|
|
4968
|
+
animation: jkl-downcount-uacknuk var(--duration) linear forwards;
|
|
4966
4969
|
animation-play-state: var(--play-state, running);
|
|
4967
4970
|
}
|
|
4968
4971
|
|
|
4969
|
-
@keyframes jkl-downcount-
|
|
4972
|
+
@keyframes jkl-downcount-uacknuk {
|
|
4970
4973
|
from {
|
|
4971
4974
|
width: 100%;
|
|
4972
4975
|
}
|
|
@@ -5165,7 +5168,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
|
|
|
5165
5168
|
margin-bottom: 0;
|
|
5166
5169
|
}
|
|
5167
5170
|
.jkl-system-message--dismissed {
|
|
5168
|
-
animation: jkl-dismiss-
|
|
5171
|
+
animation: jkl-dismiss-uacknur 400ms ease-in forwards;
|
|
5169
5172
|
transition: visibility 0ms 400ms;
|
|
5170
5173
|
visibility: hidden;
|
|
5171
5174
|
}
|
|
@@ -5197,7 +5200,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
|
|
|
5197
5200
|
}
|
|
5198
5201
|
}
|
|
5199
5202
|
|
|
5200
|
-
@keyframes jkl-dismiss-
|
|
5203
|
+
@keyframes jkl-dismiss-uacknur {
|
|
5201
5204
|
from {
|
|
5202
5205
|
opacity: 1;
|
|
5203
5206
|
transform: translate3d(0, 0, 0);
|
|
@@ -6072,14 +6075,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6072
6075
|
|
|
6073
6076
|
.jkl-toast[data-animation=entering],
|
|
6074
6077
|
.jkl-toast[data-animation=queued] {
|
|
6075
|
-
animation: jkl-entering-
|
|
6078
|
+
animation: jkl-entering-uacknuu 200ms ease-out forwards;
|
|
6076
6079
|
}
|
|
6077
6080
|
|
|
6078
6081
|
.jkl-toast[data-animation=exiting] {
|
|
6079
|
-
animation: jkl-exiting-
|
|
6082
|
+
animation: jkl-exiting-uacknv6 150ms ease-in forwards;
|
|
6080
6083
|
}
|
|
6081
6084
|
|
|
6082
|
-
@keyframes jkl-entering-
|
|
6085
|
+
@keyframes jkl-entering-uacknuu {
|
|
6083
6086
|
from {
|
|
6084
6087
|
opacity: 0;
|
|
6085
6088
|
transform: translate3d(0, 50%, 0);
|
|
@@ -6089,7 +6092,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6089
6092
|
transform: translate3d(0, 0, 0);
|
|
6090
6093
|
}
|
|
6091
6094
|
}
|
|
6092
|
-
@keyframes jkl-exiting-
|
|
6095
|
+
@keyframes jkl-exiting-uacknv6 {
|
|
6093
6096
|
from {
|
|
6094
6097
|
opacity: 1;
|
|
6095
6098
|
transform: translate3d(0, 0, 0);
|