AdminLte/less/mixins.less

// Misc: mixins
//==============


//Changes the color and the hovering properties of the navbar
.navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
    background-color: @color;
    //Navbar links
    .nav a {
        color: @font-color;
    }

    .nav > li > a:hover,
        .nav > li > a:active,
        .nav > li > a:focus,
        .nav .open > a,
        .nav .open > a:hover,
        .nav .open > a:focus {
        background: @hover-bg;
        color: @hover-color;
    }

    .navbar-right > .nav {
        margin-right: 10px;
    }
    //Add color to the sidebar toggle button
    .sidebar-toggle .icon-bar {
        background: @font-color;

    }
    .sidebar-toggle:hover .icon-bar {
        background: @hover-color!important;
    }
}

//Logo color variation
.logo-variant(@color) {
    background-color: @color;
    color: #f9f9f9;
    > a {
        color: #f9f9f9;
    }

    &:hover {
        background: darken(@color, 1%);
    }
}

//Box solid color variantion creator
.box-solid-variant(@color) {
    > .box-header {
        color: #fff;
        background: @color;
        background-color: @color;
        a {
            color: #444;
        }
    }
}

//Transform function that rotates eements
.transform(@degree) {
    transform:rotate(@degree);
    -ms-transform:rotate(@degree); /* IE 9 */
    -webkit-transform:rotate(@degree); /* Safari and Chrome */
}
//For floating elements
.clearfix() {
    &:before,
        &:after {
        display: table;
        content: " ";
    }

    &:after {
        clear: both;
    }
}

//border radius creator
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
//Different radius each side
.border-radius(@top-left; @top-right; @bottom-left; @bottom-right) {
    -webkit-border-top-left-radius: @top-left;
    -webkit-border-top-right-radius: @top-right;
    -webkit-border-bottom-right-radius: @bottom-right;
    -webkit-border-bottom-left-radius: @bottom-left;

    -moz-border-radius-topleft: @top-left;
    -moz-border-radius-topright: @top-right;
    -moz-border-radius-bottomright: @bottom-right;
    -moz-border-radius-bottomleft: @bottom-left;

    border-top-left-radius: @top-left;
    border-top-right-radius: @top-right;
    border-bottom-right-radius: @bottom-right;
    border-bottom-left-radius: @bottom-left;
}

//Bootstrap mixins for progress bars. You can find original copies
//with the bootstrap assets (www.getbootstrap.com)
.progress-bar-variant(@color) {
    background-color: @color;
    .progress-striped & {
        #gradient > .striped();
    }
}
// Animations
.animation(@animation) {
    -webkit-animation: @animation;
    animation: @animation;
}
#gradient {
    .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
        background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent));
        background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
        background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
    }
}

/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, @start),
                               color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
                                  @start,
                                  @stop);
  background: -moz-linear-gradient(center bottom,
                                   @start 0%,
                                   @stop 100%);
  background: -o-linear-gradient(@stop,
                                 @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}
.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, rgb(@start,@start,@start)),
                               color-stop(1, rgb(@stop,@stop,@stop)));
  background: -ms-linear-gradient(bottom,
                                  rgb(@start,@start,@start) 0%,
                                  rgb(@stop,@stop,@stop) 100%);
  background: -moz-linear-gradient(center bottom,
                                   rgb(@start,@start,@start) 0%,
                                   rgb(@stop,@stop,@stop) 100%);
  background: -o-linear-gradient(rgb(@stop,@stop,@stop),
                                 rgb(@start,@start,@start));
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
}