@getflip/swirl-components 0.200.0 → 0.200.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/components.json +1 -1
- package/dist/cjs/swirl-app-bar.cjs.entry.js +1 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-app-bar/swirl-app-bar.css +13 -6
- package/dist/collection/components/swirl-app-bar/swirl-app-bar.spec.js +3 -3
- package/dist/collection/components/swirl-app-bar/swirl-app-bar.stories.js +1 -1
- package/dist/collection/components/swirl-app-layout/swirl-app-layout.stories.js +2 -2
- package/dist/collection/components/swirl-modal/swirl-modal.css +18 -8
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-app-bar.js +1 -1
- package/dist/components/swirl-modal.js +1 -1
- package/dist/esm/swirl-app-bar.entry.js +1 -1
- package/dist/esm/swirl-modal.entry.js +1 -1
- package/dist/swirl-components/p-ea460fec.entry.js +1 -0
- package/dist/swirl-components/p-ebd78678.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-78ff38b5.entry.js +0 -1
- package/dist/swirl-components/p-f4d3c5d2.entry.js +0 -1
package/components.json
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-2ab5d772.js');
|
|
6
6
|
const index$1 = require('./index-9f94303c.js');
|
|
7
7
|
|
|
8
|
-
const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-
|
|
8
|
+
const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}@media (min-width: 992px){.app-bar{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
|
|
9
9
|
const SwirlAppBarStyle0 = swirlAppBarCss;
|
|
10
10
|
|
|
11
11
|
const SwirlAppBar = class {
|
|
@@ -7,7 +7,7 @@ const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
|
|
|
7
7
|
const index$1 = require('./index-9f94303c.js');
|
|
8
8
|
const focusTrap_esm = require('./focus-trap.esm-a1e3774c.js');
|
|
9
9
|
|
|
10
|
-
const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-max-width:40rem}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding
|
|
10
|
+
const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-max-width:40rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16) var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - 24rem);max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:3.75rem;padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
|
|
11
11
|
const SwirlModalStyle0 = swirlModalCss;
|
|
12
12
|
|
|
13
13
|
const SwirlModal = class {
|
|
@@ -10,9 +10,6 @@
|
|
|
10
10
|
|
|
11
11
|
.app-bar {
|
|
12
12
|
display: flex;
|
|
13
|
-
min-width: -webkit-min-content;
|
|
14
|
-
min-width: -moz-min-content;
|
|
15
|
-
min-width: min-content;
|
|
16
13
|
min-height: 3.5rem;
|
|
17
14
|
padding-right: var(--s-space-16);
|
|
18
15
|
padding-left: var(--s-space-16);
|
|
@@ -20,6 +17,15 @@
|
|
|
20
17
|
gap: var(--s-space-16);
|
|
21
18
|
}
|
|
22
19
|
|
|
20
|
+
@media (min-width: 992px) {
|
|
21
|
+
|
|
22
|
+
.app-bar {
|
|
23
|
+
min-width: -webkit-min-content;
|
|
24
|
+
min-width: -moz-min-content;
|
|
25
|
+
min-width: min-content
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
.app-bar--has-cta .app-bar__cta {
|
|
24
30
|
display: block;
|
|
25
31
|
}
|
|
@@ -46,9 +52,7 @@
|
|
|
46
52
|
|
|
47
53
|
.app-bar__heading {
|
|
48
54
|
display: flex;
|
|
49
|
-
min-width:
|
|
50
|
-
min-width: -moz-min-content;
|
|
51
|
-
min-width: min-content;
|
|
55
|
+
min-width: 10rem;
|
|
52
56
|
flex-grow: 1;
|
|
53
57
|
align-items: center;
|
|
54
58
|
}
|
|
@@ -56,6 +60,9 @@
|
|
|
56
60
|
@media (min-width: 992px) {
|
|
57
61
|
|
|
58
62
|
.app-bar__heading {
|
|
63
|
+
min-width: -webkit-min-content;
|
|
64
|
+
min-width: -moz-min-content;
|
|
65
|
+
min-width: min-content;
|
|
59
66
|
flex-grow: 0
|
|
60
67
|
}
|
|
61
68
|
}
|
|
@@ -21,7 +21,7 @@ describe("swirl-app-bar", () => {
|
|
|
21
21
|
expect(page.root).toEqualHtml(`
|
|
22
22
|
<swirl-app-bar>
|
|
23
23
|
<mock:shadow-root>
|
|
24
|
-
<div class="app-bar app-bar--has-cta app-bar--has-right-controls" style="padding-inline-end: 16; padding-inline-start: 16;">
|
|
24
|
+
<div class="app-bar app-bar--has-cta app-bar--has-right-controls" style="padding-inline-end: var(--s-space-16); padding-inline-start: var(--s-space-16);">
|
|
25
25
|
<div class="app-bar__cta">
|
|
26
26
|
<slot name="cta"></slot>
|
|
27
27
|
</div>
|
|
@@ -69,7 +69,7 @@ describe("swirl-app-bar", () => {
|
|
|
69
69
|
expect(page.root).toEqualHtml(`
|
|
70
70
|
<swirl-app-bar show-stepper-controls="true">
|
|
71
71
|
<mock:shadow-root>
|
|
72
|
-
<div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
|
|
72
|
+
<div class="app-bar" style="padding-inline-end: var(--s-space-16); padding-inline-start: var(--s-space-16);">
|
|
73
73
|
<div class="app-bar__left-controls">
|
|
74
74
|
<div class="app-bar__stepper-controls">
|
|
75
75
|
<swirl-button hidelabel="" icon="<swirl-icon-arrow-upward></swirl-icon-arrow-upward>" label="Previous item"></swirl-button>
|
|
@@ -107,7 +107,7 @@ describe("swirl-app-bar", () => {
|
|
|
107
107
|
expect(page.root).toEqualHtml(`
|
|
108
108
|
<swirl-app-bar show-close-button="true">
|
|
109
109
|
<mock:shadow-root>
|
|
110
|
-
<div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
|
|
110
|
+
<div class="app-bar" style="padding-inline-end: var(--s-space-16); padding-inline-start: var(--s-space-16);">
|
|
111
111
|
<div class="app-bar__left-controls">
|
|
112
112
|
<div class="app-bar__main-navigation-control">
|
|
113
113
|
<swirl-button hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close"></swirl-button>
|
|
@@ -45,10 +45,10 @@ const Template = (args) => {
|
|
|
45
45
|
<swirl-button label="Scheduled"></swirl-button>
|
|
46
46
|
</swirl-stack>
|
|
47
47
|
</swirl-app-bar>
|
|
48
|
-
<
|
|
48
|
+
<swirl-stack orientation="horizontal" slot="app-bar-controls">
|
|
49
49
|
<swirl-button hide-label="true" icon="<swirl-icon-search></swirl-icon-search>" label="Search"></swirl-button>
|
|
50
50
|
<swirl-button hide-label class="info-button" icon="<swirl-icon-info></swirl-icon-info>" label="More information"></swirl-button>
|
|
51
|
-
</
|
|
51
|
+
</swirl-stack>
|
|
52
52
|
<div slot="content"></div>
|
|
53
53
|
<div slot="sidebar"></div>
|
|
54
54
|
<swirl-button slot="floating-action-button" icon="<swirl-icon-add></swirl-icon-add>" label="CTA" variant="floating" intent="primary" hide-label="true"></swirl-button>
|
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
--swirl-modal-max-height: 90vh;
|
|
24
24
|
--swirl-modal-view-height: 100vh;
|
|
25
25
|
--swirl-modal-max-width: 40rem;
|
|
26
|
+
--swirl-modal-footer-padding-small: var(--s-space-12) var(--s-space-16) var(--s-space-12) var(--s-space-16);
|
|
27
|
+
--swirl-modal-footer-padding-large: var(--s-space-16) var(--s-space-24) var(--s-space-16) var(--s-space-24);
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
@supports (height: 100dvh) {
|
|
@@ -191,11 +193,15 @@
|
|
|
191
193
|
}
|
|
192
194
|
|
|
193
195
|
.modal--has-custom-footer .modal__custom-footer {
|
|
194
|
-
padding
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
196
|
+
padding: var(--swirl-modal-footer-padding-small);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@media (min-width: 768px) {
|
|
200
|
+
|
|
201
|
+
.modal--has-custom-footer .modal__custom-footer {
|
|
202
|
+
padding: var(--swirl-modal-footer-padding-large)
|
|
198
203
|
}
|
|
204
|
+
}
|
|
199
205
|
|
|
200
206
|
.modal--has-header-tools .modal__header {
|
|
201
207
|
border-bottom-color: transparent;
|
|
@@ -443,14 +449,18 @@
|
|
|
443
449
|
|
|
444
450
|
.modal__controls {
|
|
445
451
|
display: flex;
|
|
446
|
-
padding
|
|
447
|
-
padding-right: var(--s-space-24);
|
|
448
|
-
padding-bottom: var(--s-space-16);
|
|
449
|
-
padding-left: var(--s-space-24);
|
|
452
|
+
padding: var(--swirl-modal-footer-padding-small);
|
|
450
453
|
flex-shrink: 0;
|
|
451
454
|
justify-content: flex-end;
|
|
452
455
|
}
|
|
453
456
|
|
|
457
|
+
@media (min-width: 768px) {
|
|
458
|
+
|
|
459
|
+
.modal__controls {
|
|
460
|
+
padding: var(--swirl-modal-footer-padding-large)
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
|
|
454
464
|
@keyframes modal-scale-in {
|
|
455
465
|
from {
|
|
456
466
|
transform: scale(0);
|