@navikt/ds-css 8.10.0 → 8.10.2
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/dialog.css +1 -1
- package/dist/component/dialog.min.css +1 -1
- package/dist/component/modal.css +8 -8
- package/dist/component/modal.min.css +1 -1
- package/dist/components.css +9 -9
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +10 -10
- package/dist/index.min.css +1 -1
- package/package.json +2 -2
- package/src/data-table.css +25 -3
- package/src/dialog.css +1 -1
- package/src/modal.css +8 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 8.10.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Dialog: Now aligns to bottom when centered at 480px instead of 768px screen width ([#4831](https://github.com/navikt/aksel/pull/4831))
|
|
8
|
+
|
|
9
|
+
## 8.10.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Modal: Changing `size` had no effect before ([#4823](https://github.com/navikt/aksel/pull/4823))
|
|
14
|
+
|
|
3
15
|
## 8.10.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)));
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
-
@media (max-width:
|
|
106
|
+
@media (max-width: 480px) or (max-height: 479px) {
|
|
107
107
|
.aksel-dialog__popup[data-position="center"] {
|
|
108
108
|
--__axc-dialog-transform: translateY(35%);
|
|
109
109
|
border-bottom: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-dialog__popup{--__axc-dialog-transform: ;--__axc-dialog-p-b: var(--ax-space-16);--__axc-dialog-p-i: var(--ax-space-20);background-color:var(--ax-bg-raised);border-radius:var(--ax-radius-12);color:var(--ax-text-neutral);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);z-index:2000;flex-direction:column;transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),translate .2s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;overflow:hidden}.aksel-dialog__popup:focus{outline:none}.aksel-dialog__popup[data-size=small]{--__axc-dialog-p-b: var(--ax-space-12);--__axc-dialog-p-i: var(--ax-space-16)}@media(max-height:400px){.aksel-dialog__popup{overflow:auto}}.aksel-dialog__popup[data-entering-style],.aksel-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__axc-dialog-transform)}.aksel-dialog__popup[data-exiting-style]{transition-duration:.1s}.aksel-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.aksel-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.aksel-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.aksel-dialog__popup:after{content:"";border-radius:inherit;background-color:var(--ax-bg-overlay);opacity:0;z-index:1;pointer-events:none;transition:opacity cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0}.aksel-dialog__popup[data-position=center]{--__axc-dialog-center-margin: 3rem;--__axc-dialog-transform: scale(.98);max-width:calc(100dvw - 3rem);max-height:calc(90dvh - var(--__axc-dialog-center-margin));margin-left:auto;margin-right:auto;margin-block:max(var(--__axc-dialog-center-margin),10dvh) auto;top:0;left:0;right:0}.aksel-dialog__popup[data-position=center][data-nested=true][data-entering-style],.aksel-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transition-duration:0s;transform:scale(1)}.aksel-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}@media(max-width:
|
|
1
|
+
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-dialog__popup{--__axc-dialog-transform: ;--__axc-dialog-p-b: var(--ax-space-16);--__axc-dialog-p-i: var(--ax-space-20);background-color:var(--ax-bg-raised);border-radius:var(--ax-radius-12);color:var(--ax-text-neutral);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);z-index:2000;flex-direction:column;transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),translate .2s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;overflow:hidden}.aksel-dialog__popup:focus{outline:none}.aksel-dialog__popup[data-size=small]{--__axc-dialog-p-b: var(--ax-space-12);--__axc-dialog-p-i: var(--ax-space-16)}@media(max-height:400px){.aksel-dialog__popup{overflow:auto}}.aksel-dialog__popup[data-entering-style],.aksel-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__axc-dialog-transform)}.aksel-dialog__popup[data-exiting-style]{transition-duration:.1s}.aksel-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.aksel-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.aksel-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.aksel-dialog__popup:after{content:"";border-radius:inherit;background-color:var(--ax-bg-overlay);opacity:0;z-index:1;pointer-events:none;transition:opacity cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0}.aksel-dialog__popup[data-position=center]{--__axc-dialog-center-margin: 3rem;--__axc-dialog-transform: scale(.98);max-width:calc(100dvw - 3rem);max-height:calc(90dvh - var(--__axc-dialog-center-margin));margin-left:auto;margin-right:auto;margin-block:max(var(--__axc-dialog-center-margin),10dvh) auto;top:0;left:0;right:0}.aksel-dialog__popup[data-position=center][data-nested=true][data-entering-style],.aksel-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transition-duration:0s;transform:scale(1)}.aksel-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}@media(max-width:480px)or (max-height:479px){.aksel-dialog__popup[data-position=center]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin:0 auto;inset:auto 0 0}}.aksel-dialog__popup[data-position=right]{max-width:calc(100vw - max(16px,10vw));top:0;bottom:0}.aksel-dialog__popup[data-position=right][data-nested-dialog-open=true]:after{opacity:1;transition-duration:.1s}.aksel-dialog__popup[data-position=left]{max-width:calc(100vw - max(16px,10vw));top:0;bottom:0}.aksel-dialog__popup[data-position=left][data-nested-dialog-open=true]:after{opacity:1;transition-duration:.1s}.aksel-dialog__popup[data-position=right]{--__axc-dialog-transform: translateX(35%);border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;right:0}.aksel-dialog__popup[data-position=left]{--__axc-dialog-transform: translateX(-35%);border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;left:0}.aksel-dialog__popup[data-position=bottom]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-left:auto;margin-right:auto;bottom:0;left:0;right:0}.aksel-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}.aksel-dialog__popup[data-position=fullscreen]{--__axc-dialog-transform: scale(.98);border:0;border-radius:0;width:100%;max-width:100dvw;height:100%;max-height:100dvh;inset:0}.aksel-dialog__backdrop{background-color:var(--ax-bg-overlay);z-index:2000;min-height:100dvh;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);position:fixed;inset:0}@supports (-webkit-touch-callout: none){.aksel-dialog__backdrop{position:absolute}}.aksel-dialog__backdrop[data-entering-style],.aksel-dialog__backdrop[data-exiting-style]{opacity:.001}.aksel-dialog__header{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i)}.aksel-dialog__title{margin-bottom:var(--ax-space-4)}.aksel-dialog__close-button{float:right;align-self:start}.aksel-dialog__body{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);overscroll-behavior:contain;position:relative;overflow:auto}.aksel-dialog__header~.aksel-dialog__body{padding-top:0}.aksel-dialog__body{background:linear-gradient(var(--ax-bg-raised) 30%,transparent) top,linear-gradient(transparent,var(--ax-bg-raised) 60%) bottom,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),transparent) top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),transparent) bottom;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;background-attachment:local,local,scroll,scroll}@media(max-height:400px){.aksel-dialog__body{overflow:unset}}.aksel-dialog__footer{justify-content:flex-end;gap:var(--ax-space-8);padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);flex-flow:wrap;display:flex}@media(forced-colors:active){.aksel-dialog__popup{outline:2px solid var(--ax-border-neutral-strong)!important}}}@layer aksel.layout;
|
package/dist/component/modal.css
CHANGED
|
@@ -49,14 +49,6 @@
|
|
|
49
49
|
right: 0;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
.aksel-modal--medium {
|
|
53
|
-
width: 700px;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.aksel-modal--small {
|
|
57
|
-
width: 450px;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
52
|
.aksel-modal--small .aksel-modal__header {
|
|
61
53
|
padding: var(--ax-space-12) var(--ax-space-16);
|
|
62
54
|
}
|
|
@@ -70,6 +62,14 @@
|
|
|
70
62
|
padding-inline: var(--ax-space-16);
|
|
71
63
|
}
|
|
72
64
|
|
|
65
|
+
.aksel-modal--width-medium {
|
|
66
|
+
width: 700px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.aksel-modal--width-small {
|
|
70
|
+
width: 450px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
73
|
@media (min-width: 480px) {
|
|
74
74
|
.aksel-modal {
|
|
75
75
|
max-width: calc(100% - 2em);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-modal{--__axc-modal-bg: var(--ax-bg-raised);background-color:var(--__axc-modal-bg);border:1px solid var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-12);box-shadow:var(--ax-shadow-dialog);max-width:100%;max-height:100%;color:var(--ax-text-neutral);margin:auto;padding:0;position:fixed}.aksel-modal[open]{flex-direction:column;animation:.7s cubic-bezier(.15,1,.3,1) akselModalFadeIn;display:flex}.aksel-modal--polyfilled{width:-webkit-fit-content;width:fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;top:50%;left:0;right:0;transform:translateY(-50%)}.aksel-modal--polyfilled:not([open]){display:none}.aksel-modal--polyfilled .aksel-modal--polyfilled{overflow:auto}._dialog_overlay{position:fixed;inset:0}.aksel-modal--
|
|
1
|
+
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-modal{--__axc-modal-bg: var(--ax-bg-raised);background-color:var(--__axc-modal-bg);border:1px solid var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-12);box-shadow:var(--ax-shadow-dialog);max-width:100%;max-height:100%;color:var(--ax-text-neutral);margin:auto;padding:0;position:fixed}.aksel-modal[open]{flex-direction:column;animation:.7s cubic-bezier(.15,1,.3,1) akselModalFadeIn;display:flex}.aksel-modal--polyfilled{width:-webkit-fit-content;width:fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;top:50%;left:0;right:0;transform:translateY(-50%)}.aksel-modal--polyfilled:not([open]){display:none}.aksel-modal--polyfilled .aksel-modal--polyfilled{overflow:auto}._dialog_overlay{position:fixed;inset:0}.aksel-modal--small .aksel-modal__header,.aksel-modal--small .aksel-modal__body{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-modal--small .aksel-modal__footer{padding-block:var(--ax-space-12) var(--ax-space-16);padding-inline:var(--ax-space-16)}.aksel-modal--width-medium{width:700px}.aksel-modal--width-small{width:450px}@media(min-width:480px){.aksel-modal{max-width:calc(100% - 2em)}.aksel-modal--autowidth{max-width:min(700px,100% - 2em)}}@media(min-height:480px){.aksel-modal{max-height:calc(100% - 2em)}.aksel-modal--top{max-height:calc(100% - 4em);margin-top:2em}}.aksel-modal::backdrop{background:#0c1627a8;animation:.7s cubic-bezier(.15,1,.3,1) akselModalBackdropFadeIn}.aksel-modal--polyfilled+.backdrop{background:#0c1627a8;position:fixed;inset:0}.aksel-modal__button{margin-left:var(--ax-space-16);float:right}.aksel-modal__header{padding:var(--ax-space-16) var(--ax-space-20)}.aksel-modal__header-icon svg{vertical-align:-.25rem;margin-right:var(--ax-space-4);display:inline}.aksel-modal__label{font-weight:var(--ax-font-weight-bold);color:var(--ax-text-neutral-subtle)}.aksel-modal__body{padding:var(--ax-space-16) var(--ax-space-20);overscroll-behavior:contain;background:linear-gradient(var(--__axc-modal-bg) 30%,transparent) top,linear-gradient(transparent,var(--__axc-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),transparent) top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),transparent) bottom;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;background-attachment:local,local,scroll,scroll;position:relative;overflow:auto}@media(max-height:400px){.aksel-modal__body{overflow:unset}}.aksel-modal__header+.aksel-modal__body{padding-top:var(--ax-space-0)}.aksel-modal__footer{gap:var(--ax-space-16);padding-block:var(--ax-space-16) var(--ax-space-20);padding-inline:var(--ax-space-20);flex-flow:row-reverse wrap;display:flex}.aksel-modal__footer :nth-of-type(2){margin-left:auto}.aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal{min-width:-webkit-fit-content;min-width:fit-content;max-width:100vw;max-height:100vh;animation:none}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media(forced-colors:active){.aksel-modal{outline:2px solid rgba(0,0,0,0)}}}@layer aksel.layout;
|
package/dist/components.css
CHANGED
|
@@ -3946,7 +3946,7 @@
|
|
|
3946
3946
|
transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)));
|
|
3947
3947
|
}
|
|
3948
3948
|
|
|
3949
|
-
@media (max-width:
|
|
3949
|
+
@media (max-width: 480px) or (max-height: 479px) {
|
|
3950
3950
|
.aksel-dialog__popup[data-position="center"] {
|
|
3951
3951
|
--__axc-dialog-transform: translateY(35%);
|
|
3952
3952
|
border-bottom: 0;
|
|
@@ -5273,14 +5273,6 @@
|
|
|
5273
5273
|
right: 0;
|
|
5274
5274
|
}
|
|
5275
5275
|
|
|
5276
|
-
.aksel-modal--medium {
|
|
5277
|
-
width: 700px;
|
|
5278
|
-
}
|
|
5279
|
-
|
|
5280
|
-
.aksel-modal--small {
|
|
5281
|
-
width: 450px;
|
|
5282
|
-
}
|
|
5283
|
-
|
|
5284
5276
|
.aksel-modal--small .aksel-modal__header {
|
|
5285
5277
|
padding: var(--ax-space-12) var(--ax-space-16);
|
|
5286
5278
|
}
|
|
@@ -5294,6 +5286,14 @@
|
|
|
5294
5286
|
padding-inline: var(--ax-space-16);
|
|
5295
5287
|
}
|
|
5296
5288
|
|
|
5289
|
+
.aksel-modal--width-medium {
|
|
5290
|
+
width: 700px;
|
|
5291
|
+
}
|
|
5292
|
+
|
|
5293
|
+
.aksel-modal--width-small {
|
|
5294
|
+
width: 450px;
|
|
5295
|
+
}
|
|
5296
|
+
|
|
5297
5297
|
@media (min-width: 480px) {
|
|
5298
5298
|
.aksel-modal {
|
|
5299
5299
|
max-width: calc(100% - 2em);
|