//transform .transform(@transformation) { -moz-transform:@transformation; -webkit-transform:@transformation; -o-transform:@transformation; -ms-transform:@transformation; transform:@transformation; } .transform-origin(@origin) { -moz-transform-origin:@origin; -webkit-transform-origin:@origin; -o-transform-origin:@origin; -ms-transform-origin:@origin; transform-origin:@origin; } .border-radius(@r) { border-radius: @r; } .box-shadow(@shadow) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; } .text-color(@a) when (lightness(@a) >= 50%){ color: #000000; } .text-color(@a) when (lightness(@a) < 50%){ color: @white; } .text-color-heading(@a) when (lightness(@a) >= 50%){ color: @baseHeadingcolor; } .text-color-heading(@a) when (lightness(@a) < 50%){ color: @white; } // Transformations .scale(@ratio) { -webkit-transform: scale(@ratio); -ms-transform: scale(@ratio); // IE9 only -o-transform: scale(@ratio); transform: scale(@ratio); } .scale(@ratioX; @ratioY) { -webkit-transform: scale(@ratioX, @ratioY); -ms-transform: scale(@ratioX, @ratioY); // IE9 only -o-transform: scale(@ratioX, @ratioY); transform: scale(@ratioX, @ratioY); } .scaleX(@ratio) { -webkit-transform: scaleX(@ratio); -ms-transform: scaleX(@ratio); // IE9 only -o-transform: scaleX(@ratio); transform: scaleX(@ratio); } .scaleY(@ratio) { -webkit-transform: scaleY(@ratio); -ms-transform: scaleY(@ratio); // IE9 only -o-transform: scaleY(@ratio); transform: scaleY(@ratio); } .skew(@x; @y) { -webkit-transform: skewX(@x) skewY(@y); -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ -o-transform: skewX(@x) skewY(@y); transform: skewX(@x) skewY(@y); } .translate(@x; @y) { -webkit-transform: translate(@x, @y); -ms-transform: translate(@x, @y); // IE9 only -o-transform: translate(@x, @y); transform: translate(@x, @y); } .translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } .rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only -o-transform: rotate(@degrees); transform: rotate(@degrees); } .rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only -o-transform: rotateX(@degrees); transform: rotateX(@degrees); } .rotateY(@degrees) { -webkit-transform: rotateY(@degrees); -ms-transform: rotateY(@degrees); // IE9 only -o-transform: rotateY(@degrees); transform: rotateY(@degrees); } .perspective(@perspective) { -webkit-perspective: @perspective; -moz-perspective: @perspective; perspective: @perspective; } .perspective-origin(@perspective) { -webkit-perspective-origin: @perspective; -moz-perspective-origin: @perspective; perspective-origin: @perspective; } .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; -ms-transform-origin: @origin; // IE9 only transform-origin: @origin; } // Transitions .transition(@transition) { -webkit-transition: @transition; -o-transition: @transition; transition: @transition; } .transition-property(@transition-property) { -webkit-transition-property: @transition-property; transition-property: @transition-property; } .transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; transition-delay: @transition-delay; } .transition-duration(@transition-duration) { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } .transition-timing-function(@timing-function) { -webkit-transition-timing-function: @timing-function; transition-timing-function: @timing-function; } .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; -o-transition: -o-transform @transition; transition: transform @transition; } .border-top-radius(@radius) { border-top-left-radius: @radius; border-top-right-radius: @radius; } .border-right-radius(@radius) { border-top-right-radius: @radius; border-bottom-right-radius: @radius; } .border-bottom-radius(@radius) { border-bottom-right-radius: @radius; border-bottom-left-radius: @radius; } .border-left-radius(@radius) { border-top-left-radius: @radius; border-bottom-left-radius: @radius; } // Panels .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { border-color: @border; & > .panel-heading { color: @heading-text-color; background-color: @heading-bg-color; border-color: @heading-border; + .panel-collapse > .panel-body { border-top-color: @border; } .badge { color: @heading-bg-color; background-color: @heading-text-color; } } & > .panel-footer { + .panel-collapse > .panel-body { border-bottom-color: @border; } } } .button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; &:focus, &.focus { color: @color; background-color: darken(@background, 10%); border-color: darken(@border, 25%); } &:hover { color: @color; background-color: darken(@background, 10%); border-color: darken(@border, 12%); } &:active, &.active, .open > .dropdown-toggle& { color: @color; background-color: darken(@background, 10%); background-image: none; border-color: darken(@border, 12%); &:hover, &:focus, &.focus { color: @color; background-color: darken(@background, 17%); border-color: darken(@border, 25%); } } &.disabled, &[disabled], fieldset[disabled] & { &:hover, &:focus, &.focus { background-color: @background; border-color: @border; } } .badge { color: @background; background-color: @color; } }