VToolbar.sass 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. // Block
  5. .v-toolbar
  6. align-items: flex-start
  7. display: flex
  8. flex: $toolbar-flex
  9. flex-direction: column
  10. justify-content: space-between
  11. max-width: 100%
  12. position: relative
  13. transition: $toolbar-transition
  14. transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow
  15. width: 100%
  16. @include tools.border($toolbar-border...)
  17. @include tools.elevation($toolbar-elevation)
  18. @include tools.rounded($toolbar-border-radius)
  19. @include tools.theme($toolbar-theme...)
  20. &--absolute
  21. position: absolute
  22. &--collapse
  23. max-width: $toolbar-collapsed-max-width
  24. overflow: hidden
  25. border-end-end-radius: $toolbar-collapsed-border-radius
  26. .v-toolbar-title
  27. display: none
  28. &--flat
  29. @include tools.elevation($toolbar-flat-elevation)
  30. &--floating
  31. display: inline-flex
  32. &--rounded
  33. @include tools.rounded($toolbar-rounded-border-radius)
  34. .v-toolbar__content,
  35. .v-toolbar__extension
  36. align-items: center
  37. display: flex
  38. flex: 0 0 auto
  39. position: relative
  40. transition: inherit
  41. width: 100%
  42. .v-toolbar__content
  43. overflow: hidden
  44. > .v-btn:first-child
  45. margin-inline-start: $toolbar-prepend-btn-margin-start
  46. > .v-btn:last-child
  47. margin-inline-end: $toolbar-append-btn-margin-end
  48. > .v-toolbar-title
  49. margin-inline-start: $toolbar-title-margin
  50. .v-toolbar--density-prominent &
  51. align-items: flex-start
  52. .v-toolbar__image
  53. display: flex
  54. opacity: var(--v-toolbar-image-opacity, 1)
  55. transition-property: opacity
  56. @include tools.absolute()
  57. .v-toolbar__prepend,
  58. .v-toolbar__append
  59. align-items: center
  60. align-self: stretch
  61. display: flex
  62. .v-toolbar__prepend
  63. margin-inline: $toolbar-prepend-btn-margin-start auto
  64. .v-toolbar__append
  65. margin-inline: auto $toolbar-append-btn-margin-end
  66. .v-toolbar-title
  67. flex: 1 1
  68. font-size: $toolbar-title-font-size
  69. min-width: 0
  70. @include tools.typography($toolbar-title-typography...)
  71. .v-toolbar--density-prominent &
  72. align-self: flex-end
  73. padding-bottom: 6px
  74. @include tools.typography($toolbar-prominent-title-typography...)
  75. .v-toolbar-title__placeholder
  76. overflow: hidden
  77. text-overflow: ellipsis
  78. white-space: nowrap
  79. .v-toolbar-items
  80. display: flex
  81. height: inherit
  82. align-self: stretch
  83. > .v-btn
  84. border-radius: 0