v1.0.0
This commit is contained in:
Łukasz Holeczek
@@ -1,6 +1,6 @@
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
margin-bottom: 1.5 * $spacer;
|
||||
margin: $breadcrumb-margin;
|
||||
|
||||
@include borders($breadcrumb-borders);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
// Temp fix for reactstrap
|
||||
.show {
|
||||
> .dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
}
|
||||
@@ -11,8 +11,8 @@
|
||||
app-dashboard,
|
||||
app-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
@@ -26,12 +26,12 @@ app-root {
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@@ -65,22 +65,22 @@ app-root {
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
// margin-top: - $navbar-height;
|
||||
|
||||
.sidebar-nav {
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
// .sidebar-nav {
|
||||
// height: calc(100vh - #{$navbar-height});
|
||||
// }
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
@@ -88,7 +88,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -99,12 +98,7 @@ app-root {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.sidebar-nav {
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,14 +109,12 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-compact-width;
|
||||
}
|
||||
@@ -132,7 +124,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -143,17 +134,20 @@ app-root {
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
.sidebar-header,
|
||||
.sidebar-form,
|
||||
.sidebar-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
}
|
||||
@@ -163,7 +157,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -176,14 +169,12 @@ app-root {
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
|
||||
.aside-menu {
|
||||
margin-right: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@@ -199,7 +190,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -223,7 +213,6 @@ app-root {
|
||||
// Breadcrumb
|
||||
//
|
||||
.breadcrumb-fixed {
|
||||
|
||||
.main {
|
||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||
padding-top: $breadcrumb-height;
|
||||
@@ -283,7 +272,6 @@ app-root {
|
||||
// Footer
|
||||
//
|
||||
.footer-fixed {
|
||||
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -306,6 +294,9 @@ app-root {
|
||||
.aside-menu {
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
||||
}
|
||||
.sidebar-nav {
|
||||
transition: width $layout-transition-speed;
|
||||
}
|
||||
.breadcrumb {
|
||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||
}
|
||||
@@ -315,12 +306,13 @@ app-root {
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
.app-header {
|
||||
.app-header.navbar {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $navbar-brand-bg;
|
||||
@include borders($navbar-brand-border);
|
||||
|
||||
.navbar-toggler {
|
||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||
@@ -343,6 +335,7 @@ app-root {
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $mobile-sidebar-width;
|
||||
height: 100%;
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
@@ -368,7 +361,6 @@ app-root {
|
||||
}
|
||||
|
||||
.sidebar-mobile-show {
|
||||
|
||||
.sidebar {
|
||||
width: $mobile-sidebar-width;
|
||||
margin-left: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.app-header.navbar {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
height: $navbar-height;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $navbar-bg;
|
||||
|
||||
@@ -44,20 +44,17 @@
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -70,20 +67,18 @@
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
margin-right: - $sidebar-minimized-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
margin-right: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -95,15 +90,13 @@
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
|
||||
.aside-menu {
|
||||
// margin-right: 0;
|
||||
margin-right: 0;
|
||||
margin-left: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
|
||||
.aside-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
@@ -115,7 +108,6 @@
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -138,15 +130,12 @@
|
||||
// Sidebar Menu
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
direction: ltr;
|
||||
* {
|
||||
direction: rtl;
|
||||
}
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
margin-right: -4px;
|
||||
direction: rtl;
|
||||
i {
|
||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||
}
|
||||
.badge {
|
||||
float: left;
|
||||
@@ -158,13 +147,14 @@
|
||||
position: absolute;
|
||||
right: auto !important;
|
||||
left: $sidebar-nav-link-padding-x;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -173,6 +163,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized .sidebar {
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
i {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
.nav > .nav-dropdown {
|
||||
|
||||
&:hover {
|
||||
> .nav-dropdown-items {
|
||||
right: $sidebar-minimized-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal bars
|
||||
.horizontal-bars {
|
||||
|
||||
@@ -249,6 +263,12 @@
|
||||
border: 0 solid $border-color;
|
||||
border-right-width: .25rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
left: 0;
|
||||
float: left;
|
||||
@@ -258,10 +278,4 @@
|
||||
.callout-default {
|
||||
border-right-color: $text-muted;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+248
-275
@@ -1,7 +1,8 @@
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $sidebar-padding;
|
||||
overflow: hidden;
|
||||
color: $sidebar-color;
|
||||
background: $sidebar-bg;
|
||||
@include borders($sidebar-borders);
|
||||
@@ -24,31 +25,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Will be added soon
|
||||
// .sidebar-brand { }
|
||||
|
||||
.sidebar-header {
|
||||
flex: 0 0 $sidebar-header-height;
|
||||
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
|
||||
text-align: center;
|
||||
background: $sidebar-header-bg;
|
||||
}
|
||||
|
||||
.sidebar-form .form-control {
|
||||
color: $sidebar-form-color;
|
||||
background: $sidebar-form-bg;
|
||||
border: $sidebar-form-border;
|
||||
|
||||
&::placeholder {
|
||||
color: $sidebar-form-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-button { }
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($sidebar-bg, 5%);
|
||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-track-piece { }
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($sidebar-bg, 10%);
|
||||
@@ -57,183 +74,170 @@
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-corner { }
|
||||
|
||||
// &::-webkit-resizer { }
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $sidebar-nav-title-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $sidebar-nav-title-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 10px;
|
||||
}
|
||||
.nav-divider, .divider {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-link-color;
|
||||
text-decoration: none;
|
||||
background: $sidebar-nav-link-bg;
|
||||
@include borders($sidebar-nav-link-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-link-color;
|
||||
text-decoration: none;
|
||||
background: $sidebar-nav-link-bg;
|
||||
@include borders($sidebar-nav-link-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color !important;
|
||||
background: $sidebar-nav-link-hover-bg !important;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
&.active {
|
||||
color: $sidebar-nav-link-active-color;
|
||||
background: $sidebar-nav-link-active-bg;
|
||||
@include borders($sidebar-nav-link-active-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $sidebar-nav-link-active-color;
|
||||
background: $sidebar-nav-link-active-bg;
|
||||
@include borders($sidebar-nav-link-active-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-active-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
margin-top: -4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: ($font-size-base);
|
||||
height: ($font-size-base);
|
||||
padding: 0;
|
||||
font-size: $font-size-base;
|
||||
line-height: ($font-size-base * 3 / 4);
|
||||
text-align: center;
|
||||
content: "\2039";
|
||||
transition: .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
background: $sidebar-nav-dropdown-bg;
|
||||
@include borders($sidebar-nav-dropdown-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
> ul, > ol {
|
||||
// display: inline;
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $sidebar-nav-dropdown-color;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nav-dropdown.open {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
&.nt {
|
||||
transition: 0s !important;
|
||||
> ul, > ol {
|
||||
transition: 0s !important;
|
||||
}
|
||||
.nav-link {
|
||||
&.nav-dropdown-toggle {
|
||||
|
||||
&::before {
|
||||
transition: 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: block;
|
||||
padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-title-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 10px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@if (lightness( $sidebar-bg ) < 40) {
|
||||
.progress {
|
||||
background-color: lighten($sidebar-bg, 15%) !important;
|
||||
}
|
||||
i {
|
||||
color: $sidebar-nav-link-active-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color !important;
|
||||
background: $sidebar-nav-link-hover-bg !important;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
margin-top: -4px;
|
||||
content: "";
|
||||
background-image: $sidebar-nav-dropdown-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <li class="nav-item nav-dropdown">
|
||||
.nav-dropdown.open {
|
||||
background: $sidebar-nav-dropdown-bg;
|
||||
@include borders($sidebar-nav-dropdown-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
> .nav-dropdown-items {
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $sidebar-nav-dropdown-color;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nav-dropdown.open {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: block;
|
||||
padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-title-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 10px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@if (lightness( $sidebar-bg ) < 40) {
|
||||
.progress {
|
||||
background-color: lighten($sidebar-bg, 15%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex: 0 0 $sidebar-footer-height;
|
||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
||||
background: $sidebar-footer-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -283,6 +287,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Minimized Sidebar
|
||||
.sidebar-minimized {
|
||||
.hidden-cn {
|
||||
display: none;
|
||||
@@ -290,10 +295,6 @@
|
||||
.sidebar {
|
||||
z-index: $zindex-sticky - 1;
|
||||
|
||||
&:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
overflow: visible;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
@@ -301,122 +302,94 @@
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav-title, .divider {
|
||||
.nav-divider, .divider,
|
||||
.nav-title,
|
||||
.sidebar-footer,
|
||||
.sidebar-form,
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-minimized-width;
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
overflow: visible;
|
||||
|
||||
> .nav-link {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border-left: 0 !important;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: $sidebar-minimized-height;
|
||||
// padding: 0;
|
||||
// margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-minimized-width;
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
ul {
|
||||
background: $sidebar-bg;
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
.nav-item {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border-left: 0 !important;
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: $sidebar-minimized-height;
|
||||
padding: 0;
|
||||
margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
// top: 14px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
.nav > .nav-dropdown {
|
||||
> .nav-dropdown-items {
|
||||
display: none;
|
||||
max-height: 1000px;
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
> .nav-dropdown-items {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
.nav-link {
|
||||
width: $sidebar-width - $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
background: $sidebar-nav-link-active-bg;
|
||||
> .nav-link i {
|
||||
color: $sidebar-nav-link-active-icon-color;
|
||||
}
|
||||
> ul, > ol {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
overflow: visible;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
transition: 0s;
|
||||
|
||||
> .nav-link {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
> ul, > ol {
|
||||
display: inline;
|
||||
max-height: 10000px;
|
||||
transition: 0s;
|
||||
|
||||
li {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> ul, > ol {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,25 +16,12 @@
|
||||
|
||||
// Open state for the dropdown
|
||||
.open, .show {
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
> .dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
.modal-open .modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// navbar dropdown fix
|
||||
.navbar .dropdown-toggle {
|
||||
@extend .nav-link;
|
||||
|
||||
@@ -72,11 +72,23 @@ $sidebar-compact-width: 150px !default;
|
||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||
$sidebar-color: #fff !default;
|
||||
$sidebar-bg: $gray-800 !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-borders: none !default;
|
||||
$mobile-sidebar-width: 220px !default;
|
||||
|
||||
// Sidebar Header
|
||||
|
||||
$sidebar-header-height: auto !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-header-padding-y: .75rem !default;
|
||||
$sidebar-header-padding-x: 1rem !default;
|
||||
|
||||
// Sidebar Form
|
||||
|
||||
$sidebar-form-border: 0 !default;
|
||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
||||
$sidebar-form-color: #fff !default;
|
||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
||||
|
||||
// Sidebar Navigation
|
||||
|
||||
$sidebar-nav-color: #fff !default;
|
||||
@@ -87,7 +99,7 @@ $sidebar-nav-link-padding-y: .75rem !default;
|
||||
$sidebar-nav-link-padding-x: 1rem !default;
|
||||
$sidebar-nav-link-color: #fff !default;
|
||||
$sidebar-nav-link-bg: transparent !default;
|
||||
$sidebar-nav-link-icon-color: $text-muted !default;
|
||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||
$sidebar-nav-link-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-hover-color: #fff !default;
|
||||
@@ -103,6 +115,17 @@ $sidebar-nav-link-active-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-color: #fff !default;
|
||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-nav-dropdown-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
||||
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
||||
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar Footer
|
||||
|
||||
$sidebar-footer-height: auto !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-padding-y: .75rem !default;
|
||||
$sidebar-footer-padding-x: 1rem !default;
|
||||
|
||||
// Top Navigation
|
||||
|
||||
@@ -131,6 +154,7 @@ $top-nav-height: $navbar-height - 15px !default;
|
||||
|
||||
// Breadcrumb
|
||||
|
||||
$breadcrumb-margin: 0 0 (1.5 * $spacer) 0 !default;
|
||||
$breadcrumb-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* CoreUI - Open Source Bootstrap Admin Template
|
||||
* @version v1.0.0-alpha.6
|
||||
* @version v1.0.0
|
||||
* @link http://coreui.io
|
||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||
* @license MIT
|
||||
@@ -20,14 +20,14 @@
|
||||
// Import Bootstrap source files from bower_components
|
||||
// @import "bower_components/bootstrap/scss/bootstrap";
|
||||
|
||||
// Import vendors styles
|
||||
@import "vendors/vendors";
|
||||
|
||||
// Override core variables
|
||||
@import "core-variables";
|
||||
|
||||
// Import core styles
|
||||
@import "core/core";
|
||||
|
||||
// Import vendors styles
|
||||
@import "vendors/vendors";
|
||||
|
||||
// Custom styles
|
||||
@import "custom";
|
||||
|
||||
Reference in New Issue
Block a user