@themarioga/grid-editor 4.1.0 → 5.1.0

package/dist/grideditor.css

@@ -28,7 +28,10 @@
 }
 .ge-mainControls .ge-addRowGroup .ge-row-icon {
   width: 48px;
+  /* A button shrinks to its content, and an equal column has none */
+  flex: 0 0 48px;
   margin: 0;
+  /* Nothing inside to be as wide as */
 }
 .ge-mainControls .ge-addRowGroup .ge-row-icon .column {
   height: 10px;
@@ -36,6 +39,9 @@
   padding: 0;
   border-left: 2px solid #f4f4f4;
 }
+.ge-mainControls .ge-addRowGroup .ge-row-icon .col-auto {
+  min-width: 8px;
+}
 .ge-mainControls .ge-layout-mode {
   margin-left: 5px;
 }
@@ -113,6 +119,8 @@
   /* Content area */
   /* The column size picker, offered by holding the add column tool. It
        hangs off the tool itself, so it comes away with the drawers */
+  /* The copy tool says it copied, for a moment, with the clipboard
+       plugin */
   /* Containers: tabs, accordions and popups. A container sits in a column
        beside the content areas, and each of its panes is an ordinary region */
   /* A pane's own drawer is small and sits with its label rather than
@@ -155,6 +163,8 @@
   margin: 0 -5px 5px;
   display: block;
   width: calc(100% + 2 * 5px);
+  /* Its node may align text, and the drawer's tools would follow */
+  text-align: left;
 }
 .ge-canvas.ge-editing .ge-tools-drawer.ge-picker-open {
   z-index: 200;
@@ -289,6 +299,9 @@
   position: relative;
 }
 .ge-canvas.ge-editing .column > .ge-tools-drawer {
+  /* The drawer is not content: an auto column is as wide as what
+               it holds, and its tools would make it as wide as a drawer */
+  contain: inline-size;
   background: #afd5ea;
 }
 .ge-canvas.ge-editing .column > .ge-tools-drawer a {
@@ -303,6 +316,9 @@
 .ge-canvas.ge-editing .ge-tools-drawer > a {
   position: relative;
 }
+.ge-canvas.ge-editing .ge-tools-drawer > a.ge-copied {
+  color: #198754;
+}
 .ge-canvas.ge-editing .ge-size-picker {
   position: absolute;
   top: 100%;
@@ -331,6 +347,7 @@
   background: rgba(47, 164, 231, 0.08);
   border: 1px solid rgba(47, 164, 231, 0.4);
   border-radius: 3px;
+  /* col and col-auto: a word, not a number */
   /* Wider than what is left of the row: allowed, but said so */
 }
 .ge-canvas.ge-editing .ge-size-picker > .ge-size:hover {
@@ -338,6 +355,11 @@
   border-color: #2FA4E7;
   color: #fff;
 }
+.ge-canvas.ge-editing .ge-size-picker > .ge-size.ge-size-flex {
+  width: auto;
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .ge-canvas.ge-editing .ge-size-picker > .ge-size.ge-size-tight {
   color: #999;
   background: transparent;
@@ -520,6 +542,11 @@
 .ge-canvas.ge-layout-all {
   max-width: none;
 }
+/*
+ * col and col-auto, in the order Bootstrap writes them: before the numbered
+ * sizes, so that of two classes for one tier the number wins, as it does on
+ * the real page.
+ */
 /*
  * Switching a tier off means giving the column back to bootstrap's default
  * for a row child - full width, stacked - which is what a browser really
@@ -539,6 +566,12 @@
            specificity, so the order they are written in is the rule. */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-xs .col-sm,
+.ge-canvas.ge-layout-xs .col-sm-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-sm-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -632,6 +665,12 @@
 .ge-canvas.ge-layout-xs .offset-sm-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-md,
+.ge-canvas.ge-layout-xs .col-md-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-md-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -725,6 +764,12 @@
 .ge-canvas.ge-layout-xs .offset-md-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-lg,
+.ge-canvas.ge-layout-xs .col-lg-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-lg-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -818,6 +863,12 @@
 .ge-canvas.ge-layout-xs .offset-lg-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-xl,
+.ge-canvas.ge-layout-xs .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -911,6 +962,12 @@
 .ge-canvas.ge-layout-xs .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-xxl,
+.ge-canvas.ge-layout-xs .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1004,6 +1061,15 @@
 .ge-canvas.ge-layout-xs .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -1110,6 +1176,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-sm .col-md,
+.ge-canvas.ge-layout-sm .col-md-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-md-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1203,6 +1275,12 @@
 .ge-canvas.ge-layout-sm .offset-md-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col-lg,
+.ge-canvas.ge-layout-sm .col-lg-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-lg-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1296,6 +1374,12 @@
 .ge-canvas.ge-layout-sm .offset-lg-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col-xl,
+.ge-canvas.ge-layout-sm .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1389,6 +1473,12 @@
 .ge-canvas.ge-layout-sm .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col-xxl,
+.ge-canvas.ge-layout-sm .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1482,6 +1572,15 @@
 .ge-canvas.ge-layout-sm .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -1575,6 +1674,15 @@
 .ge-canvas.ge-layout-sm .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-sm .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -1682,6 +1790,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-md .col-lg,
+.ge-canvas.ge-layout-md .col-lg-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-lg-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1775,6 +1889,12 @@
 .ge-canvas.ge-layout-md .offset-lg-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-md .col-xl,
+.ge-canvas.ge-layout-md .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1868,6 +1988,12 @@
 .ge-canvas.ge-layout-md .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-md .col-xxl,
+.ge-canvas.ge-layout-md .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1961,6 +2087,15 @@
 .ge-canvas.ge-layout-md .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-md .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2054,6 +2189,15 @@
 .ge-canvas.ge-layout-md .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-md .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2147,6 +2291,15 @@
 .ge-canvas.ge-layout-md .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-md .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2255,6 +2408,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-lg .col-xl,
+.ge-canvas.ge-layout-lg .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -2348,6 +2507,12 @@
 .ge-canvas.ge-layout-lg .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-lg .col-xxl,
+.ge-canvas.ge-layout-lg .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -2441,6 +2606,15 @@
 .ge-canvas.ge-layout-lg .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-lg .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2534,6 +2708,15 @@
 .ge-canvas.ge-layout-lg .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-lg .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2627,6 +2810,15 @@
 .ge-canvas.ge-layout-lg .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-lg .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2720,6 +2912,15 @@
 .ge-canvas.ge-layout-lg .offset-md-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-lg .col-lg {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-lg-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-lg-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2829,6 +3030,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-xl .col-xxl,
+.ge-canvas.ge-layout-xl .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -2922,6 +3129,15 @@
 .ge-canvas.ge-layout-xl .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xl .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3015,6 +3231,15 @@
 .ge-canvas.ge-layout-xl .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3108,6 +3333,15 @@
 .ge-canvas.ge-layout-xl .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3201,6 +3435,15 @@
 .ge-canvas.ge-layout-xl .offset-md-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-lg {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-lg-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-lg-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3294,6 +3537,15 @@
 .ge-canvas.ge-layout-xl .offset-lg-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-xl {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-xl-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-xl-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3404,6 +3656,15 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-xxl .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3497,6 +3758,15 @@
 .ge-canvas.ge-layout-xxl .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3590,6 +3860,15 @@
 .ge-canvas.ge-layout-xxl .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3683,6 +3962,15 @@
 .ge-canvas.ge-layout-xxl .offset-md-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-lg {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-lg-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-lg-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3776,6 +4064,15 @@
 .ge-canvas.ge-layout-xxl .offset-lg-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-xl {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-xl-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-xl-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3869,6 +4166,15 @@
 .ge-canvas.ge-layout-xxl .offset-xl-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-xxl {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-xxl-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-xxl-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -4041,3 +4347,163 @@
   margin-right: calc(var(--bs-gutter-x) * -0.5);
   width: calc(100% + var(--bs-gutter-x));
 }
+/* A row whose row-cols sizes its columns in this view says how many */
+.ge-canvas.ge-editing .row[data-ge-row-cols] {
+  position: relative;
+}
+.ge-canvas.ge-editing .row[data-ge-row-cols]::before {
+  content: attr(data-ge-row-cols);
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  z-index: 1;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
+/*
+ * The sections plugin: Bootstrap's containers on the canvas. A section is
+ * framed while editing, and in a breakpoint view each container class gets
+ * the max-width it has at that breakpoint - Bootstrap sets it for the
+ * window, and the window is not what a breakpoint view narrows.
+ */
+.ge-canvas.ge-editing > .ge-section {
+  border: 1px dashed #8a6d3b;
+  margin-bottom: 5px;
+  padding-bottom: 5px;
+}
+.ge-canvas.ge-editing > .ge-section > .ge-section-drawer {
+  background: rgba(138, 109, 59, 0.15);
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+}
+.ge-canvas.ge-editing > .ge-section > .ge-section-drawer > a {
+  color: #785f33;
+}
+/* The width field, in the section's settings panel beside id and classes */
+.ge-canvas.ge-editing .ge-details .ge-section-width {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  font-size: 11px;
+}
+.ge-canvas.ge-editing .ge-details .ge-section-width select {
+  border: 1px solid #7F7F7F;
+  border-radius: 4px;
+  font-size: 11px;
+  padding: 1px 2px;
+}
+.ge-canvas.ge-layout-xs > .container {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-sm {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-md {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-lg {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container {
+  max-width: 540px;
+}
+.ge-canvas.ge-layout-sm > .container-sm {
+  max-width: 540px;
+}
+.ge-canvas.ge-layout-sm > .container-md {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container-lg {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md > .container {
+  max-width: 720px;
+}
+.ge-canvas.ge-layout-md > .container-sm {
+  max-width: 720px;
+}
+.ge-canvas.ge-layout-md > .container-md {
+  max-width: 720px;
+}
+.ge-canvas.ge-layout-md > .container-lg {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg > .container {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-sm {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-md {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-lg {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl > .container {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-sm {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-md {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-lg {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-xl {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl > .container {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-sm {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-md {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-lg {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-xl {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-xxl {
+  max-width: 1320px;
+}