@getflip/swirl-components 0.369.0 → 0.370.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/components.json +1 -1
- package/dist/cjs/swirl-app-bar.cjs.entry.js +4 -2
- package/dist/cjs/swirl-console-layout.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-app-bar/swirl-app-bar.css +9 -0
- package/dist/collection/components/swirl-app-bar/swirl-app-bar.js +3 -1
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.css +38 -4
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +4 -1
- package/dist/components/swirl-app-bar.js +4 -2
- package/dist/components/swirl-console-layout.js +1 -1
- package/dist/esm/swirl-app-bar.entry.js +4 -2
- package/dist/esm/swirl-console-layout.entry.js +1 -1
- package/dist/swirl-components/p-0780dad3.entry.js +1 -0
- package/dist/swirl-components/{p-50370021.entry.js → p-4ca943a4.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-ec634b0f.entry.js +0 -1
package/components.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DM-IG6w2.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
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)}.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:0;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}";
|
|
6
|
+
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)}.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:0;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:not(.app-bar--has-heading) .app-bar__center-controls{display:flex}.app-bar:not(.app-bar--has-heading) .app-bar__heading{display:none}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
|
|
7
7
|
|
|
8
8
|
const SwirlAppBar = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -50,15 +50,17 @@ const SwirlAppBar = class {
|
|
|
50
50
|
render() {
|
|
51
51
|
const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
|
|
52
52
|
const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
|
|
53
|
+
const hasHeading = Boolean(this.el.querySelector('[slot="heading"]'));
|
|
53
54
|
const className = index$1.classnames("app-bar", {
|
|
54
55
|
"app-bar--has-cta": this.hasCta,
|
|
55
56
|
"app-bar--has-right-controls": hasRightControls,
|
|
57
|
+
"app-bar--has-heading": hasHeading,
|
|
56
58
|
});
|
|
57
59
|
const styles = {
|
|
58
60
|
paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
|
|
59
61
|
paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
|
|
60
62
|
};
|
|
61
|
-
return (index.h(index.Host, { key: '
|
|
63
|
+
return (index.h(index.Host, { key: 'ebdb11284a5d7b0e495f3ef6ca5383e42f3a1217' }, index.h("div", { key: '3f835e7f255c1a5a64fdd77df04dd5125fa53af2', class: className, style: styles }, showLeftControls && (index.h("div", { key: 'c55d2dacce587f2443f2cb187adbb20335f1ebf7', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (index.h("div", { key: 'bae9cf4d21723a64fe640128dfe8acc6ea50dd08', class: "app-bar__main-navigation-control" }, this.showBackButton && (index.h("swirl-button", { key: '823386ce17200d8e9eb59e53bc13fc272f618de4', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (index.h("swirl-button", { key: '70e54a538f8d434b86d73e5e26d43ad76ad8ec97', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (index.h("div", { key: '5225bec74f239041e4e193a9800ebfda52fc190a', class: "app-bar__stepper-controls" }, index.h("swirl-button", { key: '00b3163a95f10a4dbf2fd9a0fc3046c7e27b1eb4', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), index.h("swirl-button", { key: 'ca8d8f3e06408664b56352366f218ad014c36cb6', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), index.h("div", { key: '0ec2af8a4ea6f9c17dd8d0c116a95c599f586fc5', class: "app-bar__cta" }, index.h("slot", { key: '82efa65c7381b155768baee4d5acaea72b4061c1', name: "cta" })), index.h("div", { key: '8561d4fee864f70e871d3fb2e2a17eaf4b45817e', class: "app-bar__heading" }, index.h("slot", { key: 'a536db6681aec3cf1a8eb8855b2838e7b923619e', name: "heading" })), index.h("div", { key: '5f7e7c18685d94e9147e2fc704e23a5d8ab05b02', class: "app-bar__center-controls" }, index.h("slot", { key: '414e3e0aa9109a6b29a96b383440581715d30084', name: "center-controls" })), index.h("div", { key: '2a3c606c9d22194237a958e121f46c98ab6bd887', class: "app-bar__right-controls" }, index.h("slot", { key: '1a1f867e1311fef262d2ff8dc884f9bfcea90c9d', name: "right-controls" })))));
|
|
62
64
|
}
|
|
63
65
|
get el() { return index.getElement(this); }
|
|
64
66
|
};
|
|
@@ -4,7 +4,7 @@ var index = require('./index-DM-IG6w2.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-Br2wWntR.js');
|
|
6
6
|
|
|
7
|
-
const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:\"content\"\n \"footer\";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:\"header\"\n \"navigation\"\n \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:\"app-bar\"\n \"content\"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:\"app-bar\"\n \"content\"\n \"footer\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-
|
|
7
|
+
const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:\"content\"\n \"footer\";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:\"header\"\n \"navigation\"\n \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:\"app-bar\"\n \"content\"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:\"app-bar\"\n \"content\"\n \"footer\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}";
|
|
8
8
|
|
|
9
9
|
const SwirlConsoleLayout = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -92,6 +92,15 @@
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
.app-bar:not(.app-bar--has-heading) .app-bar__center-controls {
|
|
96
|
+
display: flex;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.app-bar:not(.app-bar--has-heading) .app-bar__heading {
|
|
100
|
+
display: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
|
|
95
104
|
.app-bar__right-controls {
|
|
96
105
|
display: flex;
|
|
97
106
|
min-width: 0;
|
|
@@ -46,15 +46,17 @@ export class SwirlAppBar {
|
|
|
46
46
|
render() {
|
|
47
47
|
const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
|
|
48
48
|
const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
|
|
49
|
+
const hasHeading = Boolean(this.el.querySelector('[slot="heading"]'));
|
|
49
50
|
const className = classnames("app-bar", {
|
|
50
51
|
"app-bar--has-cta": this.hasCta,
|
|
51
52
|
"app-bar--has-right-controls": hasRightControls,
|
|
53
|
+
"app-bar--has-heading": hasHeading,
|
|
52
54
|
});
|
|
53
55
|
const styles = {
|
|
54
56
|
paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
|
|
55
57
|
paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
|
|
56
58
|
};
|
|
57
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: 'ebdb11284a5d7b0e495f3ef6ca5383e42f3a1217' }, h("div", { key: '3f835e7f255c1a5a64fdd77df04dd5125fa53af2', class: className, style: styles }, showLeftControls && (h("div", { key: 'c55d2dacce587f2443f2cb187adbb20335f1ebf7', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: 'bae9cf4d21723a64fe640128dfe8acc6ea50dd08', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '823386ce17200d8e9eb59e53bc13fc272f618de4', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '70e54a538f8d434b86d73e5e26d43ad76ad8ec97', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '5225bec74f239041e4e193a9800ebfda52fc190a', class: "app-bar__stepper-controls" }, h("swirl-button", { key: '00b3163a95f10a4dbf2fd9a0fc3046c7e27b1eb4', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ca8d8f3e06408664b56352366f218ad014c36cb6', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '0ec2af8a4ea6f9c17dd8d0c116a95c599f586fc5', class: "app-bar__cta" }, h("slot", { key: '82efa65c7381b155768baee4d5acaea72b4061c1', name: "cta" })), h("div", { key: '8561d4fee864f70e871d3fb2e2a17eaf4b45817e', class: "app-bar__heading" }, h("slot", { key: 'a536db6681aec3cf1a8eb8855b2838e7b923619e', name: "heading" })), h("div", { key: '5f7e7c18685d94e9147e2fc704e23a5d8ab05b02', class: "app-bar__center-controls" }, h("slot", { key: '414e3e0aa9109a6b29a96b383440581715d30084', name: "center-controls" })), h("div", { key: '2a3c606c9d22194237a958e121f46c98ab6bd887', class: "app-bar__right-controls" }, h("slot", { key: '1a1f867e1311fef262d2ff8dc884f9bfcea90c9d', name: "right-controls" })))));
|
|
58
60
|
}
|
|
59
61
|
static get is() { return "swirl-app-bar"; }
|
|
60
62
|
static get encapsulation() { return "shadow"; }
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
scrollbar-gutter: stable;
|
|
206
206
|
display: flex;
|
|
207
207
|
min-width: 0;
|
|
208
|
-
padding: var(--s-space-16);
|
|
208
|
+
padding: 0 var(--s-space-16);
|
|
209
209
|
background-color: var(--s-background-default);
|
|
210
210
|
flex-direction: column;
|
|
211
211
|
grid-area: content;
|
|
@@ -214,16 +214,33 @@
|
|
|
214
214
|
@media (min-width: 768px) {
|
|
215
215
|
|
|
216
216
|
.console-layout__content {
|
|
217
|
-
padding: 2.5rem
|
|
217
|
+
padding: 0 2.5rem
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
.console-
|
|
222
|
-
|
|
221
|
+
.console-layout__content-container {
|
|
222
|
+
display: flex;
|
|
223
|
+
flex-direction: column;
|
|
224
|
+
align-items: center;
|
|
225
|
+
height: 100%;
|
|
226
|
+
width: 100%;
|
|
223
227
|
}
|
|
224
228
|
|
|
225
229
|
.console-layout__integration {
|
|
226
230
|
flex-grow: 1;
|
|
231
|
+
padding-bottom: var(--s-space-16);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
@media (min-width: 768px) {
|
|
235
|
+
|
|
236
|
+
.console-layout__integration {
|
|
237
|
+
padding-bottom: 2.5rem;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.console-layout__integration {
|
|
242
|
+
|
|
243
|
+
width: 100%;
|
|
227
244
|
}
|
|
228
245
|
|
|
229
246
|
.console-layout__logo {
|
|
@@ -252,6 +269,23 @@
|
|
|
252
269
|
margin-bottom: var(--s-space-24);
|
|
253
270
|
flex-shrink: 0;
|
|
254
271
|
gap: var(--s-space-16);
|
|
272
|
+
padding-top: var(--s-space-16);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
@media (min-width: 768px) {
|
|
276
|
+
|
|
277
|
+
.console-layout__content-header {
|
|
278
|
+
padding-top: 2.5rem;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.console-layout__content-header {
|
|
283
|
+
|
|
284
|
+
width: 100%;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.console-layout--has-custom-app-bar .console-layout__content-header {
|
|
288
|
+
padding-top: var(--s-space-16);
|
|
255
289
|
}
|
|
256
290
|
|
|
257
291
|
.console-layout__back-button {
|