arnaucube
arnaucube/commonroutesAppPublic Self-hosted repository
commonroutesApp/www/lib/angular-material/modules/closure/toast/toast.css
www/lib/angular-material/modules/closure/toast/toast.cssRaw
  1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.1
  6 */
  7.md-toast-text {
  8  padding: 0 6px; }
  9
 10md-toast {
 11  position: absolute;
 12  z-index: 105;
 13  box-sizing: border-box;
 14  cursor: default;
 15  overflow: hidden;
 16  padding: 8px;
 17  opacity: 1;
 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  /* Transition differently when swiping */
 21  /*
 22   * When the toast doesn't take up the whole screen,
 23   * make it rotate when the user swipes it away
 24   */ }
 25  md-toast .md-toast-content {
 26    display: -webkit-box;
 27    display: -webkit-flex;
 28    display: flex;
 29    direction: row;
 30    -webkit-box-align: center;
 31    -webkit-align-items: center;
 32            align-items: center;
 33    max-height: 168px;
 34    max-width: 100%;
 35    min-height: 48px;
 36    padding: 0 18px;
 37    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 38    border-radius: 2px;
 39    font-size: 14px;
 40    overflow: hidden;
 41    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg);
 42            transform: translate3d(0, 0, 0) rotateZ(0deg);
 43    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 44    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 45    -webkit-box-pack: start;
 46    -webkit-justify-content: flex-start;
 47            justify-content: flex-start; }
 48    md-toast .md-toast-content::before {
 49      content: '';
 50      min-height: 48px;
 51      visibility: hidden;
 52      display: inline-block; }
 53    [dir=rtl] md-toast .md-toast-content {
 54      -webkit-box-pack: end;
 55      -webkit-justify-content: flex-end;
 56              justify-content: flex-end; }
 57    md-toast .md-toast-content span {
 58      -webkit-box-flex: 1;
 59      -webkit-flex: 1 1 0%;
 60              flex: 1 1 0%;
 61      box-sizing: border-box;
 62      min-width: 0; }
 63  md-toast.md-capsule {
 64    border-radius: 24px; }
 65    md-toast.md-capsule .md-toast-content {
 66      border-radius: 24px; }
 67  md-toast.ng-leave-active .md-toast-content {
 68    -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 69    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
 70  md-toast.md-swipeleft .md-toast-content, md-toast.md-swiperight .md-toast-content, md-toast.md-swipeup .md-toast-content, md-toast.md-swipedown .md-toast-content {
 71    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 72    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
 73  md-toast.ng-enter {
 74    opacity: 0; }
 75    md-toast.ng-enter .md-toast-content {
 76      -webkit-transform: translate3d(0, 100%, 0);
 77              transform: translate3d(0, 100%, 0); }
 78    md-toast.ng-enter.md-top .md-toast-content {
 79      -webkit-transform: translate3d(0, -100%, 0);
 80              transform: translate3d(0, -100%, 0); }
 81    md-toast.ng-enter.ng-enter-active {
 82      opacity: 1; }
 83      md-toast.ng-enter.ng-enter-active .md-toast-content {
 84        -webkit-transform: translate3d(0, 0, 0);
 85                transform: translate3d(0, 0, 0); }
 86  md-toast.ng-leave.ng-leave-active .md-toast-content {
 87    opacity: 0;
 88    -webkit-transform: translate3d(0, 100%, 0);
 89            transform: translate3d(0, 100%, 0); }
 90  md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content {
 91    -webkit-transform: translate3d(0, -50%, 0);
 92            transform: translate3d(0, -50%, 0); }
 93  md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content {
 94    -webkit-transform: translate3d(0, 50%, 0);
 95            transform: translate3d(0, 50%, 0); }
 96  md-toast.ng-leave.ng-leave-active.md-top .md-toast-content {
 97    -webkit-transform: translate3d(0, -100%, 0);
 98            transform: translate3d(0, -100%, 0); }
 99  md-toast .md-action {
100    line-height: 19px;
101    margin-left: 24px;
102    margin-right: 0;
103    cursor: pointer;
104    text-transform: uppercase;
105    float: right; }
106  md-toast .md-button {
107    min-width: 0;
108    margin-right: 0;
109    margin-left: 12px; }
110    [dir=rtl] md-toast .md-button {
111      margin-right: 12px; }
112    [dir=rtl] md-toast .md-button {
113      margin-left: 0; }
114
115@media (max-width: 959px) {
116  md-toast {
117    left: 0;
118    right: 0;
119    width: 100%;
120    max-width: 100%;
121    min-width: 0;
122    border-radius: 0;
123    bottom: 0;
124    padding: 0; }
125    md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content {
126      -webkit-transform: translate3d(0, -50%, 0);
127              transform: translate3d(0, -50%, 0); }
128    md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content {
129      -webkit-transform: translate3d(0, 50%, 0);
130              transform: translate3d(0, 50%, 0); } }
131
132@media (min-width: 960px) {
133  md-toast {
134    min-width: 304px;
135    /*
136   * When the toast doesn't take up the whole screen,
137   * make it rotate when the user swipes it away
138   */ }
139    md-toast.md-bottom {
140      bottom: 0; }
141    md-toast.md-left {
142      left: 0; }
143    md-toast.md-right {
144      right: 0; }
145    md-toast.md-top {
146      top: 0; }
147    md-toast._md-start {
148      left: 0; }
149      [dir=rtl] md-toast._md-start {
150        left: auto;
151        right: 0; }
152    md-toast._md-end {
153      right: 0; }
154      [dir=rtl] md-toast._md-end {
155        right: auto;
156        left: 0; }
157    md-toast.ng-leave.ng-leave-active.md-swipeleft .md-toast-content {
158      -webkit-transform: translate3d(-50%, 0, 0);
159              transform: translate3d(-50%, 0, 0); }
160    md-toast.ng-leave.ng-leave-active.md-swiperight .md-toast-content {
161      -webkit-transform: translate3d(50%, 0, 0);
162              transform: translate3d(50%, 0, 0); } }
163
164@media (min-width: 1920px) {
165  md-toast .md-toast-content {
166    max-width: 568px; } }
167
168@media screen and (-ms-high-contrast: active) {
169  md-toast {
170    border: 1px solid #fff; } }
171
172.md-toast-animating {
173  overflow: hidden !important; }