1180b7b195
Switched from less to scss. Still no build script to update the final CSS, though. Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.
138 lines
3.4 KiB
SCSS
138 lines
3.4 KiB
SCSS
// --------------------------------------------------
|
|
// Flexbox LESS mixins
|
|
// The spec: http://www.w3.org/TR/css3-flexbox
|
|
//
|
|
// Other info:
|
|
// - http://philipwalton.github.io/solved-by-flexbox/
|
|
// --------------------------------------------------
|
|
|
|
// Flexbox display
|
|
// flex or inline-flex
|
|
.flex-display(@display: flex) {
|
|
display: ~"-webkit-@{display}";
|
|
display: ~"-moz-@{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;
|
|
-moz-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;
|
|
-moz-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;
|
|
-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: @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;
|
|
-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;
|
|
} |