Nessuna descrizione
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

app-logistics-fleet.scss 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. /* Logistics Fleet
  2. ******************************************************************************* */
  3. @import "../_bootstrap-extended/include";
  4. @import "../_components/include";
  5. // Custom variables for Logistics-fleet page
  6. $logistics-fleet-sidebar-width: 21.5rem !default;
  7. $logistics-fleet-height: calc(100vh - 14.1rem);
  8. $logistics-fleet-sidebar-height: calc(100vh - 15.8rem);
  9. $logistics-fleet-horizontal-height-diff: 2rem;
  10. /* App logistics-fleet wrapper for sidebar */
  11. .app-logistics-fleet-wrapper {
  12. position: relative;
  13. overflow: hidden;
  14. border: none;
  15. block-size: $logistics-fleet-height;
  16. @include media-breakpoint-down($menu-collapsed-layout-breakpoint) {
  17. & {
  18. block-size: calc(100vh - 10.5rem);
  19. }
  20. }
  21. /* setting wrapper height when navbar is hidden */
  22. .layout-navbar-hidden & {
  23. block-size: calc(100vh - 6.5rem);
  24. // For Sidebar Map menu Scroll
  25. .logistics-fleet-sidebar-body {
  26. block-size: calc($logistics-fleet-sidebar-height + 4rem);
  27. }
  28. }
  29. /* Sidebar functionality */
  30. .app-logistics-fleet-sidebar {
  31. position: absolute;
  32. z-index: 2;
  33. overflow: hidden;
  34. flex-basis: $logistics-fleet-sidebar-width;
  35. flex-grow: 0;
  36. background-color: var(--#{$prefix}paper-bg);
  37. block-size: 100%;
  38. inline-size: $logistics-fleet-sidebar-width;
  39. inset-inline-start: calc(-#{$logistics-fleet-sidebar-width} - 1.2rem);
  40. transition: all .3s;
  41. &.show {
  42. inset-inline-start: 0;
  43. }
  44. }
  45. /* Close sidebar button */
  46. .close-sidebar {
  47. position: absolute;
  48. background-color: var(--#{$prefix}heading-color);
  49. inset-block-start: 1.5rem;
  50. inset-inline-end: 1.5rem;
  51. }
  52. /* Setting sidebar height */
  53. .logistics-fleet-sidebar-body {
  54. block-size: calc(100vh - 13rem);
  55. @include media-breakpoint-up($menu-collapsed-layout-breakpoint) {
  56. block-size: $logistics-fleet-sidebar-height;
  57. }
  58. }
  59. @include media-breakpoint-down(md) {
  60. /* Setting wrapper height when screen < md */
  61. & {
  62. block-size: calc(100vh - 11.5rem);
  63. /* For Sidebar Map menu Scroll */
  64. .logistics-fleet-sidebar-body {
  65. block-size: calc($logistics-fleet-sidebar-height + .8rem);
  66. }
  67. }
  68. /* Setting wrapper height when navbar is hidden */
  69. .layout-navbar-hidden & {
  70. block-size: calc(100vh - 7.5rem);
  71. /* For Sidebar Map menu Scroll */
  72. .logistics-fleet-sidebar-body {
  73. block-size: calc($logistics-fleet-sidebar-height + 2.5rem);
  74. }
  75. }
  76. }
  77. /* For Sidebar Map menu Button to open in full screen */
  78. @include media-breakpoint-up(md) {
  79. .app-logistics-fleet-sidebar {
  80. position: static;
  81. background-color: transparent;
  82. block-size: auto;
  83. }
  84. }
  85. .btn-white.btn-white-dark-variant {
  86. box-shadow: $box-shadow-xs;
  87. color: $headings-color;
  88. }
  89. }