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.

170 lines
5.7 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  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. align-items: center;
  63. height: 48px; }
  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-box;
  70. display: -webkit-flex;
  71. display: flex;
  72. -webkit-box-orient: horizontal;
  73. -webkit-box-direction: normal;
  74. -webkit-flex-direction: row;
  75. flex-direction: row;
  76. -webkit-flex-wrap: wrap;
  77. flex-wrap: wrap;
  78. -webkit-transition: all 0.5s;
  79. transition: all 0.5s;
  80. -webkit-box-align: center;
  81. -webkit-align-items: center;
  82. align-items: center; }
  83. md-bottom-sheet.md-grid md-list-item {
  84. -webkit-box-orient: vertical;
  85. -webkit-box-direction: normal;
  86. -webkit-flex-direction: column;
  87. flex-direction: column;
  88. -webkit-box-align: center;
  89. -webkit-align-items: center;
  90. align-items: center;
  91. -webkit-transition: all 0.5s;
  92. transition: all 0.5s;
  93. height: 96px;
  94. margin-top: 8px;
  95. margin-bottom: 8px;
  96. /* Mixin for how many grid items to show per row */ }
  97. @media (max-width: 960px) {
  98. md-bottom-sheet.md-grid md-list-item {
  99. -webkit-box-flex: 1;
  100. -webkit-flex: 1 1 33.33333%;
  101. flex: 1 1 33.33333%;
  102. max-width: 33.33333%; }
  103. md-bottom-sheet.md-grid md-list-item:nth-of-type(3n + 1) {
  104. -webkit-box-align: start;
  105. -webkit-align-items: flex-start;
  106. align-items: flex-start; }
  107. md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
  108. -webkit-box-align: end;
  109. -webkit-align-items: flex-end;
  110. align-items: flex-end; } }
  111. @media (min-width: 960px) and (max-width: 1279px) {
  112. md-bottom-sheet.md-grid md-list-item {
  113. -webkit-box-flex: 1;
  114. -webkit-flex: 1 1 25%;
  115. flex: 1 1 25%;
  116. max-width: 25%; } }
  117. @media (min-width: 1280px) and (max-width: 1919px) {
  118. md-bottom-sheet.md-grid md-list-item {
  119. -webkit-box-flex: 1;
  120. -webkit-flex: 1 1 16.66667%;
  121. flex: 1 1 16.66667%;
  122. max-width: 16.66667%; } }
  123. @media (min-width: 1920px) {
  124. md-bottom-sheet.md-grid md-list-item {
  125. -webkit-box-flex: 1;
  126. -webkit-flex: 1 1 14.28571%;
  127. flex: 1 1 14.28571%;
  128. max-width: 14.28571%; } }
  129. md-bottom-sheet.md-grid md-list-item::before {
  130. display: none; }
  131. md-bottom-sheet.md-grid md-list-item .md-list-item-content {
  132. display: -webkit-box;
  133. display: -webkit-flex;
  134. display: flex;
  135. -webkit-box-orient: vertical;
  136. -webkit-box-direction: normal;
  137. -webkit-flex-direction: column;
  138. flex-direction: column;
  139. -webkit-box-align: center;
  140. -webkit-align-items: center;
  141. align-items: center;
  142. width: 48px;
  143. padding-bottom: 16px; }
  144. md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
  145. border: 1px solid transparent;
  146. display: -webkit-box;
  147. display: -webkit-flex;
  148. display: flex;
  149. -webkit-box-orient: vertical;
  150. -webkit-box-direction: normal;
  151. -webkit-flex-direction: column;
  152. flex-direction: column;
  153. -webkit-box-align: center;
  154. -webkit-align-items: center;
  155. align-items: center;
  156. width: 80px; }
  157. md-bottom-sheet.md-grid md-list-item .md-grid-text {
  158. font-weight: 400;
  159. line-height: 16px;
  160. font-size: 13px;
  161. margin: 0;
  162. white-space: nowrap;
  163. width: 64px;
  164. text-align: center;
  165. text-transform: none;
  166. padding-top: 8px; }
  167. @media screen and (-ms-high-contrast: active) {
  168. md-bottom-sheet {
  169. border: 1px solid #fff; } }