VToolbar.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. .v-toolbar {
  2. align-items: flex-start;
  3. display: flex;
  4. flex: none;
  5. flex-direction: column;
  6. justify-content: space-between;
  7. max-width: 100%;
  8. position: relative;
  9. transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  10. transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow;
  11. width: 100%;
  12. }
  13. .v-toolbar {
  14. border-color: rgba(var(--v-border-color), var(--v-border-opacity));
  15. border-style: solid;
  16. border-width: 0;
  17. }
  18. .v-toolbar--border {
  19. border-width: thin;
  20. box-shadow: none;
  21. }
  22. .v-toolbar {
  23. box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
  24. }
  25. .v-toolbar {
  26. border-radius: 0;
  27. }
  28. .v-toolbar {
  29. background: rgb(var(--v-theme-surface-light));
  30. color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
  31. }
  32. .v-toolbar--absolute {
  33. position: absolute;
  34. }
  35. .v-toolbar--collapse {
  36. max-width: 112px;
  37. overflow: hidden;
  38. border-end-end-radius: 24px;
  39. }
  40. .v-toolbar--collapse .v-toolbar-title {
  41. display: none;
  42. }
  43. .v-toolbar--flat {
  44. box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
  45. }
  46. .v-toolbar--floating {
  47. display: inline-flex;
  48. }
  49. .v-toolbar--rounded {
  50. border-radius: 4px;
  51. }
  52. .v-toolbar__content,
  53. .v-toolbar__extension {
  54. align-items: center;
  55. display: flex;
  56. flex: 0 0 auto;
  57. position: relative;
  58. transition: inherit;
  59. width: 100%;
  60. }
  61. .v-toolbar__content {
  62. overflow: hidden;
  63. }
  64. .v-toolbar__content > .v-btn:first-child {
  65. margin-inline-start: 4px;
  66. }
  67. .v-toolbar__content > .v-btn:last-child {
  68. margin-inline-end: 4px;
  69. }
  70. .v-toolbar__content > .v-toolbar-title {
  71. margin-inline-start: 20px;
  72. }
  73. .v-toolbar--density-prominent .v-toolbar__content {
  74. align-items: flex-start;
  75. }
  76. .v-toolbar__image {
  77. display: flex;
  78. opacity: var(--v-toolbar-image-opacity, 1);
  79. transition-property: opacity;
  80. }
  81. .v-toolbar__image {
  82. position: absolute;
  83. top: 0;
  84. left: 0;
  85. width: 100%;
  86. height: 100%;
  87. }
  88. .v-toolbar__prepend,
  89. .v-toolbar__append {
  90. align-items: center;
  91. align-self: stretch;
  92. display: flex;
  93. }
  94. .v-toolbar__prepend {
  95. margin-inline: 4px auto;
  96. }
  97. .v-toolbar__append {
  98. margin-inline: auto 4px;
  99. }
  100. .v-toolbar-title {
  101. flex: 1 1;
  102. font-size: 1.25rem;
  103. min-width: 0;
  104. }
  105. .v-toolbar-title {
  106. font-size: 1.25rem;
  107. font-weight: 400;
  108. letter-spacing: 0;
  109. line-height: 1.75rem;
  110. text-transform: none;
  111. }
  112. .v-toolbar--density-prominent .v-toolbar-title {
  113. align-self: flex-end;
  114. padding-bottom: 6px;
  115. }
  116. .v-toolbar--density-prominent .v-toolbar-title {
  117. font-size: 1.5rem;
  118. font-weight: 400;
  119. letter-spacing: 0;
  120. line-height: 2.25rem;
  121. text-transform: none;
  122. }
  123. .v-toolbar-title__placeholder {
  124. overflow: hidden;
  125. text-overflow: ellipsis;
  126. white-space: nowrap;
  127. }
  128. .v-toolbar-items {
  129. display: flex;
  130. height: inherit;
  131. align-self: stretch;
  132. }
  133. .v-toolbar-items > .v-btn {
  134. border-radius: 0;
  135. }