145 lines
3.6 KiB
SCSS
145 lines
3.6 KiB
SCSS
// * Logistics Fleet
|
|
// *******************************************************************************
|
|
|
|
@use '../_bootstrap-extended/include' as light;
|
|
@use '../_bootstrap-extended/include-dark' as dark;
|
|
@import '../_components/include';
|
|
@import '../_custom-variables/pages';
|
|
|
|
//Custom variables for Logistics-fleet page
|
|
$logistics-fleet-sidebar-width: 21.5rem !default;
|
|
$logistics-fleet-height: calc(100vh - 14.1rem);
|
|
$logistics-fleet-sidebar-height: calc(100vh - 15.8rem);
|
|
$logistics-fleet-horizontal-height-diff: 2rem;
|
|
|
|
// App logistics-fleet wrapper for sidebar
|
|
.app-logistics-fleet-wrapper {
|
|
position: relative;
|
|
border: none;
|
|
overflow: hidden;
|
|
height: $logistics-fleet-height;
|
|
|
|
@include light.media-breakpoint-down($menu-collapsed-layout-breakpoint) {
|
|
& {
|
|
height: calc(100vh - 10.5rem);
|
|
}
|
|
}
|
|
//setting wrapper height when navbar is hidden
|
|
.layout-navbar-hidden & {
|
|
height: calc(100vh - 6.5rem);
|
|
|
|
//For Sidebar Map menu Scroll
|
|
.logistics-fleet-sidebar-body {
|
|
height: calc($logistics-fleet-sidebar-height + 4rem) !important;
|
|
}
|
|
}
|
|
//Sidebar functionality
|
|
.app-logistics-fleet-sidebar {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
// border-radius: light.$border-radius;
|
|
background-color: light.$card-bg;
|
|
flex-grow: 0;
|
|
flex-basis: $logistics-fleet-sidebar-width;
|
|
left: calc(-#{$logistics-fleet-sidebar-width} - 1.2rem);
|
|
height: 100%;
|
|
width: $logistics-fleet-sidebar-width;
|
|
transition: all 0.3s;
|
|
z-index: 2;
|
|
&.show {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
//Close sidebar button
|
|
.close-sidebar {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
}
|
|
|
|
//Setting sidebar height
|
|
.logistics-fleet-sidebar-body {
|
|
height: calc(100vh - 13rem);
|
|
@include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
|
|
height: $logistics-fleet-sidebar-height !important;
|
|
}
|
|
}
|
|
|
|
@include light.media-breakpoint-down(md) {
|
|
//Setting wrapper height when screen < md
|
|
& {
|
|
height: calc(100vh - 11.5rem);
|
|
//For Sidebar Map menu Scroll
|
|
.logistics-fleet-sidebar-body {
|
|
height: calc($logistics-fleet-sidebar-height + 0.8rem);
|
|
}
|
|
}
|
|
//setting wrapper height when navbar is hidden
|
|
.layout-navbar-hidden & {
|
|
height: calc(100vh - 7.5rem);
|
|
|
|
//For Sidebar Map menu Scroll
|
|
.logistics-fleet-sidebar-body {
|
|
height: calc($logistics-fleet-sidebar-height + 2.5rem) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
//For Sidebar Map menu Button to open in full screen
|
|
@include light.media-breakpoint-up(md) {
|
|
.app-logistics-fleet-sidebar {
|
|
position: static;
|
|
height: auto;
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
// RTL
|
|
@if $enable-rtl-support {
|
|
[dir='rtl'] {
|
|
.app-logistics-fleet-wrapper {
|
|
.app-logistics-fleet-sidebar {
|
|
left: auto;
|
|
right: calc(-#{$logistics-fleet-sidebar-width} - 1.2rem);
|
|
&.show {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
.close-sidebar {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
left: 0.5rem;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Light mode
|
|
@if $enable-light-style {
|
|
.light-style {
|
|
.btn-white.btn-white-dark-variant {
|
|
color: light.$headings-color;
|
|
box-shadow: light.$box-shadow-xs !important;
|
|
}
|
|
}
|
|
}
|
|
//Dark mode
|
|
@if $enable-dark-style {
|
|
.dark-style {
|
|
.app-logistics-fleet-wrapper {
|
|
.app-logistics-fleet-sidebar {
|
|
background-color: dark.$card-bg;
|
|
}
|
|
.btn-white.btn-white-dark-variant {
|
|
border-color: dark.$card-bg;
|
|
background-color: dark.$card-bg;
|
|
color: dark.$headings-color;
|
|
box-shadow: dark.$box-shadow-xs !important;
|
|
}
|
|
}
|
|
}
|
|
}
|