toolbar.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. md-toolbar {
  8. box-sizing: border-box;
  9. display: -webkit-flex;
  10. display: -ms-flexbox;
  11. display: flex;
  12. -webkit-flex-direction: column;
  13. -ms-flex-direction: column;
  14. flex-direction: column;
  15. position: relative;
  16. z-index: 2;
  17. font-size: 20px;
  18. min-height: 64px;
  19. width: 100%; }
  20. md-toolbar.md-whiteframe-z1-add, md-toolbar.md-whiteframe-z1-remove {
  21. transition: box-shadow 0.5s linear; }
  22. md-toolbar md-toolbar-filler {
  23. width: 72px; }
  24. md-toolbar *, md-toolbar *:before, md-toolbar *:after {
  25. box-sizing: border-box; }
  26. md-toolbar.md-tall {
  27. height: 128px;
  28. min-height: 128px;
  29. max-height: 128px; }
  30. md-toolbar.md-medium-tall {
  31. height: 88px;
  32. min-height: 88px;
  33. max-height: 88px; }
  34. md-toolbar.md-medium-tall .md-toolbar-tools {
  35. height: 48px;
  36. min-height: 48px;
  37. max-height: 48px; }
  38. md-toolbar > .md-indent {
  39. margin-left: 64px; }
  40. md-toolbar ~ md-content > md-list {
  41. padding: 0; }
  42. md-toolbar ~ md-content > md-list md-list-item:last-child md-divider {
  43. display: none; }
  44. .md-toolbar-tools {
  45. font-size: 20px;
  46. letter-spacing: 0.005em;
  47. box-sizing: border-box;
  48. font-weight: 400;
  49. display: -webkit-flex;
  50. display: -ms-flexbox;
  51. display: flex;
  52. -webkit-align-items: center;
  53. -ms-flex-align: center;
  54. align-items: center;
  55. -webkit-flex-direction: row;
  56. -ms-flex-direction: row;
  57. flex-direction: row;
  58. width: 100%;
  59. height: 64px;
  60. max-height: 64px;
  61. padding: 0 16px;
  62. margin: 0; }
  63. .md-toolbar-tools h1, .md-toolbar-tools h2, .md-toolbar-tools h3 {
  64. font-size: inherit;
  65. font-weight: inherit;
  66. margin: inherit; }
  67. .md-toolbar-tools a {
  68. color: inherit;
  69. text-decoration: none; }
  70. .md-toolbar-tools .fill-height {
  71. display: -webkit-flex;
  72. display: -ms-flexbox;
  73. display: flex;
  74. -webkit-align-items: center;
  75. -ms-flex-align: center;
  76. align-items: center; }
  77. .md-toolbar-tools .md-button {
  78. margin-top: 0;
  79. margin-bottom: 0; }
  80. .md-toolbar-tools > .md-button:first-child {
  81. margin-left: -8px; }
  82. .md-toolbar-tools > .md-button:last-child {
  83. margin-right: -8px; }
  84. .md-toolbar-tools > md-menu:last-child {
  85. margin-right: -8px; }
  86. .md-toolbar-tools > md-menu:last-child > .md-button {
  87. margin-right: 0; }
  88. @media screen and (-ms-high-contrast: active) {
  89. .md-toolbar-tools {
  90. border-bottom: 1px solid #fff; } }
  91. @media only screen and (min-width: 0) and (max-width: 600px) and (orientation: portrait) {
  92. md-toolbar {
  93. min-height: 56px; }
  94. .md-toolbar-tools {
  95. height: 56px;
  96. max-height: 56px; } }
  97. @media only screen and (min-width: 0) and (max-width: 600px) and (orientation: landscape) {
  98. md-toolbar {
  99. min-height: 48px; }
  100. .md-toolbar-tools {
  101. height: 48px;
  102. max-height: 48px; } }