2 * Angular Material Design
3 * https://github.com/angular/material
7 /* mixin definition ; sets LTR and RTL within the same style call */
13 padding: 8px 16px 88px 16px;
15 border-top-width: 1px;
16 border-top-style: solid;
17 -webkit-transform: translate3d(0, 80px, 0);
18 transform: translate3d(0, 80px, 0);
19 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
20 transition-property: -webkit-transform;
21 transition-property: transform; }
22 md-bottom-sheet.md-has-header {
24 md-bottom-sheet.ng-enter {
26 -webkit-transform: translate3d(0, 100%, 0);
27 transform: translate3d(0, 100%, 0); }
28 md-bottom-sheet.ng-enter-active {
31 -webkit-transform: translate3d(0, 80px, 0) !important;
32 transform: translate3d(0, 80px, 0) !important; }
33 md-bottom-sheet.ng-leave-active {
34 -webkit-transform: translate3d(0, 100%, 0) !important;
35 transform: translate3d(0, 100%, 0) !important;
36 transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
37 md-bottom-sheet .md-subheader {
38 background-color: transparent;
39 font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif;
42 white-space: nowrap; }
43 md-bottom-sheet md-inline-icon {
44 display: inline-block;
48 md-bottom-sheet md-list-item {
49 display: -webkit-flex;
53 md-bottom-sheet md-list-item:hover {
55 md-bottom-sheet.md-list md-list-item {
57 -webkit-align-items: center;
58 -ms-flex-align: center;
61 md-bottom-sheet.md-list md-list-item div.md-icon-container {
62 display: inline-block;
65 md-bottom-sheet.md-grid {
69 md-bottom-sheet.md-grid md-list {
70 display: -webkit-flex;
73 -webkit-flex-direction: row;
74 -ms-flex-direction: row;
76 -webkit-flex-wrap: wrap;
80 -webkit-align-items: center;
81 -ms-flex-align: center;
82 align-items: center; }
83 md-bottom-sheet.md-grid md-list-item {
84 -webkit-flex-direction: column;
85 -ms-flex-direction: column;
86 flex-direction: column;
87 -webkit-align-items: center;
88 -ms-flex-align: center;
94 /* Mixin for how many grid items to show per row */ }
95 @media screen and (max-width: 600px) {
96 md-bottom-sheet.md-grid md-list-item {
97 -webkit-flex: 1 1 33.33333%;
98 -ms-flex: 1 1 33.33333%;
100 max-width: 33.33333%; }
101 md-bottom-sheet.md-grid md-list-item:nth-of-type(3n+1) {
102 -webkit-align-items: flex-start;
103 -ms-flex-align: start;
104 align-items: flex-start; }
105 md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
106 -webkit-align-items: flex-end;
108 align-items: flex-end; } }
109 @media screen and (min-width: 600px) and (max-width: 960px) {
110 md-bottom-sheet.md-grid md-list-item {
111 -webkit-flex: 1 1 25%;
115 @media screen and (min-width: 960px) and (max-width: 1200px) {
116 md-bottom-sheet.md-grid md-list-item {
117 -webkit-flex: 1 1 16.66667%;
118 -ms-flex: 1 1 16.66667%;
120 max-width: 16.66667%; } }
121 @media screen and (min-width: 1200px) {
122 md-bottom-sheet.md-grid md-list-item {
123 -webkit-flex: 1 1 14.28571%;
124 -ms-flex: 1 1 14.28571%;
126 max-width: 14.28571%; } }
127 md-bottom-sheet.md-grid md-list-item .md-list-item-content {
128 display: -webkit-flex;
129 display: -ms-flexbox;
131 -webkit-flex-direction: column;
132 -ms-flex-direction: column;
133 flex-direction: column;
134 -webkit-align-items: center;
135 -ms-flex-align: center;
138 padding-bottom: 16px; }
139 md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
140 border: 1px solid transparent;
141 display: -webkit-flex;
142 display: -ms-flexbox;
144 -webkit-flex-direction: column;
145 -ms-flex-direction: column;
146 flex-direction: column;
147 -webkit-align-items: center;
148 -ms-flex-align: center;
151 md-bottom-sheet.md-grid md-list-item .md-icon-container {
152 display: inline-block;
153 box-sizing: border-box;
157 md-bottom-sheet.md-grid md-list-item .md-grid-text {
165 text-transform: none;
168 @media screen and (-ms-high-contrast: active) {
170 border: 1px solid #fff; } }