milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

merge from dev

Browse source
This commit is contained in:
Luke Pulverenti 2015-12-14 10:43:03 -05:00
parent 1c8f02ce0f
commit 33b01d778c
911 changed files with 34157 additions and 57125 deletions
Download patch file Download diff file Expand all files Collapse all files

76
dashboard-ui/bower_components/paper-input/paper-input-container.html vendored
View file

@ -9,7 +9,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/typography.html">
<!--
`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or
@ -75,22 +78,23 @@ Custom property | Description | Default
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
`--paper-input-container` | Mixin applied to the container | `{}`
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
`--paper-input-container-label` | Mixin applied to the label | `{}`
`--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}`
`--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}`
`--paper-input-container-input` | Mixin applied to the input | `{}`
`--paper-input-container-input-disabled` | Mixin applied to the input when it's disabled | `{}`
`--paper-input-container-prefix` | Mixin applied to the input prefix | `{}`
`--paper-input-container-suffix` | Mixin applied to the input suffix | `{}`
`--paper-input-container-underline` | Mixin applied to the underline | `{}`
`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}`
`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
`--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
`--paper-input-prefix` | Mixin applied to the input prefix | `{}`
`--paper-input-suffix` | Mixin applied to the input suffix | `{}`
This element is `display:block` by default, but you can set the `inline` attribute to make it
`display:inline-block`.
-->
<dom-module id="paper-input-container">
<template>
<style>
:host {
display: block;
@ -119,15 +123,15 @@ This element is `display:block` by default, but you can set the `inline` attribu
}
.focused-line {
height: 2px;
@apply(--layout-fit);
background: var(--paper-input-container-focus-color, --default-primary-color);
height: 2px;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
background: var(--paper-input-container-focus-color, --default-primary-color);
@apply(--paper-input-container-underline-focus);
}
@ -142,7 +146,6 @@ This element is `display:block` by default, but you can set the `inline` attribu
.underline.is-invalid .focused-line {
background: var(--paper-input-container-invalid-color, --google-red-500);
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform 0.25s;
@ -152,6 +155,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
}
.unfocused-line {
@apply(--layout-fit);
height: 1px;
background: var(--paper-input-container-color, --secondary-text-color);
@ -172,9 +177,10 @@ This element is `display:block` by default, but you can set the `inline` attribu
}
.input-content {
position: relative;
@apply(--layout-horizontal);
@apply(--layout-end);
@apply(--layout-center);
position: relative;
}
.input-content ::content label,
@ -186,6 +192,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
font: inherit;
color: var(--paper-input-container-color, --secondary-text-color);
@apply(--paper-font-common-nowrap);
@apply(--paper-font-subhead);
@apply(--paper-input-container-label);
}
@ -194,12 +201,27 @@ This element is `display:block` by default, but you can set the `inline` attribu
.input-content.label-is-floating ::content .paper-input-label {
-webkit-transform: translateY(-75%) scale(0.75);
transform: translateY(-75%) scale(0.75);
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
-webkit-transform-origin: left top;
transform-origin: left top;
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
original space now available */
width: 133%;
@apply(--paper-transition-easing);
@apply(--paper-input-container-label-floating);
}
:host-context([dir="rtl"]) .input-content.label-is-floating ::content label,
:host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label {
/* TODO(noms): Figure out why leaving the width at 133% before the animation
* actually makes
* it wider on the right side, not left side, as you would expect in RTL */
width: 100%;
-webkit-transform-origin: right top;
transform-origin: right top;
}
.input-content.label-is-highlighted ::content label,
@ -232,6 +254,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
border: none;
color: var(--paper-input-container-input-color, --primary-text-color);
-webkit-appearance: none;
text-align: inherit;
@apply(--paper-font-subhead);
@apply(--paper-input-container-input);
@ -256,6 +279,10 @@ This element is `display:block` by default, but you can set the `inline` attribu
resize: none;
}
.add-on-content {
position: relative;
}
.add-on-content.is-invalid ::content * {
color: var(--paper-input-container-invalid-color, --google-red-500);
}
@ -271,21 +298,22 @@ This element is `display:block` by default, but you can set the `inline` attribu
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
<content select="[prefix]" id="prefix"></content>
<div class="label-and-input-container">
<div class="label-and-input-container" id="labelAndInputContainer">
<content select=":not([add-on]):not([prefix]):not([suffix])"></content>
</div>
<content select="[suffix]"></content>
</div>
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
<div class="unfocused-line fit"></div>
<div class="focused-line fit"></div>
<div class="unfocused-line"></div>
<div class="focused-line"></div>
</div>
<div class$="[[_computeAddOnContentClass(focused,invalid)]]">
<content id="addOnContent" select="[add-on]"></content>
</div>
</template>
</dom-module>
@ -525,21 +553,19 @@ This element is `display:block` by default, but you can set the `inline` attribu
if (alwaysFloatLabel || _inputHasContent) {
cls += ' label-is-floating';
// If the label is floating, ignore any offsets that may have been
// applied from a prefix element.
this.$.labelAndInputContainer.style.position = 'static';
if (invalid) {
cls += ' is-invalid';
} else if (focused) {
cls += " label-is-highlighted";
}
// The label might have a horizontal offset if a prefix element exists
// which needs to be undone when displayed as a floating label.
if (Polymer.dom(this.$.prefix).getDistributedNodes().length > 0 &&
label && label.offsetParent) {
label.style.left = -label.offsetParent.offsetLeft + 'px';
}
} else {
// When the label is not floating, it should overlap the input element.
if (label) {
label.style.left = 0;
this.$.labelAndInputContainer.style.position = 'relative';
}
}
} else {