@themarioga/grid-editor 4.1.0 → 5.1.0

package/src/less/grideditor.less

@@ -44,6 +44,8 @@
         
         .ge-row-icon {
             width: 48px;
+            /* A button shrinks to its content, and an equal column has none */
+            flex: 0 0 48px;
             margin: 0;
             
             .column {
@@ -52,6 +54,10 @@
                 padding: 0;
                 border-left: 2px solid #f4f4f4;
             }
+            /* Nothing inside to be as wide as */
+            .col-auto {
+                min-width: 8px;
+            }
         }
     }
     
@@ -167,6 +173,8 @@
         margin: 0 -@editGutter @editGutter;
         display: block;
         width: calc(~"100% +" 2 * @editGutter);
+        /* Its node may align text, and the drawer's tools would follow */
+        text-align: left;
         
         > a {
             display: inline-block;
@@ -314,6 +322,10 @@
         position: relative;
         
         > .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;
+
             a {
                 color: @colTextColor;
             }
@@ -335,6 +347,12 @@
         position: relative;
     }
 
+    /* The copy tool says it copied, for a moment, with the clipboard
+       plugin */
+    .ge-tools-drawer > a.ge-copied {
+        color: #198754;
+    }
+
     .ge-size-picker {
         position: absolute;
         top: 100%;
@@ -370,6 +388,13 @@
                 color: #fff;
             }
 
+            /* col and col-auto: a word, not a number */
+            &.ge-size-flex {
+                width: auto;
+                padding-left: 5px;
+                padding-right: 5px;
+            }
+
             /* Wider than what is left of the row: allowed, but said so */
             &.ge-size-tight {
                 color: #999;
@@ -644,16 +669,43 @@
     /* this tier applies at the active one, so it is written by the pass below */
 }
 .ge-tier-above-off(@j, @active) when (@j > @active) {
+    .ge-flex-columns-off(extract(@ge-col-prefixes, @j));
     .ge-columns-off(extract(@ge-col-prefixes, @j));
     .ge-offsets-off(extract(@ge-offset-prefixes, @j));
 }
 
 .ge-tiers-upto-on(@active, @j: 1) when (@j =< @active) {
+    .ge-flex-columns-on(extract(@ge-col-prefixes, @j));
     .ge-columns-on(extract(@ge-col-prefixes, @j));
     .ge-offsets-on(extract(@ge-offset-prefixes, @j));
     .ge-tiers-upto-on(@active, @j + 1);
 }
 
+/*
+ * 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.
+ */
+.ge-flex-columns-on(@prefix) {
+    .@{prefix} {
+        flex: 1 0 0%;
+        max-width: 100%;
+    }
+    .@{prefix}-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+}
+.ge-flex-columns-off(@prefix) {
+    .@{prefix},
+    .@{prefix}-auto {
+        flex: 0 0 auto;
+        width: 100%;
+        max-width: 100%;
+    }
+}
+
 .ge-columns-on(@prefix, @i: 1) when (@i =< @ge-columns) {
     .@{prefix}-@{i} {
         flex: 0 0 auto;
@@ -784,3 +836,89 @@
         }
     }
 }
+
+/* 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;
+
+    &::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, .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-section-color: #8a6d3b;
+
+.ge-canvas.ge-editing > .ge-section {
+    border: 1px dashed @ge-section-color;
+    margin-bottom: @editGutter;
+    padding-bottom: @editGutter;
+
+    > .ge-section-drawer {
+        background: fadeout(@ge-section-color, 85%);
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%;
+
+        > a {
+            color: darken(@ge-section-color, 5%);
+        }
+    }
+}
+
+/* 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;
+
+    select {
+        border: 1px solid #7F7F7F;
+        border-radius: 4px;
+        font-size: 11px;
+        padding: 1px 2px;
+    }
+}
+
+@ge-section-classes: container, container-sm, container-md, container-lg, container-xl, container-xxl;
+@ge-section-from: 2, 2, 3, 4, 5, 6;
+@ge-section-widths: 100%, 540px, 720px, 960px, 1140px, 1320px;
+
+.ge-section-modes(@i: 1) when (@i =< length(@ge-tiers)) {
+    @tier: extract(@ge-tiers, @i);
+    .ge-section-classes(@i, @tier);
+    .ge-section-modes(@i + 1);
+}
+.ge-section-classes(@i, @tier, @k: 1) when (@k =< length(@ge-section-classes)) {
+    .ge-section-width(@i, @tier, extract(@ge-section-classes, @k), extract(@ge-section-from, @k));
+    .ge-section-classes(@i, @tier, @k + 1);
+}
+.ge-section-width(@i, @tier, @class, @from) when (@i >= @from) {
+    .ge-canvas.ge-layout-@{tier} > .@{class} {
+        max-width: extract(@ge-section-widths, @i);
+    }
+}
+.ge-section-width(@i, @tier, @class, @from) when (@i < @from) {
+    .ge-canvas.ge-layout-@{tier} > .@{class} {
+        max-width: 100%;
+    }
+}
+.ge-section-modes();