Intégration LESS - Tout support

view/frontend/web/css/source/_category_widget.less

+@cw_height: 250px;
+@cw-bkg-wrapper: rgba(0, 0, 0, 0.7);
+@cw-transition-time: .2s;
+@cw-transition-delay: .2s;
+
+//
+//  Common
+//  _____________________________________________
+
+& when (@media-common = true) {
+  .category-widget {
+
+    .categories {
+      margin-top: 2%;
+
+      .flex-display(flex);
+      .flex-direction(row);
+      .flex-wrap(wrap);
+      .justify-content(flex-start);
+      .align-items(flex-start);
+      .align-content(stretch);
+
+      .category {
+        height: @cw_height;
+
+        background-position: center center;
+        background-size: cover;
+
+        .align-self(auto);
+
+        .flex-display(flex);
+        .flex-direction(row);
+        .flex-wrap(wrap);
+        .justify-content(center);
+        .align-items(center);
+        .align-content(center);
+
+        border: 0 none;
+
+        span.wrapper {
+          background-color: @cw-bkg-wrapper;
+
+          .flex(1 0 auto);
+          .align-self(flex-end);
+
+          .flex-display(flex);
+          .flex-direction(row);
+          .flex-wrap(wrap);
+          .justify-content(center);
+          .align-items(center);
+          .align-content(center);
+
+          span.text {
+            text-align: center;
+            text-decoration: none;
+
+            .align-self(auto);
+          }
+        }
+      }
+    }
+  }
+}
+
+//
+//  Desktop
+//  _____________________________________________
+
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
+  .category-widget {
+
+    .categories {
+
+      .category {
+        .flex(1 1 23.5%);
+
+        margin: 0 1%;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        span.wrapper {
+          .align-self(stretch);
+
+          padding: 0;
+
+          background-color: rgba(0, 0, 0, 0);
+
+          .transition-all(@cw-transition-time, background-color, ease-in-out);
+
+          span.text {
+            opacity: 0;
+
+            .transition-all(@cw-transition-time, opacity, ease-in-out, @cw-transition-delay);
+          }
+        }
+
+        &:hover {
+          span.wrapper {
+            background-color: @cw-bkg-wrapper;
+
+            span.text {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//
+//  Tablet
+//  _____________________________________________
+
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
+  .category-widget {
+
+    .categories {
+
+      .category {
+        .flex(1 1 46%);
+
+        margin: 0 1% 2% 1%;
+
+        span.wrapper {
+          padding: 3% 0;
+
+          span.text {
+
+          }
+        }
+      }
+    }
+  }
+}
+
+//
+//  Mobile
+//  _____________________________________________
+
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
+  .category-widget {
+
+    .categories {
+      margin-top: 1%;
+
+      .category {
+        .flex(1 1 100%);
+
+        margin: 0 0 5% 0;
+
+        span.wrapper {
+          .flex(1 1 auto);
+          padding: 3% 0;
+
+          span.text {
+            .flex(0 0 auto);
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

view/frontend/web/css/source/_extend.less

+@import "_mixin_flex.less";
+@import "_mixin_animate.less";
+@import "_mixin_transition.less";
+@import "_category_widget.less";
+
+//
+//  Common
+//  _____________________________________________
+
+& when (@media-common = true) {
+
+}
+
+//
+//  Desktop
+//  _____________________________________________
+
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
+
+}
+
+//
+//  Tablet
+//  _____________________________________________
+
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
+
+}
+
+//
+//  Mobile
+//  _____________________________________________
+
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
+
+}
\ No newline at end of file

view/frontend/web/css/source/_mixin_animate.less

+// --------------------------------------------------
+// Source: https://codepen.io/zvuc/pen/xvoys
+// --------------------------------------------------
+
+.keyframes(@name; @arguments) {
+  @-moz-keyframes @name { @arguments(); }
+  @-webkit-keyframes @name { @arguments(); }
+  @keyframes @name { @arguments(); }
+}
+
+.animation(@arguments) {
+  -webkit-animation: @arguments;
+  -moz-animation: @arguments;
+  animation: @arguments;
+}
+
+/* example */
+/*
+.class1 {
+
+  .keyframes(fade-in;{
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  });
+
+  .animation(fade-in 0.2s linear infinite alternate);
+
+}*/
\ No newline at end of file

view/frontend/web/css/source/_mixin_flex.less

+// --------------------------------------------------
+// Flexbox LESS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// Source: https://gist.github.com/jayj/4012969
+// --------------------------------------------------
+
+// Flexbox display
+// flex or inline-flex
+.flex-display(@display: flex) {
+  display: ~"-webkit-@{display}";
+  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+  display: ~"-ms-@{display}"; // IE11
+  display: @display;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+.flex(@columns: initial) {
+  -webkit-flex: @columns;
+  -ms-flex: @columns;
+  flex: @columns;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+.flex-direction(@direction: row) {
+  -webkit-flex-direction: @direction;
+  -ms-flex-direction: @direction;
+  flex-direction: @direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+.flex-wrap(@wrap: nowrap) {
+  -webkit-flex-wrap: @wrap;
+  -ms-flex-wrap: @wrap;
+  flex-wrap: @wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+.flex-flow(@flow) {
+  -webkit-flex-flow: @flow;
+  -ms-flex-flow: @flow;
+  flex-flow: @flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+.flex-order(@order: 0) {
+  -webkit-order: @order;
+  -ms-order: @order;
+  order: @order;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+.flex-grow(@grow: 0) {
+  -webkit-flex-grow: @grow;
+  -ms-flex-grow: @grow;
+  flex-grow: @grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+.flex-shrink(@shrink: 1) {
+  -webkit-flex-shrink: @shrink;
+  -ms-flex-shrink: @shrink;
+  flex-shrink: @shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex items
+// <width>
+.flex-basis(@width: auto) {
+  -webkit-flex-basis: @width;
+  -ms-flex-basis: @width;
+  flex-basis: @width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+.justify-content(@justify: flex-start) {
+  -webkit-justify-content: @justify;
+  -ms-justify-content: @justify;
+  justify-content: @justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+.align-content(@align: stretch) {
+  -webkit-align-content: @align;
+  -ms-align-content: @align;
+  align-content: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+.align-items(@align: stretch) {
+  -webkit-align-items: @align;
+  -ms-align-items: @align;
+  align-items: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+.align-self(@align: auto) {
+  -webkit-align-self: @align;
+  -ms-align-self: @align;
+  align-self: @align;
+}
\ No newline at end of file

view/frontend/web/css/source/_mixin_transition.less

+// --------------------------------------------------
+// Source: https://gist.github.com/collingo/1784126
+// --------------------------------------------------
+
+.transition-all (@time: 0.5s, @property: all, @function: ease-in-out, @delay: 0) {
+  -webkit-transition: @property @time @function;
+  -moz-transition: @property @time @function;
+  -o-transition: @property @time @function;
+  transition: @property @time @function;
+
+  -webkit-transition-delay: @delay;
+  -moz-transition-delay: @delay;
+  -o-transition-delay: @delay;
+  transition-delay: @delay;
+}
\ No newline at end of file