/* 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); } .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}}; } polyfill-next-selector { content: ':host.slide-up > * [slide-up]'; } :host(.slide-up) ::content > * /deep/ [slide-up] { -webkit-transition: opacity {{g.transitions.slideDuration || g.transitions.duration}}, -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: opacity {{g.transitions.slideDuration || g.transitions.duration}}, 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(20%); transform: translateY(20%); } polyfill-next-selector { content: ':host.slide-up-offscreen > * [slide-up-offscreen]'; } :host(.slide-up-offscreen) ::content > * /deep/ [slide-up-offscreen] { -webkit-transition: opacity {{g.transitions.slideDuration || g.transitions.duration}}, -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: opacity {{g.transitions.slideDuration || g.transitions.duration}}, 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; opacity: 1; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-up-offscreen] { -webkit-transform: translateY(20%); transform: translateY(20%); z-index: -1; opacity: 0; } polyfill-rule { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; -webkit-transform: translateY(20%); opacity: 0; } polyfill-next-selector { content: ':host.slide-down > * [slide-down]'; } :host(.slide-down) ::content > * /deep/ [slide-down] { -webkit-transition: opacity {{g.transitions.slideDuration || g.transitions.duration}}, -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); transition: opacity {{g.transitions.slideDuration || g.transitions.duration}}, 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; opacity: 1; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-down]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-down] { -webkit-transform: translateY(-5%); transform: translateY(-5%); opacity: 0; } html /deep/ #dialog { color: rgba(208, 92, 212, 1); display: block; text-align: left; background-color: rgba(35, 33, 77, 1); color: rgba(208, 92, 212, 1); font-size: 1em; font-weight: 300; } html /deep/ #dialog.small-screen{ left: 0; right: 0; } html /deep/ paper-dialog{ margin: 20px; } html /deep/ #dialog /deep/ #trixel-button { margin: 0 10px 0 0; font-size: 0.8em; } html /deep/ #dialog /deep/ #scroller { padding: 20px; } html /deep/ #dialog.small-screen /deep/ #scroller{ width: 100%; max-width: 100% !important; } html /deep/ #dialog.closable /deep/ #scroller { padding: 45px 20px 20px; } html /deep/ #dialog /deep/ p { margin: 0 0 15px; padding: 0; text-align:left; font-size: 1.2em; } html /deep/ #dialog /deep/ p span { font-weight: 400; } html /deep/ #dialog /deep/ #close{ position: absolute; top: 20px; right: 20px; font-size: 15px; height: 15px; width: auto; cursor: pointer; transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; } html /deep/ #dialog /deep/ #close:hover{ transform: rotate(90deg); -webkit-transform: rotate(90deg); }