123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- .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;
- }
- }
|