305 lines
7 KiB
SCSS
305 lines
7 KiB
SCSS
//AdminLTE mixins
|
|
//===============
|
|
|
|
//Changes the color and the hovering properties of the navbar
|
|
@mixin 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 > li > 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,
|
|
.nav > .active > a {
|
|
background: $hover-bg;
|
|
color: $hover-color;
|
|
}
|
|
|
|
//Add color to the sidebar toggle button
|
|
.sidebar-toggle {
|
|
color: $font-color;
|
|
&:hover {
|
|
color: $hover-color;
|
|
background: $hover-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Logo color variation
|
|
@mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
|
|
background-color: $bg-color;
|
|
color: $color;
|
|
border-bottom: $border-bottom-width solid $border-bottom-color;
|
|
|
|
&:hover {
|
|
background-color: darken($bg-color, 1%);
|
|
}
|
|
}
|
|
|
|
//Box solid color variantion creator
|
|
@mixin box-solid-variant($color, $text-color: #fff) {
|
|
border: 1px solid $color;
|
|
> .box-header {
|
|
color: $text-color;
|
|
background: $color;
|
|
background-color: $color;
|
|
a,
|
|
.btn {
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Direct Chat Variant
|
|
@mixin direct-chat-variant($bg-color, $color: #fff) {
|
|
.right > .direct-chat-text {
|
|
background: $bg-color;
|
|
border-color: $bg-color;
|
|
color: $color;
|
|
&:after,
|
|
&:before {
|
|
border-left-color: $bg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
//border radius creator
|
|
@mixin border-radius($radius) {
|
|
border-radius: $radius;
|
|
}
|
|
|
|
@mixin translate($x, $y) {
|
|
-ms-transform: translate($x, $y); // IE9 only
|
|
transform: translate($x, $y);
|
|
}
|
|
|
|
//Different radius each side
|
|
@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right)
|
|
{
|
|
border-radius: $top-left $top-right $bottom-left $bottom-right;
|
|
}
|
|
|
|
@mixin rotate($value) {
|
|
-ms-transform: rotate($value);
|
|
transform: rotate($value);
|
|
}
|
|
|
|
@mixin animation($animation) {
|
|
animation: $animation;
|
|
}
|
|
|
|
//Gradient background
|
|
@mixin 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);
|
|
}
|
|
|
|
//Added 2.1.0
|
|
//Skins Mixins
|
|
|
|
//Dark Sidebar Mixin
|
|
@mixin skin-dark-sidebar($link-hover-border-color) {
|
|
// Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
|
|
.wrapper,
|
|
.main-sidebar,
|
|
.left-side {
|
|
background-color: $sidebar-dark-bg;
|
|
}
|
|
//User Panel (resides in the sidebar)
|
|
.user-panel {
|
|
> .info, > .info > a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
//Sidebar Menu. First level links
|
|
.sidebar-menu > li {
|
|
//Section Headning
|
|
&.header {
|
|
color: lighten($sidebar-dark-bg, 20%);
|
|
background: darken($sidebar-dark-bg, 4%);
|
|
}
|
|
//links
|
|
> a {
|
|
border-left: 3px solid transparent;
|
|
}
|
|
//Hover and active states
|
|
&:hover > a, &.active > a {
|
|
color: $sidebar-dark-hover-color;
|
|
background: $sidebar-dark-hover-bg;
|
|
border-left-color: $link-hover-border-color;
|
|
}
|
|
//First Level Submenu
|
|
> .treeview-menu {
|
|
margin: 0 1px;
|
|
background: $sidebar-dark-submenu-bg;
|
|
}
|
|
}
|
|
//All links within the sidebar menu
|
|
.sidebar a {
|
|
color: $sidebar-dark-color;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
//All submenus
|
|
.treeview-menu {
|
|
> li {
|
|
> a {
|
|
color: $sidebar-dark-submenu-color;
|
|
}
|
|
&.active > a, > a:hover {
|
|
color: $sidebar-dark-submenu-hover-color;
|
|
}
|
|
}
|
|
}
|
|
//The sidebar search form
|
|
.sidebar-form {
|
|
@include border-radius(3px);
|
|
border: 1px solid lighten($sidebar-dark-bg, 10%);
|
|
margin: 10px 10px;
|
|
input[type="text"], .btn {
|
|
box-shadow: none;
|
|
background-color: lighten($sidebar-dark-bg, 10%);
|
|
border: 1px solid transparent;
|
|
height: 35px;
|
|
transition: all $transition-speed $transition-fn;
|
|
}
|
|
input[type="text"] {
|
|
color: #666;
|
|
@include border-radius(2px, 0, 2px, 0);
|
|
&:focus, &:focus + .input-group-btn .btn {
|
|
background-color: #fff;
|
|
color: #666;
|
|
}
|
|
&:focus + .input-group-btn .btn {
|
|
border-left-color: #fff;
|
|
}
|
|
}
|
|
.btn {
|
|
color: #999;
|
|
@include border-radius(0, 2px, 0, 2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
//Light Sidebar Mixin
|
|
@mixin skin-light-sidebar($icon-active-color) {
|
|
// Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
|
|
.wrapper,
|
|
.main-sidebar,
|
|
.left-side {
|
|
background-color: $sidebar-light-bg;
|
|
}
|
|
.content-wrapper,
|
|
.main-footer {
|
|
border-left: 1px solid $gray;
|
|
}
|
|
//User Panel (resides in the sidebar)
|
|
.user-panel {
|
|
> .info, > .info > a {
|
|
color: $sidebar-light-color;
|
|
}
|
|
}
|
|
//Sidebar Menu. First level links
|
|
.sidebar-menu > li {
|
|
transition: border-left-color .3s ease;
|
|
//border-left: 3px solid transparent;
|
|
//Section Headning
|
|
&.header {
|
|
color: lighten($sidebar-light-color, 25%);
|
|
background: $sidebar-light-bg;
|
|
}
|
|
//links
|
|
> a {
|
|
border-left: 3px solid transparent;
|
|
font-weight: 600;
|
|
}
|
|
//Hover and active states
|
|
&:hover > a,
|
|
&.active > a {
|
|
color: $sidebar-light-hover-color;
|
|
background: $sidebar-light-hover-bg;
|
|
}
|
|
&:hover > a {
|
|
|
|
}
|
|
&.active {
|
|
border-left-color: $icon-active-color;
|
|
> a {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
//First Level Submenu
|
|
> .treeview-menu {
|
|
background: $sidebar-light-submenu-bg;
|
|
}
|
|
}
|
|
//All links within the sidebar menu
|
|
.sidebar a {
|
|
color: $sidebar-light-color;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
//All submenus
|
|
.treeview-menu {
|
|
> li {
|
|
> a {
|
|
color: $sidebar-light-submenu-color;
|
|
}
|
|
&.active > a,
|
|
> a:hover {
|
|
color: $sidebar-light-submenu-hover-color;
|
|
}
|
|
&.active > a {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
//The sidebar search form
|
|
.sidebar-form {
|
|
@include border-radius(3px);
|
|
border: 1px solid $gray; //darken($sidebar-light-bg, 5%);
|
|
margin: 10px 10px;
|
|
input[type="text"],
|
|
.btn {
|
|
box-shadow: none;
|
|
background-color: #fff; //darken($sidebar-light-bg, 3%);
|
|
border: 1px solid transparent;
|
|
height: 35px;
|
|
transition: all $transition-speed $transition-fn;
|
|
}
|
|
input[type="text"] {
|
|
color: #666;
|
|
@include border-radius(2px, 0, 2px, 0);
|
|
&:focus,
|
|
&:focus + .input-group-btn .btn {
|
|
background-color: #fff;
|
|
color: #666;
|
|
}
|
|
&:focus + .input-group-btn .btn {
|
|
border-left-color: #fff;
|
|
}
|
|
}
|
|
.btn {
|
|
color: #999;
|
|
@include border-radius(0, 2px, 0, 2px);
|
|
}
|
|
}
|
|
@media (min-width: map-get($grid-breakpoints, sm)) {
|
|
&.sidebar-mini.sidebar-collapse {
|
|
.sidebar-menu > li > .treeview-menu {
|
|
border-left: 1px solid $gray;
|
|
}
|
|
}
|
|
}
|
|
}
|