304 lines
7.3 KiB
Plaintext
304 lines
7.3 KiB
Plaintext
|
|
// Triangles
|
|
// --------------------------------------------------
|
|
|
|
.triangle-base() {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = up) {
|
|
.triangle-base();
|
|
border-left: @width/2 solid transparent;
|
|
border-right:@width/2 solid transparent;
|
|
border-bottom: @height solid @color;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = down) {
|
|
.triangle-base();
|
|
border-left: @width/2 solid transparent;
|
|
border-right: @width/2 solid transparent;
|
|
border-top: @height solid @color;
|
|
border-bottom-width: 0;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = left) {
|
|
.triangle-base();
|
|
border-top: @height/2 solid transparent;
|
|
border-bottom: @height/2 solid transparent;
|
|
border-right: @width solid @color;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = right) {
|
|
.triangle-base();
|
|
border-top: @height/2 solid transparent;
|
|
border-bottom: @height/2 solid transparent;
|
|
border-left: @width solid @color;
|
|
}
|
|
|
|
// Universal transform
|
|
// --------------------------------------------------
|
|
|
|
.transform(@transform) {
|
|
-webkit-transform: @transform;
|
|
-ms-transform: @transform; // IE9+
|
|
transform: @transform;
|
|
}
|
|
|
|
// Transformations
|
|
//
|
|
|
|
.scaleAxes(@x, @y) {
|
|
-webkit-transform: scale(@x, @y);
|
|
-moz-transform: scale(@x, @y);
|
|
-ms-transform: scale(@x, @y);
|
|
-o-transform: scale(@x, @y);
|
|
transform: scale(@x, @y);
|
|
}
|
|
|
|
|
|
// Animation
|
|
// --------------------------------------------------
|
|
|
|
.animation(@animation) {
|
|
-webkit-animation: @animation;
|
|
animation: @animation;
|
|
}
|
|
.animation-direction(@animation-direction) {
|
|
-webkit-animation-direction: @animation-direction;
|
|
animation-direction: @animation-direction;
|
|
}
|
|
.animation-delay(@animation-delay) {
|
|
-webkit-animation-delay: @animation-delay;
|
|
animation-delay: @animation-delay;
|
|
}
|
|
.animation-duration(@animation-duration) {
|
|
-webkit-animation-duration: @animation-duration;
|
|
animation-duration: @animation-duration;
|
|
}
|
|
|
|
|
|
// Scroll markers
|
|
// --------------------------------------------------
|
|
|
|
.vertical-scroll-marker(@color) {
|
|
.scroll-marker {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
display: none;
|
|
|
|
&:after {
|
|
.icon(@ellipsis-h);
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -3px;
|
|
top: 0;
|
|
height: 9px;
|
|
font-size: 10px;
|
|
color: @color;
|
|
}
|
|
|
|
&.before {top: 0;}
|
|
&.after {
|
|
bottom: 3px;
|
|
&:after {
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.scroll-before .scroll-marker.before {display: block;}
|
|
&.scroll-after .scroll-marker.after {display: block;}
|
|
}
|
|
|
|
.horizontal-scroll-indicators(@color) {
|
|
&:after, &:before {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -7px;
|
|
height: 9px;
|
|
font-size: 10px;
|
|
color: @color;
|
|
}
|
|
|
|
&:before {
|
|
left: -6px;
|
|
.icon(@angle-left);
|
|
}
|
|
|
|
&:after {
|
|
right: -8px;
|
|
.icon(@angle-right);
|
|
}
|
|
|
|
&.scroll-before:before {display: block;}
|
|
&.scroll-after:after {display: block;}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// Flexbox LESS mixins
|
|
// The spec: http://www.w3.org/TR/css3-flexbox
|
|
// --------------------------------------------------
|
|
|
|
// Flexbox display
|
|
// flex or inline-flex
|
|
.flex-display() {
|
|
display: ~"-webkit-box";
|
|
display: ~"-webkit-flex";
|
|
display: ~"-moz-flex";
|
|
display: ~"-ms-flexbox"; // IE10 uses -ms-flexbox
|
|
display: ~"-ms-flex"; // IE11
|
|
display: flex;
|
|
}
|
|
|
|
// The 'flex: 0 0 auto' shorthand
|
|
.flex-fix() {
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0 0 auto;
|
|
-moz-flex: 0 0 auto;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
// The 'flex: 1 1 auto' shorthand
|
|
.flex-stretch() {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 1 auto;
|
|
-moz-flex: 1 1 auto;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
// The 'flex: 1' shorthand
|
|
.flex-stretch-constrain() {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-moz-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
// Flex Flow Direction Column
|
|
// - applies to: flex containers
|
|
.flex-direction-column() {
|
|
-webkit-flex-direction: column;
|
|
-moz-flex-direction: column;
|
|
-webkit-box-orient: vertical;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// Flex Flow Direction Row
|
|
// - applies to: flex containers
|
|
.flex-direction-row() {
|
|
-webkit-flex-direction: row;
|
|
-moz-flex-direction: row;
|
|
-webkit-box-orient: horizontal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
|
|
// Flex Line Wrapping
|
|
// - applies to: flex containers
|
|
// nowrap | wrap | wrap-reverse
|
|
.flex-wrap(@wrap: nowrap) {
|
|
-webkit-flex-wrap: @wrap;
|
|
-moz-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;
|
|
-moz-flex-flow: @flow;
|
|
-ms-flex-flow: @flow;
|
|
flex-flow: @flow;
|
|
}
|
|
|
|
// Display Order
|
|
// - applies to: flex items
|
|
// <integer>
|
|
.flex-order(@order: 0) {
|
|
-webkit-order: @order;
|
|
-moz-order: @order;
|
|
-ms-order: @order;
|
|
order: @order;
|
|
}
|
|
|
|
// Flex grow factor
|
|
// - applies to: flex items
|
|
// <number>
|
|
.flex-grow(@grow: 0) {
|
|
-webkit-flex-grow: @grow;
|
|
-moz-flex-grow: @grow;
|
|
-ms-flex-grow: @grow;
|
|
flex-grow: @grow;
|
|
}
|
|
|
|
// Flex shr
|
|
// - applies to: flex itemsink factor
|
|
// <number>
|
|
.flex-shrink(@shrink: 1) {
|
|
-webkit-flex-shrink: @shrink;
|
|
-moz-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;
|
|
-moz-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;
|
|
-moz-justify-content: @justify;
|
|
-ms-justify-content: ;
|
|
-webkit-box-pack: @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;
|
|
-moz-align-content: @align;
|
|
-webkit-box-align: @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;
|
|
-moz-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;
|
|
-moz-align-self: @align;
|
|
-ms-align-self: @align;
|
|
align-self: @align;
|
|
} |