mixins.less

flexbox.less

// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// 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 itemsnitial main size of the flex item
// <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;
}

mixins.less

.image-2x(@image, @width, @height, @repeat: no-repeat) {
  @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
  @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
  background-image: ~`"url(@{filename}.@{extension})"`;
  background-repeat: @repeat;

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: ~`"url(@{filename}@2x.@{extension})"`;
    background-size: @width @height;
  }
}

.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
  text-shadow: @string;
}
.box-shadow (@string) {
  -webkit-box-shadow: @string;
  -moz-box-shadow:    @string;
  box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing:    @type;
  box-sizing:         @type;
}

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  border-radius:         @radius;

  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius:    @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius:  @bottomleft;
  -webkit-border-top-left-radius:     @topleft;

  -moz-border-radius-topright:        @topright;
  -moz-border-radius-bottomright:     @bottomright;
  -moz-border-radius-bottomleft:      @bottomleft;
  -moz-border-radius-topleft:         @topleft;

  border-top-right-radius:            @topright;
  border-bottom-right-radius:         @bottomright;
  border-bottom-left-radius:          @bottomleft;
  border-top-left-radius:             @topleft;

  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}

.opacity (@opacity: 0.5) {
  -webkit-opacity: 	@opacity;
  -moz-opacity: 		@opacity;
  opacity: 		@opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
}
.gradient3 (@startColor: #eee, @midColor: white, @endColor: white) {
  background-color: @startColor;
  background: -webkit-linear-gradient(top, @startColor, @midColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @midColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @midColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @midColor, @endColor);
}
.gradient5 (@startColor: #eee, @color2: white, @color3: white, @color4: white, @endColor: white) {
  background-color: @startColor;
  background: -webkit-linear-gradient(top, @startColor, @color2, @color3, @color4, @endColor);
  background: -moz-linear-gradient(top, @startColor, @color2, @color3, @color4, @endColor);
  background: -ms-linear-gradient(top, @startColor, @color2, @color3, @color4, @endColor);
  background: -o-linear-gradient(top, @startColor, @color2, @color3, @color4, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(left, @startColor, @endColor);
  background: -moz-linear-gradient(left, @startColor, @endColor);
  background: -ms-linear-gradient(left, @startColor, @endColor);
  background: -o-linear-gradient(left, @startColor, @endColor);
}
.horizontal-gradient4 (@startColor: #eee, @color2: white, @color3: white, @endColor: white) {
  background-color: @startColor;
  background: -webkit-linear-gradient(left, @startColor, @color2, @color3, @endColor);
  background: -moz-linear-gradient(left, @startColor, @color2, @color3, @endColor);
  background: -ms-linear-gradient(left, @startColor, @color2, @color3, @endColor);
  background: -o-linear-gradient(left, @startColor, @color2, @color3, @endColor);
}
.horizontal-gradient5 (@startColor: #eee, @color2: white, @color3: white, @color4: white, @endColor: white) {
  background-color: @startColor;
  background: -webkit-linear-gradient(left, @startColor, @color2, @color3, @color4, @endColor);
  background: -moz-linear-gradient(left, @startColor, @color2, @color3, @color4, @endColor);
  background: -ms-linear-gradient(left, @startColor, @color2, @color3, @color4, @endColor);
  background: -o-linear-gradient(left, @startColor, @color2, @color3, @color4, @endColor);
}
.radial-gradient(@innerColor: rgba(255, 255, 255, 0.5), @outerColor: rgba(255, 255, 255, 0)) {
  background-color: @outerColor; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(@innerColor, @outerColor, @outerColor); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(@innerColor, @outerColor, @outerColor); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(@innerColor, @outerColor, @outerColor); /* For Firefox 3.6 to 15 */
  background: radial-gradient(@innerColor, @outerColor, @outerColor); /* Standard syntax */
}
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
  -webkit-animation: @name @duration @delay @ease;
  -moz-animation:    @name @duration @delay @ease;
  -ms-animation:     @name @duration @delay @ease;
}

.transition (@transition: all 0.3s ease-in-out) {
  -webkit-transition: @transition;
  -moz-transition:    @transition;
  -ms-transition:     @transition;
  -o-transition:      @transition;
}
.transform(@string){
  -webkit-transform: @string;
  -moz-transform: 	 @string;
  -ms-transform: 		 @string;
  -o-transform: 		 @string;
}
.scale (@factor) {
  -webkit-transform: scale(@factor);
  -moz-transform: 	 scale(@factor);
  -ms-transform: 		 scale(@factor);
  -o-transform: 		 scale(@factor);
}
.rotate (@deg) {
  -webkit-transform: rotate(@deg);
  -moz-transform: 	 rotate(@deg);
  -ms-transform: 		 rotate(@deg);
  -o-transform: 		 rotate(@deg);
}
.skew (@deg, @deg2) {
  -webkit-transform:       skew(@deg, @deg2);
  -moz-transform: 	 skew(@deg, @deg2);
  -ms-transform: 		 skew(@deg, @deg2);
  -o-transform: 		 skew(@deg, @deg2);
}
.translate (@x, @y:0) {
  -webkit-transform:       translate(@x, @y);
  -moz-transform: 	 translate(@x, @y);
  -ms-transform: 		 translate(@x, @y);
  -o-transform: 		 translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
  -webkit-transform:       translate3d(@x, @y, @z);
  -moz-transform: 	 translate3d(@x, @y, @z);
  -ms-transform: 		 translate3d(@x, @y, @z);
  -o-transform: 		 translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
  -webkit-perspective: 	@value;
  -moz-perspective: 	@value;
  -ms-perspective: 	@value;
  perspective: 		@value;
}
.transform-origin (@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin:    @x @y;
  -ms-transform-origin:     @x @y;
  -o-transform-origin:      @x @y;
}
.filter-blur (@value) {
  -webkit-filter: blur(@value);
  -moz-filter: blur(@value);
  -o-filter: blur(@value);
  -ms-filter: blur(@value);
  filter: blur(@value);
}
.reflect (@start-transparency: 0.2, @break-percentage: 7%) {
  -webkit-box-reflect: below 0 -webkit-linear-gradient(bottom, rgba(255, 255, 255, @start-transparency) 0%, transparent @break-percentage, transparent 100%);
  //// Firefox hacks
  //position: relative;
  //&:before {
  //    background: -moz-linear-gradient(center top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(@elementSelector) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0);
  //    content: "";
  //    height: @height;
  //    left: 0;
  //    padding: 1px 0;
  //    position: absolute;
  //    top: 277px;
  //    -webkit-transform: scaleY(-1);
  //    transform: scaleY(-1);
  //    width: @width;
  //}
}

.padding-left-right(@value: 0) {
  padding-left: @value;
  padding-right: @value;
}

.rgbaColorIn(@color, @opacity : 1){
  @result: rgba( red(@color), green(@color), blue(@color), @opacity );
}

.object-fit(@fit: fill) {
    -o-object-fit: @fit;
    object-fit: @fit;
    font-family: 'object-fit: @{fit}';
}