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 0000000000000000000000000000000000000000..f908b3703bb77b4429bbfb09332f410b39fa70b7 --- /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 0000000000000000000000000000000000000000..d1a89d58737c38a2c8a7b6c56c5f3e01478fb5b1 --- /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 0000000000000000000000000000000000000000..776e9332221341e903b0632d21f194511395eff1 --- /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 0000000000000000000000000000000000000000..d40e98a643c5d4055037765361a3bd20c7c41063 --- /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 0000000000000000000000000000000000000000..628dc128459b7f284b3efe0f5fd16dd2095a55ba --- /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