source: trip-planner-front/node_modules/angular-material/modules/closure/bottomSheet/bottomSheet.css@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 3.5 KB
Line 
1/*!
2 * AngularJS Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.2.3
6 */
7md-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 transform: translate3d(0, 80px, 0);
17 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
18 transition-property: transform; }
19 md-bottom-sheet.md-has-header {
20 padding-top: 0; }
21 md-bottom-sheet.ng-enter {
22 opacity: 0;
23 transform: translate3d(0, 100%, 0); }
24 md-bottom-sheet.ng-enter-active {
25 opacity: 1;
26 display: block;
27 transform: translate3d(0, 80px, 0) !important; }
28 md-bottom-sheet.ng-leave-active {
29 transform: translate3d(0, 100%, 0) !important;
30 transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
31 md-bottom-sheet .md-subheader {
32 background-color: transparent;
33 font-family: Roboto, "Helvetica Neue", sans-serif;
34 line-height: 56px;
35 padding: 0;
36 white-space: nowrap; }
37 md-bottom-sheet md-inline-icon {
38 display: inline-block;
39 height: 24px;
40 width: 24px;
41 fill: #444; }
42 md-bottom-sheet md-list-item {
43 display: flex;
44 outline: none; }
45 md-bottom-sheet md-list-item:hover {
46 cursor: pointer; }
47 md-bottom-sheet.md-list md-list-item {
48 padding: 0;
49 align-items: center;
50 height: 48px; }
51 md-bottom-sheet.md-grid {
52 padding-left: 24px;
53 padding-right: 24px;
54 padding-top: 0; }
55 md-bottom-sheet.md-grid md-list {
56 display: flex;
57 flex-direction: row;
58 flex-wrap: wrap;
59 transition: all 0.5s;
60 align-items: center; }
61 md-bottom-sheet.md-grid md-list-item {
62 flex-direction: column;
63 align-items: center;
64 transition: all 0.5s;
65 height: 96px;
66 margin-top: 8px;
67 margin-bottom: 8px;
68 /* Mixin for how many grid items to show per row */ }
69 @media (max-width: 960px) {
70 md-bottom-sheet.md-grid md-list-item {
71 flex: 1 1 33.33333%;
72 max-width: 33.33333%; }
73 md-bottom-sheet.md-grid md-list-item:nth-of-type(3n + 1) {
74 align-items: flex-start; }
75 md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
76 align-items: flex-end; } }
77 @media (min-width: 960px) and (max-width: 1279px) {
78 md-bottom-sheet.md-grid md-list-item {
79 flex: 1 1 25%;
80 max-width: 25%; } }
81 @media (min-width: 1280px) and (max-width: 1919px) {
82 md-bottom-sheet.md-grid md-list-item {
83 flex: 1 1 16.66667%;
84 max-width: 16.66667%; } }
85 @media (min-width: 1920px) {
86 md-bottom-sheet.md-grid md-list-item {
87 flex: 1 1 14.28571%;
88 max-width: 14.28571%; } }
89 md-bottom-sheet.md-grid md-list-item::before {
90 display: none; }
91 md-bottom-sheet.md-grid md-list-item .md-list-item-content {
92 display: flex;
93 flex-direction: column;
94 align-items: center;
95 width: 48px;
96 padding-bottom: 16px; }
97 md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
98 border: 1px solid transparent;
99 display: flex;
100 flex-direction: column;
101 align-items: center;
102 width: 80px; }
103 md-bottom-sheet.md-grid md-list-item .md-grid-text {
104 font-weight: 400;
105 line-height: 16px;
106 font-size: 13px;
107 margin: 0;
108 white-space: nowrap;
109 width: 64px;
110 text-align: center;
111 text-transform: none;
112 padding-top: 8px; }
113
114@media screen and (-ms-high-contrast: active) {
115 md-bottom-sheet {
116 border: 1px solid #fff; } }
Note: See TracBrowser for help on using the repository browser.