Skip to content

Instantly share code, notes, and snippets.

@sicaboy

sicaboy/flexbox.less

Last active Mar 2, 2018
Embed
What would you like to do?
mixins.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;
}
.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}';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment