angular-material
Version:
**[Support for legacy AngularJS ended on January 1st, 2022](https://goo.gle/angularjs-end-of-life). [See `@angular/core` for the actively supported Angular](https://npmjs.com/@angular/core).**
145 lines (144 loc) • 3.26 kB
CSS
/*!
* AngularJS Material Design
* https://github.com/angular/material
* @license MIT
* v1.2.5
*/
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;
transform: translate3d(0, 80px, 0);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition-property: transform;
}
md-bottom-sheet.md-has-header {
padding-top: 0;
}
md-bottom-sheet.ng-enter {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
md-bottom-sheet.ng-enter-active {
opacity: 1;
display: block;
transform: translate3d(0, 80px, 0) ;
}
md-bottom-sheet.ng-leave-active {
transform: translate3d(0, 100%, 0) ;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-bottom-sheet .md-subheader {
background-color: transparent;
font-family: 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: flex;
outline: none;
}
md-bottom-sheet md-list-item:hover {
cursor: pointer;
}
md-bottom-sheet.md-list md-list-item {
padding: 0;
align-items: center;
height: 48px;
}
md-bottom-sheet.md-grid {
padding-left: 24px;
padding-right: 24px;
padding-top: 0;
}
md-bottom-sheet.md-grid md-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
transition: all 0.5s;
align-items: center;
}
md-bottom-sheet.md-grid md-list-item {
flex-direction: column;
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 (max-width: 960px) {
md-bottom-sheet.md-grid md-list-item {
flex: 1 1 33.3333333333%;
max-width: 33.3333333333%;
}
md-bottom-sheet.md-grid md-list-item:nth-of-type(3n + 1) {
align-items: flex-start;
}
md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
align-items: flex-end;
}
}
@media (min-width: 960px) and (max-width: 1279px) {
md-bottom-sheet.md-grid md-list-item {
flex: 1 1 25%;
max-width: 25%;
}
}
@media (min-width: 1280px) and (max-width: 1919px) {
md-bottom-sheet.md-grid md-list-item {
flex: 1 1 16.6666666667%;
max-width: 16.6666666667%;
}
}
@media (min-width: 1920px) {
md-bottom-sheet.md-grid md-list-item {
flex: 1 1 14.2857142857%;
max-width: 14.2857142857%;
}
}
md-bottom-sheet.md-grid md-list-item::before {
display: none;
}
md-bottom-sheet.md-grid md-list-item .md-list-item-content {
display: flex;
flex-direction: column;
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: flex;
flex-direction: column;
align-items: center;
width: 80px;
}
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;
}
}