@navikt/ds-css 6.6.1 → 6.7.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/CHANGELOG.md +18 -0
- package/baseline/_utilities.css +1 -1
- package/config/_mappings.js +1 -0
- package/dist/component/form.css +23 -94
- package/dist/component/form.min.css +1 -1
- package/dist/component/index.css +129 -99
- package/dist/component/index.min.css +2 -2
- package/dist/component/progressbar.css +109 -0
- package/dist/component/progressbar.min.css +1 -0
- package/dist/component/readmore.css +3 -2
- package/dist/component/readmore.min.css +1 -1
- package/dist/component/timeline.css +1 -1
- package/dist/component/timeline.min.css +1 -1
- package/dist/components.css +137 -104
- package/dist/components.min.css +1 -1
- package/dist/global/baseline.css +1 -1
- package/dist/global/baseline.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +129 -99
- package/dist/index.min.css +2 -2
- package/form/radio-checkbox.css +23 -101
- package/index.css +1 -0
- package/package.json +2 -2
- package/progress-bar.css +108 -0
- package/read-more.css +3 -2
- package/timeline.css +1 -1
- package/tokens.json +3 -0
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
.navds-progress-bar {
|
|
2
|
+
background: var(--a-surface-neutral-subtle);
|
|
3
|
+
position: relative;
|
|
4
|
+
border-radius: var(--a-border-radius-full);
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
box-shadow:
|
|
7
|
+
inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
|
|
8
|
+
inset 0 0 1px 0 rgba(0 0 0 / 0.2);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.navds-progress-bar--small {
|
|
12
|
+
height: 12px;
|
|
13
|
+
min-width: 12px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.navds-progress-bar--medium {
|
|
17
|
+
height: 16px;
|
|
18
|
+
min-width: 16px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.navds-progress-bar--large {
|
|
22
|
+
height: 24px;
|
|
23
|
+
min-width: 24px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.navds-progress-bar__foreground {
|
|
27
|
+
--__ac-progress-bar-translate: initial;
|
|
28
|
+
|
|
29
|
+
transform: translateX(var(--__ac-progress-bar-translate));
|
|
30
|
+
background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
|
|
31
|
+
transform-origin: left;
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
bottom: 0;
|
|
36
|
+
width: 100%;
|
|
37
|
+
border-radius: inherit;
|
|
38
|
+
transition: transform 0.2s ease;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.navds-progress-bar__foreground--indeterminate {
|
|
42
|
+
--__ac-progress-bar-simulated: initial;
|
|
43
|
+
|
|
44
|
+
animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
|
|
45
|
+
animation-timing-function: ease-in-out, ease-in-out;
|
|
46
|
+
animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
|
|
47
|
+
animation-fill-mode: forwards, none;
|
|
48
|
+
animation-iteration-count: 1, infinite;
|
|
49
|
+
animation-delay: 0s, var(--__ac-progress-bar-simulated);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* navds-progress-bar-indeterminate wave animation */
|
|
53
|
+
|
|
54
|
+
@keyframes navds-progress-bar-indeterminate {
|
|
55
|
+
0% {
|
|
56
|
+
left: -50%;
|
|
57
|
+
width: 50%;
|
|
58
|
+
transform: translateX(0%);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
50% {
|
|
62
|
+
animation-direction: reverse;
|
|
63
|
+
left: 100%;
|
|
64
|
+
transform: translateX(0%);
|
|
65
|
+
width: 50%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
100% {
|
|
69
|
+
left: -50%;
|
|
70
|
+
transform: translateX(0%);
|
|
71
|
+
width: 50%;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@keyframes navds-progress-bar-indeterminate-grow {
|
|
76
|
+
0% {
|
|
77
|
+
transform: translateX(-100%);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
20% {
|
|
81
|
+
transform: translateX(-80%);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
30% {
|
|
85
|
+
transform: translateX(-40%);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
50% {
|
|
89
|
+
transform: translateX(-20%);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
75% {
|
|
93
|
+
transform: translateX(-10%);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
100% {
|
|
97
|
+
transform: translateX(-10%);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@media (forced-colors: active) {
|
|
102
|
+
.navds-progress-bar__foreground {
|
|
103
|
+
background: Highlight;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.navds-progress-bar {
|
|
107
|
+
outline: 1px solid transparent;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.navds-progress-bar{background:var(--a-surface-neutral-subtle);border-radius:var(--a-border-radius-full);box-shadow:inset 0 1px 3px 0 #00000026,inset 0 0 1px 0 #0003;overflow:hidden;position:relative}.navds-progress-bar--small{height:12px;min-width:12px}.navds-progress-bar--medium{height:16px;min-width:16px}.navds-progress-bar--large{height:24px;min-width:24px}.navds-progress-bar__foreground{--__ac-progress-bar-translate:initial;background:var(--ac-progress-bar-fg,var(--a-surface-alt-3));border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform:translateX(var(--__ac-progress-bar-translate));transform-origin:left;transition:transform .2s ease;width:100%}.navds-progress-bar__foreground--indeterminate{--__ac-progress-bar-simulated:initial;animation-delay:0s,var(--__ac-progress-bar-simulated);animation-duration:var(--__ac-progress-bar-simulated),2.5s;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite;animation-name:navds-progress-bar-indeterminate-grow,navds-progress-bar-indeterminate;animation-timing-function:ease-in-out,ease-in-out}@keyframes navds-progress-bar-indeterminate{0%{left:-50%;transform:translateX(0);width:50%}50%{animation-direction:reverse;left:100%;transform:translateX(0);width:50%}to{left:-50%;transform:translateX(0);width:50%}}@keyframes navds-progress-bar-indeterminate-grow{0%{transform:translateX(-100%)}20%{transform:translateX(-80%)}30%{transform:translateX(-40%)}50%{transform:translateX(-20%)}75%{transform:translateX(-10%)}to{transform:translateX(-10%)}}@media (forced-colors:active){.navds-progress-bar__foreground{background:Highlight}.navds-progress-bar{outline:1px solid #0000}}
|
|
@@ -79,7 +79,8 @@
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.navds-read-more__button:hover > .navds-read-more__expand-icon {
|
|
82
|
-
|
|
82
|
+
position: relative;
|
|
83
|
+
top: 1px;
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
|
|
@@ -87,5 +88,5 @@
|
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
|
|
90
|
-
|
|
91
|
+
top: -1px;
|
|
91
92
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{
|
|
1
|
+
.navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{position:relative;top:1px}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{transform:rotate(-180deg)}.navds-read-more--open>.navds-read-more__button:hover>.navds-read-more__expand-icon{top:-1px}
|
|
@@ -245,7 +245,7 @@
|
|
|
245
245
|
.navds-timeline__pin-wrapper::before {
|
|
246
246
|
content: "";
|
|
247
247
|
top: var(--navdsc-timeline-pin-size);
|
|
248
|
-
height: calc(
|
|
248
|
+
height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
|
|
249
249
|
width: 1px;
|
|
250
250
|
margin: 0 auto;
|
|
251
251
|
background: var(--a-surface-inverted);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-timeline{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative;width:100%}.navds-timeline__axislabels{box-sizing:initial;grid-column:2;height:1rem;margin-bottom:var(--a-spacing-1);position:relative}.navds-timeline__row-label{align-items:center;display:flex;gap:var(--a-spacing-2);grid-column:1;margin-right:var(--a-spacing-4);min-height:1.5rem;white-space:nowrap;width:auto}.navds-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.navds-timeline__axislabels-label{color:var(--ac-timeline-axislabel-text,var(--a-text-subtle));position:absolute;white-space:nowrap}.navds-timeline__row{background:var(--ac-timeline-row-bg,var(--a-surface-subtle));display:flex;grid-column:2;margin:var(--a-spacing-4) 0}.navds-timeline__row--active{background:var(--ac-timeline-row-active-bg,var(--a-surface-selected))}.navds-timeline__row:last-of-type{margin-bottom:0}.navds-timeline__row-periods{margin:0;min-height:1.5rem;position:relative;width:100%}.navds-timeline__row-periods>li{list-style-type:none}.navds-timeline__row-periods:focus{outline:none}.navds-timeline__period{align-items:center;border:none;border-radius:var(--a-border-radius-full);display:flex;font-size:1rem;height:100%;padding:0;position:absolute;z-index:2}.navds-timeline__period--inner{align-items:center;display:flex;margin:0 var(--a-spacing-1);overflow:hidden;text-align:left;text-overflow:clip;white-space:nowrap}.navds-timeline__period--inner svg{flex-shrink:0}.navds-timeline__period--clickable{cursor:pointer}.navds-timeline__period--success{background:var(--ac-timeline-period-success-bg,var(--a-surface-success-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-success-border,var(--a-border-success))}.navds-timeline__period--success.navds-timeline__period--clickable:hover{background:var(--a-surface-success-subtle-hover);background:var(--ac-timeline-period-success-bg-hover,var(--a-surface-success-subtle-hover))}.navds-timeline__period--warning{background:var(--ac-timeline-period-warning-bg,var(--a-surface-warning-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-warning-border,var(--a-border-warning))}.navds-timeline__period--warning.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-warning-bg-hover,var(--a-surface-warning-subtle-hover))}.navds-timeline__period--danger{background:var(--ac-timeline-period-danger-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-danger-border,var(--a-border-danger))}.navds-timeline__period--danger.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-danger-bg-hover,var(--a-surface-danger-subtle-hover))}.navds-timeline__period--info{background:var(--ac-timeline-period-info-bg,var(--a-surface-info-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-info-border,var(--a-border-info))}.navds-timeline__period--info.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-info-bg-hover,var(--a-surface-info-subtle-hover))}.navds-timeline__period--neutral{background:var(--ac-timeline-period-neutral-bg,var(--a-bg-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-neutral-border,var(--a-border-default))}.navds-timeline__period--neutral.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-neutral-bg-hover,var(--a-gray-200))}.navds-timeline__period--connected-both{border-radius:0}.navds-timeline__period--connected-right{border-bottom-right-radius:0;border-top-right-radius:0}.navds-timeline__period--connected-left{border-bottom-left-radius:0;border-top-left-radius:0}.navds-timeline__period--selected{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected));z-index:3}.navds-timeline__pin-wrapper{display:flex;flex-direction:column-reverse;grid-column:2;height:100%;isolation:isolate;position:absolute;top:0;z-index:1;--navdsc-timeline-pin-size:0.9rem}.navds-timeline__pin-button{background:var(--a-surface-default);border:none;border-radius:var(--a-border-radius-full);box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 5px var(--a-surface-default);cursor:pointer;padding:var(--a-spacing-1);position:relative;z-index:2}.navds-timeline__pin-button:before{border-radius:var(--a-border-radius-full);content:"";height:25px;inset:0;left:-9px;position:absolute;top:-9px;width:25px}.navds-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 5px var(--a-surface-default)}.navds-timeline__pin-button:hover:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-timeline__pin-button:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}}.navds-timeline__pin-wrapper:before{background:var(--a-surface-inverted);content:"";height:calc(88% - var(--navdsc-timeline-pin-size));margin:0 auto;top:var(--navdsc-timeline-pin-size);width:1px}.navds-timeline__zoom{display:flex;float:right;list-style-type:none;margin-top:var(--a-spacing-6)}.navds-timeline__zoom-button{all:unset;background:var(--ac-timeline-zoom-bg,var(--a-surface-default));border-width:1px;border:1px solid var(--ac-timeline-zoom-border,var(--a-border-default));border-right-width:0;cursor:pointer;padding:6px 9px 6px 8px}.navds-timeline__zoom li:first-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium)}.navds-timeline__zoom li:last-child .navds-timeline__zoom-button{border-radius:0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;border-width:1px}.navds-timeline__zoom li:only-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium)}.navds-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ac-timeline-zoom-bg-hover,var(--a-surface-action-subtle-hover))}.navds-timeline__zoom-button[aria-pressed=true]{background:var(--ac-timeline-zoom-selected-bg,var(--a-surface-inverted));color:var(--ac-timeline-zoom-selected-text,var(--a-text-on-inverted))}.navds-timeline__period:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom li:focus-within{z-index:var(--a-z-index-focus)}.navds-timeline__zoom-button:focus-visible{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}@supports not selector(:focus-visible){.navds-timeline__period:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom-button:focus{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus{margin-right:2px;padding-right:6px}}.navds-timeline__popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-medium);padding:var(--a-spacing-3);z-index:var(--a-z-index-popover)}.navds-timeline__popover:focus{outline:none}.navds-timeline__popover-arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;transform:rotate(45deg);width:1rem;z-index:-1}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:#0000;border-top-color:#0000}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-right-color:#0000}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-left-color:#0000}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:#0000;border-top-color:#0000}@media (forced-colors:active){.navds-timeline__period:focus{outline:2px solid highlight;outline-offset:2px}.navds-timeline__period--danger,.navds-timeline__period--info,.navds-timeline__period--neutral,.navds-timeline__period--success,.navds-timeline__period--warning{forced-color-adjust:none}.navds-timeline__pin-wrapper:before,.navds-timeline__row{border:1px solid #0000}.navds-timeline__pin-button{outline:4px solid #0000}.navds-timeline__pin-button:focus,.navds-timeline__pin-button:focus-visible{box-shadow:none;outline:4px solid highlight;outline-offset:2px}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:canvas;border-top-color:canvas}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-right-color:canvas}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-left-color:canvas}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:canvas;border-top-color:canvas}}
|
|
1
|
+
.navds-timeline{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative;width:100%}.navds-timeline__axislabels{box-sizing:initial;grid-column:2;height:1rem;margin-bottom:var(--a-spacing-1);position:relative}.navds-timeline__row-label{align-items:center;display:flex;gap:var(--a-spacing-2);grid-column:1;margin-right:var(--a-spacing-4);min-height:1.5rem;white-space:nowrap;width:auto}.navds-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.navds-timeline__axislabels-label{color:var(--ac-timeline-axislabel-text,var(--a-text-subtle));position:absolute;white-space:nowrap}.navds-timeline__row{background:var(--ac-timeline-row-bg,var(--a-surface-subtle));display:flex;grid-column:2;margin:var(--a-spacing-4) 0}.navds-timeline__row--active{background:var(--ac-timeline-row-active-bg,var(--a-surface-selected))}.navds-timeline__row:last-of-type{margin-bottom:0}.navds-timeline__row-periods{margin:0;min-height:1.5rem;position:relative;width:100%}.navds-timeline__row-periods>li{list-style-type:none}.navds-timeline__row-periods:focus{outline:none}.navds-timeline__period{align-items:center;border:none;border-radius:var(--a-border-radius-full);display:flex;font-size:1rem;height:100%;padding:0;position:absolute;z-index:2}.navds-timeline__period--inner{align-items:center;display:flex;margin:0 var(--a-spacing-1);overflow:hidden;text-align:left;text-overflow:clip;white-space:nowrap}.navds-timeline__period--inner svg{flex-shrink:0}.navds-timeline__period--clickable{cursor:pointer}.navds-timeline__period--success{background:var(--ac-timeline-period-success-bg,var(--a-surface-success-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-success-border,var(--a-border-success))}.navds-timeline__period--success.navds-timeline__period--clickable:hover{background:var(--a-surface-success-subtle-hover);background:var(--ac-timeline-period-success-bg-hover,var(--a-surface-success-subtle-hover))}.navds-timeline__period--warning{background:var(--ac-timeline-period-warning-bg,var(--a-surface-warning-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-warning-border,var(--a-border-warning))}.navds-timeline__period--warning.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-warning-bg-hover,var(--a-surface-warning-subtle-hover))}.navds-timeline__period--danger{background:var(--ac-timeline-period-danger-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-danger-border,var(--a-border-danger))}.navds-timeline__period--danger.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-danger-bg-hover,var(--a-surface-danger-subtle-hover))}.navds-timeline__period--info{background:var(--ac-timeline-period-info-bg,var(--a-surface-info-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-info-border,var(--a-border-info))}.navds-timeline__period--info.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-info-bg-hover,var(--a-surface-info-subtle-hover))}.navds-timeline__period--neutral{background:var(--ac-timeline-period-neutral-bg,var(--a-bg-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-neutral-border,var(--a-border-default))}.navds-timeline__period--neutral.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-neutral-bg-hover,var(--a-gray-200))}.navds-timeline__period--connected-both{border-radius:0}.navds-timeline__period--connected-right{border-bottom-right-radius:0;border-top-right-radius:0}.navds-timeline__period--connected-left{border-bottom-left-radius:0;border-top-left-radius:0}.navds-timeline__period--selected{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected));z-index:3}.navds-timeline__pin-wrapper{display:flex;flex-direction:column-reverse;grid-column:2;height:100%;isolation:isolate;position:absolute;top:0;z-index:1;--navdsc-timeline-pin-size:0.9rem}.navds-timeline__pin-button{background:var(--a-surface-default);border:none;border-radius:var(--a-border-radius-full);box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 5px var(--a-surface-default);cursor:pointer;padding:var(--a-spacing-1);position:relative;z-index:2}.navds-timeline__pin-button:before{border-radius:var(--a-border-radius-full);content:"";height:25px;inset:0;left:-9px;position:absolute;top:-9px;width:25px}.navds-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 5px var(--a-surface-default)}.navds-timeline__pin-button:hover:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-timeline__pin-button:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}}.navds-timeline__pin-wrapper:before{background:var(--a-surface-inverted);content:"";height:calc(100% - var(--navdsc-timeline-pin-size)*2);margin:0 auto;top:var(--navdsc-timeline-pin-size);width:1px}.navds-timeline__zoom{display:flex;float:right;list-style-type:none;margin-top:var(--a-spacing-6)}.navds-timeline__zoom-button{all:unset;background:var(--ac-timeline-zoom-bg,var(--a-surface-default));border-width:1px;border:1px solid var(--ac-timeline-zoom-border,var(--a-border-default));border-right-width:0;cursor:pointer;padding:6px 9px 6px 8px}.navds-timeline__zoom li:first-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium)}.navds-timeline__zoom li:last-child .navds-timeline__zoom-button{border-radius:0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;border-width:1px}.navds-timeline__zoom li:only-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium)}.navds-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ac-timeline-zoom-bg-hover,var(--a-surface-action-subtle-hover))}.navds-timeline__zoom-button[aria-pressed=true]{background:var(--ac-timeline-zoom-selected-bg,var(--a-surface-inverted));color:var(--ac-timeline-zoom-selected-text,var(--a-text-on-inverted))}.navds-timeline__period:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom li:focus-within{z-index:var(--a-z-index-focus)}.navds-timeline__zoom-button:focus-visible{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}@supports not selector(:focus-visible){.navds-timeline__period:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom-button:focus{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus{margin-right:2px;padding-right:6px}}.navds-timeline__popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-medium);padding:var(--a-spacing-3);z-index:var(--a-z-index-popover)}.navds-timeline__popover:focus{outline:none}.navds-timeline__popover-arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;transform:rotate(45deg);width:1rem;z-index:-1}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:#0000;border-top-color:#0000}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-right-color:#0000}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-left-color:#0000}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:#0000;border-top-color:#0000}@media (forced-colors:active){.navds-timeline__period:focus{outline:2px solid highlight;outline-offset:2px}.navds-timeline__period--danger,.navds-timeline__period--info,.navds-timeline__period--neutral,.navds-timeline__period--success,.navds-timeline__period--warning{forced-color-adjust:none}.navds-timeline__pin-wrapper:before,.navds-timeline__row{border:1px solid #0000}.navds-timeline__pin-button{outline:4px solid #0000}.navds-timeline__pin-button:focus,.navds-timeline__pin-button:focus-visible{box-shadow:none;outline:4px solid highlight;outline-offset:2px}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:canvas;border-top-color:canvas}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-right-color:canvas}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-left-color:canvas}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:canvas;border-top-color:canvas}}
|
package/dist/components.css
CHANGED
|
@@ -2676,8 +2676,8 @@
|
|
|
2676
2676
|
height: calc(1.25rem - 0.25rem);
|
|
2677
2677
|
}
|
|
2678
2678
|
|
|
2679
|
-
.navds-checkbox__input:focus
|
|
2680
|
-
.navds-radio__input:focus
|
|
2679
|
+
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
|
2680
|
+
.navds-radio__input:focus + .navds-radio__label::before {
|
|
2681
2681
|
outline: 2px solid transparent;
|
|
2682
2682
|
outline-offset: 2px;
|
|
2683
2683
|
box-shadow:
|
|
@@ -2686,33 +2686,13 @@
|
|
|
2686
2686
|
0 0 0 4px var(--a-border-focus);
|
|
2687
2687
|
}
|
|
2688
2688
|
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
.navds-radio__input:focus + .navds-radio__label::before {
|
|
2692
|
-
outline: 2px solid transparent;
|
|
2693
|
-
outline-offset: 2px;
|
|
2694
|
-
box-shadow:
|
|
2695
|
-
0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
|
|
2696
|
-
0 0 0 4px var(--a-border-focus);
|
|
2697
|
-
}
|
|
2698
|
-
}
|
|
2699
|
-
|
|
2700
|
-
.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
|
|
2701
|
-
.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
|
|
2689
|
+
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
|
2690
|
+
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
|
2702
2691
|
box-shadow:
|
|
2703
2692
|
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
|
|
2704
2693
|
0 0 0 4px var(--a-border-focus);
|
|
2705
2694
|
}
|
|
2706
2695
|
|
|
2707
|
-
@supports not selector(:focus-visible) {
|
|
2708
|
-
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
|
2709
|
-
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
|
2710
|
-
box-shadow:
|
|
2711
|
-
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
|
|
2712
|
-
0 0 0 4px var(--a-border-focus);
|
|
2713
|
-
}
|
|
2714
|
-
}
|
|
2715
|
-
|
|
2716
2696
|
.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
|
|
2717
2697
|
content: "";
|
|
2718
2698
|
position: absolute;
|
|
@@ -2770,24 +2750,14 @@
|
|
|
2770
2750
|
background-position: 0.25rem center;
|
|
2771
2751
|
}
|
|
2772
2752
|
|
|
2773
|
-
.navds-checkbox__input:indeterminate:focus
|
|
2774
|
-
.navds-checkbox__input:checked:focus
|
|
2753
|
+
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
|
2754
|
+
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
|
2775
2755
|
box-shadow:
|
|
2776
2756
|
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
2777
2757
|
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2778
2758
|
0 0 0 4px var(--a-border-focus);
|
|
2779
2759
|
}
|
|
2780
2760
|
|
|
2781
|
-
@supports not selector(:focus-visible) {
|
|
2782
|
-
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
|
2783
|
-
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
|
2784
|
-
box-shadow:
|
|
2785
|
-
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
2786
|
-
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2787
|
-
0 0 0 4px var(--a-border-focus);
|
|
2788
|
-
}
|
|
2789
|
-
}
|
|
2790
|
-
|
|
2791
2761
|
.navds-radio__input:checked + .navds-radio__label::before {
|
|
2792
2762
|
box-shadow:
|
|
2793
2763
|
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
@@ -2795,40 +2765,23 @@
|
|
|
2795
2765
|
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
|
|
2796
2766
|
}
|
|
2797
2767
|
|
|
2798
|
-
.navds-radio__input:checked:focus
|
|
2768
|
+
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
|
2799
2769
|
box-shadow:
|
|
2800
2770
|
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
2801
2771
|
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2802
2772
|
0 0 0 4px var(--a-border-focus);
|
|
2803
2773
|
}
|
|
2804
2774
|
|
|
2805
|
-
@supports not selector(:focus-visible) {
|
|
2806
|
-
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
|
2807
|
-
box-shadow:
|
|
2808
|
-
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2809
|
-
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2810
|
-
0 0 0 4px var(--a-border-focus);
|
|
2811
|
-
}
|
|
2812
|
-
}
|
|
2813
|
-
|
|
2814
2775
|
.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
|
|
2815
2776
|
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
|
2816
2777
|
color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
2817
2778
|
}
|
|
2818
2779
|
|
|
2819
|
-
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-
|
|
2820
|
-
|
|
2821
|
-
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
|
|
2780
|
+
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
|
|
2781
|
+
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
|
2822
2782
|
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
2823
2783
|
}
|
|
2824
2784
|
|
|
2825
|
-
@supports not selector(:focus-visible) {
|
|
2826
|
-
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
|
|
2827
|
-
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
|
2828
|
-
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
2829
|
-
}
|
|
2830
|
-
}
|
|
2831
|
-
|
|
2832
2785
|
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
|
|
2833
2786
|
.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2834
2787
|
background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
|
|
@@ -2842,63 +2795,32 @@
|
|
|
2842
2795
|
}
|
|
2843
2796
|
|
|
2844
2797
|
.navds-checkbox--error
|
|
2845
|
-
> .navds-checkbox__input:focus
|
|
2798
|
+
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
|
2846
2799
|
+ .navds-checkbox__label::before,
|
|
2847
|
-
.navds-radio--error > .navds-radio__input:focus
|
|
2800
|
+
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2848
2801
|
box-shadow:
|
|
2849
2802
|
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2850
2803
|
0 0 0 4px var(--a-border-focus);
|
|
2851
2804
|
}
|
|
2852
2805
|
|
|
2853
|
-
@supports not selector(:focus-visible) {
|
|
2854
|
-
.navds-checkbox--error
|
|
2855
|
-
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
|
2856
|
-
+ .navds-checkbox__label::before,
|
|
2857
|
-
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2858
|
-
box-shadow:
|
|
2859
|
-
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2860
|
-
0 0 0 4px var(--a-border-focus);
|
|
2861
|
-
}
|
|
2862
|
-
}
|
|
2863
|
-
|
|
2864
2806
|
.navds-checkbox--error
|
|
2865
|
-
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus
|
|
2807
|
+
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
|
2866
2808
|
+ .navds-checkbox__label::before,
|
|
2867
|
-
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus
|
|
2809
|
+
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
|
2868
2810
|
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
2869
2811
|
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
|
2870
2812
|
}
|
|
2871
2813
|
|
|
2872
2814
|
.navds-checkbox--error
|
|
2873
|
-
> .navds-checkbox__input:focus
|
|
2815
|
+
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
|
|
2874
2816
|
+ .navds-checkbox__label::before,
|
|
2875
|
-
.navds-radio--error > .navds-radio__input:focus
|
|
2817
|
+
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2876
2818
|
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
2877
2819
|
box-shadow:
|
|
2878
2820
|
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2879
2821
|
0 0 0 4px var(--a-border-focus);
|
|
2880
2822
|
}
|
|
2881
2823
|
|
|
2882
|
-
@supports not selector(:focus-visible) {
|
|
2883
|
-
.navds-checkbox--error
|
|
2884
|
-
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
|
2885
|
-
+ .navds-checkbox__label::before,
|
|
2886
|
-
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
|
2887
|
-
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
2888
|
-
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
|
2889
|
-
}
|
|
2890
|
-
|
|
2891
|
-
.navds-checkbox--error
|
|
2892
|
-
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
|
|
2893
|
-
+ .navds-checkbox__label::before,
|
|
2894
|
-
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2895
|
-
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
2896
|
-
box-shadow:
|
|
2897
|
-
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2898
|
-
0 0 0 4px var(--a-border-focus);
|
|
2899
|
-
}
|
|
2900
|
-
}
|
|
2901
|
-
|
|
2902
2824
|
.navds-checkbox--disabled,
|
|
2903
2825
|
.navds-radio--disabled {
|
|
2904
2826
|
opacity: 0.3;
|
|
@@ -2931,16 +2853,16 @@
|
|
|
2931
2853
|
> .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
|
|
2932
2854
|
+ .navds-checkbox__label::before,
|
|
2933
2855
|
.navds-checkbox--readonly
|
|
2934
|
-
> .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus
|
|
2856
|
+
> .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
|
|
2935
2857
|
+ .navds-checkbox__label::before,
|
|
2936
2858
|
.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
|
|
2937
|
-
.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus
|
|
2859
|
+
.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
|
|
2938
2860
|
background-color: var(--__ac-radio-checkbox-readonly-bg);
|
|
2939
2861
|
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
|
|
2940
2862
|
}
|
|
2941
2863
|
|
|
2942
|
-
.navds-checkbox--readonly > .navds-checkbox__input:focus
|
|
2943
|
-
.navds-radio--readonly > .navds-radio__input:focus
|
|
2864
|
+
.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
|
|
2865
|
+
.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
|
|
2944
2866
|
--__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
|
|
2945
2867
|
}
|
|
2946
2868
|
|
|
@@ -2970,8 +2892,8 @@
|
|
|
2970
2892
|
}
|
|
2971
2893
|
|
|
2972
2894
|
@media (forced-colors: active) {
|
|
2973
|
-
.navds-checkbox__input:focus
|
|
2974
|
-
.navds-radio__input:focus
|
|
2895
|
+
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
|
2896
|
+
.navds-radio__input:focus + .navds-radio__label::before {
|
|
2975
2897
|
outline-color: highlight;
|
|
2976
2898
|
}
|
|
2977
2899
|
|
|
@@ -3003,7 +2925,7 @@
|
|
|
3003
2925
|
background-color: var(--__ac-radio-checkbox-high-contrast-text);
|
|
3004
2926
|
}
|
|
3005
2927
|
|
|
3006
|
-
.navds-radio__input:checked:focus
|
|
2928
|
+
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
|
3007
2929
|
border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
|
|
3008
2930
|
outline: 2px solid highlight;
|
|
3009
2931
|
outline-offset: 2px;
|
|
@@ -3014,7 +2936,7 @@
|
|
|
3014
2936
|
color: highlight;
|
|
3015
2937
|
}
|
|
3016
2938
|
|
|
3017
|
-
.navds-checkbox__input:focus
|
|
2939
|
+
.navds-checkbox__input:focus + .navds-checkbox__label::before {
|
|
3018
2940
|
outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
|
|
3019
2941
|
}
|
|
3020
2942
|
|
|
@@ -5886,7 +5808,7 @@ button.navds-internalheader__title:active,
|
|
|
5886
5808
|
.navds-timeline__pin-wrapper::before {
|
|
5887
5809
|
content: "";
|
|
5888
5810
|
top: var(--navdsc-timeline-pin-size);
|
|
5889
|
-
height: calc(
|
|
5811
|
+
height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
|
|
5890
5812
|
width: 1px;
|
|
5891
5813
|
margin: 0 auto;
|
|
5892
5814
|
background: var(--a-surface-inverted);
|
|
@@ -6493,7 +6415,8 @@ button.navds-internalheader__title:active,
|
|
|
6493
6415
|
}
|
|
6494
6416
|
|
|
6495
6417
|
.navds-read-more__button:hover > .navds-read-more__expand-icon {
|
|
6496
|
-
|
|
6418
|
+
position: relative;
|
|
6419
|
+
top: 1px;
|
|
6497
6420
|
}
|
|
6498
6421
|
|
|
6499
6422
|
.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
|
|
@@ -6501,7 +6424,117 @@ button.navds-internalheader__title:active,
|
|
|
6501
6424
|
}
|
|
6502
6425
|
|
|
6503
6426
|
.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
|
|
6504
|
-
|
|
6427
|
+
top: -1px;
|
|
6428
|
+
}
|
|
6429
|
+
|
|
6430
|
+
.navds-progress-bar {
|
|
6431
|
+
background: var(--a-surface-neutral-subtle);
|
|
6432
|
+
position: relative;
|
|
6433
|
+
border-radius: var(--a-border-radius-full);
|
|
6434
|
+
overflow: hidden;
|
|
6435
|
+
box-shadow:
|
|
6436
|
+
inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
|
|
6437
|
+
inset 0 0 1px 0 rgba(0 0 0 / 0.2);
|
|
6438
|
+
}
|
|
6439
|
+
|
|
6440
|
+
.navds-progress-bar--small {
|
|
6441
|
+
height: 12px;
|
|
6442
|
+
min-width: 12px;
|
|
6443
|
+
}
|
|
6444
|
+
|
|
6445
|
+
.navds-progress-bar--medium {
|
|
6446
|
+
height: 16px;
|
|
6447
|
+
min-width: 16px;
|
|
6448
|
+
}
|
|
6449
|
+
|
|
6450
|
+
.navds-progress-bar--large {
|
|
6451
|
+
height: 24px;
|
|
6452
|
+
min-width: 24px;
|
|
6453
|
+
}
|
|
6454
|
+
|
|
6455
|
+
.navds-progress-bar__foreground {
|
|
6456
|
+
--__ac-progress-bar-translate: initial;
|
|
6457
|
+
|
|
6458
|
+
transform: translateX(var(--__ac-progress-bar-translate));
|
|
6459
|
+
background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
|
|
6460
|
+
transform-origin: left;
|
|
6461
|
+
position: absolute;
|
|
6462
|
+
top: 0;
|
|
6463
|
+
left: 0;
|
|
6464
|
+
bottom: 0;
|
|
6465
|
+
width: 100%;
|
|
6466
|
+
border-radius: inherit;
|
|
6467
|
+
transition: transform 0.2s ease;
|
|
6468
|
+
}
|
|
6469
|
+
|
|
6470
|
+
.navds-progress-bar__foreground--indeterminate {
|
|
6471
|
+
--__ac-progress-bar-simulated: initial;
|
|
6472
|
+
|
|
6473
|
+
animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
|
|
6474
|
+
animation-timing-function: ease-in-out, ease-in-out;
|
|
6475
|
+
animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
|
|
6476
|
+
animation-fill-mode: forwards, none;
|
|
6477
|
+
animation-iteration-count: 1, infinite;
|
|
6478
|
+
animation-delay: 0s, var(--__ac-progress-bar-simulated);
|
|
6479
|
+
}
|
|
6480
|
+
|
|
6481
|
+
/* navds-progress-bar-indeterminate wave animation */
|
|
6482
|
+
|
|
6483
|
+
@keyframes navds-progress-bar-indeterminate {
|
|
6484
|
+
0% {
|
|
6485
|
+
left: -50%;
|
|
6486
|
+
width: 50%;
|
|
6487
|
+
transform: translateX(0%);
|
|
6488
|
+
}
|
|
6489
|
+
|
|
6490
|
+
50% {
|
|
6491
|
+
animation-direction: reverse;
|
|
6492
|
+
left: 100%;
|
|
6493
|
+
transform: translateX(0%);
|
|
6494
|
+
width: 50%;
|
|
6495
|
+
}
|
|
6496
|
+
|
|
6497
|
+
100% {
|
|
6498
|
+
left: -50%;
|
|
6499
|
+
transform: translateX(0%);
|
|
6500
|
+
width: 50%;
|
|
6501
|
+
}
|
|
6502
|
+
}
|
|
6503
|
+
|
|
6504
|
+
@keyframes navds-progress-bar-indeterminate-grow {
|
|
6505
|
+
0% {
|
|
6506
|
+
transform: translateX(-100%);
|
|
6507
|
+
}
|
|
6508
|
+
|
|
6509
|
+
20% {
|
|
6510
|
+
transform: translateX(-80%);
|
|
6511
|
+
}
|
|
6512
|
+
|
|
6513
|
+
30% {
|
|
6514
|
+
transform: translateX(-40%);
|
|
6515
|
+
}
|
|
6516
|
+
|
|
6517
|
+
50% {
|
|
6518
|
+
transform: translateX(-20%);
|
|
6519
|
+
}
|
|
6520
|
+
|
|
6521
|
+
75% {
|
|
6522
|
+
transform: translateX(-10%);
|
|
6523
|
+
}
|
|
6524
|
+
|
|
6525
|
+
100% {
|
|
6526
|
+
transform: translateX(-10%);
|
|
6527
|
+
}
|
|
6528
|
+
}
|
|
6529
|
+
|
|
6530
|
+
@media (forced-colors: active) {
|
|
6531
|
+
.navds-progress-bar__foreground {
|
|
6532
|
+
background: Highlight;
|
|
6533
|
+
}
|
|
6534
|
+
|
|
6535
|
+
.navds-progress-bar {
|
|
6536
|
+
outline: 1px solid transparent;
|
|
6537
|
+
}
|
|
6505
6538
|
}
|
|
6506
6539
|
|
|
6507
6540
|
.navds-skeleton {
|