third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html - Issue 1082403004: Import Polymer 0.8 and several key elements.

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

Issue 1082403004: Import Polymer 0.8 and several key elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Also remove polymer/explainer Created 5 years, 7 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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-input/paper-input-char-counter-extracted.js ('k') | third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!--

	2 @license

	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

	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

	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

	9 --><html><head><link rel="import" href="../polymer/polymer.html">

	10 <link rel="import" href="../paper-styles/paper-styles.html">

	11

	12 <style is="x-style">

	13

	14 * {

	15

	16 --paper-input-container-font: var(--paper-font-subhead);

	17 --paper-input-container-floating-label-font: var(--paper-font-caption);

	18 --paper-input-container-add-on-font: var(--paper-font-caption);

	19

	20 --paper-input-container-focus-color: var(--default-primary-color);

	21 --paper-input-container-color: var(--secondary-text-color);

	22 --paper-input-container-invalid-color: var(--google-red-500);

	23 --paper-input-container-input-color: var(--primary-text-color);

	24

	25 }

	26

	27 </style>

	28

	29 <!--

	30 `<paper-input-container>` wraps an `<input>` and `<label>` element, decorating

	31 them following the [Material Design spec](http://www.google.com/design/spec/comp onents/text-fields.html#text-fields-single-line-text-field)

	32

	33 For example:

	34

	35 <paper-input-container>

	36 <label>email address</label>

	37 <input type="email">

	38 </paper-input-container>

	39

	40 -->

	41 </head><body><dom-module id="paper-input-container">

	42

	43 <style>

	44

	45 :host {

	46 display: block;

	47 padding: 8px 0;

	48

	49 --mixin(--paper-input-container);

	50 }

	51

	52 .floated-label-placeholder {

	53 mixin(--paper-input-container-label-font);

	54 }

	55

	56 .focused-line {

	57 height: 2px;

	58

	59 -webkit-transform-origin: center center;

	60 transform-origin: center center;

	61 -webkit-transform: scale3d(0,1,1);

	62 transform: scale3d(0,1,1);

	63

	64 background: var(--paper-input-container-focus-color);

	65 }

	66

	67 .is-highlighted .focused-line {

	68 -webkit-transform: none;

	69 transform: none;

	70 -webkit-transition: -webkit-transform 0.25s;

	71 transition: transform 0.25s;

	72

	73 mixin(--paper-transition-easing);

	74 }

	75

	76 .is-invalid .focused-line {

	77 background: var(--paper-input-container-invalid-color);

	78

	79 -webkit-transform: none;

	80 transform: none;

	81 -webkit-transition: -webkit-transform 0.25s;

	82 transition: transform 0.25s;

	83

	84 mixin(--paper-transition-easing);

	85 }

	86

	87 .unfocused-line {

	88 height: 1px;

	89 background: var(--paper-input-container-color);

	90 }

	91

	92 .input-content ::content label,

	93 .input-content ::content .paper-input-label {

	94 position: absolute;

	95 top: 0;

	96 right: 0;

	97 left: 0;

	98 font: inherit;

	99 color: var(--paper-input-container-color);

	100

	101 mixin(--paper-input-container-font);

	102

	103 mixin(--paper-input-container-label);

	104 }

	105

	106 .input-content.label-is-floating ::content label,

	107 .input-content.label-is-floating ::content .paper-input-label {

	108 -webkit-transform: translate3d(0, -75%, 0) scale(0.75);

	109 transform: translate3d(0, -75%, 0) scale(0.75);

	110 -webkit-transform-origin: left top;

	111 transform-origin: left top;

	112 -webkit-transition: -webkit-transform 0.25s;

	113 transition: transform 0.25s;

	114

	115 mixin(--paper-transition-easing);

	116 }

	117

	118 .input-content.label-is-highlighted ::content label,

	119 .input-content.label-is-highlighted ::content .paper-input-label {

	120 color: var(--paper-input-container-focus-color);

	121 }

	122

	123 .input-content.is-invalid ::content label,

	124 .input-content.is-invalid ::content .paper-input-label {

	125 color: var(--paper-input-container-invalid-color);

	126 }

	127

	128 .input-content.label-is-hidden ::content label,

	129 .input-content.label-is-hidden ::content .paper-input-label {

	130 visibility: hidden;

	131 }

	132

	133 .input-content ::content input,

	134 .input-content ::content textarea,

	135 .input-content ::content .paper-input-input {

	136 position: relative; /* to make a stacking context */

	137 outline: none;

	138 color: var(--paper-input-container-input-color);

	139

	140 mixin(--paper-input-container-floating-label-font);

	141 }

	142

	143 .input-content ::content input,

	144 .input-content ::content textarea {

	145 padding: 0;

	146 width: 100%;

	147 background: transparent;

	148 border: none;

	149

	150 mixin(--paper-input-container-font);

	151

	152 mixin(--paper-input-container-input);

	153 }

	154

	155 .input-content ::content textarea {

	156 resize: none;

	157 }

	158

	159 .add-on-content.is-invalid ::content * {

	160 color: var(--paper-input-container-invalid-color);

	161 }

	162

	163 .add-on-content.is-highlighted ::content * {

	164 color: var(--paper-input-container-focus-color);

	165 }

	166

	167 </style>

	168

	169 <template>

	170

	171 <template is="x-if" if="[[!noLabelFloat]]">

	172 <div class="floated-label-placeholder"> </div>

	173 </template>

	174

	175 <div class$="[[_computeInputContentClass(noLabelFloat,focused,_inputHasConte nt,_inputIsInvalid)]]">

	176 <content select=":not([add-on])"></content>

	177 </div>

	178

	179 <div class$="[[_computeUnderlineClass(focused,_inputIsInvalid)]]">

	180 <div class="unfocused-line fit"></div>

	181 <div class="focused-line fit"></div>

	182 </div>

	183

	184 <div class$="[[_computeAddOnContentClass(focused,_inputIsInvalid)]]">

	185 <content id="addOnContent" select="[add-on]"></content>

	186 </div>

	187

	188 </template>

	189

	190 </dom-module>

	191

	192 <script src="paper-input-container-extracted.js"></script></body></html>

OLD	NEW