platypusui
Version:
A front-end set of UI controls for PlatypusTS written in TypeScript
1,511 lines (1,290 loc) • 394 kB
text/less
/**
* PlatypusUI v0.16.9 (https://platypi.io)
* Copyright 2015 Platypi, LLC. All rights reserved.
*
* PlatypusUI is licensed under the MIT license found at
* https://github.com/Platypi/platypusui/blob/master/LICENSE
*
*/
/// ======= Global Variables ======== ///
#platui {
#variables {
/// ============= Global Colors ============== ///
/// Brand Colors
@primary-color: @blue;
@secondary-color: @purple;
/// State/Action Colors
@success-color: @green;
@danger-color: @red;
@caution-color: @yellow;
@neutral-color: @grey;
/// ========= Default Color Palette ========== ///
/// Red
@pale-red: #e6b3b3;
@red: #ef716f;
@red-offset: #dd4d4e;
/// Blue
@pale-blue: #b3dbe6;
@blue: #2d97d2;
@blue-offset: #2d88be;
/// Green
@pale-green: #b3e6bf;
@green: #53c670;
@green-offset: #3ea357;
/// Yellow
@pale-yellow: #e6dcb3;
@yellow: #e2c95a;
@yellow-offset: #d2b537;
/// Brown
@pale-brown: #e6c9b3;
@brown: #bf7740;
@tan: #e09e6c;
/// Orange
@orange: #f0862c;
/// Purple
@purple: #A283A5;
/// Greyscale
@pale-grey: #edecec;
@grey: #c8c7cd;
@black: #000000;
@white: #ffffff;
@transparent: transparent;
/// =============== Typography ================ ///
@default-font-size: 16px;
@default-font-type: @font-sans-serif;
@default-font-color: #444444;
@font-sans-serif: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@font-serif: Georgia, "Times New Roman", Times, serif;
@font-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
/// Mixin Vars
@webkit: -webkit-;
@moz: -moz-;
@ms: -ms-;
@khtml: -khtml-;
@vanilla: -;
@webkit-list: @webkit, @vanilla;
@ms-list: @ms, @vanilla;
@moz-list: @moz, @vanilla;
@webkit-moz-list: @webkit, @moz, @vanilla;
@webkit-moz-strict: @webkit, @moz;
@webkit-moz-ms-list: @webkit, @moz, @ms, @vanilla;
@webkit-moz-ms-strict: @webkit, @moz, @ms;
@all-list: @webkit, @moz, @ms, @khtml, @vanilla;
/// =============== Animations ================ ///
@fade-in: FADE_IN;
@fade-out: FADE_OUT;
@slide-in: SLIDE_IN;
@slide-out: SLIDE_OUT;
@slide-in-fade-in: SLIDE_IN_FADE_IN;
@slide-out-fade-out: SLIDE_OUT_FADE_OUT;
/// ============== Various Sizes ============== ///
@global-border-radius: 2px;
@global-indicator-diameter: 1.2em;
@global-touch-diameter: 1.5em;
@global-max-z-index: 999999;
@global-hidden-left: -99999px;
/// ========= Responsive Breakpoints ========= ///
/// Currently used in the grid system and in Typography
/// Phone Breakpoint
@phone-alias: phn;
@phone-start: 0px;
@phone-end: 499px;
/// Phablet Breakpoint
@phablet-alias: phb;
@phablet-start: 500px;
@phablet-end: 699px;
/// Tablet Breakpoint
@tablet-alias: tab;
@tablet-start: 700px;
@tablet-end: 899px;
/// Desktop Breakpoint
@desktop-alias: dsk;
@desktop-start: 900px;
@desktop-end: 1099px;
/// HD Breakpoint
@hd-alias: hd;
@hd-start: 1100px;
@hd-end: 1299px;
/// XHD Breakpoint
@xhd-alias: xhd;
@xhd-start: 1300px;
}
}
/// ======= Globally-Used Animations ======== ///
#platui {
/// Animation Creation
#animations {
#platui > #variables;
.keyframes(@name) {
#platui > #variables;
@-webkit-keyframes @name {
.frames(@webkit);
}
@-moz-keyframes @name {
.frames(@moz);
}
@keyframes @name {
.frames(@vanilla);
}
}
.fade(@name: @fade-out; @direction: out) {
.keyframes(@name);
.frames(@prefix) {
& when (@direction = in) {
from {
opacity: 0;
}
to {
opacity: 1;
}
} & when (@direction = out) {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
}
}
.slide(@name: @slide-in; @direction: in; @from: right) {
.keyframes(@name);
.frames(@prefix) {
& when (@direction = in) {
& when (@from = left) {
from {
left: -100%;
}
} & when (@from = right) {
from {
left: 100%;
}
}
} & when (@direction = out) {
& when (@from = left) {
to {
left: -100%;
}
} & when (@from = right) {
to {
left: 100%;
}
}
}
}
}
.slideAndFade(@name: @slide-in-fade-in; @direction: in; @from-to: right) {
.keyframes(@name);
.frames(@prefix) {
& when (@direction = in) {
& when (@from-to = left) {
0% {
left: -100%;
opacity: 0;
}
} & when (@from-to = right) {
0% {
left: 100%;
opacity: 0;
}
}
25% {
opacity: 0.1;
}
50% {
opacity: 0.2;
}
75% {
opacity: 0.3;
}
100% {
opacity: 1;
}
} & when (@direction = out) {
0% {
opacity: 1;
}
25% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
75% {
opacity: 0.1;
} & when (@from-to = left) {
100% {
left: -100%;
opacity: 0;
}
} & when (@from-to = right) {
100% {
left: 100%;
opacity: 0;
}
}
}
}
}
}
}
/// ======= Mixins ======== ///
#platui {
#__mixins {
/// Helper Methods
.looper(@property; @value; @list; @counter) when (@counter > 0) {
.looper(@property; @value; @list; (@counter - 1));
@extraction: extract(@list, @counter);
@{extraction}@{property}: @value;
}
.value-looper(@property; @valuePropety; @value; @list; @counter) when (@counter = length(@list)) and (extract(@list, @counter) = @vanilla) {
.value-looper(@property; @valuePropety; @value; @list; (@counter - 1));
@{property}: ~'@{valuePropety}(@{value})';
}
.value-looper(@property; @valuePropety; @value; @list; @counter) when (@counter = 1) and not(extract(@list, @counter) = @vanilla) {
@extraction: extract(@list, @counter);
@{property}: ~'@{extraction}@{valuePropety}(@{value})';
}
.value-looper(@property; @valuePropety; @value; @list; @counter) when (@counter = 0) { }
.value-looper(@property; @valuePropety; @value; @list; @counter) when (default()) {
.value-looper(@property; @valuePropety; @value; @list; (@counter - 1));
@extraction: extract(@list, @counter);
@{property}: ~'@{extraction}@{valuePropety}(@{value})';
}
.vendor-loop(@property; @value; @list) when (length(@list) > 1) {
.looper(@property; @value; @list; length(@list) - 1);
@{property}: @value;
}
.vendor-loop(@property; @value; @list) when (length(@list) = 1) and not(@list = @vanilla) {
@{list}@{property}: @value;
}
.vendor-loop(@property; @value; @list) when (default()) {
@{property}: @value;
}
}
}
#platui {
#mixins {
/// Frequently used
.calc(@prop; @val) {
@{prop}: -webkit-calc(~'@{val}');
@{prop}: calc(~'@{val}');
}
.fill() {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
/// Border Radius
.border-radius(@radius) {
#platui > #variables;
.border-radius(@radius; @webkit-list);
}
.border-radius(@radius; @vendor-list) {
#platui > #__mixins;
.vendor-loop(border-top-left-radius; @radius; @vendor-list);
.vendor-loop(border-top-right-radius; @radius; @vendor-list);
.vendor-loop(border-bottom-left-radius; @radius; @vendor-list);
.vendor-loop(border-bottom-right-radius; @radius; @vendor-list);
}
.border-top-left-radius(@radius) {
#platui > #variables;
.border-top-left-radius(@radius; @webkit-list);
}
.border-top-left-radius(@radius; @vendor-list) {
#platui > #__mixins > .vendor-loop(border-top-left-radius; @radius; @vendor-list);
}
.border-top-right-radius(@radius) {
#platui > #variables;
.border-top-right-radius(@radius; @webkit-list);
}
.border-top-right-radius(@radius; @vendor-list) {
#platui > #__mixins > .vendor-loop(border-top-right-radius; @radius; @vendor-list);
}
.border-bottom-left-radius(@radius) {
#platui > #variables;
.border-bottom-left-radius(@radius; @webkit-list);
}
.border-bottom-left-radius(@radius; @vendor-list) {
#platui > #__mixins > .vendor-loop(border-bottom-left-radius; @radius; @vendor-list);
}
.border-bottom-right-radius(@radius) {
#platui > #variables;
.border-bottom-right-radius(@radius; @webkit-list);
}
.border-bottom-right-radius(@radius; @vendor-list) {
#platui > #__mixins > .vendor-loop(border-bottom-right-radius; @radius; @vendor-list);
}
/// Background Clip
.background-clip(@box) when (@box = border-box), (@box = border) {
-moz-background-clip: border;
-webkit-background-clip: border;
background-clip: border-box;
}
.background-clip(@box) when (@box = padding-box), (@box = padding) {
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.background-clip(@box) when (@box = content-box), (@box = content) {
-moz-background-clip: content;
-webkit-background-clip: content;
background-clip: content-box;
}
.background-clip(@box) when (default()) {
-moz-background-clip: @box;
-webkit-background-clip: @box;
background-clip: @box;
}
/// Box Shadows
.box-shadow(@args) {
#platui > #variables;
.box-shadow(@args; @webkit-list);
}
.box-shadow(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(box-shadow; @args; @vendor-list);
}
/// Box Sizing
.box-sizing(@args: border-box) {
#platui > #variables;
.box-sizing(@args; @webkit-moz-list);
}
.box-sizing(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(box-sizing; @args; @vendor-list);
}
/// Appearance
// only common values are none, button, checkbox, scrollbarbutton-up
.appearance(@args: none) {
#platui > #variables;
.appearance(@args; @webkit-moz-list);
}
.appearance(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(appearance; @args; @vendor-list);
}
/// Backface Visibility
.backface-visibility(@arg: visible) {
#platui > #variables;
.backface-visibility(@arg; @webkit-list);
}
.backface-visibility(@arg; @vendor-list) {
#platui > #__mixins > .vendor-loop(backface-visibility; @arg; @vendor-list);
}
}
}
#platui {
#media {
/// ======= Globally-Used Media Query Mixins ======== ///
.media(@type; @condition1; @condition2; @condition3; @condition4; @rules) {
@media @type and (@condition1) and (@condition2) and (@condition3) and (@condition4) {
@rules();
}
}
.media(@type; @condition1; @condition2; @condition3; @rules) {
@media @type and (@condition1) and (@condition2) and (@condition3) {
@rules();
}
}
.media(@type; @condition1; @condition2; @rules) {
@media @type and (@condition1) and (@condition2) {
@rules();
}
}
.media(@type; @condition1; @rules) {
@media @type and (@condition1) {
@rules();
}
}
.width(@min-width: undefined; @max-width: undefined; @rules) {
& when not(@max-width = 0px) and not(@max-width = 0) and not(@max-width = undefined) and not(@max-width = null) {
& when not(@min-width = 0px) and not(@min-width = 0) and not(@min-width = undefined) and not(@min-width = null) {
#platui > #media > .media(all; ~'min-width: @{min-width}'; ~'max-width: @{max-width}'; @rules);
} & when (@min-width = 0px), (@min-width = 0), (@min-width = undefined), (@min-width = null) {
#platui > #media > .media(all; ~'max-width: @{max-width}'; @rules);
}
} & when (@max-width = 0px), (@max-width = 0), (@max-width = undefined), (@max-width = null) {
& when not(@min-width = 0px) and not(@min-width = 0) and not(@min-width = undefined) and not(@min-width = null) {
#platui > #media > .media(all; ~'min-width: @{min-width}'; @rules);
} & when (@min-width = 0px), (@min-width = 0), (@min-width = undefined), (@min-width = null) {
/** #platui > #media > .width mixin had no min-width or max-width defined **/
}
}
}
.min-width(@min-width; @rules) {
#platui > #media > .media(all; ~'min-width: @{min-width}'; @rules);
}
.max-width(@max-width; @rules) {
#platui > #media > .media(all; ~'max-width: @{max-width}'; @rules);
}
.height(@min-height: undefined; @max-height: undefined; @rules) {
& when not(@max-height = 0px) and not(@max-height = 0) and not(@max-height = undefined) and not(@max-height = null) {
& when not(@min-height = 0px) and not(@min-height = 0) and not(@min-height = undefined) and not(@min-height = null) {
#platui > #media > .media(all; ~'min-height: @{min-height}'; ~'max-height: @{max-height}'; @rules);
} & when (@min-height = 0px), (@min-height = 0), (@min-height = undefined), (@min-height = null) {
#platui > #media > .media(all; ~'max-height: @{max-height}'; @rules);
}
} & when (@max-height = 0px), (@max-height = 0), (@max-height = undefined), (@max-height = null) {
& when not(@min-height = 0px) and not(@min-height = 0) and not(@min-height = undefined) and not(@min-height = null) {
#platui > #media > .media(all; ~'min-height: @{min-height}'; @rules);
} & when (@min-height = 0px), (@min-height = 0), (@min-height = undefined), (@min-height = null) {
/** #platui > #media > .height mixin had no min-height or max-height defined **/
}
}
}
.min-height(@min-height; @rules) {
#platui > #media > .media(all; ~'min-height: @{min-height}'; @rules);
}
.max-height(@max-height; @rules) {
#platui > #media > .media(all; ~'max-height: @{max-height}'; @rules);
}
.phone-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @phone-end; @rules: @rules);
}
.phn-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @phone-end; @rules: @rules);
}
.phablet(@rules) {
#platui > #variables;
#platui > #media > .width(@phablet-start; @rules: @rules);
}
.phablet-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @phablet-end; @rules: @rules);
}
.phablet-only(@rules) {
#platui > #variables;
#platui > #media > .width(@phablet-start; @phablet-end; @rules);
}
.phb(@rules) {
#platui > #variables;
#platui > #media > .width(@phablet-start; @rules: @rules);
}
.phb-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @phablet-end; @rules: @rules);
}
.phb-only(@rules) {
#platui > #variables;
#platui > #media > .width(@phablet-start; @phablet-end; @rules);
}
.tablet(@rules) {
#platui > #variables;
#platui > #media > .width(@tablet-start; @rules: @rules);
}
.tablet-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @tablet-end; @rules: @rules);
}
.tablet-only(@rules) {
#platui > #variables;
#platui > #media > .width(@tablet-start; @tablet-end; @rules);
}
.tab(@rules) {
#platui > #variables;
#platui > #media > .width(@tablet-start; @rules: @rules);
}
.tab-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @tablet-end; @rules: @rules);
}
.tab-only(@rules) {
#platui > #variables;
#platui > #media > .width(@tablet-start; @tablet-end; @rules);
}
.desktop(@rules) {
#platui > #variables;
#platui > #media > .width(@desktop-start; @rules: @rules);
}
.desktop-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @desktop-end; @rules: @rules);
}
.desktop-only(@rules) {
#platui > #variables;
#platui > #media > .width(@desktop-start; @desktop-end; @rules);
}
.dsk(@rules) {
#platui > #variables;
#platui > #media > .width(@desktop-start; @rules: @rules);
}
.dsk-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @desktop-end; @rules: @rules);
}
.dsk-only(@rules) {
#platui > #variables;
#platui > #media > .width(@desktop-start; @desktop-end; @rules);
}
.hd(@rules) {
#platui > #variables;
#platui > #media > .width(@hd-start; @rules: @rules);
}
.hd-max(@rules) {
#platui > #variables;
#platui > #media > .width(@max-width: @hd-end; @rules: @rules);
}
.hd-only(@rules) {
#platui > #variables;
#platui > #media > .width(@hd-start; @hd-end; @rules);
}
.xhd(@rules) {
#platui > #variables;
#platui > #media > .width(@xhd-start; @rules: @rules);
}
.media-width(@minWidth: undefined; @maxWidth: undefined; @rules) {
& when not(@maxWidth = 0px) and not(@maxWidth = 0) and not(@maxWidth = undefined) and not(@maxWidth = null) {
& when not(@minWidth = 0px) and not(@minWidth = 0) and not(@minWidth = undefined) and not(@minWidth = null) {
#platui > #media > .media(all; ~'min-width: @{minWidth}'; ~'max-width: @{maxWidth}'; @rules);
} & when (@minWidth = 0px), (@minWidth = 0), (@minWidth = undefined), (@minWidth = null) {
#platui > #media > .media(all; ~'max-width: @{maxWidth}'; @rules);
}
} & when (@maxWidth = 0px), (@maxWidth = 0), (@maxWidth = undefined), (@maxWidth = null) {
& when not(@minWidth = 0px) and not(@minWidth = 0) and not(@minWidth = undefined) and not(@minWidth = null) {
#platui > #media > .media(all; ~'min-width: @{minWidth}'; @rules);
} & when (@minWidth = 0px), (@minWidth = 0), (@minWidth = undefined), (@minWidth = null) {
/** #platui > #media > .media-width mixin had no min-width or max-width defined **/
}
}
}
.media-height(@minHeight: undefined; @maxHeight: undefined; @rules) {
& when not(@maxHeight = 0px) and not(@maxHeight = 0) and not(@maxHeight = undefined) and not(@maxHeight = null) {
& when not(@minHeight = 0px) and not(@minHeight = 0) and not(@minHeight = undefined) and not(@minHeight = null) {
#platui > #media > .media(all; ~'min-height: @{minHeight}'; ~'max-height: @{maxHeight}'; @rules);
} & when (@minHeight = 0px), (@minHeight = 0), (@minHeight = undefined), (@minHeight = null) {
#platui > #media > .media(all; ~'max-height: @{maxHeight}'; @rules);
}
} & when (@maxHeight = 0px), (@maxHeight = 0), (@maxHeight = undefined), (@maxHeight = null) {
& when not(@minHeight = 0px) and not(@minHeight = 0) and not(@minHeight = undefined) and not(@minHeight = null) {
#platui > #media > .media(all; ~'min-height: @{minHeight}'; @rules);
} & when (@minHeight = 0px), (@minHeight = 0), (@minHeight = undefined), (@minHeight = null) {
/** #platui > #media > .media-height mixin had no min-height or max-height defined **/
}
}
}
.media-phone-max(@rules) {
#platui > #variables;
#platui > #media > .media-width(@maxWidth: @phone-end; @rules: @rules);
}
.media-phablet(@rules) {
#platui > #variables;
#platui > #media > .media-width(@phablet-start; @rules: @rules);
}
.media-phablet-max(@rules) {
#platui > #variables;
#platui > #media > .media-width(@maxWidth: @phablet-end; @rules: @rules);
}
.media-phablet-only(@rules) {
#platui > #variables;
#platui > #media > .media-width(@phablet-start; @phablet-end; @rules);
}
.media-tablet(@rules) {
#platui > #variables;
#platui > #media > .media-width(@tablet-start; @rules: @rules);
}
.media-tablet-max(@rules) {
#platui > #variables;
#platui > #media > .media-width(@maxWidth: @tablet-end; @rules: @rules);
}
.media-tablet-only(@rules) {
#platui > #variables;
#platui > #media > .media-width(@tablet-start; @tablet-end; @rules);
}
.media-desktop(@rules) {
#platui > #variables;
#platui > #media > .media-width(@desktop-start; @rules: @rules);
}
}
}
#platui {
#mixins {
.scroll() {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scroll(@direction) {
& when (@direction = x) {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
& when not (@direction = x) {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
}
.scrollbar(@size; @foreground-color; @background-color; @border-radius: 0) {
#platui > #mixins;
.scrollbar-size(@size);
.scrollbar-border-radius(@border-radius);
.scrollbar-foreground-color(@foreground-color);
.scrollbar-background-color(@background-color);
}
.scrollbar-size(@size) {
::-webkit-scrollbar {
width: @size;
height: @size;
}
}
.scrollbar-border-radius(@radius) {
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
#platui > #mixins > .border-radius(@radius);
}
}
.scrollbar-foreground-color(@foreground-color) {
scrollbar-face-color: @foreground-color;
::-webkit-scrollbar-thumb {
background: @foreground-color;
}
}
.scrollbar-background-color(@background-color) {
scrollbar-track-color: @background-color;
::-webkit-scrollbar-track {
background: @background-color;
}
}
}
}
#platui {
#mixins {
/// Touch
.touch-action(@behavior: manipulation) {
#platui > #variables;
#platui > #__mixins > .vendor-loop(touch-action; @behavior; @ms-list);
}
.user-select(@behavior: all) {
#platui > #variables;
.user-select(@behavior; @all-list);
}
.user-select(@behavior; @vendor-list) {
#platui > #__mixins > .vendor-loop(user-select; @behavior; @vendor-list);
}
.webkit-touch-additions(@callout: none; @highlight: transparent) {
-webkit-touch-callout: @callout;
-webkit-tap-highlight-color: @highlight;
}
.misc-webkit-touch(@callout: none; @drag: none; @highlight: transparent; @overflowscroll: touch) {
.webkit-touch-additions(@callout; @highlight);
-webkit-user-drag: @drag;
-webkit-overflow-scrolling: @overflowscroll;
}
}
}
#platui {
#mixins {
/// Animations
.animate(@name; @duration: 200ms; @function: ease; @delay: 0s; @count: 1; @direction: normal; @fill-mode: none; @play-state: running) {
#platui > #variables;
.animate(@name; @duration; @function; @delay; @count; @direction; @fill-mode; @play-state; @webkit-moz-list);
}
.animate(@name; @duration; @function; @delay; @count; @direction; @fill-mode; @play-state: running; @vendor-list) {
// need to call these separately due to iOS 9 animation issue
.animation-name(@name; @vendor-list);
.animation-duration(@duration; @vendor-list);
.animation-timing-function(@function; @vendor-list);
.animation-delay(@delay; @vendor-list);
.animation-iteration-count(@count; @vendor-list);
.animation-direction(@direction; @vendor-list);
.animation-fill-mode(@fill-mode; @vendor-list);
.animation-play-state(@play-state; @vendor-list);
}
.animation(@args) {
#platui > #variables;
.animation(@args; @webkit-moz-list);
}
.animation(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation; @args; @vendor-list);
}
.animation-delay(@delay) {
#platui > #variables;
.animation-delay(@delay; @webkit-moz-list);
}
.animation-delay(@delay; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-delay; @delay; @vendor-list);
}
.animation-direction(@direction) {
#platui > #variables;
.animation-direction(@direction; @webkit-moz-list);
}
.animation-direction(@direction; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-direction; @direction; @vendor-list);
}
.animation-duration(@duration) {
#platui > #variables;
.animation-duration(@duration; @webkit-moz-list);
}
.animation-duration(@duration; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-duration; @duration; @vendor-list);
}
.animation-fill-mode(@fill-mode) {
#platui > #variables;
.animation-fill-mode(@fill-mode; @webkit-moz-list);
}
.animation-fill-mode(@fill-mode; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-fill-mode; @fill-mode; @vendor-list);
}
.animation-iteration-count(@count) {
#platui > #variables;
.animation-iteration-count(@count; @webkit-moz-list);
}
.animation-iteration-count(@count; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-iteration-count; @count; @vendor-list);
}
.animation-name(@name) {
#platui > #variables;
.animation-name(@name; @webkit-moz-list);
}
.animation-name(@name; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-name; @name; @vendor-list);
}
.animation-play-state(@state) {
#platui > #variables;
.animation-play-state(@state; @webkit-moz-list);
}
.animation-play-state(@state; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-play-state; @state; @vendor-list);
}
.animation-timing-function(@function) {
#platui > #variables;
.animation-timing-function(@function; @webkit-moz-list);
}
.animation-timing-function(@function; @vendor-list) {
#platui > #__mixins > .vendor-loop(animation-timing-function; @function; @vendor-list);
}
}
}
#platui {
#mixins {
/// Transforms
.transform(@args) {
#platui > #variables;
.transform(@args; @webkit-moz-ms-list);
}
.transform(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(transform; @args; @vendor-list);
}
.transform-origin(@origin) {
#platui > #variables;
.transform-origin(@origin; @webkit-moz-ms-list);
}
.transform-origin(@origin; @vendor-list) {
#platui > #__mixins > .vendor-loop(transform-origin; @origin; @vendor-list);
}
.transform-style(@style) {
#platui > #variables;
.transform-style(@style; @webkit-moz-list);
}
.transform-style(@style; @vendor-list) {
#platui > #__mixins > .vendor-loop(transform-style; @style; @vendor-list);
}
.matrix(@args) {
.transform(matrix(@args));
}
.matrix(@args; @vendor-list) {
.transform(matrix(@args); @vendor-list);
}
.matrix3d(@args) {
.transform(matrix3d(@args));
}
.matrix3d(@args; @vendor-list) {
.transform(matrix3d(@args); @vendor-list);
}
.rotate(@a) {
.transform(rotate(@a));
}
.rotate(@a; @vendor-list) {
.transform(rotate(@a); @vendor-list);
}
.rotateX(@a) {
.transform(rotateX(@a));
}
.rotateX(@a; @vendor-list) {
.transform(rotateX(@a); @vendor-list);
}
.rotateY(@a) {
.transform(rotateY(@a));
}
.rotateY(@a; @vendor-list) {
.transform(rotateY(@a); @vendor-list);
}
.rotateZ(@a) {
.transform(rotateZ(@a));
}
.rotateZ(@a; @vendor-list) {
.transform(rotateZ(@a); @vendor-list);
}
.rotate3d(@x; @y; @z; @a) {
.transform(rotate3d(@x, @y, @z, @a));
}
.rotate3d(@x; @y; @z; @a; @vendor-list) {
.transform(rotate3d(@x, @y, @z, @a); @vendor-list);
}
.scale(@factor) {
.transform(scale(@factor));
}
.scale(@factor1; @factor2) {
.transform(scale(@factor1, @factor2));
}
.scale(@factor1; @factor2; @vendor-list) {
.transform(scale(@factor1, @factor2); @vendor-list);
}
.scaleX(@factor) {
.transform(scaleX(@factor));
}
.scaleX(@factor; @vendor-list) {
.transform(scaleX(@factor); @vendor-list);
}
.scaleY(@factor) {
.transform(scaleY(@factor));
}
.scaleY(@factor; @vendor-list) {
.transform(scaleY(@factor); @vendor-list);
}
.scaleZ(@factor) {
.transform(scaleZ(@factor));
}
.scaleZ(@factor; @vendor-list) {
.transform(scaleZ(@factor); @vendor-list);
}
.scale3d(@x; @y; @z) {
.transform(scale3d(@x, @y, @z));
}
.scale3d(@x; @y; @z; @vendor-list) {
.transform(scale3d(@x, @y, @z); @vendor-list);
}
.skew(@a) {
.transform(skew(@a));
}
.skew(@a1; @a2) {
.transform(skew(@a1, @a2));
}
.skew(@a1; @a2; @vendor-list) {
.transform(skew(@a1, @a2); @vendor-list);
}
.skewX(@a) {
.transform(skewX(@a));
}
.skewX(@a; @vendor-list) {
.transform(skewX(@a); @vendor-list);
}
.skewY(@a) {
.transform(skewY(@a));
}
.skewY(@a; @vendor-list) {
.transform(skewY(@a); @vendor-list);
}
.perspective(@value: none) {
#platui > #variables;
.perspective(@value; @webkit-moz-ms-list);
}
.perspective(@value; @vendor-list) {
#platui > #__mixins > .vendor-loop(perspective; @value; @vendor-list);
}
.translate(@x; @y) {
.transform(translate(@x, @y));
}
.translate(@x; @y; @vendor-list) {
.transform(translate(@x, @y); @vendor-list);
}
.translateX(@x) {
.transform(translateX(@x));
}
.translateX(@x; @vendor-list) {
.transform(translateX(@x); @vendor-list);
}
.translateY(@y) {
.transform(translateY(@y));
}
.translateY(@y; @vendor-list) {
.transform(translateY(@y); @vendor-list);
}
.translateZ(@z) {
.transform(translateZ(@z));
}
.translateZ(@z; @vendor-list) {
.transform(translateZ(@z); @vendor-list);
}
.translate3d(@x; @y; @z) {
.transform(translate3d(@x, @y, @z));
}
.translate3d(@x; @y; @z; @vendor-list) {
.transform(translate3d(@x, @y, @z); @vendor-list);
}
.translate-accelerate(@x; @y) {
.translate(@x; @y);
.transform(translate3d(@x, @y, 0));
}
.translate-accelerate(@x; @y; @vendor-list) {
.translate(@x; @y; @vendor-list);
.transform(translate3d(@x, @y, 0); @vendor-list);
}
}
}
#platui {
#mixins {
/// Transitions
.transition(@args) {
#platui > #variables;
.transition(@args; @webkit-moz-list);
}
.transition(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(transition; @args; @vendor-list);
}
.transition-all(@duration: 200ms; @function: ease; @delay: 0s) {
#platui > #variables;
.transition-all(@duration; @function; @delay; @webkit-moz-list);
}
.transition-all(@duration; @function; @delay; @vendor-list) {
#platui > #__mixins > .vendor-loop(transition; all @duration @function @delay; @vendor-list);
}
.transition-delay(@delay) {
#platui > #variables;
.transition-delay(@delay; @webkit-moz-list);
}
.transition-delay(@delay; @vendor-list) {
#platui > #__mixins > .vendor-loop(transition-delay; @delay; @vendor-list);
}
.transition-duration(@duration) {
#platui > #variables;
.transition-duration(@duration; @webkit-moz-list);
}
.transition-duration(@duration; @vendor-list) {
#platui > #__mixins > .vendor-loop(transition-duration; @duration; @vendor-list);
}
.transition-property(@property: all) {
#platui > #variables;
.transition-property(@property; @webkit-moz-list);
}
.transition-property(@property; @vendor-list) {
#platui > #__mixins > .vendor-loop(transition-property; @property; @vendor-list);
}
.transition-timing-function(@function: ease) {
#platui > #variables;
.transition-timing-function(@function; @webkit-moz-list);
}
.transition-timing-function(@function; @vendor-list) {
#platui > #__mixins > .vendor-loop(transition-timing-function; @function; @vendor-list);
}
}
}
#platui {
#mixins {
/// Flexbox
.flexbox() {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.inline-flexbox() {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex(@values) {
-webkit-box-flex: @values;
-webkit-flex: @values;
-moz-box-flex: @values;
-moz-flex: @values;
-ms-flex: @values;
flex: @values;
}
.flex-direction(@direction) when (@direction = row-reverse) {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
flex-direction: @direction;
}
.flex-direction(@direction) when (@direction = column) {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
flex-direction: @direction;
}
.flex-direction(@direction) when (@direction = column-reverse) {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
flex-direction: @direction;
}
.flex-direction(@direction) when (default()) {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
flex-direction: @direction;
}
.align-items(@position) when (@position = flex-start) {
-webkit-box-align: start;
-webkit-align-items: @position;
-moz-align-items: @position;
-ms-flex-align: start;
align-items: @position;
}
.align-items(@position) when (@position = flex-end) {
-webkit-box-align: end;
-webkit-align-items: @position;
-moz-align-items: @position;
-ms-flex-align: end;
align-items: @position;
}
.align-items(@position) when (default()) {
-webkit-box-align: @position;
-webkit-align-items: @position;
-moz-align-items: @position;
-ms-flex-align: @position;
align-items: @position;
}
.align-content(@position) when (@position = flex-start) {
-webkit-align-content: @position;
-moz-align-content: @position;
-ms-flex-line-pack: start;
align-content: @position;
}
.align-content(@position) when (@position = flex-end) {
-webkit-align-content: @position;
-moz-align-content: @position;
-ms-flex-line-pack: end;
align-content: @position;
}
.align-content(@position) when (default()) {
-webkit-align-content: @position;
-moz-align-content: @position;
-ms-flex-line-pack: @position;
align-content: @position;
}
.align-self(@position) when (@position = flex-start) {
-webkit-align-self: @position;
-moz-align-self: @position;
-ms-flex-item-align: start;
align-self: @position;
}
.align-self(@position) when (@position = flex-end) {
-webkit-align-self: @position;
-moz-align-self: @position;
-ms-flex-item-align: end;
align-self: @position;
}
.align-self(@position) when (default()) {
-webkit-align-self: @position;
-moz-align-self: @position;
-ms-flex-item-align: @position;
align-self: @position;
}
.justify-content(@position) when (@position = flex-start) {
-webkit-box-pack: start;
-webkit-justify-content: @position;
-moz-justify-content: @position;
-ms-flex-pack: start;
justify-content: @position;
}
.justify-content(@position) when (@position = flex-end) {
-webkit-box-pack: end;
-webkit-justify-content: @position;
-moz-justify-content: @position;
-ms-flex-pack: end;
justify-content: @position;
}
.justify-content(@position) when (@position = space-around) {
-webkit-justify-content: @position;
-moz-justify-content: @position;
-ms-flex-pack: distribute;
justify-content: @position;
}
.justify-content(@position) when (@position = space-between) {
-webkit-box-pack: justify;
-webkit-justify-content: @position;
-moz-justify-content: @position;
-ms-flex-pack: justify;
justify-content: @position;
}
.justify-content(@position) when (default()) {
-webkit-box-pack: @position;
-webkit-justify-content: @position;
-moz-justify-content: @position;
-ms-flex-pack: @position;
justify-content: @position;
}
.flex-flow(@values) {
-webkit-flex-flow: @values;
-moz-flex-flow: @values;
-ms-flex-flow: @values;
flex-flow: @values;
}
.flex-wrap(@wrap) {
-webkit-flex-wrap: @wrap;
-moz-flex-wrap: @wrap;
-ms-flex-wrap: @wrap;
flex-wrap: @wrap;
}
.flex-order(@order) {
-webkit-box-ordinal-group: @order + 1;
-webkit-order: @order;
-moz-order: @order;
-ms-flex-order: @order;
order: @order;
}
.flex-grow(@factor) {
-webkit-box-flex: @factor;
-webkit-flex-grow: @factor;
-moz-flex-grow: @factor;
-ms-flex-positive: @factor;
flex-grow: @factor;
}
.flex-shrink(@factor) {
-webkit-flex-shrink: @factor;
-moz-flex-shrink: @factor;
-ms-flex-negative: @factor;
flex-shrink: @factor;
}
.flex-basis(@basis) {
-webkit-flex-basis: @basis;
-moz-flex-basis: @basis;
-ms-flex-preferred-size: @basis;
flex-basis: @basis;
}
.flex-absolute-center(@inline: false) {
& when (@inline = false) {
.flexbox();
.align-items(center);
.justify-content(center);
}
& when (@inline = true) {
.inline-flexbox();
.align-items(center);
.justify-content(center);
}
}
.flex-vertical-center(@inline: false) {
& when (@inline = false) {
.flexbox();
.align-items(center);
}
& when (@inline = true) {
.inline-flexbox();
.align-items(center);
}
}
}
}
#platui {
#mixins {
/// CSS Multi-column Layout
/// Column Count
.column-count(@args) {
#platui > #variables;
.column-count(@args; @webkit-moz-list);
}
.column-count(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-count; @args; @vendor-list);
}
/// Column Fill
.column-fill(@args) {
#platui > #variables;
.column-fill(@args; @webkit-moz-list);
}
.column-fill(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-fill; @args; @vendor-list);
}
/// Column Gap
.column-gap(@args) {
#platui > #variables;
.column-gap(@args; @webkit-moz-list);
}
.column-gap(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-gap; @args; @vendor-list);
}
/// Column Rules
.column-rule(@args) {
#platui > #variables;
.column-rule(@args; @webkit-moz-list);
}
.column-rule(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-rule; @args; @vendor-list);
}
/// Column Rule Color
.column-rule-color(@args) {
#platui > #variables;
.column-rule-color(@args; @webkit-moz-list);
}
.column-rule-color(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-rule-color; @args; @vendor-list);
}
/// Column Rule Style
.column-rule-style(@args) {
#platui > #variables;
.column-rule-style(@args; @webkit-moz-list);
}
.column-rule-style(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-rule-style; @args; @vendor-list);
}
/// Column Rule Width
.column-rule-width(@args) {
#platui > #variables;
.column-rule-width(@args; @webkit-moz-list);
}
.column-rule-width(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-rule-width; @args; @vendor-list);
}
/// Column Span
.column-span(@args) {
#platui > #variables;
.column-span(@args; @webkit-moz-list);
}
.column-span(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-span; @args; @vendor-list);
}
/// Column Width
.column-width(@args) {
#platui > #variables;
.column-width(@args; @webkit-moz-list);
}
.column-width(@args; @vendor-list) {
#platui > #__mixins > .vendor-loop(column-width; @args; @vendor-list);
}
}
}
#platui {
#mixins {
#platui > #variables;
/// Gradients
.gradient(@default: #ffffff; @start: #000000; @stop: #ffffff) {
#platui > #variables;
.gradient(@default; @start; @stop; @webkit-moz-ms-strict);
}
.gradient(@default; @start; @stop; @vendor-list) {
.linear-gradient-top(@default; @start; 0%; @stop; 100%; @vendor-list);
}
.horizontal-gradient(@default: #ffffff; @start: #000000; @stop: #ffffff) {
#platui > #variables;
.horizontal-gradient(@default; @start; @stop; @webkit-moz-ms-strict);
}
.horizontal-gradient(@default; @start; @stop; @vendor-list) {
.linear-gradient-left(@default; @start; 0%; @stop; 100%; @vendor-list);
}
.linear-gradient-top(@default; @color1; @stop1; @color2; @stop2) {
#platui > #variables;
.linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @webkit-moz-ms-strict);
}
.linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @vendor-list) when not (iscolor(@vendor-list)) {
@color-values: @color1 @stop1, @color2 @stop2;
@gradient-value: top, @color-values;
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2, @color2));
#platui > #__mixins > .value-looper(background-image; linear-gradient; @gradient-value; @vendor-list; length(@vendor-list));
background-image: linear-gradient(to bottom, @color-values);
}
.linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3) when (iscolor(@colo