mirror of https://github.com/ColorlibHQ/AdminLTE
Created light skin for control sidebar
Abdullah Almsaeed
parent
a1f496be11
commit
e0bd7ba438
|
|
@ -10,25 +10,23 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
width: @control-sidebar-width;
|
||||
background: @sidebar-dark-bg;
|
||||
}
|
||||
|
||||
//Transitions
|
||||
.control-sidebar-bg,
|
||||
.control-sidebar {
|
||||
.translate(@control-sidebar-width, 0);
|
||||
.transition-transform(@transition-speed ease-in-out);
|
||||
}
|
||||
//The sidebar
|
||||
.control-sidebar {
|
||||
position: absolute;
|
||||
top: @navbar-height;
|
||||
right: 0;
|
||||
width: @control-sidebar-width;
|
||||
z-index: 1010;
|
||||
color: @sidebar-dark-color;
|
||||
z-index: 1010;
|
||||
//Fix position after header collapse
|
||||
@media (max-width: @screen-sm) {
|
||||
top: @navbar-height + 50;
|
||||
top: @navbar-height + 50;
|
||||
}
|
||||
//Tab panes
|
||||
> .tab-content {
|
||||
|
|
@ -56,28 +54,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Control sidebar tabs
|
||||
.control-sidebar-tabs {
|
||||
border-bottom: darken(@sidebar-dark-bg, 3%);
|
||||
> li {
|
||||
&:first-of-type > a {
|
||||
margin-left: 1px;
|
||||
&,
|
||||
&:hover {
|
||||
border-left-width: 0!important;
|
||||
}
|
||||
}
|
||||
> a {
|
||||
.border-radius(0)!important;
|
||||
background: darken(@sidebar-dark-bg, 5%);
|
||||
color: @sidebar-dark-color;
|
||||
//Hover and active states
|
||||
&,
|
||||
&:hover {
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: 1px solid darken(@sidebar-dark-bg, 7%)!important;
|
||||
border-bottom: 1px solid darken(@sidebar-dark-bg, 7%)!important;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken(@sidebar-dark-bg, 3%);
|
||||
border-left: 1px solid transparent!important;
|
||||
border-bottom: 1px solid transparent!important;
|
||||
}
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
|
|
@ -93,8 +88,6 @@
|
|||
border-top: none!important;
|
||||
border-right: none!important;
|
||||
border-bottom: none!important;
|
||||
background: @sidebar-dark-bg;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -108,8 +101,7 @@
|
|||
}
|
||||
}
|
||||
//Headings in the sidebar content
|
||||
.control-sidebar-heading {
|
||||
color: #fff;
|
||||
.control-sidebar-heading {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
|
|
@ -118,7 +110,6 @@
|
|||
//Subheadings
|
||||
.control-sidebar-subheading {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -130,10 +121,7 @@
|
|||
> li > a {
|
||||
.clearfix();
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
&:hover {
|
||||
background: @sidebar-dark-hover-bg;
|
||||
}
|
||||
padding: 10px 15px;
|
||||
> .control-sidebar-subheading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -153,12 +141,135 @@
|
|||
margin: 0;
|
||||
}
|
||||
> p {
|
||||
margin: 0;
|
||||
color: @sidebar-dark-color;
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
//Dark skin
|
||||
.control-sidebar-dark {
|
||||
color: @sidebar-dark-color;
|
||||
// Background
|
||||
+ .control-sidebar-bg {
|
||||
background: @sidebar-dark-bg;
|
||||
}
|
||||
// Sidebar tabs
|
||||
.control-sidebar-tabs {
|
||||
border-bottom: darken(@sidebar-dark-bg, 3%);
|
||||
> li {
|
||||
> a {
|
||||
background: darken(@sidebar-dark-bg, 5%);
|
||||
color: @sidebar-dark-color;
|
||||
//Hover and active states
|
||||
&,
|
||||
&:hover {
|
||||
border-left-color: darken(@sidebar-dark-bg, 7%)!important;
|
||||
border-bottom-color: darken(@sidebar-dark-bg, 7%)!important;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken(@sidebar-dark-bg, 3%);
|
||||
}
|
||||
}
|
||||
//Active state
|
||||
&.active {
|
||||
> a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: @sidebar-dark-bg;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Heading & subheading
|
||||
.control-sidebar-heading,
|
||||
.control-sidebar-subheading {
|
||||
color: #fff;
|
||||
}
|
||||
//Sidebar list
|
||||
.control-sidebar-menu {
|
||||
> li {
|
||||
> a {
|
||||
&:hover {
|
||||
background: @sidebar-dark-hover-bg;
|
||||
}
|
||||
.menu-info {
|
||||
> p {
|
||||
color: @sidebar-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Light skin
|
||||
.control-sidebar-light {
|
||||
color: lighten(@sidebar-light-color, 10%);
|
||||
// Background
|
||||
+ .control-sidebar-bg {
|
||||
background: @sidebar-light-bg;
|
||||
border-left: 1px solid @gray;
|
||||
}
|
||||
// Sidebar tabs
|
||||
.control-sidebar-tabs {
|
||||
border-bottom: @gray;
|
||||
> li {
|
||||
> a {
|
||||
background: darken(@sidebar-light-bg, 5%);
|
||||
color: @sidebar-light-color;
|
||||
//Hover and active states
|
||||
&,
|
||||
&:hover {
|
||||
border-left-color: @gray!important;
|
||||
border-bottom-color: @gray!important;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken(@sidebar-light-bg, 3%);
|
||||
}
|
||||
}
|
||||
//Active state
|
||||
&.active {
|
||||
> a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: @sidebar-light-bg;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Heading & subheading
|
||||
.control-sidebar-heading,
|
||||
.control-sidebar-subheading {
|
||||
color: #111;
|
||||
}
|
||||
//Sidebar list
|
||||
.control-sidebar-menu {
|
||||
margin-left: -14px;
|
||||
> li {
|
||||
> a {
|
||||
&:hover {
|
||||
background: @sidebar-light-hover-bg;
|
||||
}
|
||||
.menu-info {
|
||||
> p {
|
||||
color: lighten(@sidebar-light-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -672,7 +672,6 @@ a:focus {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
width: 230px;
|
||||
background: #222d32;
|
||||
}
|
||||
.control-sidebar-bg,
|
||||
.control-sidebar {
|
||||
|
|
@ -691,7 +690,6 @@ a:focus {
|
|||
right: 0;
|
||||
width: 230px;
|
||||
z-index: 1010;
|
||||
color: #b8c7ce;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.control-sidebar {
|
||||
|
|
@ -722,25 +720,22 @@ a:focus {
|
|||
margin-right: 230px;
|
||||
}
|
||||
}
|
||||
.control-sidebar-tabs {
|
||||
border-bottom: #1c2529;
|
||||
.control-sidebar-tabs > li:first-of-type > a {
|
||||
margin-left: 1px;
|
||||
}
|
||||
.control-sidebar-tabs > li:first-of-type > a,
|
||||
.control-sidebar-tabs > li:first-of-type > a:hover {
|
||||
border-left-width: 0!important;
|
||||
}
|
||||
.control-sidebar-tabs > li > a {
|
||||
border-radius: 0 !important;
|
||||
background: #181f23;
|
||||
color: #b8c7ce;
|
||||
}
|
||||
.control-sidebar-tabs > li > a,
|
||||
.control-sidebar-tabs > li > a:hover {
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: 1px solid #141a1d !important;
|
||||
border-bottom: 1px solid #141a1d !important;
|
||||
}
|
||||
.control-sidebar-tabs > li > a:hover,
|
||||
.control-sidebar-tabs > li > a:focus,
|
||||
.control-sidebar-tabs > li > a:active {
|
||||
background: #1c2529;
|
||||
border-left: 1px solid transparent!important;
|
||||
border-bottom: 1px solid transparent!important;
|
||||
}
|
||||
.control-sidebar-tabs > li > a .icon {
|
||||
font-size: 16px;
|
||||
|
|
@ -752,8 +747,6 @@ a:focus {
|
|||
border-top: none!important;
|
||||
border-right: none!important;
|
||||
border-bottom: none!important;
|
||||
background: #222d32;
|
||||
color: #fff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.control-sidebar-tabs {
|
||||
|
|
@ -764,7 +757,6 @@ a:focus {
|
|||
}
|
||||
}
|
||||
.control-sidebar-heading {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
|
|
@ -772,7 +764,6 @@ a:focus {
|
|||
}
|
||||
.control-sidebar-subheading {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -793,9 +784,6 @@ a:focus {
|
|||
.control-sidebar-menu > li > a:after {
|
||||
clear: both;
|
||||
}
|
||||
.control-sidebar-menu > li > a:hover {
|
||||
background: #1e282c;
|
||||
}
|
||||
.control-sidebar-menu > li > a > .control-sidebar-subheading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -816,12 +804,95 @@ a:focus {
|
|||
}
|
||||
.control-sidebar-menu .menu-info > p {
|
||||
margin: 0;
|
||||
color: #b8c7ce;
|
||||
font-size: 11px;
|
||||
}
|
||||
.control-sidebar-menu .progress {
|
||||
margin: 0;
|
||||
}
|
||||
.control-sidebar-dark {
|
||||
color: #b8c7ce;
|
||||
}
|
||||
.control-sidebar-dark + .control-sidebar-bg {
|
||||
background: #222d32;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-tabs {
|
||||
border-bottom: #1c2529;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-tabs > li > a {
|
||||
background: #181f23;
|
||||
color: #b8c7ce;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-tabs > li > a,
|
||||
.control-sidebar-dark .control-sidebar-tabs > li > a:hover {
|
||||
border-left-color: #141a1d !important;
|
||||
border-bottom-color: #141a1d !important;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-tabs > li > a:hover,
|
||||
.control-sidebar-dark .control-sidebar-tabs > li > a:focus,
|
||||
.control-sidebar-dark .control-sidebar-tabs > li > a:active {
|
||||
background: #1c2529;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-tabs > li.active > a,
|
||||
.control-sidebar-dark .control-sidebar-tabs > li.active > a:hover,
|
||||
.control-sidebar-dark .control-sidebar-tabs > li.active > a:focus,
|
||||
.control-sidebar-dark .control-sidebar-tabs > li.active > a:active {
|
||||
background: #222d32;
|
||||
color: #fff;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-heading,
|
||||
.control-sidebar-dark .control-sidebar-subheading {
|
||||
color: #fff;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-menu > li > a:hover {
|
||||
background: #1e282c;
|
||||
}
|
||||
.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
|
||||
color: #b8c7ce;
|
||||
}
|
||||
.control-sidebar-light {
|
||||
color: #5e5e5e;
|
||||
}
|
||||
.control-sidebar-light + .control-sidebar-bg {
|
||||
background: #f9fafc;
|
||||
border-left: 1px solid #d2d6de;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-tabs {
|
||||
border-bottom: #d2d6de;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-tabs > li > a {
|
||||
background: #e8ecf4;
|
||||
color: #444444;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-tabs > li > a,
|
||||
.control-sidebar-light .control-sidebar-tabs > li > a:hover {
|
||||
border-left-color: #d2d6de !important;
|
||||
border-bottom-color: #d2d6de !important;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-tabs > li > a:hover,
|
||||
.control-sidebar-light .control-sidebar-tabs > li > a:focus,
|
||||
.control-sidebar-light .control-sidebar-tabs > li > a:active {
|
||||
background: #eff1f7;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-tabs > li.active > a,
|
||||
.control-sidebar-light .control-sidebar-tabs > li.active > a:hover,
|
||||
.control-sidebar-light .control-sidebar-tabs > li.active > a:focus,
|
||||
.control-sidebar-light .control-sidebar-tabs > li.active > a:active {
|
||||
background: #f9fafc;
|
||||
color: #111;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-heading,
|
||||
.control-sidebar-light .control-sidebar-subheading {
|
||||
color: #111;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-menu {
|
||||
margin-left: -14px;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-menu > li > a:hover {
|
||||
background: #f4f4f5;
|
||||
}
|
||||
.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
|
||||
color: #5e5e5e;
|
||||
}
|
||||
/*
|
||||
* Component: Dropdown menus
|
||||
* -------------------------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue