ecomp-portal-FE/client/bower_components/angular-material/modules/closure/bottomSheet/bottomSheet.css

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   6  */
   7 /* mixin definition ; sets LTR and RTL within the same style call */
   8 md-bottom-sheet {
   9   position: absolute;
  10   left: 0;
  11   right: 0;
  12   bottom: 0;
  13   padding: 8px 16px 88px 16px;
  14   z-index: 70;
  15   border-top-width: 1px;
  16   border-top-style: solid;
  17   -webkit-transform: translate3d(0, 80px, 0);
  18           transform: translate3d(0, 80px, 0);
  19   transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  20   transition-property: -webkit-transform;
  21   transition-property: transform; }
  22   md-bottom-sheet.md-has-header {
  23     padding-top: 0; }
  24   md-bottom-sheet.ng-enter {
  25     opacity: 0;
  26     -webkit-transform: translate3d(0, 100%, 0);
  27             transform: translate3d(0, 100%, 0); }
  28   md-bottom-sheet.ng-enter-active {
  29     opacity: 1;
  30     display: block;
  31     -webkit-transform: translate3d(0, 80px, 0) !important;
  32             transform: translate3d(0, 80px, 0) !important; }
  33   md-bottom-sheet.ng-leave-active {
  34     -webkit-transform: translate3d(0, 100%, 0) !important;
  35             transform: translate3d(0, 100%, 0) !important;
  36     transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  37   md-bottom-sheet .md-subheader {
  38     background-color: transparent;
  39     font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif;
  40     line-height: 56px;
  41     padding: 0;
  42     white-space: nowrap; }
  43   md-bottom-sheet md-inline-icon {
  44     display: inline-block;
  45     height: 24px;
  46     width: 24px;
  47     fill: #444; }
  48   md-bottom-sheet md-list-item {
  49     display: -webkit-flex;
  50     display: -ms-flexbox;
  51     display: flex;
  52     outline: none; }
  53     md-bottom-sheet md-list-item:hover {
  54       cursor: pointer; }
  55   md-bottom-sheet.md-list md-list-item {
  56     padding: 0;
  57     -webkit-align-items: center;
  58         -ms-flex-align: center;
  59             align-items: center;
  60     height: 48px; }
  61     md-bottom-sheet.md-list md-list-item div.md-icon-container {
  62       display: inline-block;
  63       height: 24px;
  64       margin-right: 32px; }
  65   md-bottom-sheet.md-grid {
  66     padding-left: 24px;
  67     padding-right: 24px;
  68     padding-top: 0; }
  69     md-bottom-sheet.md-grid md-list {
  70       display: -webkit-flex;
  71       display: -ms-flexbox;
  72       display: flex;
  73       -webkit-flex-direction: row;
  74           -ms-flex-direction: row;
  75               flex-direction: row;
  76       -webkit-flex-wrap: wrap;
  77           -ms-flex-wrap: wrap;
  78               flex-wrap: wrap;
  79       transition: all 0.5s;
  80       -webkit-align-items: center;
  81           -ms-flex-align: center;
  82               align-items: center; }
  83     md-bottom-sheet.md-grid md-list-item {
  84       -webkit-flex-direction: column;
  85           -ms-flex-direction: column;
  86               flex-direction: column;
  87       -webkit-align-items: center;
  88           -ms-flex-align: center;
  89               align-items: center;
  90       transition: all 0.5s;
  91       height: 96px;
  92       margin-top: 8px;
  93       margin-bottom: 8px;
  94       /* Mixin for how many grid items to show per row */ }
  95       @media screen and (max-width: 600px) {
  96         md-bottom-sheet.md-grid md-list-item {
  97           -webkit-flex: 1 1 33.33333%;
  98               -ms-flex: 1 1 33.33333%;
  99                   flex: 1 1 33.33333%;
 100           max-width: 33.33333%; }
 101           md-bottom-sheet.md-grid md-list-item:nth-of-type(3n+1) {
 102             -webkit-align-items: flex-start;
 103                 -ms-flex-align: start;
 104                     align-items: flex-start; }
 105           md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
 106             -webkit-align-items: flex-end;
 107                 -ms-flex-align: end;
 108                     align-items: flex-end; } }
 109       @media screen and (min-width: 600px) and (max-width: 960px) {
 110         md-bottom-sheet.md-grid md-list-item {
 111           -webkit-flex: 1 1 25%;
 112               -ms-flex: 1 1 25%;
 113                   flex: 1 1 25%;
 114           max-width: 25%; } }
 115       @media screen and (min-width: 960px) and (max-width: 1200px) {
 116         md-bottom-sheet.md-grid md-list-item {
 117           -webkit-flex: 1 1 16.66667%;
 118               -ms-flex: 1 1 16.66667%;
 119                   flex: 1 1 16.66667%;
 120           max-width: 16.66667%; } }
 121       @media screen and (min-width: 1200px) {
 122         md-bottom-sheet.md-grid md-list-item {
 123           -webkit-flex: 1 1 14.28571%;
 124               -ms-flex: 1 1 14.28571%;
 125                   flex: 1 1 14.28571%;
 126           max-width: 14.28571%; } }
 127       md-bottom-sheet.md-grid md-list-item .md-list-item-content {
 128         display: -webkit-flex;
 129         display: -ms-flexbox;
 130         display: flex;
 131         -webkit-flex-direction: column;
 132             -ms-flex-direction: column;
 133                 flex-direction: column;
 134         -webkit-align-items: center;
 135             -ms-flex-align: center;
 136                 align-items: center;
 137         width: 48px;
 138         padding-bottom: 16px; }
 139       md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
 140         border: 1px solid transparent;
 141         display: -webkit-flex;
 142         display: -ms-flexbox;
 143         display: flex;
 144         -webkit-flex-direction: column;
 145             -ms-flex-direction: column;
 146                 flex-direction: column;
 147         -webkit-align-items: center;
 148             -ms-flex-align: center;
 149                 align-items: center;
 150         width: 80px; }
 151       md-bottom-sheet.md-grid md-list-item .md-icon-container {
 152         display: inline-block;
 153         box-sizing: border-box;
 154         height: 48px;
 155         width: 48px;
 156         margin: 0 0; }
 157       md-bottom-sheet.md-grid md-list-item .md-grid-text {
 158         font-weight: 400;
 159         line-height: 16px;
 160         font-size: 13px;
 161         margin: 0;
 162         white-space: nowrap;
 163         width: 64px;
 164         text-align: center;
 165         text-transform: none;
 166         padding-top: 8px; }
 167
 168 @media screen and (-ms-high-contrast: active) {
 169   md-bottom-sheet {
 170     border: 1px solid #fff; } }