@fremtind/jokul 0.37.0 → 0.37.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/package.json +2 -2
- package/styles/components/accordion/accordion.css +29 -22
- package/styles/components/accordion/accordion.min.css +4 -4
- package/styles/components/accordion/accordion.scss +36 -36
- package/styles/components/button/button.css +50 -58
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +40 -30
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/chip/chip.css +5 -13
- package/styles/components/chip/chip.min.css +1 -1
- package/styles/components/chip/chip.scss +2 -2
- package/styles/components/combobox/combobox.css +8 -20
- package/styles/components/combobox/combobox.min.css +1 -1
- package/styles/components/combobox/combobox.scss +2 -2
- package/styles/components/datepicker/_calendar.scss +18 -18
- package/styles/components/datepicker/datepicker.css +15 -8
- package/styles/components/datepicker/datepicker.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/_file.scss +16 -16
- package/styles/components/file-input/file-input.css +19 -14
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/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/tag/tag.css +5 -13
- package/styles/components/tag/tag.min.css +1 -1
- package/styles/components/tag/tag.scss +2 -2
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/tooltip/tooltip.css +8 -20
- package/styles/components/tooltip/tooltip.min.css +1 -1
- package/styles/components/tooltip/tooltip.scss +2 -2
- package/styles/core/jkl/_theme.scss +0 -52
- package/styles/styles.css +157 -191
- package/styles/styles.min.css +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fremtind/jokul",
|
|
3
|
-
"version": "0.37.
|
|
3
|
+
"version": "0.37.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -556,5 +556,5 @@
|
|
|
556
556
|
"@babel/preset-react"
|
|
557
557
|
]
|
|
558
558
|
},
|
|
559
|
-
"gitHead": "
|
|
559
|
+
"gitHead": "d5c09e40c98ff1079995f552f14cc42c48bfb2e9"
|
|
560
560
|
}
|
|
@@ -2,16 +2,15 @@
|
|
|
2
2
|
* Do not edit directly
|
|
3
3
|
* Generated on Mon, 28 Oct 2024 14:22:00 GMT
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
--title-padding: var(--jkl-spacing-16) 3rem var(
|
|
5
|
+
:root,
|
|
6
|
+
[data-layout-density=comfortable],
|
|
7
|
+
[data-density=comfortable] {
|
|
8
|
+
--jkl-accordion-title-padding: var(--jkl-spacing-16) 3rem var(
|
|
10
9
|
--jkl-spacing-16
|
|
11
10
|
) var(--jkl-spacing-16);
|
|
12
|
-
--arrow-top: 1.25rem;
|
|
13
|
-
--arrow-right: var(--jkl-spacing-12);
|
|
14
|
-
--content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
|
|
11
|
+
--jkl-accordion-arrow-top: 1.25rem;
|
|
12
|
+
--jkl-accordion-arrow-right: var(--jkl-spacing-12);
|
|
13
|
+
--jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
|
|
15
14
|
var(--jkl-spacing-16);
|
|
16
15
|
--title-font-size: var(--jkl-body-font-size);
|
|
17
16
|
--title-line-height: var(--jkl-body-line-height);
|
|
@@ -21,22 +20,26 @@
|
|
|
21
20
|
--content-font-weight: var(--jkl-body-font-weight);
|
|
22
21
|
}
|
|
23
22
|
@media (width >= 0) and (max-width: 679px) {
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
:root,
|
|
24
|
+
[data-layout-density=comfortable],
|
|
25
|
+
[data-density=comfortable] {
|
|
26
|
+
--jkl-accordion-title-padding: var(--jkl-spacing-12) 2.75rem var(
|
|
26
27
|
--jkl-spacing-12
|
|
27
28
|
) var(--jkl-spacing-12);
|
|
28
|
-
--content-padding: var(--jkl-spacing-8)
|
|
29
|
-
var(--jkl-spacing-16) var(--jkl-spacing-12);
|
|
30
|
-
--arrow-top: 1.4375rem;
|
|
29
|
+
--jkl-accordion-content-padding: var(--jkl-spacing-8)
|
|
30
|
+
var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
|
|
31
|
+
--jkl-accordion-arrow-top: 1.4375rem;
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
|
|
35
|
+
[data-layout-density=compact],
|
|
36
|
+
[data-density=compact] {
|
|
37
|
+
--jkl-accordion-title-padding: var(--jkl-spacing-8) 2rem var(
|
|
35
38
|
--jkl-spacing-8
|
|
36
39
|
) var(--jkl-spacing-8);
|
|
37
|
-
--arrow-top: var(--jkl-spacing-8);
|
|
38
|
-
--arrow-right: var(--jkl-spacing-4);
|
|
39
|
-
--content-padding: var(--jkl-spacing-8);
|
|
40
|
+
--jkl-accordion-arrow-top: var(--jkl-spacing-8);
|
|
41
|
+
--jkl-accordion-arrow-right: var(--jkl-spacing-4);
|
|
42
|
+
--jkl-accordion-content-padding: var(--jkl-spacing-8);
|
|
40
43
|
--title-font-size: var(--jkl-small-font-size);
|
|
41
44
|
--title-line-height: var(--jkl-small-line-height);
|
|
42
45
|
--title-font-weight: var(--jkl-small-font-weight);
|
|
@@ -45,6 +48,10 @@
|
|
|
45
48
|
--content-font-weight: var(--jkl-small-font-weight);
|
|
46
49
|
}
|
|
47
50
|
|
|
51
|
+
.jkl-accordion {
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
|
|
48
55
|
.jkl-accordion-item {
|
|
49
56
|
--background: transparent;
|
|
50
57
|
--text-color: var(--jkl-color-text-default);
|
|
@@ -84,7 +91,7 @@
|
|
|
84
91
|
list-style: none;
|
|
85
92
|
background-color: transparent;
|
|
86
93
|
position: relative;
|
|
87
|
-
padding: var(--title-padding);
|
|
94
|
+
padding: var(--jkl-accordion-title-padding);
|
|
88
95
|
text-align: left;
|
|
89
96
|
width: 100%;
|
|
90
97
|
box-sizing: border-box;
|
|
@@ -125,8 +132,8 @@
|
|
|
125
132
|
.jkl-accordion-item__arrow {
|
|
126
133
|
pointer-events: none;
|
|
127
134
|
position: absolute;
|
|
128
|
-
right: var(--arrow-right);
|
|
129
|
-
top: var(--arrow-top);
|
|
135
|
+
right: var(--jkl-accordion-arrow-right);
|
|
136
|
+
top: var(--jkl-accordion-arrow-top);
|
|
130
137
|
transition-timing-function: ease;
|
|
131
138
|
transition-duration: 100ms;
|
|
132
139
|
transition-property: translate;
|
|
@@ -151,7 +158,7 @@
|
|
|
151
158
|
line-height: var(--content-line-height);
|
|
152
159
|
font-weight: var(--content-font-weight);
|
|
153
160
|
height: auto;
|
|
154
|
-
padding: var(--content-padding);
|
|
161
|
+
padding: var(--jkl-accordion-content-padding);
|
|
155
162
|
}
|
|
156
163
|
@media screen and (forced-colors: active) {
|
|
157
164
|
.jkl-accordion-item:nth-child(n) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-16) 3rem var(
|
|
2
2
|
--jkl-spacing-16
|
|
3
|
-
) var(--jkl-spacing-16);--arrow-top:1.25rem;--arrow-right:var(--jkl-spacing-12);--content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){
|
|
3
|
+
) var(--jkl-spacing-16);--jkl-accordion-arrow-top:1.25rem;--jkl-accordion-arrow-right:var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-12) 2.75rem var(
|
|
4
4
|
--jkl-spacing-12
|
|
5
|
-
) var(--jkl-spacing-12);--content-padding:var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);--arrow-top:1.4375rem}}
|
|
5
|
+
) var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);--jkl-accordion-arrow-top:1.4375rem}}[data-density=compact],[data-layout-density=compact]{--jkl-accordion-title-padding:var(--jkl-spacing-8) 2rem var(
|
|
6
6
|
--jkl-spacing-8
|
|
7
|
-
) var(--jkl-spacing-8);--arrow-top:var(--jkl-spacing-8);--arrow-right:var(--jkl-spacing-4);--content-padding:var(--jkl-spacing-8);--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion-item{--background:transparent;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:transparent;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;outline:0;outline-style:none;padding:var(--title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert;outline:revert;outline-style:revert}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--arrow-right);top:var(--arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n){border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover{border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child{border-bottom:.125rem solid ButtonText}.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}
|
|
7
|
+
) var(--jkl-spacing-8);--jkl-accordion-arrow-top:var(--jkl-spacing-8);--jkl-accordion-arrow-right:var(--jkl-spacing-4);--jkl-accordion-content-padding:var(--jkl-spacing-8);--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion{width:100%}.jkl-accordion-item{--background:transparent;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:transparent;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;outline:0;outline-style:none;padding:var(--jkl-accordion-title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert;outline:revert;outline-style:revert}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--jkl-accordion-arrow-right);top:var(--jkl-accordion-arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--jkl-accordion-content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n){border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover{border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child{border-bottom:.125rem solid ButtonText}.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}
|
|
@@ -1,42 +1,42 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
@use "../../core/jkl";
|
|
3
3
|
|
|
4
|
+
@include jkl.comfortable-density-variables {
|
|
5
|
+
--jkl-accordion-title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(
|
|
6
|
+
--jkl-spacing-16
|
|
7
|
+
) var(--jkl-spacing-16);
|
|
8
|
+
--jkl-accordion-arrow-top: #{jkl.rem(20px)};
|
|
9
|
+
--jkl-accordion-arrow-right: var(--jkl-spacing-12);
|
|
10
|
+
--jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
|
|
11
|
+
var(--jkl-spacing-16);
|
|
12
|
+
@include jkl.declare-font-variables("title", "body");
|
|
13
|
+
@include jkl.declare-font-variables("content", "body");
|
|
14
|
+
|
|
15
|
+
@include jkl.small-device {
|
|
16
|
+
--jkl-accordion-title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(
|
|
17
|
+
--jkl-spacing-12
|
|
18
|
+
) var(--jkl-spacing-12);
|
|
19
|
+
--jkl-accordion-content-padding: var(--jkl-spacing-8)
|
|
20
|
+
var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
|
|
21
|
+
--jkl-accordion-arrow-top: #{jkl.rem(23px)};
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@include jkl.compact-density-variables {
|
|
26
|
+
--jkl-accordion-title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(
|
|
27
|
+
--jkl-spacing-8
|
|
28
|
+
) var(--jkl-spacing-8);
|
|
29
|
+
--jkl-accordion-arrow-top: var(--jkl-spacing-8);
|
|
30
|
+
--jkl-accordion-arrow-right: var(--jkl-spacing-4);
|
|
31
|
+
--jkl-accordion-content-padding: var(--jkl-spacing-8);
|
|
32
|
+
@include jkl.declare-font-variables("title", "small");
|
|
33
|
+
@include jkl.declare-font-variables("content", "small");
|
|
34
|
+
}
|
|
35
|
+
|
|
4
36
|
/// @deprecated Denne komponenten bør ikke brukes lenger, og vil ikke bli oppdatert.
|
|
5
37
|
/// Bruk heller komponenten `Expandable`
|
|
6
38
|
.jkl-accordion {
|
|
7
39
|
width: 100%;
|
|
8
|
-
|
|
9
|
-
@include jkl.comfortable-density {
|
|
10
|
-
--title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(
|
|
11
|
-
--jkl-spacing-16
|
|
12
|
-
) var(--jkl-spacing-16);
|
|
13
|
-
--arrow-top: #{jkl.rem(20px)};
|
|
14
|
-
--arrow-right: var(--jkl-spacing-12);
|
|
15
|
-
--content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
|
|
16
|
-
var(--jkl-spacing-16);
|
|
17
|
-
@include jkl.declare-font-variables("title", "body");
|
|
18
|
-
@include jkl.declare-font-variables("content", "body");
|
|
19
|
-
|
|
20
|
-
@include jkl.small-device {
|
|
21
|
-
--title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(
|
|
22
|
-
--jkl-spacing-12
|
|
23
|
-
) var(--jkl-spacing-12);
|
|
24
|
-
--content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12)
|
|
25
|
-
var(--jkl-spacing-16) var(--jkl-spacing-12);
|
|
26
|
-
--arrow-top: #{jkl.rem(23px)};
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@include jkl.compact-density {
|
|
31
|
-
--title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(
|
|
32
|
-
--jkl-spacing-8
|
|
33
|
-
) var(--jkl-spacing-8);
|
|
34
|
-
--arrow-top: var(--jkl-spacing-8);
|
|
35
|
-
--arrow-right: var(--jkl-spacing-4);
|
|
36
|
-
--content-padding: var(--jkl-spacing-8);
|
|
37
|
-
@include jkl.declare-font-variables("title", "small");
|
|
38
|
-
@include jkl.declare-font-variables("content", "small");
|
|
39
|
-
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.jkl-accordion-item {
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
list-style: none;
|
|
82
82
|
background-color: transparent;
|
|
83
83
|
position: relative;
|
|
84
|
-
padding: var(--title-padding);
|
|
84
|
+
padding: var(--jkl-accordion-title-padding);
|
|
85
85
|
text-align: left;
|
|
86
86
|
width: 100%;
|
|
87
87
|
box-sizing: border-box;
|
|
@@ -108,8 +108,8 @@
|
|
|
108
108
|
&__arrow {
|
|
109
109
|
pointer-events: none;
|
|
110
110
|
position: absolute;
|
|
111
|
-
right: var(--arrow-right);
|
|
112
|
-
top: var(--arrow-top);
|
|
111
|
+
right: var(--jkl-accordion-arrow-right);
|
|
112
|
+
top: var(--jkl-accordion-arrow-top);
|
|
113
113
|
|
|
114
114
|
@include jkl.motion("standard", "snappy");
|
|
115
115
|
transition-property: translate;
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
&__content {
|
|
129
129
|
@include jkl.use-font-variables("content");
|
|
130
130
|
height: auto;
|
|
131
|
-
padding: var(--content-padding);
|
|
131
|
+
padding: var(--jkl-accordion-content-padding);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
@include jkl.forced-colors-mode {
|
|
@@ -2,49 +2,57 @@
|
|
|
2
2
|
* Do not edit directly
|
|
3
3
|
* Generated on Mon, 28 Oct 2024 14:22:00 GMT
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
--padding-
|
|
13
|
-
--padding-
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
|
|
5
|
+
:root,
|
|
6
|
+
[data-layout-density=comfortable],
|
|
7
|
+
[data-density=comfortable] {
|
|
8
|
+
--jkl-button-padding-block: 0.5rem;
|
|
9
|
+
--jkl-button-padding-text: 1.5rem;
|
|
10
|
+
--jkl-button-padding-icon: 1rem;
|
|
11
|
+
--jkl-button-padding-icon-button: 0.5rem;
|
|
12
|
+
--jkl-button-padding-tertiary-inline: 0.25rem;
|
|
13
|
+
--jkl-button-padding-ghost-inline: 0.5rem;
|
|
14
|
+
--jkl-button-font-size: 1.125rem;
|
|
15
|
+
--jkl-button-line-height: 1.75rem;
|
|
16
|
+
}
|
|
17
|
+
@media (min-width: 680px) {
|
|
18
|
+
:root,
|
|
19
|
+
[data-layout-density=comfortable],
|
|
20
|
+
[data-density=comfortable] {
|
|
21
|
+
--jkl-button-font-size: 1.25rem;
|
|
22
|
+
--jkl-button-line-height: 2rem;
|
|
23
|
+
}
|
|
18
24
|
}
|
|
19
25
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--padding-
|
|
27
|
-
--padding-
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
--jkl-icon-weight: 500;
|
|
39
|
-
font-weight: 700;
|
|
26
|
+
[data-layout-density=compact],
|
|
27
|
+
[data-density=compact] {
|
|
28
|
+
--jkl-button-padding-block: 0.25rem;
|
|
29
|
+
--jkl-button-padding-text: 0.75rem;
|
|
30
|
+
--jkl-button-padding-icon: 0.5rem;
|
|
31
|
+
--jkl-button-padding-icon-button: 0.25rem;
|
|
32
|
+
--jkl-button-padding-tertiary-inline: 0.125rem;
|
|
33
|
+
--jkl-button-padding-ghost-inline: 0.25rem;
|
|
34
|
+
--jkl-button-font-size: 1rem;
|
|
35
|
+
--jkl-button-line-height: 1.5rem;
|
|
36
|
+
}
|
|
37
|
+
@media (min-width: 680px) {
|
|
38
|
+
[data-layout-density=compact],
|
|
39
|
+
[data-density=compact] {
|
|
40
|
+
--jkl-button-font-size: 1rem;
|
|
41
|
+
--jkl-button-line-height: 1.5rem;
|
|
42
|
+
--jkl-button-icon-weight: 500;
|
|
43
|
+
}
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
.jkl-button {
|
|
47
|
+
--jkl-icon-weight: var(--jkl-button-icon-weight, initial);
|
|
43
48
|
--text-color: var(--jkl-color-text-default);
|
|
44
49
|
--background-color: transparent;
|
|
45
50
|
--border-radius: 0;
|
|
46
51
|
--border-width: 0.0625rem;
|
|
47
52
|
display: inline-block;
|
|
53
|
+
font-weight: 700;
|
|
54
|
+
font-size: var(--jkl-button-font-size);
|
|
55
|
+
line-height: var(--jkl-button-line-height);
|
|
48
56
|
cursor: pointer;
|
|
49
57
|
user-select: none;
|
|
50
58
|
background-color: var(--background-color);
|
|
@@ -53,39 +61,23 @@
|
|
|
53
61
|
text-decoration: none;
|
|
54
62
|
-webkit-tap-highlight-color: transparent;
|
|
55
63
|
border-radius: var(--border-radius);
|
|
56
|
-
padding-inline: var(--padding-text);
|
|
57
|
-
padding-block: var(--padding-block);
|
|
64
|
+
padding-inline: var(--jkl-button-padding-text);
|
|
65
|
+
padding-block: var(--jkl-button-padding-block);
|
|
58
66
|
position: relative;
|
|
59
67
|
overflow: hidden;
|
|
60
68
|
max-width: 100%;
|
|
61
69
|
transition-timing-function: ease;
|
|
62
70
|
transition-duration: 150ms;
|
|
63
71
|
transition-property: scale;
|
|
64
|
-
font-size: 1.125rem;
|
|
65
|
-
line-height: 1.75rem;
|
|
66
|
-
font-weight: 400;
|
|
67
|
-
--jkl-icon-weight: 300;
|
|
68
|
-
--jkl-icon-weight: 500;
|
|
69
|
-
font-weight: 700;
|
|
70
|
-
}
|
|
71
|
-
@media (min-width: 680px) {
|
|
72
|
-
.jkl-button {
|
|
73
|
-
font-size: 1.25rem;
|
|
74
|
-
line-height: 2rem;
|
|
75
|
-
font-weight: 400;
|
|
76
|
-
--jkl-icon-weight: 300;
|
|
77
|
-
--jkl-icon-weight: 500;
|
|
78
|
-
font-weight: 700;
|
|
79
|
-
}
|
|
80
72
|
}
|
|
81
73
|
.jkl-button:has(.jkl-icon:first-child) {
|
|
82
|
-
padding-inline-start: var(--padding-icon);
|
|
74
|
+
padding-inline-start: var(--jkl-button-padding-icon);
|
|
83
75
|
}
|
|
84
76
|
.jkl-button:has(.jkl-icon:last-child) {
|
|
85
|
-
padding-inline-end: var(--padding-icon);
|
|
77
|
+
padding-inline-end: var(--jkl-button-padding-icon);
|
|
86
78
|
}
|
|
87
79
|
.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child) {
|
|
88
|
-
padding-inline: var(--padding-icon-button);
|
|
80
|
+
padding-inline: var(--jkl-button-padding-icon-button);
|
|
89
81
|
}
|
|
90
82
|
.jkl-button__label {
|
|
91
83
|
transition-timing-function: ease;
|
|
@@ -143,7 +135,7 @@
|
|
|
143
135
|
height: 1rem;
|
|
144
136
|
}
|
|
145
137
|
html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
146
|
-
animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-
|
|
138
|
+
animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-urylpi7;
|
|
147
139
|
}
|
|
148
140
|
:not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
|
|
149
141
|
scale: 1.05;
|
|
@@ -164,7 +156,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
164
156
|
border: var(--border-width) solid var(--text-color);
|
|
165
157
|
}
|
|
166
158
|
.jkl-button--tertiary, .jkl-button--tertiary:has(.jkl-icon:first-child), .jkl-button--tertiary:has(.jkl-icon:last-child) {
|
|
167
|
-
padding-inline: var(--padding-tertiary-inline);
|
|
159
|
+
padding-inline: var(--jkl-button-padding-tertiary-inline);
|
|
168
160
|
}
|
|
169
161
|
.jkl-button--tertiary::after, .jkl-button--tertiary:has(.jkl-icon:first-child)::after, .jkl-button--tertiary:has(.jkl-icon:last-child)::after {
|
|
170
162
|
content: "";
|
|
@@ -177,7 +169,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
177
169
|
--border-width: 0.125rem;
|
|
178
170
|
}
|
|
179
171
|
.jkl-button--ghost, .jkl-button--ghost:has(.jkl-icon:first-child), .jkl-button--ghost:has(.jkl-icon:last-child) {
|
|
180
|
-
padding-inline: var(--padding-ghost-inline);
|
|
172
|
+
padding-inline: var(--jkl-button-padding-ghost-inline);
|
|
181
173
|
border-radius: 0.25rem;
|
|
182
174
|
transition-timing-function: ease;
|
|
183
175
|
transition-duration: 150ms;
|
|
@@ -187,7 +179,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
|
|
|
187
179
|
--background-color: var(--jkl-color-background-interactive-hover);
|
|
188
180
|
}
|
|
189
181
|
|
|
190
|
-
@keyframes jkl-tertiary-flash-
|
|
182
|
+
@keyframes jkl-tertiary-flash-urylpi7 {
|
|
191
183
|
0% {
|
|
192
184
|
opacity: 0.5;
|
|
193
185
|
scale: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-padding-block:0.5rem;--jkl-button-padding-text:1.5rem;--jkl-button-padding-icon:1rem;--jkl-button-padding-icon-button:0.5rem;--jkl-button-padding-tertiary-inline:0.25rem;--jkl-button-padding-ghost-inline:0.5rem;--jkl-button-font-size:1.125rem;--jkl-button-line-height:1.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:1.25rem;--jkl-button-line-height:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-padding-block:0.25rem;--jkl-button-padding-text:0.75rem;--jkl-button-padding-icon:0.5rem;--jkl-button-padding-icon-button:0.25rem;--jkl-button-padding-tertiary-inline:0.125rem;--jkl-button-padding-ghost-inline:0.25rem;--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem}@media (min-width:680px){[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem;--jkl-button-icon-weight:500}}.jkl-button{--jkl-icon-weight:var(--jkl-button-icon-weight,initial);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font-size:var(--jkl-button-font-size);font-weight:700;line-height:var(--jkl-button-line-height);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-urylpi7 .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--jkl-button-padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-urylpi7{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
|
|
@@ -4,30 +4,41 @@
|
|
|
4
4
|
|
|
5
5
|
$_flash-animation-name: jkl-tertiary-flash-#{string.unique-id()};
|
|
6
6
|
|
|
7
|
-
@include jkl.comfortable-density
|
|
8
|
-
--padding-block: #{jkl.$spacing-8};
|
|
9
|
-
--padding-text: #{jkl.$spacing-24};
|
|
10
|
-
--padding-icon: #{jkl.$spacing-16};
|
|
11
|
-
--padding-icon-button: #{jkl.$spacing-8};
|
|
12
|
-
--padding-tertiary-inline: #{jkl.$spacing-4};
|
|
13
|
-
--padding-ghost-inline: #{jkl.$spacing-8};
|
|
7
|
+
@include jkl.comfortable-density-variables {
|
|
8
|
+
--jkl-button-padding-block: #{jkl.$spacing-8};
|
|
9
|
+
--jkl-button-padding-text: #{jkl.$spacing-24};
|
|
10
|
+
--jkl-button-padding-icon: #{jkl.$spacing-16};
|
|
11
|
+
--jkl-button-padding-icon-button: #{jkl.$spacing-8};
|
|
12
|
+
--jkl-button-padding-tertiary-inline: #{jkl.$spacing-4};
|
|
13
|
+
--jkl-button-padding-ghost-inline: #{jkl.$spacing-8};
|
|
14
|
+
--jkl-button-font-size: #{jkl.$typography-body-small-font-size};
|
|
15
|
+
--jkl-button-line-height: #{jkl.$typography-body-small-line-height};
|
|
16
|
+
|
|
17
|
+
@include jkl.from-medium-device {
|
|
18
|
+
--jkl-button-font-size: #{jkl.$typography-body-base-font-size};
|
|
19
|
+
--jkl-button-line-height: #{jkl.$typography-body-base-line-height};
|
|
20
|
+
}
|
|
14
21
|
}
|
|
15
22
|
|
|
16
|
-
@include jkl.compact-density
|
|
17
|
-
--padding-block: #{jkl.$spacing-4};
|
|
18
|
-
--padding-text: #{jkl.$spacing-12};
|
|
19
|
-
--padding-icon: #{jkl.$spacing-8};
|
|
20
|
-
--padding-icon-button: #{jkl.$spacing-4};
|
|
21
|
-
--padding-tertiary-inline: #{jkl.$spacing-2};
|
|
22
|
-
--padding-ghost-inline: #{jkl.$spacing-4};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
@include jkl.compact-density-variables {
|
|
24
|
+
--jkl-button-padding-block: #{jkl.$spacing-4};
|
|
25
|
+
--jkl-button-padding-text: #{jkl.$spacing-12};
|
|
26
|
+
--jkl-button-padding-icon: #{jkl.$spacing-8};
|
|
27
|
+
--jkl-button-padding-icon-button: #{jkl.$spacing-4};
|
|
28
|
+
--jkl-button-padding-tertiary-inline: #{jkl.$spacing-2};
|
|
29
|
+
--jkl-button-padding-ghost-inline: #{jkl.$spacing-4};
|
|
30
|
+
--jkl-button-font-size: #{jkl.$typography-small-small-font-size};
|
|
31
|
+
--jkl-button-line-height: #{jkl.$typography-small-small-line-height};
|
|
32
|
+
|
|
33
|
+
@include jkl.from-medium-device {
|
|
34
|
+
--jkl-button-font-size: #{jkl.$typography-small-base-font-size};
|
|
35
|
+
--jkl-button-line-height: #{jkl.$typography-small-base-line-height};
|
|
36
|
+
--jkl-button-icon-weight: #{jkl.$icon-weight-bold};
|
|
27
37
|
}
|
|
28
38
|
}
|
|
29
39
|
|
|
30
40
|
.jkl-button {
|
|
41
|
+
--jkl-icon-weight: var(--jkl-button-icon-weight, initial);
|
|
31
42
|
--text-color: var(--jkl-color-text-default);
|
|
32
43
|
--background-color: transparent;
|
|
33
44
|
--border-radius: 0;
|
|
@@ -35,6 +46,10 @@ $_flash-animation-name: jkl-tertiary-flash-#{string.unique-id()};
|
|
|
35
46
|
|
|
36
47
|
display: inline-block;
|
|
37
48
|
|
|
49
|
+
font-weight: #{jkl.$typography-weight-bold};
|
|
50
|
+
font-size: var(--jkl-button-font-size);
|
|
51
|
+
line-height: var(--jkl-button-line-height);
|
|
52
|
+
|
|
38
53
|
// button and link resets
|
|
39
54
|
cursor: pointer;
|
|
40
55
|
user-select: none;
|
|
@@ -45,29 +60,24 @@ $_flash-animation-name: jkl-tertiary-flash-#{string.unique-id()};
|
|
|
45
60
|
-webkit-tap-highlight-color: transparent;
|
|
46
61
|
|
|
47
62
|
border-radius: var(--border-radius);
|
|
48
|
-
padding-inline: var(--padding-text);
|
|
49
|
-
padding-block: var(--padding-block);
|
|
63
|
+
padding-inline: var(--jkl-button-padding-text);
|
|
64
|
+
padding-block: var(--jkl-button-padding-block);
|
|
50
65
|
position: relative;
|
|
51
66
|
overflow: hidden;
|
|
52
67
|
max-width: 100%;
|
|
53
68
|
|
|
54
69
|
@include jkl.motion("standard", "productive", scale);
|
|
55
70
|
|
|
56
|
-
@include jkl.text-style("body") {
|
|
57
|
-
--jkl-icon-weight: #{jkl.$icon-weight-bold};
|
|
58
|
-
font-weight: jkl.$typography-weight-bold;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
71
|
&:has(.jkl-icon:first-child) {
|
|
62
|
-
padding-inline-start: var(--padding-icon);
|
|
72
|
+
padding-inline-start: var(--jkl-button-padding-icon);
|
|
63
73
|
}
|
|
64
74
|
|
|
65
75
|
&:has(.jkl-icon:last-child) {
|
|
66
|
-
padding-inline-end: var(--padding-icon);
|
|
76
|
+
padding-inline-end: var(--jkl-button-padding-icon);
|
|
67
77
|
}
|
|
68
78
|
|
|
69
79
|
&:has(.jkl-icon:first-child):has(.jkl-icon:last-child) {
|
|
70
|
-
padding-inline: var(--padding-icon-button);
|
|
80
|
+
padding-inline: var(--jkl-button-padding-icon-button);
|
|
71
81
|
}
|
|
72
82
|
|
|
73
83
|
&__label {
|
|
@@ -170,7 +180,7 @@ $_flash-animation-name: jkl-tertiary-flash-#{string.unique-id()};
|
|
|
170
180
|
&--tertiary,
|
|
171
181
|
&--tertiary:has(.jkl-icon:first-child),
|
|
172
182
|
&--tertiary:has(.jkl-icon:last-child) {
|
|
173
|
-
padding-inline: var(--padding-tertiary-inline);
|
|
183
|
+
padding-inline: var(--jkl-button-padding-tertiary-inline);
|
|
174
184
|
|
|
175
185
|
&::after {
|
|
176
186
|
content: "";
|
|
@@ -189,7 +199,7 @@ $_flash-animation-name: jkl-tertiary-flash-#{string.unique-id()};
|
|
|
189
199
|
&--ghost,
|
|
190
200
|
&--ghost:has(.jkl-icon:first-child),
|
|
191
201
|
&--ghost:has(.jkl-icon:last-child) {
|
|
192
|
-
padding-inline: var(--padding-ghost-inline);
|
|
202
|
+
padding-inline: var(--jkl-button-padding-ghost-inline);
|
|
193
203
|
border-radius: jkl.rem(4px);
|
|
194
204
|
|
|
195
205
|
@include jkl.motion("standard", "productive", background-color);
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
--jkl-checkbox-line-height: 1.5rem;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
@keyframes jkl-checkbox-checked-
|
|
35
|
+
@keyframes jkl-checkbox-checked-ui9axne {
|
|
36
36
|
0% {
|
|
37
37
|
width: 0;
|
|
38
38
|
height: 0;
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
height: 58%;
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
49
|
+
@keyframes jkl-checkbox-indeterminate-ui9axng {
|
|
50
50
|
0% {
|
|
51
51
|
width: 0;
|
|
52
52
|
}
|
|
@@ -74,11 +74,11 @@
|
|
|
74
74
|
top: -6px;
|
|
75
75
|
}
|
|
76
76
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
77
|
-
animation: jkl-checkbox-checked-
|
|
77
|
+
animation: jkl-checkbox-checked-ui9axne 150ms ease-in-out forwards;
|
|
78
78
|
opacity: 1;
|
|
79
79
|
}
|
|
80
80
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
81
|
-
animation: jkl-checkbox-indeterminate-
|
|
81
|
+
animation: jkl-checkbox-indeterminate-ui9axng 150ms ease-in-out forwards;
|
|
82
82
|
opacity: 1;
|
|
83
83
|
}
|
|
84
84
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-
|
|
1
|
+
:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-ui9axne{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-ui9axng{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-ui9axne .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-ui9axng .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
|