@navikt/ds-css 6.9.0 → 6.10.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 +12 -0
- package/dist/component/form.css +1 -1
- package/dist/component/form.min.css +1 -1
- package/dist/component/index.css +14 -2
- package/dist/component/index.min.css +1 -1
- package/dist/component/modal.css +12 -0
- package/dist/component/modal.min.css +1 -1
- package/dist/component/stepper.css +4 -0
- package/dist/component/stepper.min.css +1 -1
- package/dist/components.css +17 -1
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +14 -2
- package/dist/index.min.css +1 -1
- package/form/form-progress.css +1 -1
- package/modal.css +12 -0
- package/package.json +2 -2
- package/stepper.css +4 -0
package/dist/component/modal.css
CHANGED
|
@@ -103,6 +103,10 @@
|
|
|
103
103
|
padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
+
.navds-modal--small .navds-modal__header {
|
|
107
|
+
padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
|
|
108
|
+
}
|
|
109
|
+
|
|
106
110
|
.navds-modal__header-icon svg {
|
|
107
111
|
display: inline;
|
|
108
112
|
vertical-align: -0.25rem;
|
|
@@ -121,6 +125,10 @@
|
|
|
121
125
|
position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
|
|
122
126
|
}
|
|
123
127
|
|
|
128
|
+
.navds-modal--small .navds-modal__body {
|
|
129
|
+
padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
|
|
130
|
+
}
|
|
131
|
+
|
|
124
132
|
.navds-modal__header + .navds-modal__body {
|
|
125
133
|
padding-top: var(--a-spacing-0);
|
|
126
134
|
}
|
|
@@ -132,6 +140,10 @@
|
|
|
132
140
|
padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
|
|
133
141
|
}
|
|
134
142
|
|
|
143
|
+
.navds-modal--small .navds-modal__footer {
|
|
144
|
+
padding: var(--a-spacing-4);
|
|
145
|
+
}
|
|
146
|
+
|
|
135
147
|
.navds-modal__footer :nth-of-type(2) {
|
|
136
148
|
margin-left: auto;
|
|
137
149
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-modal__document-body{overflow:hidden}.navds-modal{background-color:var(--ac-modal-bg,var(--a-surface-default));border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);max-height:100%;max-width:100%;padding:0;position:fixed}.navds-modal[open]{animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 6px - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 6px - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 6px - 2em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}
|
|
1
|
+
.navds-modal__document-body{overflow:hidden}.navds-modal{background-color:var(--ac-modal-bg,var(--a-surface-default));border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);max-height:100%;max-width:100%;padding:0;position:fixed}.navds-modal[open]{animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 6px - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 6px - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 6px - 2em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal--small .navds-modal__header{padding:var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}.navds-modal--small .navds-modal__body{padding:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal--small .navds-modal__footer{padding:var(--a-spacing-4)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}
|
|
@@ -70,6 +70,10 @@
|
|
|
70
70
|
margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
+
.navds-stepper__item:last-child .navds-stepper__step {
|
|
74
|
+
margin-bottom: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
73
77
|
@media (forced-colors: active) {
|
|
74
78
|
.navds-stepper__step {
|
|
75
79
|
background-color: ButtonFace;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-stepper{--navds-stepper-circle-size:1.75rem;--navds-stepper-border-width:2px;--navds-stepper-line-length:1rem;color:var(--ac-stepper-text,var(--a-surface-action));font-weight:600;line-height:1;list-style:none;margin:0;padding-left:0}.navds-stepper--horizontal{align-items:flex-start;display:flex;text-align:center}.navds-stepper__item{display:grid;gap:.5rem;grid-template-columns:var(--navds-stepper-circle-size) auto;grid-template-rows:[line-1] auto [step-start] var(--navds-stepper-circle-size) [line-2 step-end] auto;justify-items:flex-start}.navds-stepper__line{background-color:var(--ac-stepper-line,var(--a-border-default));grid-column:1;height:100%;justify-self:center;min-height:var(--navds-stepper-line-length);width:var(--navds-stepper-border-width)}.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-line-completed,var(--a-border-selected))}.navds-stepper__line--1{display:none;grid-row:line-1}.navds-stepper__line--2{grid-row:line-2}:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2{display:none}.navds-stepper__step{cursor:pointer;display:grid;gap:var(--a-spacing-2);grid-column:1/-1;grid-row:2/-1;grid-template-columns:[circle] var(--navds-stepper-circle-size) [content] auto;justify-content:flex-start;margin:calc(var(--navds-stepper-border-width)*-1) calc(var(--navds-stepper-border-width)*-1) 1.75rem;padding:var(--navds-stepper-border-width);text-decoration:none}@media (forced-colors:active){.navds-stepper__step{background-color:ButtonFace;color:ButtonText}.navds-stepper__circle.navds-stepper__circle{border:0}.navds-stepper__step .navds-stepper__circle{background-color:ButtonText;border-color:ButtonText;color:ButtonFace;forced-color-adjust:none}.navds-stepper__step.navds-stepper__step:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}.navds-stepper__step.navds-stepper__step--active .navds-stepper__circle{background-color:highlight;border-color:highlighttext;color:highlighttext;forced-color-adjust:none}.navds-stepper__line{background-color:ButtonText}}button.navds-stepper__step{-webkit-appearance:none;appearance:none;background-color:initial;border:none;color:inherit;font:inherit;text-align:inherit}.navds-stepper__step--non-interactive{color:var(--ac-stepper-non-interactive,var(--a-text-subtle));cursor:default}:where(.navds-stepper__step):focus-visible{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}@supports not selector(:focus-visible){.navds-stepper__step:focus{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}}.navds-stepper__circle{border:var(--navds-stepper-border-width) solid;border-radius:var(--a-border-radius-full);display:inline-grid;flex-shrink:0;grid-column:circle;height:var(--navds-stepper-circle-size);line-height:1;place-items:center;width:var(--navds-stepper-circle-size)}.navds-stepper__circle--success{background:none;background-color:var(--ac-stepper-text,var(--a-surface-action));border:none;color:var(--a-text-on-action);font-size:1.75rem}.navds-stepper__content{grid-column:content;line-height:1.5;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding-top:.035rem}:where(.navds-stepper--horizontal) .navds-stepper__item{flex:1 1 100%;grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--navds-stepper-circle-size) auto}:where(.navds-stepper--horizontal) .navds-stepper__line{align-self:center;display:block;grid-row:1;height:var(--navds-stepper-border-width);min-height:auto;width:100%}:where(.navds-stepper--horizontal) .navds-stepper__line--1{grid-column:line-1}:where(.navds-stepper--horizontal) .navds-stepper__line--2{grid-column:line-2}:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2{visibility:hidden}:where(.navds-stepper--horizontal) .navds-stepper__step{align-items:center;display:grid;grid-column:step;grid-row:1/-1;grid-template-columns:[content-start] auto [circle] var(--navds-stepper-circle-size) [content-end] auto;grid-template-rows:[circle] var(--navds-stepper-circle-size) [content] auto;justify-items:center;margin-bottom:0}:where(.navds-stepper--horizontal) .navds-stepper__circle{grid-column:2;grid-row:circle}:where(.navds-stepper--horizontal) .navds-stepper__content{grid-column:1/-1;grid-row:content;max-width:24ch}:where(.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-active,var(--a-text-action-selected))}.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)){color:var(--ac-stepper-hover-active,var(--a-text-action-hover))}:where(.navds-stepper__step:hover) .navds-stepper__content{text-decoration:underline}:where(.navds-stepper__step--non-interactive:hover,.navds-stepper__step--active:hover) .navds-stepper__content{text-decoration:none}:where(.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-active-bg,var(--a-surface-action-selected));border-color:var(--ac-stepper-active-border,var(--a-border-action-selected));color:var(--ac-stepper-active-text,var(--a-text-on-action))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle{background-color:var(--ac-stepper-hover-bg,var(--a-surface-action-subtle-hover))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-text,var(--a-surface-action-hover))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-non-interactive-active,var(--a-text-default))}.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-non-interactive-line-completed,var(--a-border-strong))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted));border-color:var(--ac-stepper-non-interactive-active-border,var(--a-surface-inverted));color:var(--ac-stepper-non-interactive-active-text,var(--a-text-on-inverted))}:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle{background-color:initial}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle{background-color:inherit;color:var(--ac-stepper-active-completed,var(--a-text-action-selected))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-active-completed,var(--a-surface-action-selected));color:var(--a-text-on-action)}:where(.navds-stepper__step--non-interactive,.navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-completed-bg,var(--a-surface-neutral));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-active-completed,var(--a-surface-inverted));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-default))}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle--success{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-on-inverted))}
|
|
1
|
+
.navds-stepper{--navds-stepper-circle-size:1.75rem;--navds-stepper-border-width:2px;--navds-stepper-line-length:1rem;color:var(--ac-stepper-text,var(--a-surface-action));font-weight:600;line-height:1;list-style:none;margin:0;padding-left:0}.navds-stepper--horizontal{align-items:flex-start;display:flex;text-align:center}.navds-stepper__item{display:grid;gap:.5rem;grid-template-columns:var(--navds-stepper-circle-size) auto;grid-template-rows:[line-1] auto [step-start] var(--navds-stepper-circle-size) [line-2 step-end] auto;justify-items:flex-start}.navds-stepper__line{background-color:var(--ac-stepper-line,var(--a-border-default));grid-column:1;height:100%;justify-self:center;min-height:var(--navds-stepper-line-length);width:var(--navds-stepper-border-width)}.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-line-completed,var(--a-border-selected))}.navds-stepper__line--1{display:none;grid-row:line-1}.navds-stepper__line--2{grid-row:line-2}:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2{display:none}.navds-stepper__step{cursor:pointer;display:grid;gap:var(--a-spacing-2);grid-column:1/-1;grid-row:2/-1;grid-template-columns:[circle] var(--navds-stepper-circle-size) [content] auto;justify-content:flex-start;margin:calc(var(--navds-stepper-border-width)*-1) calc(var(--navds-stepper-border-width)*-1) 1.75rem;padding:var(--navds-stepper-border-width);text-decoration:none}.navds-stepper__item:last-child .navds-stepper__step{margin-bottom:0}@media (forced-colors:active){.navds-stepper__step{background-color:ButtonFace;color:ButtonText}.navds-stepper__circle.navds-stepper__circle{border:0}.navds-stepper__step .navds-stepper__circle{background-color:ButtonText;border-color:ButtonText;color:ButtonFace;forced-color-adjust:none}.navds-stepper__step.navds-stepper__step:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}.navds-stepper__step.navds-stepper__step--active .navds-stepper__circle{background-color:highlight;border-color:highlighttext;color:highlighttext;forced-color-adjust:none}.navds-stepper__line{background-color:ButtonText}}button.navds-stepper__step{-webkit-appearance:none;appearance:none;background-color:initial;border:none;color:inherit;font:inherit;text-align:inherit}.navds-stepper__step--non-interactive{color:var(--ac-stepper-non-interactive,var(--a-text-subtle));cursor:default}:where(.navds-stepper__step):focus-visible{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}@supports not selector(:focus-visible){.navds-stepper__step:focus{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}}.navds-stepper__circle{border:var(--navds-stepper-border-width) solid;border-radius:var(--a-border-radius-full);display:inline-grid;flex-shrink:0;grid-column:circle;height:var(--navds-stepper-circle-size);line-height:1;place-items:center;width:var(--navds-stepper-circle-size)}.navds-stepper__circle--success{background:none;background-color:var(--ac-stepper-text,var(--a-surface-action));border:none;color:var(--a-text-on-action);font-size:1.75rem}.navds-stepper__content{grid-column:content;line-height:1.5;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding-top:.035rem}:where(.navds-stepper--horizontal) .navds-stepper__item{flex:1 1 100%;grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--navds-stepper-circle-size) auto}:where(.navds-stepper--horizontal) .navds-stepper__line{align-self:center;display:block;grid-row:1;height:var(--navds-stepper-border-width);min-height:auto;width:100%}:where(.navds-stepper--horizontal) .navds-stepper__line--1{grid-column:line-1}:where(.navds-stepper--horizontal) .navds-stepper__line--2{grid-column:line-2}:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2{visibility:hidden}:where(.navds-stepper--horizontal) .navds-stepper__step{align-items:center;display:grid;grid-column:step;grid-row:1/-1;grid-template-columns:[content-start] auto [circle] var(--navds-stepper-circle-size) [content-end] auto;grid-template-rows:[circle] var(--navds-stepper-circle-size) [content] auto;justify-items:center;margin-bottom:0}:where(.navds-stepper--horizontal) .navds-stepper__circle{grid-column:2;grid-row:circle}:where(.navds-stepper--horizontal) .navds-stepper__content{grid-column:1/-1;grid-row:content;max-width:24ch}:where(.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-active,var(--a-text-action-selected))}.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)){color:var(--ac-stepper-hover-active,var(--a-text-action-hover))}:where(.navds-stepper__step:hover) .navds-stepper__content{text-decoration:underline}:where(.navds-stepper__step--non-interactive:hover,.navds-stepper__step--active:hover) .navds-stepper__content{text-decoration:none}:where(.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-active-bg,var(--a-surface-action-selected));border-color:var(--ac-stepper-active-border,var(--a-border-action-selected));color:var(--ac-stepper-active-text,var(--a-text-on-action))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle{background-color:var(--ac-stepper-hover-bg,var(--a-surface-action-subtle-hover))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-text,var(--a-surface-action-hover))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-non-interactive-active,var(--a-text-default))}.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-non-interactive-line-completed,var(--a-border-strong))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted));border-color:var(--ac-stepper-non-interactive-active-border,var(--a-surface-inverted));color:var(--ac-stepper-non-interactive-active-text,var(--a-text-on-inverted))}:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle{background-color:initial}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle{background-color:inherit;color:var(--ac-stepper-active-completed,var(--a-text-action-selected))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-active-completed,var(--a-surface-action-selected));color:var(--a-text-on-action)}:where(.navds-stepper__step--non-interactive,.navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-completed-bg,var(--a-surface-neutral));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-active-completed,var(--a-surface-inverted));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-default))}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle--success{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-on-inverted))}
|
package/dist/components.css
CHANGED
|
@@ -4327,7 +4327,7 @@
|
|
|
4327
4327
|
.navds-form-progress__stepper {
|
|
4328
4328
|
border: 2px solid var(--a-border-subtle);
|
|
4329
4329
|
border-radius: var(--a-border-radius-large);
|
|
4330
|
-
padding: var(--a-spacing-2) var(--a-spacing-4)
|
|
4330
|
+
padding: var(--a-spacing-2) var(--a-spacing-4);
|
|
4331
4331
|
margin-top: var(--a-spacing-1);
|
|
4332
4332
|
}
|
|
4333
4333
|
|
|
@@ -4829,6 +4829,10 @@ button.navds-internalheader__title:active,
|
|
|
4829
4829
|
padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
|
|
4830
4830
|
}
|
|
4831
4831
|
|
|
4832
|
+
.navds-modal--small .navds-modal__header {
|
|
4833
|
+
padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
|
|
4834
|
+
}
|
|
4835
|
+
|
|
4832
4836
|
.navds-modal__header-icon svg {
|
|
4833
4837
|
display: inline;
|
|
4834
4838
|
vertical-align: -0.25rem;
|
|
@@ -4847,6 +4851,10 @@ button.navds-internalheader__title:active,
|
|
|
4847
4851
|
position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
|
|
4848
4852
|
}
|
|
4849
4853
|
|
|
4854
|
+
.navds-modal--small .navds-modal__body {
|
|
4855
|
+
padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
|
|
4856
|
+
}
|
|
4857
|
+
|
|
4850
4858
|
.navds-modal__header + .navds-modal__body {
|
|
4851
4859
|
padding-top: var(--a-spacing-0);
|
|
4852
4860
|
}
|
|
@@ -4858,6 +4866,10 @@ button.navds-internalheader__title:active,
|
|
|
4858
4866
|
padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
|
|
4859
4867
|
}
|
|
4860
4868
|
|
|
4869
|
+
.navds-modal--small .navds-modal__footer {
|
|
4870
|
+
padding: var(--a-spacing-4);
|
|
4871
|
+
}
|
|
4872
|
+
|
|
4861
4873
|
.navds-modal__footer :nth-of-type(2) {
|
|
4862
4874
|
margin-left: auto;
|
|
4863
4875
|
}
|
|
@@ -6713,6 +6725,10 @@ button.navds-internalheader__title:active,
|
|
|
6713
6725
|
margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
|
|
6714
6726
|
}
|
|
6715
6727
|
|
|
6728
|
+
.navds-stepper__item:last-child .navds-stepper__step {
|
|
6729
|
+
margin-bottom: 0;
|
|
6730
|
+
}
|
|
6731
|
+
|
|
6716
6732
|
@media (forced-colors: active) {
|
|
6717
6733
|
.navds-stepper__step {
|
|
6718
6734
|
background-color: ButtonFace;
|