Home | History | Annotate | Download | only in paper-input 
      1 :host {
      2   display: inline-block;
      3   outline: none;
      4   text-align: inherit;
      5   color: #757575;
      6 }
      7 :host(:hover) {
      8   cursor: text;
      9 }
     10 
     11 #container {
     12   position: relative;
     13 }
     14 
     15 #inputClone,
     16 #minInputHeight,
     17 #maxInputHeight {
     18   position: absolute;
     19   top: 0;
     20   left: 0;
     21   visibility: hidden;
     22   padding: 0.5em 0;
     23 }
     24 
     25 :host /deep/ input,
     26 :host /deep/ textarea {
     27   font: inherit;
     28   color: #000;
     29   padding: 0;
     30   /* Important to use margin here so the margin remains visible
     31    * when textarea scrolls internally. */
     32   margin: 0.5em 0;
     33   background-color: transparent;
     34   border: none;
     35   outline: none;
     36   width: 100%;
     37 }
     38 
     39 :host /deep/ input:invalid,
     40 :host /deep/ textarea:invalid {
     41   box-shadow: none;
     42 }
     43 
     44 .host /deep/ textarea {
     45   resize: none;
     46 }
     47 
     48 #floatedLabel {
     49   font-size: 0.75em;
     50   background: transparent;
     51   white-space: nowrap;
     52 }
     53 #floatedLabel.hidden {
     54   visibility: hidden;
     55 }
     56 #floatedLabel.focused {
     57   visibility: visible;
     58 }
     59 
     60 #label {
     61   position: absolute;
     62   top: 0;
     63   left: 0;
     64   right: 0;
     65   bottom: 0;
     66   width: 100%;
     67   padding: 0.5em 0;
     68   background: transparent;
     69   -moz-transform-origin: 0% 0%;
     70   -webkit-transform-origin: 0% 0%;
     71   transform-origin: 0% 0%;
     72   pointer-events: none;
     73 }
     74 #label.hidden {
     75   display: none;
     76 }
     77 #label.animating {
     78   /* TODO: transforms are unprefixed in M36/ Remove when stable. */
     79   -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
     80   transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
     81 }
     82 
     83 #labelSpan {
     84   overflow: hidden;
     85   text-overflow: ellipsis;
     86   white-space: nowrap;
     87   display: inline-block;
     88   max-width: 100%;
     89 }
     90 
     91 #errorContainer {
     92   visibility: hidden;
     93   display: -webkit-flex;
     94   display: flex;
     95   -webkit-align-items: center;
     96   align-items: center;
     97 }
     98 
     99 :host(.invalid) #errorContainer {
    100   visibility: visible;
    101 }
    102 
    103 #error {
    104   -webkit-flex: 1;
    105   flex: 1;
    106   font-size: 0.75em;
    107   padding: 0.5em 0;
    108 }
    109 
    110 #errorIcon {
    111   background-image: url(error-100.png);
    112   background-size: 24px 24px;
    113   height: 24px;
    114   width: 24px;
    115 }
    116 
    117 
    118 @media (min-resolution: 2dppx) {
    119   #errorIcon {
    120     background-image: url(error-200.png);
    121     background-size: 24px 24px;
    122   }
    123 }
    124 
    125 #underlineContainer {
    126   position: absolute;
    127   left: 0;
    128   right: 0;
    129   bottom: -1px;
    130 }
    131 
    132 :host([multiline]) #underlineContainer {
    133   bottom: auto;
    134 }
    135 
    136 :host([multiline]) #underlineContainer.animating {
    137   -webkit-transition: top 0.2s ease-in;
    138   transition: top 0.2s ease-in;
    139 }
    140 
    141 #underline {
    142   height: 1px;
    143   background: #757575;
    144   border-bottom-color: #757575;
    145 }
    146 
    147 :host([disabled]) #underline {
    148   border-bottom: 1px dashed;
    149   height: 0px;
    150   background: transparent;
    151 }
    152 
    153 #underlineHighlight {
    154   position: absolute;
    155   left: 0;
    156   right: 0;
    157   bottom: 0;
    158   height: 2px;
    159   -webkit-transform: scale(0,2);
    160   transform: scale(0,2);
    161 }
    162 #underlineHighlight.pressed {
    163   -webkit-transform: scale(0.1,2);
    164   transform: scale(0.1,2);
    165   /* TODO: transforms are unprefixed in M36/ Remove when stable. */
    166   -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.2, 0, 0.03, 1);
    167   transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
    168 }
    169 #underlineHighlight.animating {
    170   /* TODO: transforms are unprefixed in M36/ Remove when stable. */
    171   -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
    172   transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
    173 }
    174 #underlineHighlight.focused {
    175   -webkit-transform: scale(1);
    176   transform: scale(1);
    177 }
    178 
    179 #caret {
    180   display: none;
    181   position: absolute;
    182   top: 0;
    183   left: 0;
    184   right: 0;
    185   bottom: 0;
    186   opacity: 0;
    187   -moz-transform-origin: 0%;
    188   -webkit-transform-origin-x: 0%;
    189   transform-origin-x: 0%;
    190   -webkit-transform: scaleX(1) translateX(10%);
    191   transform: scaleX(1) translateX(10%);
    192 }
    193 #caret.animating {
    194   display: block;
    195    /* TODO: transforms are unprefixed in M36/ Remove when stable. */
    196   -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
    197   transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
    198 }
    199 #caret.focused {
    200   display: block;
    201   opacity: 0.75;
    202   -webkit-transform: scaleX(0) translateX(0);
    203   transform: scaleX(0) translateX(0);
    204 }
    205 #caretInner {
    206   position: absolute;
    207   top: 0.6em;
    208   left: 0;
    209   height: 1.2em;
    210   width: 25%;
    211 }
    212