mirror of https://github.com/ColorlibHQ/AdminLTE
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.5 KiB
124 lines
3.5 KiB
// 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);
|
|
}
|
|
} |