@fremtind/jokul 0.27.3 → 0.27.5
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/README.md +9 -2
- package/build/build-stats.html +1 -1
- package/build/cjs/components/card/Card.cjs.map +1 -1
- package/build/cjs/components/card/CardImage.cjs.map +1 -1
- package/build/cjs/components/combobox/Combobox.cjs +1 -1
- package/build/cjs/components/combobox/Combobox.cjs.map +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
- package/build/cjs/components/datepicker/internal/Calendar.cjs +1 -1
- package/build/cjs/components/datepicker/internal/Calendar.cjs.map +1 -1
- package/build/cjs/components/expander/Expander.cjs +1 -1
- package/build/cjs/components/expander/Expander.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/ContactQuestion.cjs.map +1 -1
- package/build/cjs/components/flex/Flex.cjs.map +1 -1
- package/build/cjs/components/input-group/SupportLabel.cjs +1 -1
- package/build/cjs/components/input-group/SupportLabel.cjs.map +1 -1
- package/build/cjs/components/link-list/LinkList.cjs +1 -1
- package/build/cjs/components/link-list/LinkList.cjs.map +1 -1
- package/build/cjs/components/menu/MenuItem.cjs +1 -1
- package/build/cjs/components/menu/MenuItem.cjs.map +1 -1
- package/build/cjs/components/menu/MenuItemCheckbox.cjs +1 -1
- package/build/cjs/components/menu/MenuItemCheckbox.cjs.map +1 -1
- package/build/cjs/components/message/DismissButton.cjs +1 -1
- package/build/cjs/components/message/DismissButton.cjs.map +1 -1
- package/build/cjs/components/message/Message.cjs +1 -1
- package/build/cjs/components/message/Message.cjs.map +1 -1
- package/build/cjs/components/modal/Modal.cjs +1 -1
- package/build/cjs/components/modal/Modal.cjs.map +1 -1
- package/build/cjs/components/pagination/Pagination.cjs +1 -1
- package/build/cjs/components/pagination/Pagination.cjs.map +1 -1
- package/build/cjs/components/radio-panel/RadioPanel.cjs +1 -1
- package/build/cjs/components/radio-panel/RadioPanel.cjs.map +1 -1
- package/build/cjs/components/select/NativeSelect.cjs +1 -1
- package/build/cjs/components/select/NativeSelect.cjs.map +1 -1
- package/build/cjs/components/select/Select.cjs +1 -1
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/cjs/components/system-message/common/DismissButton.cjs +1 -1
- package/build/cjs/components/system-message/common/DismissButton.cjs.map +1 -1
- package/build/cjs/components/system-message/common/MessageIcon.cjs +1 -1
- package/build/cjs/components/system-message/common/MessageIcon.cjs.map +1 -1
- package/build/cjs/components/table/ExpandableTableRow.cjs +1 -1
- package/build/cjs/components/table/ExpandableTableRow.cjs.map +1 -1
- package/build/cjs/components/table/TableHeader.cjs +1 -1
- package/build/cjs/components/table/TableHeader.cjs.map +1 -1
- package/build/cjs/components/table/TablePagination.cjs +1 -1
- package/build/cjs/components/table/TablePagination.cjs.map +1 -1
- package/build/cjs/components/tag/Tag.cjs +1 -1
- package/build/cjs/components/tag/Tag.cjs.map +1 -1
- package/build/cjs/components/text-input/BaseTextInput.cjs.map +1 -1
- package/build/cjs/components/text-input/BaseTextInput.d.cts +2 -2
- package/build/cjs/components/toast/Toast.cjs +1 -1
- package/build/cjs/components/toast/Toast.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.cjs +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.d.cts +1 -1
- package/build/cjs/components/tooltip/PopupTip.cjs +1 -1
- package/build/cjs/components/tooltip/PopupTip.cjs.map +1 -1
- package/build/cjs/components/tooltip/PopupTip.d.cts +1 -1
- package/build/es/components/card/Card.js.map +1 -1
- package/build/es/components/card/CardImage.js.map +1 -1
- package/build/es/components/combobox/Combobox.js +1 -1
- package/build/es/components/combobox/Combobox.js.map +1 -1
- package/build/es/components/datepicker/DatePicker.js +1 -1
- package/build/es/components/datepicker/DatePicker.js.map +1 -1
- package/build/es/components/datepicker/internal/Calendar.js +1 -1
- package/build/es/components/datepicker/internal/Calendar.js.map +1 -1
- package/build/es/components/expander/Expander.js +1 -1
- package/build/es/components/expander/Expander.js.map +1 -1
- package/build/es/components/feedback/questions/ContactQuestion.js.map +1 -1
- package/build/es/components/flex/Flex.js.map +1 -1
- package/build/es/components/input-group/SupportLabel.js +1 -1
- package/build/es/components/input-group/SupportLabel.js.map +1 -1
- package/build/es/components/link-list/LinkList.js +1 -1
- package/build/es/components/link-list/LinkList.js.map +1 -1
- package/build/es/components/menu/MenuItem.js +1 -1
- package/build/es/components/menu/MenuItem.js.map +1 -1
- package/build/es/components/menu/MenuItemCheckbox.js +1 -1
- package/build/es/components/menu/MenuItemCheckbox.js.map +1 -1
- package/build/es/components/message/DismissButton.js +1 -1
- package/build/es/components/message/DismissButton.js.map +1 -1
- package/build/es/components/message/Message.js +1 -1
- package/build/es/components/message/Message.js.map +1 -1
- package/build/es/components/modal/Modal.js +1 -1
- package/build/es/components/modal/Modal.js.map +1 -1
- package/build/es/components/pagination/Pagination.js +1 -1
- package/build/es/components/pagination/Pagination.js.map +1 -1
- package/build/es/components/radio-panel/RadioPanel.js +1 -1
- package/build/es/components/radio-panel/RadioPanel.js.map +1 -1
- package/build/es/components/select/NativeSelect.js +1 -1
- package/build/es/components/select/NativeSelect.js.map +1 -1
- package/build/es/components/select/Select.js +1 -1
- package/build/es/components/select/Select.js.map +1 -1
- package/build/es/components/system-message/common/DismissButton.js +1 -1
- package/build/es/components/system-message/common/DismissButton.js.map +1 -1
- package/build/es/components/system-message/common/MessageIcon.js +1 -1
- package/build/es/components/system-message/common/MessageIcon.js.map +1 -1
- package/build/es/components/table/ExpandableTableRow.js +1 -1
- package/build/es/components/table/ExpandableTableRow.js.map +1 -1
- package/build/es/components/table/TableHeader.js +1 -1
- package/build/es/components/table/TableHeader.js.map +1 -1
- package/build/es/components/table/TablePagination.js +1 -1
- package/build/es/components/table/TablePagination.js.map +1 -1
- package/build/es/components/tag/Tag.js +1 -1
- package/build/es/components/tag/Tag.js.map +1 -1
- package/build/es/components/text-input/BaseTextInput.d.ts +2 -2
- package/build/es/components/text-input/BaseTextInput.js.map +1 -1
- package/build/es/components/toast/Toast.js +1 -1
- package/build/es/components/toast/Toast.js.map +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.d.ts +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.js +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/build/es/components/tooltip/PopupTip.d.ts +1 -1
- package/build/es/components/tooltip/PopupTip.js +1 -1
- package/build/es/components/tooltip/PopupTip.js.map +1 -1
- package/package.json +2 -2
- package/styles/components/accordion/accordion.css +13 -5
- package/styles/components/accordion/accordion.min.css +7 -1
- package/styles/components/accordion/accordion.scss +17 -6
- package/styles/components/button/button.css +2 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +2 -1
- package/styles/components/card/card.css +3 -1
- package/styles/components/card/card.scss +3 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox/checkbox.scss +15 -5
- package/styles/components/combobox/combobox.css +4 -2
- package/styles/components/combobox/combobox.scss +20 -7
- package/styles/components/datepicker/_calendar.scss +6 -3
- package/styles/components/datepicker/datepicker.css +6 -3
- package/styles/components/datepicker/datepicker.scss +2 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/feedback/feedback.scss +4 -1
- package/styles/components/icon/icon.scss +2 -2
- package/styles/components/input-group/_labels.scss +13 -5
- 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-group/input-group.scss +4 -1
- package/styles/components/link/link.scss +14 -2
- package/styles/components/list/list.scss +21 -6
- 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/loader/skeleton-loader.scss +2 -1
- package/styles/components/logo/logo.scss +12 -4
- package/styles/components/menu/menu.scss +2 -1
- package/styles/components/message/message.css +6 -3
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/message/message.scss +11 -4
- 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/radio-button/radio-button.scss +24 -9
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.scss +2 -1
- package/styles/components/select/select.css +6 -3
- package/styles/components/select/select.scss +20 -7
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/system-message/system-message.scss +8 -3
- package/styles/components/table/_table-cell.scss +10 -4
- package/styles/components/table/_table-head.scss +2 -1
- package/styles/components/table/_table-row.scss +21 -9
- package/styles/components/tabs/tabs.css +6 -3
- package/styles/components/tabs/tabs.scss +6 -3
- package/styles/components/text-input/text-input.css +4 -2
- package/styles/components/text-input/text-input.scss +19 -8
- package/styles/components/toast/toast.css +7 -5
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/toast/toast.scss +11 -4
- package/styles/components/toggle-switch/_toggle-slider.scss +2 -1
- package/styles/components/toggle-switch/toggle-switch.css +2 -1
- package/styles/components/toggle-switch/toggle-switch.scss +2 -1
- package/styles/components/tooltip/tooltip.scss +7 -2
- package/styles/core/_spacing.scss +12 -3
- package/styles/core/core.scss +7 -2
- package/styles/core/jkl/_convert.scss +4 -1
- package/styles/core/jkl/_helpers.scss +7 -1
- package/styles/core/jkl/_ornaments.scss +3 -1
- package/styles/core/jkl/_spacing.scss +4 -1
- package/styles/core/jkl/_tokens.scss +12 -4
- package/styles/core/jkl/_typography.scss +14 -6
- package/styles/fonts/webfonts.scss +14 -7
- package/styles/styles.css +86 -57
- package/styles/styles.min.css +7 -1
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
animation: 2500ms linear infinite;
|
|
18
18
|
}
|
|
19
19
|
.jkl-loader__dot--left {
|
|
20
|
-
animation-name: jkl-loader-left-spin-
|
|
20
|
+
animation-name: jkl-loader-left-spin-uhfnhvo;
|
|
21
21
|
margin-right: 1.71em;
|
|
22
22
|
}
|
|
23
23
|
.jkl-loader__dot--middle {
|
|
24
|
-
animation-name: jkl-loader-middle-spin-
|
|
24
|
+
animation-name: jkl-loader-middle-spin-uhfnhw8;
|
|
25
25
|
margin-right: 1.9em;
|
|
26
26
|
}
|
|
27
27
|
.jkl-loader__dot--right {
|
|
28
|
-
animation-name: jkl-loader-right-spin-
|
|
28
|
+
animation-name: jkl-loader-right-spin-uhfnhx4;
|
|
29
29
|
}
|
|
30
30
|
@media screen and (forced-colors: active) {
|
|
31
31
|
.jkl-loader__dot {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
margin-right: 0.3em;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
@keyframes jkl-loader-left-spin-
|
|
56
|
+
@keyframes jkl-loader-left-spin-uhfnhvo {
|
|
57
57
|
0% {
|
|
58
58
|
transform: rotate(0) scale(0);
|
|
59
59
|
}
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
transform: rotate(180deg) scale(0);
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
@keyframes jkl-loader-middle-spin-
|
|
70
|
+
@keyframes jkl-loader-middle-spin-uhfnhw8 {
|
|
71
71
|
0% {
|
|
72
72
|
transform: rotate(20deg) scale(0);
|
|
73
73
|
}
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
transform: rotate(200deg) scale(0);
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
|
-
@keyframes jkl-loader-right-spin-
|
|
87
|
+
@keyframes jkl-loader-right-spin-uhfnhx4 {
|
|
88
88
|
0% {
|
|
89
89
|
transform: rotate(40deg) scale(0);
|
|
90
90
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-
|
|
1
|
+
.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uhfnhvo;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uhfnhw8;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uhfnhx4}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-uhfnhvo{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uhfnhw8{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uhfnhx4{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
bottom: 0;
|
|
37
37
|
width: 12.5rem;
|
|
38
38
|
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%);
|
|
39
|
-
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-
|
|
39
|
+
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ucf8c6b;
|
|
40
40
|
}
|
|
41
41
|
@media (width >= 0) and (max-width: 679px) {
|
|
42
42
|
.jkl-skeleton-animation {
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
@media screen and (forced-colors: active) {
|
|
68
68
|
.jkl-skeleton-element {
|
|
69
69
|
border: 1px solid CanvasText;
|
|
70
|
-
animation: 2s ease infinite jkl-blink-
|
|
70
|
+
animation: 2s ease infinite jkl-blink-ucf8c6q;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
@@ -123,11 +123,11 @@
|
|
|
123
123
|
}
|
|
124
124
|
@media screen and (forced-colors: active) {
|
|
125
125
|
.jkl-skeleton-table {
|
|
126
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
126
|
+
animation: 2s ease-in-out infinite jkl-blink-ucf8c6q;
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
@keyframes jkl-sweep-
|
|
130
|
+
@keyframes jkl-sweep-ucf8c6b {
|
|
131
131
|
0% {
|
|
132
132
|
transform: translateX(calc(0vw - 200px));
|
|
133
133
|
}
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
transform: translateX(calc(100vw + 400px));
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
|
-
@keyframes jkl-blink-
|
|
138
|
+
@keyframes jkl-blink-ucf8c6q {
|
|
139
139
|
0% {
|
|
140
140
|
opacity: 1;
|
|
141
141
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-
|
|
1
|
+
@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ucf8c6b;background:linear-gradient(89.17deg,hsla(0,0%,98%,0) .8%,var(--jkl-skeleton-sweeper-color) 50.09%,hsla(0,0%,98%,0) 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-ucf8c6q 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-ucf8c6q 2s ease-in-out infinite}}@keyframes jkl-sweep-ucf8c6b{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-ucf8c6q{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}
|
|
@@ -33,7 +33,8 @@ $_blink-animation-name: jkl-blink-#{string.unique-id()};
|
|
|
33
33
|
var(--jkl-skeleton-sweeper-color) 50.09%,
|
|
34
34
|
rgb(249 249 249 / 0%) 96.31%
|
|
35
35
|
);
|
|
36
|
-
animation: var(--jkl-skeleton-sweep-duration) ease infinite
|
|
36
|
+
animation: var(--jkl-skeleton-sweep-duration) ease infinite
|
|
37
|
+
$_sweep-animation-name;
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
@include jkl.small-device {
|
|
@@ -13,7 +13,10 @@
|
|
|
13
13
|
color: var(--jkl-logo-color);
|
|
14
14
|
|
|
15
15
|
// I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
|
|
16
|
-
@include jkl.forced-colors-svg-fallback(
|
|
16
|
+
@include jkl.forced-colors-svg-fallback(
|
|
17
|
+
$stroke: CanvasText,
|
|
18
|
+
$fill: CanvasText
|
|
19
|
+
);
|
|
17
20
|
|
|
18
21
|
&__F {
|
|
19
22
|
transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
|
|
@@ -45,7 +48,8 @@
|
|
|
45
48
|
|
|
46
49
|
&--animated {
|
|
47
50
|
& .jkl-logo__F {
|
|
48
|
-
transition: transform jkl.timing("expressive")
|
|
51
|
+
transition: transform jkl.timing("expressive")
|
|
52
|
+
jkl.timing("energetic") cubic-bezier(0.5, 0, 0.62, 1);
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
& .jkl-logo__F-line {
|
|
@@ -53,7 +57,8 @@
|
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
& .jkl-logo__remtind {
|
|
56
|
-
transition: opacity jkl.timing("expressive") jkl.timing("energetic")
|
|
60
|
+
transition: opacity jkl.timing("expressive") jkl.timing("energetic")
|
|
61
|
+
ease-in,
|
|
57
62
|
transform jkl.timing("expressive") ease;
|
|
58
63
|
}
|
|
59
64
|
}
|
|
@@ -69,7 +74,10 @@
|
|
|
69
74
|
color: var(--logo-stamp-color);
|
|
70
75
|
|
|
71
76
|
// I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
|
|
72
|
-
@include jkl.forced-colors-svg-fallback(
|
|
77
|
+
@include jkl.forced-colors-svg-fallback(
|
|
78
|
+
$stroke: CanvasText,
|
|
79
|
+
$fill: CanvasText
|
|
80
|
+
);
|
|
73
81
|
|
|
74
82
|
&--animated {
|
|
75
83
|
.jkl-logo-stamp__text {
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
& &[data-placement="bottom-start"] {
|
|
33
|
-
box-shadow: rgba(0 0 0 / 20%) 0 -1px 2px 0,
|
|
33
|
+
box-shadow: rgba(0 0 0 / 20%) 0 -1px 2px 0,
|
|
34
|
+
rgba(0 0 0 / 14%) -1px 2px 2px 0, rgba(0 0 0 / 12%) 3px 1px 5px 0;
|
|
34
35
|
}
|
|
35
36
|
}
|
|
@@ -132,7 +132,10 @@
|
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
.jkl-message__dismiss-button::after {
|
|
135
|
-
--tap-increment: calc(
|
|
135
|
+
--tap-increment: calc(
|
|
136
|
+
(var(--jkl-message-dismiss-button-size) - 1.25rem) / 2 *
|
|
137
|
+
- 1
|
|
138
|
+
);
|
|
136
139
|
content: "";
|
|
137
140
|
position: absolute;
|
|
138
141
|
inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
|
|
@@ -168,7 +171,7 @@
|
|
|
168
171
|
--background-color: var(--jkl-color-background-alert-success);
|
|
169
172
|
}
|
|
170
173
|
.jkl-message--dismissed {
|
|
171
|
-
animation: jkl-dismiss-
|
|
174
|
+
animation: jkl-dismiss-u1i2opb 400ms ease-in-out forwards;
|
|
172
175
|
transition: visibility 0ms 400ms;
|
|
173
176
|
visibility: hidden;
|
|
174
177
|
}
|
|
@@ -188,7 +191,7 @@
|
|
|
188
191
|
}
|
|
189
192
|
}
|
|
190
193
|
|
|
191
|
-
@keyframes jkl-dismiss-
|
|
194
|
+
@keyframes jkl-dismiss-u1i2opb {
|
|
192
195
|
from {
|
|
193
196
|
opacity: 1;
|
|
194
197
|
transform: translate3d(0, 0, 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 0.25rem 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:0.75rem;--jkl-message-padding:1rem 0.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:1rem;--jkl-message-padding:1.5rem 1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:0.75rem 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:transparent;border-style:none;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-message-gap);outline:0;outline-style:none;padding:0;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{--tap-increment:calc((var(--jkl-message-dismiss-button-size) - 1.25rem)/2*-1);content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 0.25rem 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:0.75rem;--jkl-message-padding:1rem 0.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:1rem;--jkl-message-padding:1.5rem 1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:0.75rem 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:transparent;border-style:none;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-message-gap);outline:0;outline-style:none;padding:0;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{--tap-increment:calc((var(--jkl-message-dismiss-button-size) - 1.25rem)/2*-1);content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-u1i2opb .4s ease-in-out forwards;transition:visibility 0s .4s;visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u1i2opb{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}.jkl-form-error-message{padding-bottom:2.5rem}
|
|
@@ -71,7 +71,9 @@ $_dismiss-hover-color: jkl.$color-stein;
|
|
|
71
71
|
&__message {
|
|
72
72
|
@include jkl.use-font-variables("jkl-message-content");
|
|
73
73
|
|
|
74
|
-
margin-top: jkl.rem(
|
|
74
|
+
margin-top: jkl.rem(
|
|
75
|
+
-2px
|
|
76
|
+
); // Offset for å aligne med ikon hvis uten tittel.
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
&__title {
|
|
@@ -103,10 +105,14 @@ $_dismiss-hover-color: jkl.$color-stein;
|
|
|
103
105
|
|
|
104
106
|
// Sørg for å ha en stor nok touch target.
|
|
105
107
|
&::after {
|
|
106
|
-
--tap-increment: calc(
|
|
108
|
+
--tap-increment: calc(
|
|
109
|
+
(var(--jkl-message-dismiss-button-size) - #{jkl.rem(20px)}) / 2 *
|
|
110
|
+
- 1
|
|
111
|
+
);
|
|
107
112
|
content: "";
|
|
108
113
|
position: absolute;
|
|
109
|
-
inset: var(--tap-increment) var(--tap-increment)
|
|
114
|
+
inset: var(--tap-increment) var(--tap-increment)
|
|
115
|
+
var(--tap-increment) var(--tap-increment);
|
|
110
116
|
}
|
|
111
117
|
|
|
112
118
|
&:hover {
|
|
@@ -140,7 +146,8 @@ $_dismiss-hover-color: jkl.$color-stein;
|
|
|
140
146
|
}
|
|
141
147
|
|
|
142
148
|
&--dismissed {
|
|
143
|
-
animation: $_dismiss-animation-name $_dismiss-animation-duration
|
|
149
|
+
animation: $_dismiss-animation-name $_dismiss-animation-duration
|
|
150
|
+
ease-in-out forwards;
|
|
144
151
|
transition: visibility 0ms $_dismiss-animation-duration;
|
|
145
152
|
visibility: hidden;
|
|
146
153
|
}
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.jkl-countdown__tracker {
|
|
40
|
-
animation: jkl-downcount-
|
|
40
|
+
animation: jkl-downcount-uo4haz1 var(--duration) linear forwards;
|
|
41
41
|
animation-play-state: var(--play-state, running);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
@keyframes jkl-downcount-
|
|
44
|
+
@keyframes jkl-downcount-uo4haz1 {
|
|
45
45
|
from {
|
|
46
46
|
width: 100%;
|
|
47
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.jkl-countdown,.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown,.jkl-progress-bar{background-color:Canvas}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}.jkl-countdown__tracker{animation:jkl-downcount-
|
|
1
|
+
.jkl-countdown,.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown,.jkl-progress-bar{background-color:Canvas}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}.jkl-countdown__tracker{animation:jkl-downcount-uo4haz1 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uo4haz1{0%{width:100%}to{width:0}}
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
@keyframes jkl-dot-in-
|
|
47
|
+
@keyframes jkl-dot-in-uws9slo {
|
|
48
48
|
0% {
|
|
49
49
|
transform: scale(0.8);
|
|
50
50
|
}
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
}
|
|
88
88
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
89
89
|
--dot-color: var(--jkl-color-border-action);
|
|
90
|
-
animation: jkl-dot-in-
|
|
90
|
+
animation: jkl-dot-in-uws9slo 150ms ease;
|
|
91
91
|
}
|
|
92
92
|
@media screen and (forced-colors: active) {
|
|
93
93
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-uws9slo{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:transparent;--background-color:transparent;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-uws9slo .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
|
|
@@ -14,12 +14,17 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
|
|
|
14
14
|
--jkl-radio-button-height: #{$_radio-button-height};
|
|
15
15
|
--jkl-radio-button-line-height: #{$_radio-button-line-height};
|
|
16
16
|
--jkl-radio-button-size: #{$_radio-button-size};
|
|
17
|
-
--jkl-radio-button-text-margin: #{(
|
|
17
|
+
--jkl-radio-button-text-margin: #{(
|
|
18
|
+
($_radio-button-height - $_radio-button-line-height) * 0.5
|
|
19
|
+
)} 0;
|
|
18
20
|
--jkl-radio-button-text-transform: translate3d(0, #{jkl.rem(1px)}, 0);
|
|
19
|
-
--jkl-radio-button-dot-margin: #{(
|
|
21
|
+
--jkl-radio-button-dot-margin: #{(
|
|
22
|
+
($_radio-button-height - $_radio-button-size) * 0.5
|
|
23
|
+
)} #{jkl.$spacing-xs} #{(
|
|
20
24
|
($_radio-button-height - $_radio-button-size) * 0.5
|
|
21
25
|
)} 0;
|
|
22
|
-
--jkl-radio-button-dot-size: #{$_radio-button-size -
|
|
26
|
+
--jkl-radio-button-dot-size: #{$_radio-button-size -
|
|
27
|
+
(2 * $_radio-button-dot-padding)};
|
|
23
28
|
|
|
24
29
|
@include jkl.declare-font-variables("jkl-radio-button-label", "body");
|
|
25
30
|
|
|
@@ -33,8 +38,11 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
|
|
|
33
38
|
--jkl-radio-button-size: #{$_mobile-radio-button-size};
|
|
34
39
|
--jkl-radio-button-text-margin: #{jkl.$spacing-8} 0;
|
|
35
40
|
--jkl-radio-button-text-transform: translate3d(0, 0, 0);
|
|
36
|
-
--jkl-radio-button-dot-margin: #{jkl.rem(10px)} #{jkl.$spacing-xs} #{jkl.rem(
|
|
37
|
-
|
|
41
|
+
--jkl-radio-button-dot-margin: #{jkl.rem(10px)} #{jkl.$spacing-xs} #{jkl.rem(
|
|
42
|
+
10px
|
|
43
|
+
)} 0;
|
|
44
|
+
--jkl-radio-button-dot-size: #{$_mobile-radio-button-size -
|
|
45
|
+
(2 * $_radio-button-dot-padding)};
|
|
38
46
|
}
|
|
39
47
|
}
|
|
40
48
|
|
|
@@ -48,8 +56,11 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
|
|
|
48
56
|
--jkl-radio-button-size: #{$_compact-radio-button-size};
|
|
49
57
|
--jkl-radio-button-text-margin: #{jkl.$spacing-4} 0;
|
|
50
58
|
--jkl-radio-button-text-transform: translate3d(0, 0, 0);
|
|
51
|
-
--jkl-radio-button-dot-margin: #{jkl.rem(7px)} #{jkl.$spacing-xs} #{jkl.rem(
|
|
52
|
-
|
|
59
|
+
--jkl-radio-button-dot-margin: #{jkl.rem(7px)} #{jkl.$spacing-xs} #{jkl.rem(
|
|
60
|
+
7px
|
|
61
|
+
)} 0;
|
|
62
|
+
--jkl-radio-button-dot-size: #{$_compact-radio-button-size -
|
|
63
|
+
(2 * $_radio-button-dot-padding)};
|
|
53
64
|
|
|
54
65
|
@include jkl.declare-font-variables("jkl-radio-button-label", "small");
|
|
55
66
|
}
|
|
@@ -88,14 +99,18 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
|
|
|
88
99
|
&:checked {
|
|
89
100
|
+ .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
90
101
|
--dot-color: var(--jkl-color-border-action);
|
|
91
|
-
animation: $_radio-button-dot-animation-name
|
|
102
|
+
animation: $_radio-button-dot-animation-name
|
|
103
|
+
jkl.timing("productive") ease;
|
|
92
104
|
|
|
93
105
|
@include jkl.forced-colors-mode {
|
|
94
106
|
background-color: ButtonText;
|
|
95
107
|
}
|
|
96
108
|
}
|
|
97
109
|
|
|
98
|
-
.jkl-radio-button--error
|
|
110
|
+
.jkl-radio-button--error
|
|
111
|
+
&
|
|
112
|
+
+ .jkl-radio-button__label
|
|
113
|
+
> .jkl-radio-button__dot::after {
|
|
99
114
|
--background-color: var(--jkl-color-background-alert-error);
|
|
100
115
|
--dot-color: var(--jkl-color-text-on-alert);
|
|
101
116
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Do not edit directly
|
|
3
3
|
* Generated on Mon, 23 Sep 2024 08:51:40 GMT
|
|
4
4
|
*/
|
|
5
|
-
@keyframes jkl-dot-in-
|
|
5
|
+
@keyframes jkl-dot-in-utkmwn9 {
|
|
6
6
|
0% {
|
|
7
7
|
transform: scale(0.8);
|
|
8
8
|
}
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__dot::after {
|
|
71
|
-
animation: jkl-dot-in-
|
|
71
|
+
animation: jkl-dot-in-utkmwn9 150ms ease;
|
|
72
72
|
}
|
|
73
73
|
.jkl-radio-panel__main-label {
|
|
74
74
|
padding-block: 1.5rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes jkl-dot-in-
|
|
1
|
+
@keyframes jkl-dot-in-utkmwn9{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--dot-color:transparent;--ring-color:transparent;border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);padding-left:1rem}.jkl-radio-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-radio-panel__input{opacity:0;position:absolute;top:-6px}.jkl-radio-panel__dot{background-color:var(--ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__dot{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__dot:after{animation:jkl-dot-in-utkmwn9 .15s ease}.jkl-radio-panel__main-label{padding-block:1.5rem}.jkl-radio-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-radio-panel__extra-label>:first-child{padding-right:1rem}.jkl-radio-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-radio-panel__content{cursor:default;display:none;padding-right:1.5rem}.jkl-radio-panel:has(:checked) .jkl-radio-panel__content[data-open=true],.jkl-radio-panel__content[data-alwaysOpen=true]{display:block;margin-bottom:24px}.jkl-radio-panel:has(:checked),.jkl-radio-panel:has(:focus-visible),.jkl-radio-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}.jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-text-on-alert)}
|
|
@@ -81,7 +81,8 @@ $_radio-panel-dot-animation-name: jkl-dot-in-#{string.unique-id()};
|
|
|
81
81
|
|
|
82
82
|
&__input:checked + &__dot {
|
|
83
83
|
&::after {
|
|
84
|
-
animation: $_radio-panel-dot-animation-name jkl.timing("productive")
|
|
84
|
+
animation: $_radio-panel-dot-animation-name jkl.timing("productive")
|
|
85
|
+
ease;
|
|
85
86
|
}
|
|
86
87
|
}
|
|
87
88
|
|
|
@@ -82,7 +82,8 @@
|
|
|
82
82
|
[data-density=comfortable] {
|
|
83
83
|
--jkl-select-input-height: 3rem;
|
|
84
84
|
--jkl-select-arrow-right: 0.5rem;
|
|
85
|
-
--jkl-select-button-padding: 0.5rem 2.25rem 0.5rem
|
|
85
|
+
--jkl-select-button-padding: 0.5rem 2.25rem 0.5rem
|
|
86
|
+
0.75rem;
|
|
86
87
|
--jkl-select-search-input-padding: var(--jkl-select-button-padding);
|
|
87
88
|
--jkl-select-native-padding: 0 2.5rem 0 0.5rem;
|
|
88
89
|
--jkl-select-option-padding: 0.5rem 0.75rem;
|
|
@@ -102,9 +103,11 @@
|
|
|
102
103
|
[data-density=compact] {
|
|
103
104
|
--jkl-select-input-height: 2rem;
|
|
104
105
|
--jkl-select-arrow-right: 0.25rem;
|
|
105
|
-
--jkl-select-button-padding: 0.25rem 2rem 0.25rem
|
|
106
|
+
--jkl-select-button-padding: 0.25rem 2rem 0.25rem
|
|
107
|
+
0.5rem;
|
|
106
108
|
--jkl-select-search-input-padding: 0.25rem 0.5rem;
|
|
107
|
-
--jkl-select-native-padding: 0.25rem 1.5rem 0.25rem
|
|
109
|
+
--jkl-select-native-padding: 0.25rem 1.5rem 0.25rem
|
|
110
|
+
0.25rem;
|
|
108
111
|
--jkl-select-option-padding: 0.25rem 0.5rem;
|
|
109
112
|
--jkl-select-font-size: var(--jkl-small-font-size);
|
|
110
113
|
--jkl-select-line-height: var(--jkl-small-line-height);
|
|
@@ -55,7 +55,8 @@ $_select-search-input-selection-color--inverted: color.scale(
|
|
|
55
55
|
@include jkl.comfortable-density-variables {
|
|
56
56
|
--jkl-select-input-height: #{jkl.rem(48px)};
|
|
57
57
|
--jkl-select-arrow-right: #{jkl.$spacing-8};
|
|
58
|
-
--jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8}
|
|
58
|
+
--jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8}
|
|
59
|
+
#{jkl.$spacing-12};
|
|
59
60
|
--jkl-select-search-input-padding: var(--jkl-select-button-padding);
|
|
60
61
|
--jkl-select-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
|
|
61
62
|
--jkl-select-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
|
|
@@ -70,9 +71,11 @@ $_select-search-input-selection-color--inverted: color.scale(
|
|
|
70
71
|
@include jkl.compact-density-variables {
|
|
71
72
|
--jkl-select-input-height: #{jkl.rem(32px)};
|
|
72
73
|
--jkl-select-arrow-right: #{jkl.rem(4px)};
|
|
73
|
-
--jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4}
|
|
74
|
+
--jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4}
|
|
75
|
+
#{jkl.$spacing-8};
|
|
74
76
|
--jkl-select-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
|
|
75
|
-
--jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4}
|
|
77
|
+
--jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4}
|
|
78
|
+
#{jkl.$spacing-4};
|
|
76
79
|
--jkl-select-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
|
|
77
80
|
|
|
78
81
|
@include jkl.declare-font-variables("jkl-select", "small");
|
|
@@ -128,7 +131,9 @@ $_select-search-input-selection-color--inverted: color.scale(
|
|
|
128
131
|
background-color: var(--jkl-select-search-input-selection-color);
|
|
129
132
|
|
|
130
133
|
[data-theme="dark"] & {
|
|
131
|
-
background-color: var(
|
|
134
|
+
background-color: var(
|
|
135
|
+
--jkl-select-search-input-selection-color
|
|
136
|
+
);
|
|
132
137
|
}
|
|
133
138
|
}
|
|
134
139
|
}
|
|
@@ -194,7 +199,10 @@ $_select-search-input-selection-color--inverted: color.scale(
|
|
|
194
199
|
transition-property: transform, color;
|
|
195
200
|
@include jkl.motion;
|
|
196
201
|
|
|
197
|
-
@include jkl.forced-colors-svg-fallback(
|
|
202
|
+
@include jkl.forced-colors-svg-fallback(
|
|
203
|
+
$stroke: CanvasText,
|
|
204
|
+
$fill: CanvasText
|
|
205
|
+
);
|
|
198
206
|
}
|
|
199
207
|
|
|
200
208
|
&__options-menu {
|
|
@@ -212,7 +220,10 @@ $_select-search-input-selection-color--inverted: color.scale(
|
|
|
212
220
|
|
|
213
221
|
overflow-y: auto;
|
|
214
222
|
// Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
|
|
215
|
-
max-height: calc(
|
|
223
|
+
max-height: calc(
|
|
224
|
+
calc(var(--jkl-select-max-shown-options, 5) + 0.5) *
|
|
225
|
+
var(--jkl-select-input-height)
|
|
226
|
+
);
|
|
216
227
|
|
|
217
228
|
transition-property: height;
|
|
218
229
|
@include jkl.motion;
|
|
@@ -295,7 +306,9 @@ $_select-search-input-selection-color--inverted: color.scale(
|
|
|
295
306
|
|
|
296
307
|
/* Color of text selection */
|
|
297
308
|
.jkl-select__search-input::selection {
|
|
298
|
-
background-color: var(
|
|
309
|
+
background-color: var(
|
|
310
|
+
--jkl-select-search-input-error-selection-color
|
|
311
|
+
);
|
|
299
312
|
}
|
|
300
313
|
}
|
|
301
314
|
|
|
@@ -135,7 +135,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
|
|
|
135
135
|
margin-bottom: 0;
|
|
136
136
|
}
|
|
137
137
|
.jkl-system-message--dismissed {
|
|
138
|
-
animation: jkl-dismiss-
|
|
138
|
+
animation: jkl-dismiss-urtxaru 400ms ease-in forwards;
|
|
139
139
|
transition: visibility 0ms 400ms;
|
|
140
140
|
visibility: hidden;
|
|
141
141
|
}
|
|
@@ -167,7 +167,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
|
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
@keyframes jkl-dismiss-
|
|
170
|
+
@keyframes jkl-dismiss-urtxaru {
|
|
171
171
|
from {
|
|
172
172
|
opacity: 1;
|
|
173
173
|
transform: translate3d(0, 0, 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:flex;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{align-self:flex-start;flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{align-items:center;align-self:flex-start;background-color:transparent;border-style:none;color:inherit;cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-system-message-dismiss-button-size);justify-content:center;margin:var(--jkl-system-message-dismiss-button-margin);outline:0;outline-style:none;padding:0;width:var(--jkl-system-message-dismiss-button-size)}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid #1b1917}@media screen and (forced-colors:active){html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:flex;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{align-self:flex-start;flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{align-items:center;align-self:flex-start;background-color:transparent;border-style:none;color:inherit;cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-system-message-dismiss-button-size);justify-content:center;margin:var(--jkl-system-message-dismiss-button-margin);outline:0;outline-style:none;padding:0;width:var(--jkl-system-message-dismiss-button-size)}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid #1b1917}@media screen and (forced-colors:active){html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-urtxaru .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-urtxaru{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}
|
|
@@ -13,7 +13,9 @@ $_dismiss-hover-color: jkl.$color-stein;
|
|
|
13
13
|
--jkl-system-message-icon-padding: #{jkl.rem(3px)} 0 0 0;
|
|
14
14
|
--jkl-system-message-content-padding: #{jkl.$spacing-l};
|
|
15
15
|
--jkl-system-message-dismiss-button-size: #{jkl.rem(44px)};
|
|
16
|
-
--jkl-system-message-dismiss-button-margin: -#{jkl.rem(6.5px)} -#{jkl.rem(
|
|
16
|
+
--jkl-system-message-dismiss-button-margin: -#{jkl.rem(6.5px)} -#{jkl.rem(
|
|
17
|
+
18px
|
|
18
|
+
)} -#{jkl.rem(6.5px)} auto;
|
|
17
19
|
--jkl-system-message-message-margin: 0 #{jkl.$spacing-m};
|
|
18
20
|
@include jkl.declare-font-variables("jkl-system-message-message", "body");
|
|
19
21
|
}
|
|
@@ -23,7 +25,9 @@ $_dismiss-hover-color: jkl.$color-stein;
|
|
|
23
25
|
--jkl-system-message-icon-padding: #{jkl.rem(1px)} 0 0 0;
|
|
24
26
|
--jkl-system-message-content-padding: #{jkl.$spacing-xs};
|
|
25
27
|
--jkl-system-message-dismiss-button-size: #{jkl.rem(32px)};
|
|
26
|
-
--jkl-system-message-dismiss-button-margin: -#{jkl.rem(3px)} -#{jkl.rem(
|
|
28
|
+
--jkl-system-message-dismiss-button-margin: -#{jkl.rem(3px)} -#{jkl.rem(
|
|
29
|
+
6px
|
|
30
|
+
)} -#{jkl.rem(4.5px)} auto;
|
|
27
31
|
--jkl-system-message-message-margin: 0 #{jkl.$spacing-s};
|
|
28
32
|
@include jkl.declare-font-variables("jkl-system-message-message", "small");
|
|
29
33
|
}
|
|
@@ -106,7 +110,8 @@ $_dismiss-hover-color: jkl.$color-stein;
|
|
|
106
110
|
}
|
|
107
111
|
|
|
108
112
|
&--dismissed {
|
|
109
|
-
animation: $_dismiss-animation-name jkl.timing("lazy")
|
|
113
|
+
animation: $_dismiss-animation-name jkl.timing("lazy")
|
|
114
|
+
jkl.easing("exit") forwards;
|
|
110
115
|
transition: visibility 0ms jkl.timing("lazy");
|
|
111
116
|
visibility: hidden;
|
|
112
117
|
}
|