Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(618)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 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/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><html><head><link rel="import" href="../polymer/polymer.html"> 9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../paper-styles/paper-styles.html"> 10 <link rel="import" href="../paper-styles/paper-styles.html">
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
56 The following custom properties and mixins are available for styling: 56 The following custom properties and mixins are available for styling:
57 57
58 Custom property | Description | Default 58 Custom property | Description | Default
59 ----------------|-------------|---------- 59 ----------------|-------------|----------
60 `--paper-input-container-color` | Label and underline color when the input is no t focused | `--secondary-text-color` 60 `--paper-input-container-color` | Label and underline color when the input is no t focused | `--secondary-text-color`
61 `--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color` 61 `--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
62 `--paper-input-container-invalid-color` | Label and underline color when the inp ut is focused | `--google-red-500` 62 `--paper-input-container-invalid-color` | Label and underline color when the inp ut is focused | `--google-red-500`
63 `--paper-input-container-input-color` | Input foreground color | `--primary-text -color` 63 `--paper-input-container-input-color` | Input foreground color | `--primary-text -color`
64 `--paper-input-container` | Mixin applied to the container | `{}` 64 `--paper-input-container` | Mixin applied to the container | `{}`
65 `--paper-input-container-label` | Mixin applied to the label | `{}` 65 `--paper-input-container-label` | Mixin applied to the label | `{}`
66 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu t is focused | `{}`
66 `--paper-input-container-input` | Mixin applied to the input | `{}` 67 `--paper-input-container-input` | Mixin applied to the input | `{}`
68 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
69 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}`
70 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh en the input is disabled | `{}`
67 71
68 This element is `display:block` by default, but you can set the `inline` attribu te to make it 72 This element is `display:block` by default, but you can set the `inline` attribu te to make it
69 `display:inline-block`. 73 `display:inline-block`.
70 --> 74 -->
71 </head><body><dom-module id="paper-input-container"> 75 </head><body><dom-module id="paper-input-container">
72 76
73 <style> 77 <style>
74 78
75 :host { 79 :host {
76 display: block; 80 display: block;
(...skipping 21 matching lines...) Expand all
98 102
99 .focused-line { 103 .focused-line {
100 height: 2px; 104 height: 2px;
101 105
102 -webkit-transform-origin: center center; 106 -webkit-transform-origin: center center;
103 transform-origin: center center; 107 transform-origin: center center;
104 -webkit-transform: scale3d(0,1,1); 108 -webkit-transform: scale3d(0,1,1);
105 transform: scale3d(0,1,1); 109 transform: scale3d(0,1,1);
106 110
107 background: var(--paper-input-container-focus-color, --default-primary-col or); 111 background: var(--paper-input-container-focus-color, --default-primary-col or);
112
113 @apply(--paper-input-container-underline-focus);
108 } 114 }
109 115
110 .underline.is-highlighted .focused-line { 116 .underline.is-highlighted .focused-line {
111 -webkit-transform: none; 117 -webkit-transform: none;
112 transform: none; 118 transform: none;
113 -webkit-transition: -webkit-transform 0.25s; 119 -webkit-transition: -webkit-transform 0.25s;
114 transition: transform 0.25s; 120 transition: transform 0.25s;
115 121
116 @apply(--paper-transition-easing); 122 @apply(--paper-transition-easing);
117 } 123 }
118 124
119 .underline.is-invalid .focused-line { 125 .underline.is-invalid .focused-line {
120 background: var(--paper-input-container-invalid-color, --google-red-500); 126 background: var(--paper-input-container-invalid-color, --google-red-500);
121 127
122 -webkit-transform: none; 128 -webkit-transform: none;
123 transform: none; 129 transform: none;
124 -webkit-transition: -webkit-transform 0.25s; 130 -webkit-transition: -webkit-transform 0.25s;
125 transition: transform 0.25s; 131 transition: transform 0.25s;
126 132
127 @apply(--paper-transition-easing); 133 @apply(--paper-transition-easing);
128 } 134 }
129 135
130 .unfocused-line { 136 .unfocused-line {
131 height: 1px; 137 height: 1px;
132 background: var(--paper-input-container-color, --secondary-text-color); 138 background: var(--paper-input-container-color, --secondary-text-color);
139
140 @apply(--paper-input-container-underline);
133 } 141 }
134 142
135 :host([disabled]) .unfocused-line { 143 :host([disabled]) .unfocused-line {
136 border-bottom: 1px dashed; 144 border-bottom: 1px dashed;
137 border-color: var(--paper-input-container-color, --secondary-text-color); 145 border-color: var(--paper-input-container-color, --secondary-text-color);
138 background: transparent; 146 background: transparent;
147
148 @apply(--paper-input-container-underline-disabled);
139 } 149 }
140 150
141 .input-content { 151 .input-content {
142 position: relative; 152 position: relative;
143 } 153 }
144 154
145 .input-content ::content label, 155 .input-content ::content label,
146 .input-content ::content .paper-input-label { 156 .input-content ::content .paper-input-label {
147 position: absolute; 157 position: absolute;
148 top: 0; 158 top: 0;
(...skipping 14 matching lines...) Expand all
163 transform-origin: left top; 173 transform-origin: left top;
164 -webkit-transition: -webkit-transform 0.25s; 174 -webkit-transition: -webkit-transform 0.25s;
165 transition: transform 0.25s; 175 transition: transform 0.25s;
166 176
167 @apply(--paper-transition-easing); 177 @apply(--paper-transition-easing);
168 } 178 }
169 179
170 .input-content.label-is-highlighted ::content label, 180 .input-content.label-is-highlighted ::content label,
171 .input-content.label-is-highlighted ::content .paper-input-label { 181 .input-content.label-is-highlighted ::content .paper-input-label {
172 color: var(--paper-input-container-focus-color, --default-primary-color); 182 color: var(--paper-input-container-focus-color, --default-primary-color);
183
184 @apply(--paper-input-container-label-focus);
173 } 185 }
174 186
175 .input-content.is-invalid ::content label, 187 .input-content.is-invalid ::content label,
176 .input-content.is-invalid ::content .paper-input-label { 188 .input-content.is-invalid ::content .paper-input-label {
177 color: var(--paper-input-container-invalid-color, --google-red-500); 189 color: var(--paper-input-container-invalid-color, --google-red-500);
178 } 190 }
179 191
180 .input-content.label-is-hidden ::content label, 192 .input-content.label-is-hidden ::content label,
181 .input-content.label-is-hidden ::content .paper-input-label { 193 .input-content.label-is-hidden ::content .paper-input-label {
182 visibility: hidden; 194 visibility: hidden;
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
235 247
236 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> 248 <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
237 <content id="addOnContent" select="[add-on]"></content> 249 <content id="addOnContent" select="[add-on]"></content>
238 </div> 250 </div>
239 251
240 </template> 252 </template>
241 253
242 </dom-module> 254 </dom-module>
243 255
244 <script src="paper-input-container-extracted.js"></script></body></html> 256 <script src="paper-input-container-extracted.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698