/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.9.8 */ /* mixin definition ; sets LTR and RTL within the same style call */ md-bottom-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 16px 88px 16px; z-index: 70; border-top-width: 1px; border-top-style: solid; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition-property: -webkit-transform; transition-property: transform; } md-bottom-sheet.md-has-header { padding-top: 0; } md-bottom-sheet.ng-enter { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } md-bottom-sheet.ng-enter-active { opacity: 1; display: block; -webkit-transform: translate3d(0, 80px, 0) !important; transform: translate3d(0, 80px, 0) !important; } md-bottom-sheet.ng-leave-active { -webkit-transform: translate3d(0, 100%, 0) !important; transform: translate3d(0, 100%, 0) !important; transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); } md-bottom-sheet .md-subheader { background-color: transparent; font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif; line-height: 56px; padding: 0; white-space: nowrap; } md-bottom-sheet md-inline-icon { display: inline-block; height: 24px; width: 24px; fill: #444; } md-bottom-sheet md-list-item { display: -webkit-flex; display: -ms-flexbox; display: flex; outline: none; } md-bottom-sheet md-list-item:hover { cursor: pointer; } md-bottom-sheet.md-list md-list-item { padding: 0; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 48px; } md-bottom-sheet.md-list md-list-item div.md-icon-container { display: inline-block; height: 24px; margin-right: 32px; } md-bottom-sheet.md-grid { padding-left: 24px; padding-right: 24px; padding-top: 0; } md-bottom-sheet.md-grid md-list { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; transition: all 0.5s; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } md-bottom-sheet.md-grid md-list-item { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; transition: all 0.5s; height: 96px; margin-top: 8px; margin-bottom: 8px; /* Mixin for how many grid items to show per row */ } @media screen and (max-width: 600px) { md-bottom-sheet.md-grid md-list-item { -webkit-flex: 1 1 33.33333%; -ms-flex: 1 1 33.33333%; flex: 1 1 33.33333%; max-width: 33.33333%; } md-bottom-sheet.md-grid md-list-item:nth-of-type(3n+1) { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } } @media screen and (min-width: 600px) and (max-width: 960px) { md-bottom-sheet.md-grid md-list-item { -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; max-width: 25%; } } @media screen and (min-width: 960px) and (max-width: 1200px) { md-bottom-sheet.md-grid md-list-item { -webkit-flex: 1 1 16.66667%; -ms-flex: 1 1 16.66667%; flex: 1 1 16.66667%; max-width: 16.66667%; } } @media screen and (min-width: 1200px) { md-bottom-sheet.md-grid md-list-item { -webkit-flex: 1 1 14.28571%; -ms-flex: 1 1 14.28571%; flex: 1 1 14.28571%; max-width: 14.28571%; } } md-bottom-sheet.md-grid md-list-item .md-list-item-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 48px; padding-bottom: 16px; } md-bottom-sheet.md-grid md-list-item .md-grid-item-content { border: 1px solid transparent; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 80px; } md-bottom-sheet.md-grid md-list-item .md-icon-container { display: inline-block; box-sizing: border-box; height: 48px; width: 48px; margin: 0 0; } md-bottom-sheet.md-grid md-list-item .md-grid-text { font-weight: 400; line-height: 16px; font-size: 13px; margin: 0; white-space: nowrap; width: 64px; text-align: center; text-transform: none; padding-top: 8px; } @media screen and (-ms-high-contrast: active) { md-bottom-sheet { border: 1px solid #fff; } }