first commit
This commit is contained in:
45
assets/styles/backend/navs/_global.scss
Normal file
45
assets/styles/backend/navs/_global.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
// Global styles for both custom sidebar and topbar compoments
|
||||
|
||||
.sidebar,
|
||||
.topbar {
|
||||
.nav-item {
|
||||
// Customize Dropdown Arrows for Navbar
|
||||
&.dropdown {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
float: right;
|
||||
vertical-align: 0;
|
||||
border: 0;
|
||||
font-weight: 900;
|
||||
content: '\f105';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
.dropdown-toggle::after {
|
||||
content: '\f107';
|
||||
}
|
||||
}
|
||||
}
|
||||
// Counter for nav links and nav link image sizing
|
||||
.nav-link {
|
||||
position: relative;
|
||||
.badge-counter {
|
||||
position: absolute;
|
||||
transform: scale(0.7);
|
||||
transform-origin: top right;
|
||||
right: .25rem;
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
.img-profile {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
487
assets/styles/backend/navs/_navbar.scss
Normal file
487
assets/styles/backend/navs/_navbar.scss
Normal file
@@ -0,0 +1,487 @@
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link.disabled {
|
||||
color: #858796;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #dddfeb;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link {
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid transparent;
|
||||
border-top-left-radius: 0.35rem;
|
||||
border-top-right-radius: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
|
||||
border-color: #eaecf4 #eaecf4 #dddfeb;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.disabled {
|
||||
color: #858796;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active,
|
||||
.nav-tabs .nav-item.show .nav-link {
|
||||
color: #6e707e;
|
||||
background-color: #fff;
|
||||
border-color: #dddfeb #dddfeb #fff;
|
||||
}
|
||||
|
||||
.nav-tabs .dropdown-menu {
|
||||
margin-top: -1px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link {
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .show > .nav-link {
|
||||
color: #fff;
|
||||
background-color: #4e73df;
|
||||
}
|
||||
|
||||
.nav-fill > .nav-link,
|
||||
.nav-fill .nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-justified > .nav-link,
|
||||
.nav-justified .nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-content > .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.navbar .container,
|
||||
.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
padding-top: 0.3125rem;
|
||||
padding-bottom: 0.3125rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-brand:hover, .navbar-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
display: inline-block;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover, .navbar-toggler:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background: 50% / 100% 100% no-repeat;
|
||||
}
|
||||
|
||||
.navbar-nav-scroll {
|
||||
max-height: 75vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.navbar-expand-sm > .container,
|
||||
.navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.navbar-expand-sm {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navbar-expand-sm .navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
.navbar-expand-sm .navbar-nav .dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-expand-sm .navbar-nav .nav-link {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.navbar-expand-sm > .container,
|
||||
.navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.navbar-expand-sm .navbar-nav-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
.navbar-expand-sm .navbar-collapse {
|
||||
display: flex !important;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-sm .navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.navbar-expand-md > .container,
|
||||
.navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-expand-md {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navbar-expand-md .navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
.navbar-expand-md .navbar-nav .dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-expand-md .navbar-nav .nav-link {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.navbar-expand-md > .container,
|
||||
.navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.navbar-expand-md .navbar-nav-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
.navbar-expand-md .navbar-collapse {
|
||||
display: flex !important;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-md .navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar-expand-lg > .container,
|
||||
.navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar-expand-lg {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navbar-expand-lg .navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
.navbar-expand-lg .navbar-nav .dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-expand-lg .navbar-nav .nav-link {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.navbar-expand-lg > .container,
|
||||
.navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.navbar-expand-lg .navbar-nav-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
.navbar-expand-lg .navbar-collapse {
|
||||
display: flex !important;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-lg .navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.navbar-expand-xl > .container,
|
||||
.navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.navbar-expand-xl {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navbar-expand-xl .navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
.navbar-expand-xl .navbar-nav .dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-expand-xl .navbar-nav .nav-link {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.navbar-expand-xl > .container,
|
||||
.navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.navbar-expand-xl .navbar-nav-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
.navbar-expand-xl .navbar-collapse {
|
||||
display: flex !important;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-xl .navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-expand {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.navbar-expand > .container,
|
||||
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navbar-expand .navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navbar-expand .navbar-nav .dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar-expand .navbar-nav .nav-link {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-expand > .container,
|
||||
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.navbar-expand .navbar-nav-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navbar-expand .navbar-collapse {
|
||||
display: flex !important;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.navbar-expand .navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link.disabled {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .show > .nav-link,
|
||||
.navbar-light .navbar-nav .active > .nav-link,
|
||||
.navbar-light .navbar-nav .nav-link.show,
|
||||
.navbar-light .navbar-nav .nav-link.active {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-toggler {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.navbar-light .navbar-text {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-text a {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-brand {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link.disabled {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .show > .nav-link,
|
||||
.navbar-dark .navbar-nav .active > .nav-link,
|
||||
.navbar-dark .navbar-nav .nav-link.show,
|
||||
.navbar-dark .navbar-nav .nav-link.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-toggler {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-text {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-text a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0.125rem 0.25rem 0 rgba(58, 59, 69, 0.2) !important;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
477
assets/styles/backend/navs/_sidebar.scss
Normal file
477
assets/styles/backend/navs/_sidebar.scss
Normal file
@@ -0,0 +1,477 @@
|
||||
// Sidebar
|
||||
.sidebar {
|
||||
width: $sidebar-collapsed-width;
|
||||
min-height: 100vh;
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
padding: 0.75rem 1rem;
|
||||
width: $sidebar-collapsed-width;
|
||||
|
||||
span {
|
||||
font-size: 0.65rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion
|
||||
.collapse {
|
||||
position: absolute;
|
||||
left: calc(#{$sidebar-collapsed-width} + #{$grid-gutter-width} / 2);
|
||||
z-index: 1;
|
||||
top: 2px;
|
||||
// Grow In Animation
|
||||
@extend .animated--grow-in;
|
||||
|
||||
.collapse-inner {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
display: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.collapse,
|
||||
.collapsing {
|
||||
.collapse-inner {
|
||||
padding: .5rem 0;
|
||||
min-width: 10rem;
|
||||
font-size: $dropdown-font-size;
|
||||
margin: 0 0 1rem 0;
|
||||
|
||||
.collapse-header {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
padding: .5rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
font-size: 0.65rem;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.collapse-item {
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0 0.5rem;
|
||||
display: block;
|
||||
color: $gray-900;
|
||||
text-decoration: none;
|
||||
border-radius: $border-radius;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebarToggle {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
font-weight: 900;
|
||||
content: '\f104';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
width: 0 !important;
|
||||
overflow: hidden;
|
||||
|
||||
#sidebarToggle::after {
|
||||
content: '\f105';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
height: $topbar-base-height;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
z-index: 1;
|
||||
|
||||
.sidebar-brand-icon i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
hr.sidebar-divider {
|
||||
margin: 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
font-weight: 800;
|
||||
font-size: 0.65rem;
|
||||
@extend .text-uppercase;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: $font-size-sm;
|
||||
border-radius: $border-radius;
|
||||
color: fade-out($white, 0.2);
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: fade-out($black, 0.9);
|
||||
.sidebar-card-illustration {
|
||||
height: 3rem;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-card-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
font-size: 0.75rem;
|
||||
color: fade-out($white, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.sidebar {
|
||||
width: $sidebar-base-width !important;
|
||||
|
||||
.nav-item {
|
||||
|
||||
// Accordion
|
||||
.collapse {
|
||||
position: relative;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
animation: none;
|
||||
|
||||
.collapse-inner {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
display: block;
|
||||
transition: $transition-collapse;
|
||||
}
|
||||
|
||||
.collapse,
|
||||
.collapsing {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 1rem;
|
||||
width: $sidebar-base-width;
|
||||
|
||||
i {
|
||||
font-size: 0.85rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.85rem;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Accordion Arrow Icon
|
||||
&[data-toggle="collapse"] {
|
||||
&::after {
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
float: right;
|
||||
vertical-align: 0;
|
||||
border: 0;
|
||||
font-weight: 900;
|
||||
content: '\f107';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
}
|
||||
|
||||
&.collapsed::after {
|
||||
content: '\f105';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
.sidebar-brand-icon i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-text {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
overflow: visible;
|
||||
width: $sidebar-collapsed-width !important;
|
||||
|
||||
.nav-item {
|
||||
|
||||
// Accordion
|
||||
.collapse {
|
||||
position: absolute;
|
||||
left: calc(#{$sidebar-collapsed-width} + #{$grid-gutter-width} / 2);
|
||||
z-index: 1;
|
||||
top: 2px;
|
||||
// Grow In Animation for Toggled State
|
||||
animation-name: growIn;
|
||||
animation-duration: 200ms;
|
||||
animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
|
||||
|
||||
.collapse-inner {
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
display: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.collapse,
|
||||
.collapsing {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
padding: 0.75rem 1rem;
|
||||
width: $sidebar-collapsed-width;
|
||||
|
||||
span {
|
||||
font-size: 0.65rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&[data-toggle="collapse"]::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
.sidebar-brand-icon i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Color Variants
|
||||
|
||||
// Sidebar Light
|
||||
.sidebar-light {
|
||||
.sidebar-brand {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
hr.sidebar-divider {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
|
||||
i {
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $gray-700;
|
||||
|
||||
i {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion
|
||||
&[data-toggle="collapse"]::after {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $gray-700;
|
||||
|
||||
i {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color the sidebar toggler
|
||||
#sidebarToggle {
|
||||
background-color: $gray-200;
|
||||
|
||||
&::after {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Dark
|
||||
.sidebar-dark {
|
||||
.sidebar-brand {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
hr.sidebar-divider {
|
||||
border-top: 1px solid fade-out($white, 0.85);
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
color: fade-out($white, 0.6);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: fade-out($white, 0.2);
|
||||
|
||||
i {
|
||||
color: fade-out($white, 0.7);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $white;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion
|
||||
&[data-toggle="collapse"]::after {
|
||||
color: fade-out($white, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color the sidebar toggler
|
||||
#sidebarToggle {
|
||||
background-color: fade-out($white, 0.8);
|
||||
|
||||
&::after {
|
||||
color: fade-out($white, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: fade-out($white, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
#sidebarToggle::after {
|
||||
color: fade-out($white, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
144
assets/styles/backend/navs/_topbar.scss
Normal file
144
assets/styles/backend/navs/_topbar.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
// Topbar
|
||||
.topbar {
|
||||
height: $topbar-base-height;
|
||||
#sidebarToggleTop {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
&:hover {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
&:active {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
}
|
||||
.navbar-search {
|
||||
width: 25rem;
|
||||
input {
|
||||
font-size: 0.85rem;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.topbar-divider {
|
||||
width: 0;
|
||||
border-right: 1px solid $border-color;
|
||||
height: calc(#{$topbar-base-height} - 2rem);
|
||||
margin: auto 1rem;
|
||||
}
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
height: $topbar-base-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.75rem;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
position: static;
|
||||
.dropdown-menu {
|
||||
width: calc(100% - #{$grid-gutter-width});
|
||||
right: calc($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
.dropdown-list {
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
.dropdown-header {
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: $white;
|
||||
}
|
||||
.dropdown-item {
|
||||
white-space: normal;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-left: 1px solid $border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
line-height: 1.3rem;
|
||||
.dropdown-list-image {
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
img {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
.status-indicator {
|
||||
background-color: $gray-200;
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: .125rem solid $white;
|
||||
}
|
||||
}
|
||||
.text-truncate {
|
||||
max-width: 10rem;
|
||||
}
|
||||
&:active {
|
||||
background-color: $gray-200;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
.dropdown {
|
||||
position: relative;
|
||||
.dropdown-menu {
|
||||
width: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.dropdown-list {
|
||||
width: 20rem !important;
|
||||
.dropdown-item {
|
||||
.text-truncate {
|
||||
max-width: 13.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar.navbar-dark {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: fade-out($white, 0.2);
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
&:active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar.navbar-light {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $gray-400;
|
||||
&:hover {
|
||||
color: $gray-500;
|
||||
}
|
||||
&:active {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user