gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v1.1.3
   6  */
   7 .md-toast-text {
   8   padding: 0 6px; }
   9
  10 md-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; }