diff options
Diffstat (limited to 'static/assets/less/theme-5/mixins.less')
| -rw-r--r-- | static/assets/less/theme-5/mixins.less | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/static/assets/less/theme-5/mixins.less b/static/assets/less/theme-5/mixins.less new file mode 100644 index 0000000..d34a395 --- /dev/null +++ b/static/assets/less/theme-5/mixins.less @@ -0,0 +1,180 @@ +.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; + -ms-border-radius: @radius; + -o-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); +} +.horizontal-gradient (@startColor: #eee, @endColor: white) { + background-color: @startColor; + background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); + background-image: -webkit-linear-gradient(left, @startColor, @endColor); + background-image: -moz-linear-gradient(left, @startColor, @endColor); + background-image: -ms-linear-gradient(left, @startColor, @endColor); + background-image: -o-linear-gradient(left, @startColor, @endColor); +} + +.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) { + -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; +} + +.reset-box-sizing (@size:content-box) { + &, + *, + *:before, + *:after { + .box-sizing(@size); + } +} + +.truncate (@max-width: 250px) { + max-width: @max-width; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.background-size (@string: contain) { + -webkit-background-size: @string; + -moz-background-size: @string; + -o-background-size: @string; + background-size: @string; +} + +// retina.less +// A helper mixin for applying high-resolution background images (http://www.retinajs.com) + +@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)"; + +.at2x(@path, @w: auto, @h: auto) { + background-image: url(@path); + @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`; + + @media @highdpi { + background-image: url("@{at2x_path}"); + background-size: @w @h; + } +} + + |