.label-text, .error { color: {{g.paperInput.labelColor}}; } ::-webkit-input-placeholder { color: {{g.paperInput.labelColor}}; } ::-moz-placeholder { color: {{g.paperInput.labelColor}}; } :-ms-input-placeholder { color: {{g.paperInput.labelColor}}; } .unfocused-underline { background-color: {{g.paperInput.labelColor}}; } :host([focused]) .floated-label .label-text { color: {{g.paperInput.focusedColor}}; } .focused-underline { background-color: {{g.paperInput.focusedColor}}; } :host(.invalid) .floated-label .label-text, .error { color: {{g.paperInput.invalidColor}}; } :host(.invalid) .unfocused-underline, :host(.invalid) .focused-underline { background-color: {{g.paperInput.invalidColor}}; } /* Hide heroes that are not currently transitioning */ polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [hero]'; } ::content > [animate]:not(.core-selected) /deep/ [hero] { opacity: 0; } polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; } ::content > .core-selected[animate] /deep/ [hero] { opacity: 1; z-index: 10000; } polyfill-next-selector { content: ':host > * [hero-p]'; } ::content > * /deep/ [hero-p] { -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; } polyfill-next-selector { content: ':host > [animate] [hero-p]'; } ::content > [animate] /deep/ [hero-p] { box-shadow: none !important; } polyfill-next-selector { content: ':host > * [cross-fade]'; } ::content > * /deep/ [cross-fade] { -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > * [cross-fade][bg]'; } ::content > * /deep/ [cross-fade][bg] { -webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > * [cross-fade][hero-p]'; } ::content > * /deep/ [cross-fade][hero-p] { -webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [cross-fade]'; } ::content > .core-selected /deep/ [cross-fade] { opacity: 1; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade]:not([hero-p]):not([bg])'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):not([bg]) { opacity: 0; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][bg]'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade][bg] { background-color: rgba(0, 0, 0, 0); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][hero-p]'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade][hero-p] { background-color: rgba(0, 0, 0, 0); } polyfill-next-selector { content: ':host > * [cross-fade-delayed]'; } ::content > * /deep/ [cross-fade-delayed] { -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out; transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out; } polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; } ::content > .core-selected /deep/ [cross-fade-delayed] { -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}}; transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}}; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade-delayed]'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade-delayed] { opacity: 0; } polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; } ::content > .core-selected /deep/ [cross-fade-delayed] { opacity: 1; } /* cross-fade-all: cross fade everything except for heroes and their parents */ polyfill-next-selector { content: ':host(.cross-fade-all) > * *:not([hero]):not([hero-p]):not([cross-fade])'; } :host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) { -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out; transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out; } polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) *:not([hero]):not([hero-p]):not([cross-fade])'; } :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) { opacity: 0; } polyfill-next-selector { content: ':host(.cross-fade-all) > .core-selected *:not([hero])'; } .host(.cross-fade-all) ::content > .core-selected /deep/ * { opacity: 1; } /* Only background-color is allowed for the hero's parents, no opacity transitions */ polyfill-next-selector { content: ':host(.cross-fade-all) > * [hero-p]'; } :host(.cross-fade-all) ::content > * /deep/ [hero-p] { -webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out; transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out; opacity: 1; } polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) [hero-p]'; } :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ [hero-p] { background-color: rgba(0, 0, 0, 0); } polyfill-next-selector { content: ':host.slide-up > * [slide-up]'; } :host(.slide-up) ::content > * /deep/ [slide-up] { -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [slide-up]'; } ::content > .core-selected /deep/ [slide-up] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-up] { -webkit-transform: translateY(150%); transform: translateY(150%); } polyfill-next-selector { content: ':host.slide-up-offscreen > * [slide-up-offscreen]'; } :host(.slide-up-offscreen) ::content > * /deep/ [slide-up-offscreen] { -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [slide-up-offscreen]'; } ::content > .core-selected /deep/ [slide-up-offscreen] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-up-offscreen] { -webkit-transform: translateY(100vh); transform: translateY(100vh); z-index: -1; } polyfill-rule { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; -webkit-transform: translateY(1000px); } polyfill-next-selector { content: ':host.slide-down > * [slide-down]'; } :host(.slide-down) ::content > * /deep/ [slide-down] { -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [slide-down]'; } ::content > .core-selected /deep/ [slide-down] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-down]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-down] { -webkit-transform: translateY(-100%); transform: translateY(-100%); } polyfill-next-selector { content: ':host > * [scale-up]'; } ::content > * /deep/ [scale-up] { -webkit-transition: -webkit-transform {{g.transitions.scaleDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1) {{g.transitions.scaleDelay || g.transitions.delay}} !important; transition: transform {{g.transitions.scaleDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1) {{g.transitions.scaleDelay || g.transitions.delay}} !important; } polyfill-next-selector { content: ':host > .core-selected [scale-up]'; } ::content > .core-selected /deep/ [scale-up] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [scale-up]'; } ::content > [animate]:not(.core-selected) /deep/ [scale-up] { -webkit-transform: scale(0); transform: scale(0); } polyfill-next-selector { content: ':host > .core-selected[animate] [scale-up]'; } ::content > .core-selected[animate] /deep/ [scale-up] { z-index: 1000; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div { -webkit-transition: -webkit-transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(2)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(3)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(4)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(4) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(5)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(6)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(6) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(7)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(7) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(8)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(8) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(9)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(9) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(10)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(10) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(11)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(11) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(12)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(12) { -webkit-transition-delay: 0.55s; transition-delay: 0.55s; } polyfill-next-selector { content: '.core-selected [tile-cascade] > div'; } ::content > .core-selected /deep/ [tile-cascade] > div { } polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade] > div'; } ::content > [animate]:not(.core-selected) /deep/ [tile-cascade] > div { -webkit-transform: translateY(100%); transform: translateY(100%); } polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade][fade] > div'; } ::content > [animate]:not(.core-selected) /deep/ [tile-cascade][fade] > div { opacity: 0; }