GH-180 - Flex LESS (Publish)

apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/.content.xml

@@ -17,4 +17,4 @@
 <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
     jcr:primaryType="cq:ClientLibraryFolder"
     allowProxy="{Boolean}true"
-    categories="[dx.structure.author]"/>
+    categories="[dx.structure.publish]"/>

apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/app.less

@@ -0,0 +1,9 @@
+// Variables
+@import 'variables/mediaQueries';
+@import 'variables/sides';
+
+// Utilities
+@import 'utilities/spacing';
+
+// Components
+@import 'components/flex';

apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/components/flex.less

@@ -0,0 +1,263 @@
+.dx-Flex {
+    position: relative;
+
+    &.has-Toggle:not(.is-Selected) {
+        &:not(.dx-Author-Padding) {
+            height: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        &.dx-Author-Padding {
+            height: auto;
+        }
+    }
+
+    &.is-Selected {
+        height: auto;
+    }
+
+    /* Background Video */
+    &.has-video {
+        .dx-Flex-Items {
+            position: relative;
+        }
+    }
+
+    .dx-Flex-Items.crop-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+
+        &.show-controls {
+            pointer-events: none;
+        }
+    }
+}
+
+// For IE-11 only
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .dx-Flex {
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* Flexbox image resizing bug
+    /* https://github.com/philipwalton/flexbugs/issues/75
+    */
+    .dx-Flex-Items {
+        min-height: 1px;
+    }
+}
+
+/*
+* For IE-11 Desktop only
+* Flexbox margin auto bug
+* https://github.com/philipwalton/flexbugs#flexbug-15
+*/
+@media all and (-ms-high-contrast: none) and (min-width: 75rem), (-ms-high-contrast: active) and (min-width: 75rem) {
+    .dx-Flex-Items {
+        &.container {
+            // Flex items not flexing with align self center.
+            width: 100%;
+        }
+    }
+}
+
+.dx-Flex-Items {
+    display: flex;
+    flex-wrap: wrap;
+
+    /* Stretch by Default */
+    justify-content: stretch;
+
+    /*
+     * Flex basis is set to 1%
+     * so non-defined columns with
+     * large content (lots of text)
+     * don't wrap to a new line.
+     */
+    > * {
+        flex: 1 1 1%;
+        max-width: 100%;
+    }
+
+    /*
+     * Setup some good full-height defaults for common
+     * layout scenarios.
+     *
+     * 1. Position directly in flex
+     * 2. XF directly in flex
+     * 3. XF with direct flex in flex
+     */
+    > .position > .dx-Position,
+    > .flex > .dx-Flex,
+    > .flex > .dx-Flex > .dx-Flex-Items,
+    > .xfreference > .xfpage,
+    > .xfreference > .xfpage > .xf-content-height,
+    > .xfreference > .xfpage > .xf-content-height > .aem-Grid,
+    > .xfreference > .xfpage > * .aem-Grid > .flex,
+    > .xfreference > .xfpage > * .aem-Grid > .flex > .dx-Flex,
+    > .xfreference > .xfpage > * .aem-Grid > .flex > .dx-Flex > .dx-Flex-Items {
+        height: 100%;
+    }
+
+    .setupFlexSize(mobile);
+
+    @media @for-phone-only {
+        > .dx-parlite--phone--hide {
+            display: none;
+        }
+    }
+
+    @media @for-tablet-portrait-up {
+        .setupFlexSize(tablet);
+    }
+
+    @media @for-tablet-only {
+        > .dx-parlite--tablet--hide {
+            display: none;
+        }
+    }
+
+    @media @for-desktop-up {
+        .setupFlexSize(desktop);
+
+        &.container {
+            margin-right: auto !important;
+            margin-left: auto !important;
+        }
+
+        > .dx-parlite--default--hide {
+            display: none;
+        }
+    }
+}
+
+.dx-Flex--GapWrapper {
+    height: 100%;
+    overflow: hidden;
+
+    > .dx-Flex-Items {
+        height: 100%;
+        // IE 10 and 11 feature detection
+        // IE likes height set to auto - but needs height set to 100% when items have a min-height set
+        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+            height: auto;
+        }
+    }
+}
+
+/* Mixin */
+.setupFlexSize(@size) {
+    /* Justification */
+    &.dx-Flex--@{size}JustifyStretch {
+        justify-content: stretch;
+    }
+
+    &.dx-Flex--@{size}JustifyStart {
+        justify-content: flex-start;
+
+        // Do not stretch or grow so this setting
+        // does something with no item definitions.
+        > * {
+            flex: 0 0 auto;
+        }
+    }
+
+    &.dx-Flex--@{size}JustifyCenter {
+        justify-content: center;
+
+        // Do not stretch or grow so this setting
+        // does something with no item definitions.
+        > * {
+            flex: 0 0 auto;
+        }
+    }
+
+    &.dx-Flex--@{size}JustifyEnd {
+        justify-content: flex-end;
+
+        // Do not stretch or grow so this setting
+        // does something with no item definitions.
+        > * {
+            flex: 0 0 auto;
+        }
+    }
+
+    &.dx-Flex--@{size}JustifySpaceBetween {
+        justify-content: space-between;
+
+        // Do not stretch or grow so this setting
+        // does something with no item definitions.
+        > * {
+            flex: 0 0 auto;
+        }
+    }
+
+    /* Item Alignment */
+    &.dx-Flex--@{size}AlignItemStart {
+        align-items: flex-start;
+    }
+
+    &.dx-Flex--@{size}AlignItemCenter {
+        align-items: center;
+    }
+
+    &.dx-Flex--@{size}AlignItemEnd {
+        align-items: flex-end;
+    }
+
+    &.dx-Flex--@{size}AlignItemStretch {
+        align-items: stretch;
+    }
+
+    /* Content Alignment */
+    &.dx-Flex--@{size}AlignContentStart {
+        align-content: flex-start;
+    }
+
+    &.dx-Flex--@{size}AlignContentCenter {
+        align-content: center;
+    }
+
+    &.dx-Flex--@{size}AlignContentEnd {
+        align-content: flex-end;
+    }
+
+    &.dx-Flex--@{size}AlignContentStretch {
+        align-content: stretch;
+    }
+
+    &.dx-Flex--@{size}AlignContentSpaceBetween {
+        align-content: space-between;
+    }
+
+    // Item Content Alignment
+    &.dx-Flex--@{size}AlignItemContentCenter,
+    &.dx-Flex--@{size}AlignItemContentEnd {
+        > .position > .dx-Position {
+            display: flex;
+
+            > .aem-Grid,
+            > .dx-Author-Padding {
+                width: 100%;
+            }
+        }
+    }
+
+    &.dx-Flex--@{size}AlignItemContentCenter {
+        > .position > .dx-Position {
+            align-items: center;
+        }
+    }
+
+    &.dx-Flex--@{size}AlignItemContentEnd {
+        > .position > .dx-Position {
+            align-items: flex-end;
+        }
+    }
+}

apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/utilities/spacing.less

@@ -0,0 +1,24 @@
+.set-air(@size, @counter, @airType, @side) when (@counter >= 0) {
+    .set-air(@size, (@counter - 4), @airType, @side);
+
+    &.@{size}-@{airType}-@{side}-@{counter} {
+        @{airType}-@{side}: unit(@counter, px);
+    }
+}
+
+.set-all-air(@responsiveSize, @index: length(@sides)) when (@index > 0) {
+    @sideName: extract(@sides, @index);
+    .set-air(@size: @responsiveSize, @counter: 100, @airType: padding, @side: @sideName);
+    .set-air(@size: @responsiveSize, @counter: 100, @airType: margin, @side: @sideName);
+    .set-all-air(@responsiveSize, (@index - 1));
+}
+
+.set-all-air(mobile);
+
+@media (min-width: @size-responsive-tablet-portrait-up) {
+    .set-all-air(tablet);
+}
+
+@media (min-width: @size-responsive-desktop) {
+    .set-all-air(desktop);
+}

apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/mediaQueries.less

@@ -0,0 +1,24 @@
+// Breakpoints
+// Reference: https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
+@size-responsive-phone-only: 599px;
+@size-responsive-tablet-portrait-up: 600px;
+@size-responsive-tablet-portrait-max: 899px;
+@size-responsive-tablet-landscape-up: 900px;
+@size-responsive-tablet-landscape-max: 1199px;
+@size-responsive-desktop: 1200px;
+@size-responsive-max: 1440px;
+
+// Media Queries
+@for-phone-only: %(~"only screen and (max-width: %s)", @size-responsive-phone-only);
+@for-tablet-portrait-up: %(~"only screen and (min-width: %s)", @size-responsive-tablet-portrait-up);
+@for-tablet-landscape-up: %(~"only screen and (min-width: %s)", @size-responsive-tablet-landscape-up);
+@for-desktop-up: %(~"only screen and (min-width: %s)", @size-responsive-desktop);
+@for-big-desktop-up: %(~"only screen and (min-width: %s)", @size-responsive-max);
+
+@for-tablet-only: %(
+    ~"only screen and (min-width:%s) and (max-width:%s)",
+    @size-responsive-tablet-portrait-up,
+    @size-responsive-tablet-landscape-max
+);
+
+@for-IE11-only: ~"all and (-ms-high-contrast: none), (-ms-high-contrast: active)";

apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/sides.less

@@ -0,0 +1 @@
+@sides: top, right, bottom, left;

apps/structure/app/jcr_root/apps/dx/structure/components/page/customheaderlibs.html

@@ -0,0 +1,3 @@
+<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"/>
+<sly data-sly-test="${!wcmmode.disabled}" data-sly-call="${clientlib.css @ categories='dx.structure.author'}"/>
+<sly data-sly-call="${clientlib.css @ categories='dx.structure.publish'}"/>