| .translate-origin(@x, @y) { |
| -webkit-transform-origin: @x @y; |
| -moz-transform-origin: @x @y; |
| -ms-transform-origin: @x @y; |
| -o-transform-origin: @x @y; |
| transform-origin: @x @y; |
| } |
| |
| .customTransition(@prop, @delay, @a, @b, @c, @d){ |
| -webkit-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); |
| -moz-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); |
| -ms-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); |
| -o-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); |
| transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); /* custom */ |
| |
| -webkit-transition-timing-function: cubic-bezier(@a, @b, @c, @d); |
| -moz-transition-timing-function: cubic-bezier(@a, @b, @c, @d); |
| -ms-transition-timing-function: cubic-bezier(@a, @b, @c, @d); |
| -o-transition-timing-function: cubic-bezier(@a, @b, @c, @d); |
| transition-timing-function: cubic-bezier(@a, @b, @c, @d); /* custom */ |
| } |
| |
| .transition(...) { |
| -webkit-transition: @arguments; |
| -moz-transition: @arguments; |
| -ms-transition: @arguments; |
| -o-transition: @arguments; |
| transition: @arguments; |
| } |
| |
| .bottom-border(@height: 6px) { |
| border-bottom: 1px solid #999; |
| } |
| |
| .left-border() { |
| border-left: 1px solid #999; |
| } |
| |
| .noselect() { |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| .display-flex() { |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| } |
| |
| /* rather than run through all permutations of the shorthand options for flex, this just pulls all arguments */ |
| .flex(...) { |
| -webkit-flex: @arguments; |
| -ms-flex: @arguments; |
| flex: @arguments; |
| } |
| |
| /* @dir: column or row */ |
| .flex-direction(@dir) { |
| -webkit-flex-direction: @dir; |
| -ms-flex-direction: @dir; |
| flex-direction: @dir; |
| } |