You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

174 lines
5.9 KiB

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