third_party/polymer/components/paper-input/paper-input-decorator.css

   1 /*
   2  * @license
   3  * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5  * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6  * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7  * Code distributed by Google as part of the polymer project is also
   8  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9  */
  10
  11 :host {
  12   display: inline-block;
  13   outline: none;
  14   text-align: inherit;
  15   padding: 0.75em 0;
  16 }
  17
  18 polyfill-next-selector {
  19   content: '.input-body > :not(.label)';
  20 }
  21 ::content > *,
  22 ::content > input[is="core-input"] {
  23   padding: 0;
  24   margin: 0.5em 0 0.25em;
  25   width: 100%;
  26 }
  27
  28 polyfill-next-selector {
  29   content: 'input, textarea';
  30 }
  31 ::content input,
  32 ::content input[is=core-input],
  33 ::content textarea {
  34   font: inherit;
  35   color: inherit;
  36   background-color: transparent;
  37   border: none;
  38   outline: none;
  39 }
  40
  41 polyfill-next-selector {
  42   content: ':invalid';
  43 }
  44 ::content input:invalid,
  45 ::content textarea:invalid {
  46   box-shadow: none;
  47 }
  48
  49 polyfill-next-selector {
  50   content: 'textarea';
  51 }
  52 ::content textarea {
  53   resize: none;
  54 }
  55
  56 [invisible] {
  57   visibility: hidden;
  58 }
  59
  60 [animated] {
  61   visibility: visible !important;
  62   -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  63   transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  64 }
  65
  66 .floated-label {
  67   font-size: 0.75em;
  68   background: transparent;
  69   white-space: nowrap;
  70 }
  71
  72 .mirror-text {
  73   padding: 0.5em 0 0.25em;
  74   max-width: 100%;
  75   white-space: nowrap;
  76 }
  77
  78 :host([multiline]) .mirror-text {
  79   white-space: pre-wrap;
  80   word-wrap: break-word;
  81 }
  82
  83 .label {
  84   padding: 0.5em 0 0.25em;
  85   background: transparent;
  86   pointer-events: none;
  87 }
  88
  89 .label-text {
  90   overflow: hidden;
  91   text-overflow: ellipsis;
  92   white-space: nowrap;
  93   display: inline-block;
  94   max-width: 100%;
  95   -moz-transform-origin: 0% 0%;
  96   -webkit-transform-origin: 0% 0%;
  97   transform-origin: 0% 0%;
  98 }
  99
 100 .underline {
 101   height: 0px;
 102   overflow: visible;
 103 }
 104
 105 :host([disabled]) .underline {
 106   border-bottom: 1px dashed #757575;
 107 }
 108
 109 .unfocused-underline {
 110   height: 1px;
 111 }
 112
 113 .focused-underline {
 114   height: 2px;
 115   -webkit-transform: none;
 116   transform: none;
 117 }
 118
 119 .focused-underline[invisible] {
 120   -webkit-transform: scale3d(0,1,1);
 121   transform: scale3d(0,1,1);
 122 }
 123
 124 .error-text {
 125   font-size: 0.75em;
 126   padding: 0.5em 0;
 127 }
 128
 129 .error-icon {
 130   height: 20px;
 131   width: 20px;
 132 }