rebuild adminLTE skin-blue

This commit is contained in:
knoxfighter 2018-08-12 00:49:14 +02:00
parent b0ffa119b3
commit 5bbaa28b1d
3 changed files with 173 additions and 1 deletions

View File

@ -43,7 +43,7 @@ class Header extends React.Component {
</ul>
}
return(
<nav className="main-header navbar navbar-expand bg-white navbar-light border-bottom">
<nav className="main-header navbar navbar-expand navbar-light border-bottom">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" data-widget="pushmenu" href="#">

View File

@ -5,6 +5,7 @@
*/
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/admin-lte/build/scss/AdminLTE-raw";
@import "scss/customizations/adminLTE3-skin-blue";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";

View File

@ -0,0 +1,171 @@
/*
* Skin: Blue
* ----------
*/
.skin-blue {
.main-header {
&.navbar {
background-color: #3c8dbc;
.navbar-nav {
> li > a {
color: #ffffff;
&:hover, &:active, &:focus {
background: rgba(0, 0, 0, 0.1);
color: #f6f6f6;
}
}
.open > a {
background: rgba(0, 0, 0, 0.1);
color: #f6f6f6;
&:hover, &:focus {
background: rgba(0, 0, 0, 0.1);
color: #f6f6f6;
}
}
> .active > a {
background: rgba(0, 0, 0, 0.1);
color: #f6f6f6;
}
}
.sidebar-toggle {
color: #ffffff;
&:hover {
color: #f6f6f6;
background: #367fa9;
}
}
}
.logo {
background-color: #367fa9;
color: #ffffff;
border-bottom: 0 solid transparent;
&:hover {
background-color: #357ca5;
}
}
li.user-header {
background-color: #3c8dbc;
}
}
.content-header {
background: transparent;
}
.wrapper, .main-sidebar, .left-side {
background-color: #222d32;
}
.sidebar {
padding: 0;
.user-panel > .info {
color: #fff;
> a {
color: #fff;
font-size: 12px;
> i {
margin-right: 5px;
}
}
}
.nav-sidebar {
.nav-header {
color: #4b646f;
background: #1a2226;
}
> .nav-item {
&:hover > .nav-link {
color: #ffffff;
background: #1e282c;
border-left-color: #3c8dbc;
}
> .nav-link {
border-radius: 0;
border-left: 3px solid transparent;
&.active {
color: #ffffff;
background: #1e282c;
border-left-color: #3c8dbc;
}
}
}
}
}
.sidebar-form {
border-radius: 3px;
border: 1px solid #374850;
margin: 10px 10px;
input[type="text"], .btn {
box-shadow: none;
background-color: #374850;
border: 1px solid transparent;
height: 35px;
}
input[type="text"] {
color: #666;
border-radius: 2px 0 0 2px;
&:focus {
background-color: #fff;
color: #666;
+ .input-group-btn .btn {
background-color: #fff;
color: #666;
border-left-color: #fff;
}
}
}
.btn {
color: #999;
border-radius: 0 2px 2px 0;
}
}
&.layout-top-nav .main-header > .logo {
background-color: #3c8dbc;
color: #ffffff;
border-bottom: 0 solid transparent;
&:hover {
background-color: #3b8ab8;
}
}
}
@media (max-width: 767px) {
.skin-blue .main-header .navbar .dropdown-menu li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: #367fa9;
}
}
}
}