VNavigationDrawer.sass 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. .v-navigation-drawer
  5. -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling
  6. background: $navigation-drawer-background
  7. display: flex
  8. flex-direction: column
  9. height: $navigation-drawer-height
  10. max-width: 100%
  11. pointer-events: auto
  12. transition-duration: $navigation-drawer-transition-duration
  13. transition-property: $navigation-drawer-transition-property
  14. transition-timing-function: $navigation-drawer-transition-timing-function
  15. position: absolute
  16. @include tools.border($navigation-drawer-border...)
  17. @include tools.elevation($navigation-drawer-elevation)
  18. @include tools.rounded($navigation-drawer-border-radius)
  19. @include tools.theme($navigation-drawer-theme...)
  20. &--rounded
  21. @include tools.rounded($navigation-drawer-rounded-border-radius)
  22. &--top,
  23. &--bottom
  24. max-height: -webkit-fill-available
  25. overflow-y: auto
  26. &--top
  27. top: 0
  28. border-bottom-width: $navigation-drawer-border-thin-width
  29. &--bottom
  30. left: 0
  31. border-top-width: $navigation-drawer-border-thin-width
  32. &--left
  33. top: 0
  34. left: 0
  35. right: auto
  36. border-right-width: $navigation-drawer-border-thin-width
  37. &--right
  38. top: 0
  39. left: auto
  40. right: 0
  41. border-left-width: $navigation-drawer-border-thin-width
  42. &--floating
  43. border: none
  44. &--temporary.v-navigation-drawer--active
  45. @include tools.elevation($navigation-drawer-temporary-elevation)
  46. &--sticky
  47. height: auto
  48. transition: box-shadow, transform, visibility, width, height, left, right
  49. .v-list
  50. overflow: hidden
  51. .v-navigation-drawer__content
  52. flex: 0 1 auto
  53. height: $navigation-drawer-content-height
  54. max-width: 100%
  55. overflow-x: $navigation-drawer-content-overflow-x
  56. overflow-y: $navigation-drawer-content-overflow-y
  57. .v-navigation-drawer__img
  58. height: 100%
  59. left: 0
  60. position: absolute
  61. top: 0
  62. width: 100%
  63. z-index: -1
  64. // TODO: remove in v4
  65. img:not(.v-img__img)
  66. height: $navigation-drawer-img-height
  67. object-fit: $navigation-drawer-img-object-fit
  68. width: $navigation-drawer-img-width
  69. .v-navigation-drawer__scrim
  70. position: absolute
  71. top: 0
  72. left: 0
  73. width: 100%
  74. height: 100%
  75. background: black
  76. opacity: $navigation-drawer-scrim-opacity
  77. transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function
  78. z-index: 1
  79. .v-navigation-drawer__prepend,
  80. .v-navigation-drawer__append
  81. flex: none
  82. overflow: hidden