From e4cbc5a2ab40b3a69b29a9f61e2fff4ba8a29a3a Mon Sep 17 00:00:00 2001
From: Nicolas BEJEAN <nicolas.bejean@api-and-you.com>
Date: Sun, 2 Dec 2018 16:26:50 +0100
Subject: [PATCH] =?UTF-8?q?Int=C3=A9gration=20LESS=20-=20Tout=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../web/css/source/_category_widget.less | 169 ++++++++++++++++++
view/frontend/web/css/source/_extend.less | 36 ++++
.../web/css/source/_mixin_animate.less | 28 +++
view/frontend/web/css/source/_mixin_flex.less | 123 +++++++++++++
.../web/css/source/_mixin_transition.less | 15 ++
5 files changed, 371 insertions(+)
create mode 100644 view/frontend/web/css/source/_category_widget.less
create mode 100644 view/frontend/web/css/source/_extend.less
create mode 100644 view/frontend/web/css/source/_mixin_animate.less
create mode 100644 view/frontend/web/css/source/_mixin_flex.less
create mode 100644 view/frontend/web/css/source/_mixin_transition.less
diff --git a/view/frontend/web/css/source/_category_widget.less b/view/frontend/web/css/source/_category_widget.less
new file mode 100644
index 0000000..f908b37
--- /dev/null
+++ b/view/frontend/web/css/source/_category_widget.less
@@ -0,0 +1,169 @@
+@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
diff --git a/view/frontend/web/css/source/_extend.less b/view/frontend/web/css/source/_extend.less
new file mode 100644
index 0000000..d1a89d5
--- /dev/null
+++ b/view/frontend/web/css/source/_extend.less
@@ -0,0 +1,36 @@
+@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
diff --git a/view/frontend/web/css/source/_mixin_animate.less b/view/frontend/web/css/source/_mixin_animate.less
new file mode 100644
index 0000000..776e933
--- /dev/null
+++ b/view/frontend/web/css/source/_mixin_animate.less
@@ -0,0 +1,28 @@
+// --------------------------------------------------
+// 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
diff --git a/view/frontend/web/css/source/_mixin_flex.less b/view/frontend/web/css/source/_mixin_flex.less
new file mode 100644
index 0000000..d40e98a
--- /dev/null
+++ b/view/frontend/web/css/source/_mixin_flex.less
@@ -0,0 +1,123 @@
+// --------------------------------------------------
+// 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
diff --git a/view/frontend/web/css/source/_mixin_transition.less b/view/frontend/web/css/source/_mixin_transition.less
new file mode 100644
index 0000000..628dc12
--- /dev/null
+++ b/view/frontend/web/css/source/_mixin_transition.less
@@ -0,0 +1,15 @@
+// --------------------------------------------------
+// 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
--
GitLab