ecomp-portal-FE/client/bower_components/angular-material/modules/closure/input/input.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-input-container {
   9   display: -webkit-flex;
  10   display: -ms-flexbox;
  11   display: flex;
  12   position: relative;
  13   -webkit-flex-direction: column;
  14       -ms-flex-direction: column;
  15           flex-direction: column;
  16   padding: 2px;
  17   padding-bottom: 26px;
  18   /*
  19    * The .md-input class is added to the input/textarea
  20    */ }
  21   md-input-container > md-icon {
  22     position: absolute;
  23     top: 5px;
  24     left: 2px; }
  25     md-input-container > md-icon + input {
  26       margin-left: 36px; }
  27   md-input-container textarea, md-input-container input[type="text"], md-input-container input[type="password"], md-input-container input[type="datetime"], md-input-container input[type="datetime-local"], md-input-container input[type="date"], md-input-container input[type="month"], md-input-container input[type="time"], md-input-container input[type="week"], md-input-container input[type="number"], md-input-container input[type="email"], md-input-container input[type="url"], md-input-container input[type="search"], md-input-container input[type="tel"], md-input-container input[type="color"] {
  28     /* remove default appearance from all input/textarea */
  29     -moz-appearance: none;
  30     -webkit-appearance: none; }
  31   md-input-container input[type="date"], md-input-container input[type="datetime-local"], md-input-container input[type="month"], md-input-container input[type="time"], md-input-container input[type="week"] {
  32     min-height: 26px; }
  33   md-input-container textarea {
  34     resize: none;
  35     overflow: hidden; }
  36   md-input-container textarea.md-input {
  37     min-height: 56px;
  38     -ms-flex-preferred-size: auto; }
  39   md-input-container label {
  40     position: relative;
  41     top: -2px; }
  42   md-input-container label:not(.md-no-float), md-input-container .md-placeholder:not(.md-select-label) {
  43     -webkit-order: 1;
  44         -ms-flex-order: 1;
  45             order: 1;
  46     pointer-events: none;
  47     -webkit-font-smoothing: antialiased;
  48     padding-left: 2px;
  49     z-index: 1;
  50     -webkit-transform: translate3d(0, 28px, 0) scale(1);
  51             transform: translate3d(0, 28px, 0) scale(1);
  52     transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
  53     transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
  54     -webkit-transform-origin: left top;
  55             transform-origin: left top; }
  56     html[dir=rtl] md-input-container label:not(.md-no-float), html[dir=rtl] md-input-container .md-placeholder:not(.md-select-label) {
  57       -webkit-transform-origin: right top;
  58               transform-origin: right top; }
  59   md-input-container .md-placeholder:not(.md-select-label) {
  60     position: absolute;
  61     top: 0;
  62     opacity: 0;
  63     transition-property: opacity, -webkit-transform;
  64     transition-property: opacity, transform;
  65     -webkit-transform: translate3d(0, 30px, 0);
  66             transform: translate3d(0, 30px, 0); }
  67   md-input-container.md-input-focused .md-placeholder {
  68     opacity: 1;
  69     -webkit-transform: translate3d(0, 24px, 0);
  70             transform: translate3d(0, 24px, 0); }
  71   md-input-container.md-input-has-value .md-placeholder {
  72     transition: none;
  73     opacity: 0; }
  74   md-input-container:not(.md-input-has-value) input:not(:focus) {
  75     color: transparent; }
  76   md-input-container .md-input {
  77     -webkit-flex: 1 1 auto;
  78         -ms-flex: 1 1 auto;
  79             flex: 1 1 auto;
  80     -webkit-order: 2;
  81         -ms-flex-order: 2;
  82             order: 2;
  83     display: block;
  84     background: none;
  85     padding-top: 2px;
  86     padding-bottom: 1px;
  87     padding-left: 2px;
  88     padding-right: 2px;
  89     border-width: 0 0 1px 0;
  90     line-height: 26px;
  91     -ms-flex-preferred-size: 26px;
  92     border-radius: 0; }
  93     md-input-container .md-input:focus {
  94       outline: none; }
  95     md-input-container .md-input:invalid {
  96       outline: none;
  97       box-shadow: none; }
  98   md-input-container ng-messages, md-input-container data-ng-messages, md-input-container x-ng-messages, md-input-container [ng-messages], md-input-container [data-ng-messages], md-input-container [x-ng-messages] {
  99     -webkit-order: 3;
 100         -ms-flex-order: 3;
 101             order: 3;
 102     position: relative; }
 103   md-input-container ng-message, md-input-container data-ng-message, md-input-container x-ng-message, md-input-container [ng-message], md-input-container [data-ng-message], md-input-container [x-ng-message], md-input-container .md-char-counter {
 104     -webkit-font-smoothing: antialiased;
 105     position: absolute;
 106     font-size: 12px;
 107     line-height: 24px; }
 108     md-input-container ng-message:not(.md-char-counter), md-input-container data-ng-message:not(.md-char-counter), md-input-container x-ng-message:not(.md-char-counter), md-input-container [ng-message]:not(.md-char-counter), md-input-container [data-ng-message]:not(.md-char-counter), md-input-container [x-ng-message]:not(.md-char-counter), md-input-container .md-char-counter:not(.md-char-counter) {
 109       padding-right: 30px; }
 110     md-input-container ng-message.ng-enter, md-input-container data-ng-message.ng-enter, md-input-container x-ng-message.ng-enter, md-input-container [ng-message].ng-enter, md-input-container [data-ng-message].ng-enter, md-input-container [x-ng-message].ng-enter, md-input-container .md-char-counter.ng-enter {
 111       transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 112       transition-delay: 0.2s; }
 113     md-input-container ng-message.ng-leave, md-input-container data-ng-message.ng-leave, md-input-container x-ng-message.ng-leave, md-input-container [ng-message].ng-leave, md-input-container [data-ng-message].ng-leave, md-input-container [x-ng-message].ng-leave, md-input-container .md-char-counter.ng-leave {
 114       transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
 115     md-input-container ng-message.ng-enter, md-input-container ng-message.ng-leave.ng-leave-active, md-input-container data-ng-message.ng-enter, md-input-container data-ng-message.ng-leave.ng-leave-active, md-input-container x-ng-message.ng-enter, md-input-container x-ng-message.ng-leave.ng-leave-active, md-input-container [ng-message].ng-enter, md-input-container [ng-message].ng-leave.ng-leave-active, md-input-container [data-ng-message].ng-enter, md-input-container [data-ng-message].ng-leave.ng-leave-active, md-input-container [x-ng-message].ng-enter, md-input-container [x-ng-message].ng-leave.ng-leave-active, md-input-container .md-char-counter.ng-enter, md-input-container .md-char-counter.ng-leave.ng-leave-active {
 116       opacity: 0;
 117       -webkit-transform: translate3d(0, -20%, 0);
 118               transform: translate3d(0, -20%, 0); }
 119     md-input-container ng-message.ng-leave, md-input-container ng-message.ng-enter.ng-enter-active, md-input-container data-ng-message.ng-leave, md-input-container data-ng-message.ng-enter.ng-enter-active, md-input-container x-ng-message.ng-leave, md-input-container x-ng-message.ng-enter.ng-enter-active, md-input-container [ng-message].ng-leave, md-input-container [ng-message].ng-enter.ng-enter-active, md-input-container [data-ng-message].ng-leave, md-input-container [data-ng-message].ng-enter.ng-enter-active, md-input-container [x-ng-message].ng-leave, md-input-container [x-ng-message].ng-enter.ng-enter-active, md-input-container .md-char-counter.ng-leave, md-input-container .md-char-counter.ng-enter.ng-enter-active {
 120       opacity: 1;
 121       -webkit-transform: translate3d(0, 0, 0);
 122               transform: translate3d(0, 0, 0); }
 123   md-input-container .md-char-counter {
 124     bottom: 2px;
 125     right: 2px; }
 126   md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
 127     -webkit-transform: translate3d(0, 6px, 0) scale(0.75);
 128             transform: translate3d(0, 6px, 0) scale(0.75); }
 129   md-input-container.md-input-focused .md-input, md-input-container .md-input.ng-invalid.ng-dirty {
 130     padding-bottom: 0;
 131     border-width: 0 0 2px 0; }
 132   md-input-container .md-input[disabled], [disabled] md-input-container .md-input {
 133     background-position: 0 bottom;
 134     background-size: 4px 1px;
 135     background-repeat: repeat-x;
 136     margin-bottom: -1px; }
 137
 138 md-input-container.md-icon-float {
 139   margin-top: -16px;
 140   transition: margin-top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
 141   md-input-container.md-icon-float > label {
 142     pointer-events: none;
 143     position: absolute;
 144     margin-left: 36px; }
 145   md-input-container.md-icon-float > md-icon {
 146     top: 26px;
 147     left: 2px; }
 148     md-input-container.md-icon-float > md-icon + input {
 149       margin-left: 36px; }
 150   md-input-container.md-icon-float > input {
 151     padding-top: 24px; }
 152   md-input-container.md-icon-float.md-input-focused, md-input-container.md-icon-float.md-input-has-value {
 153     margin-top: -8px; }
 154     md-input-container.md-icon-float.md-input-focused label, md-input-container.md-icon-float.md-input-has-value label {
 155       -webkit-transform: translate3d(0, 6px, 0) scale(0.75);
 156               transform: translate3d(0, 6px, 0) scale(0.75);
 157       transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s;
 158       transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s; }
 159
 160 @media screen and (-ms-high-contrast: active) {
 161   md-input-container.md-default-theme > md-icon {
 162     fill: #fff; } }