bottomSheet.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. md-bottom-sheet {
  8. position: absolute;
  9. left: 0;
  10. right: 0;
  11. bottom: 0;
  12. padding: 8px 16px 88px 16px;
  13. z-index: 70;
  14. border-top-width: 1px;
  15. border-top-style: solid;
  16. -webkit-transform: translate3d(0, 80px, 0);
  17. transform: translate3d(0, 80px, 0);
  18. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  19. transition-property: -webkit-transform;
  20. transition-property: transform; }
  21. md-bottom-sheet.md-has-header {
  22. padding-top: 0; }
  23. md-bottom-sheet.ng-enter {
  24. opacity: 0;
  25. -webkit-transform: translate3d(0, 100%, 0);
  26. transform: translate3d(0, 100%, 0); }
  27. md-bottom-sheet.ng-enter-active {
  28. opacity: 1;
  29. display: block;
  30. -webkit-transform: translate3d(0, 80px, 0) !important;
  31. transform: translate3d(0, 80px, 0) !important; }
  32. md-bottom-sheet.ng-leave-active {
  33. -webkit-transform: translate3d(0, 100%, 0) !important;
  34. transform: translate3d(0, 100%, 0) !important;
  35. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  36. md-bottom-sheet .md-subheader {
  37. background-color: transparent;
  38. font-family: Roboto, 'Helvetica Neue', sans-serif;
  39. line-height: 56px;
  40. padding: 0;
  41. white-space: nowrap; }
  42. md-bottom-sheet md-inline-icon {
  43. display: inline-block;
  44. height: 24px;
  45. width: 24px;
  46. fill: #444; }
  47. md-bottom-sheet md-list-item {
  48. display: -webkit-flex;
  49. display: -ms-flexbox;
  50. display: flex;
  51. outline: none; }
  52. md-bottom-sheet md-list-item:hover {
  53. cursor: pointer; }
  54. md-bottom-sheet.md-list md-list-item {
  55. padding: 0;
  56. -webkit-align-items: center;
  57. -ms-flex-align: center;
  58. align-items: center;
  59. height: 48px; }
  60. md-bottom-sheet.md-list md-list-item div.md-icon-container {
  61. display: inline-block;
  62. height: 24px;
  63. margin-right: 32px; }
  64. md-bottom-sheet.md-grid {
  65. padding-left: 24px;
  66. padding-right: 24px;
  67. padding-top: 0; }
  68. md-bottom-sheet.md-grid md-list {
  69. display: -webkit-flex;
  70. display: -ms-flexbox;
  71. display: flex;
  72. -webkit-flex-direction: row;
  73. -ms-flex-direction: row;
  74. flex-direction: row;
  75. -webkit-flex-wrap: wrap;
  76. -ms-flex-wrap: wrap;
  77. flex-wrap: wrap;
  78. transition: all 0.5s;
  79. -webkit-align-items: center;
  80. -ms-flex-align: center;
  81. align-items: center; }
  82. md-bottom-sheet.md-grid md-list-item {
  83. -webkit-flex-direction: column;
  84. -ms-flex-direction: column;
  85. flex-direction: column;
  86. -webkit-align-items: center;
  87. -ms-flex-align: center;
  88. align-items: center;
  89. transition: all 0.5s;
  90. height: 96px;
  91. margin-top: 8px;
  92. margin-bottom: 8px;
  93. /* Mixin for how many grid items to show per row */ }
  94. @media screen and (max-width: 600px) {
  95. md-bottom-sheet.md-grid md-list-item {
  96. -webkit-flex: 1 1 33.33333%;
  97. -ms-flex: 1 1 33.33333%;
  98. flex: 1 1 33.33333%;
  99. max-width: 33.33333%; }
  100. md-bottom-sheet.md-grid md-list-item:nth-of-type(3n+1) {
  101. -webkit-align-items: flex-start;
  102. -ms-flex-align: start;
  103. align-items: flex-start; }
  104. md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
  105. -webkit-align-items: flex-end;
  106. -ms-flex-align: end;
  107. align-items: flex-end; } }
  108. @media screen and (min-width: 600px) and (max-width: 960px) {
  109. md-bottom-sheet.md-grid md-list-item {
  110. -webkit-flex: 1 1 25%;
  111. -ms-flex: 1 1 25%;
  112. flex: 1 1 25%;
  113. max-width: 25%; } }
  114. @media screen and (min-width: 960px) and (max-width: 1200px) {
  115. md-bottom-sheet.md-grid md-list-item {
  116. -webkit-flex: 1 1 16.66667%;
  117. -ms-flex: 1 1 16.66667%;
  118. flex: 1 1 16.66667%;
  119. max-width: 16.66667%; } }
  120. @media screen and (min-width: 1200px) {
  121. md-bottom-sheet.md-grid md-list-item {
  122. -webkit-flex: 1 1 14.28571%;
  123. -ms-flex: 1 1 14.28571%;
  124. flex: 1 1 14.28571%;
  125. max-width: 14.28571%; } }
  126. md-bottom-sheet.md-grid md-list-item .md-list-item-content {
  127. display: -webkit-flex;
  128. display: -ms-flexbox;
  129. display: flex;
  130. -webkit-flex-direction: column;
  131. -ms-flex-direction: column;
  132. flex-direction: column;
  133. -webkit-align-items: center;
  134. -ms-flex-align: center;
  135. align-items: center;
  136. width: 48px;
  137. padding-bottom: 16px; }
  138. md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
  139. border: 1px solid transparent;
  140. display: -webkit-flex;
  141. display: -ms-flexbox;
  142. display: flex;
  143. -webkit-flex-direction: column;
  144. -ms-flex-direction: column;
  145. flex-direction: column;
  146. -webkit-align-items: center;
  147. -ms-flex-align: center;
  148. align-items: center;
  149. width: 80px; }
  150. md-bottom-sheet.md-grid md-list-item .md-icon-container {
  151. display: inline-block;
  152. box-sizing: border-box;
  153. height: 48px;
  154. width: 48px;
  155. margin: 0 0; }
  156. md-bottom-sheet.md-grid md-list-item .md-grid-text {
  157. font-weight: 400;
  158. line-height: 16px;
  159. font-size: 13px;
  160. margin: 0;
  161. white-space: nowrap;
  162. width: 64px;
  163. text-align: center;
  164. text-transform: none;
  165. padding-top: 8px; }
  166. @media screen and (-ms-high-contrast: active) {
  167. md-bottom-sheet {
  168. border: 1px solid #fff; } }