ecomp-portal-FE/client/bower_components/angular-material/modules/closure/switch/switch.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-switch {
   9   display: -webkit-flex;
  10   display: -ms-flexbox;
  11   display: flex;
  12   -webkit-align-items: center;
  13       -ms-flex-align: center;
  14           align-items: center;
  15   margin: 15px;
  16   white-space: nowrap;
  17   cursor: pointer;
  18   outline: none;
  19   -webkit-user-select: none;
  20      -moz-user-select: none;
  21       -ms-user-select: none;
  22           user-select: none; }
  23   md-switch .md-container {
  24     cursor: -webkit-grab;
  25     cursor: grab;
  26     width: 36px;
  27     height: 24px;
  28     position: relative;
  29     -webkit-user-select: none;
  30        -moz-user-select: none;
  31         -ms-user-select: none;
  32             user-select: none;
  33     margin-right: 8px; }
  34   md-switch:not([disabled]) .md-dragging, md-switch:not([disabled]).md-dragging .md-container {
  35     cursor: -webkit-grabbing;
  36     cursor: grabbing; }
  37   md-switch.md-focused:not([disabled]) .md-thumb:before {
  38     left: -8px;
  39     top: -8px;
  40     right: -8px;
  41     bottom: -8px; }
  42   md-switch.md-focused:not([disabled]):not(.md-checked) .md-thumb:before {
  43     background-color: rgba(0, 0, 0, 0.12); }
  44   md-switch .md-label {
  45     border-color: transparent;
  46     border-width: 0; }
  47   md-switch .md-bar {
  48     left: 1px;
  49     width: 34px;
  50     top: 5px;
  51     height: 14px;
  52     border-radius: 8px;
  53     position: absolute; }
  54   md-switch .md-thumb-container {
  55     top: 2px;
  56     left: 0;
  57     width: 16px;
  58     position: absolute;
  59     -webkit-transform: translate3d(0, 0, 0);
  60             transform: translate3d(0, 0, 0);
  61     z-index: 1; }
  62   md-switch.md-checked .md-thumb-container {
  63     -webkit-transform: translate3d(100%, 0, 0);
  64             transform: translate3d(100%, 0, 0); }
  65   md-switch .md-thumb {
  66     position: absolute;
  67     margin: 0;
  68     left: 0;
  69     top: 0;
  70     outline: none;
  71     height: 20px;
  72     width: 20px;
  73     border-radius: 50%;
  74     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.14), 0px 2px 2px 0px rgba(0, 0, 0, 0.098), 0px 1px 5px 0px rgba(0, 0, 0, 0.084); }
  75     md-switch .md-thumb:before {
  76       background-color: transparent;
  77       border-radius: 50%;
  78       content: '';
  79       position: absolute;
  80       display: block;
  81       height: auto;
  82       left: 0;
  83       top: 0;
  84       right: 0;
  85       bottom: 0;
  86       transition: all 0.5s;
  87       width: auto; }
  88     md-switch .md-thumb .md-ripple-container {
  89       position: absolute;
  90       display: block;
  91       width: auto;
  92       height: auto;
  93       left: -20px;
  94       top: -20px;
  95       right: -20px;
  96       bottom: -20px; }
  97   md-switch:not(.md-dragging) .md-bar, md-switch:not(.md-dragging) .md-thumb-container, md-switch:not(.md-dragging) .md-thumb {
  98     transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1);
  99     transition-property: -webkit-transform, background-color;
 100     transition-property: transform, background-color; }
 101   md-switch:not(.md-dragging) .md-bar, md-switch:not(.md-dragging) .md-thumb {
 102     transition-delay: 0.05s; }
 103
 104 @media screen and (-ms-high-contrast: active) {
 105   md-switch.md-default-theme .md-bar {
 106     background-color: #666; }
 107   md-switch.md-default-theme.md-checked .md-bar {
 108     background-color: #9E9E9E; }
 109   md-switch.md-default-theme .md-thumb {
 110     background-color: #fff; } }