// 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))); }