Skip to content
Permalink
Browse files

FIX: dom-module has style outside template

  • Loading branch information...
sizuhiko committed Mar 22, 2019
1 parent 3fcd1cc commit 57ac6537723ead18bf953cbe4577a69c990bafe1
Showing with 94 additions and 94 deletions.
  1. +5 −5 public/scripts/excess-router/excess-route.js
  2. +89 −89 public/scripts/toast-er/toast-er.js
@@ -151,12 +151,12 @@ import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<dom-module id="excess-route">
<style>
:host {
display: block;
}
</style>
<template>
<style>
:host {
display: block;
}
</style>
<slot></slot>
</template>
</dom-module>`;
@@ -105,102 +105,102 @@ import '../iron-signals/iron-signals.js';
const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<dom-module id="toast-er">
<style>
:host {
display: inline-block;
box-sizing: border-box;
position: fixed;
}
#grill {
position: absolute;
bottom: 0px;
left: 0px;
height: 5px;
width: 100%;
}
.info {
background-color: rgb(0, 186, 255);
}
.success {
background-color: rgb(11, 219, 0);
}
.warning {
background-color: rgb(255, 168, 0);
}
.error {
background-color: rgb(251, 0, 0);
}
@-webkit-keyframes cooking {
from {
opacity: 1;
<template>
<style>
:host {
display: inline-block;
box-sizing: border-box;
position: fixed;
}
50% {
opacity: 0;
#grill {
position: absolute;
bottom: 0px;
left: 0px;
height: 5px;
width: 100%;
}
to {
opacity: 1;
.info {
background-color: rgb(0, 186, 255);
}
}
@keyframes cooking {
from {
opacity: 1;
.success {
background-color: rgb(11, 219, 0);
}
50% {
opacity: 0;
.warning {
background-color: rgb(255, 168, 0);
}
to {
opacity: 1;
.error {
background-color: rgb(251, 0, 0);
}
}
.low {
-webkit-animation: cooking 3s linear 0.2s infinite;
animation: cooking 3s linear 0.2s infinite;
}
.middle {
-webkit-animation: cooking 2s linear 0.2s infinite;
animation: cooking 2s linear 0.2s infinite;
}
.high {
-webkit-animation: cooking 1s linear 0.2s infinite;
animation: cooking 1s linear 0.2s infinite;
}
:host.top-left,
:host.bottom-left {
left: 0;
}
:host.top-left,
:host.top-right {
top: 0;
transform: translateY(0px);
}
:host.top-left paper-toast,
:host.top-right paper-toast {
top: 0;
transform: translateY(-100px);
}
:host.top-left paper-toast.paper-toast-open,
:host.top-right paper-toast.paper-toast-open {
top: 12px;
transform: translateY(0px);
}
:host.bottom-left,
:host.bottom-right {
bottom: 0;
transform: translateY(0px);
}
:host.bottom-left paper-toast,
:host.bottom-right paper-toast {
bottom: 0;
transform: translateY(100px);
}
:host.bottom-left paper-toast.paper-toast-open,
:host.bottom-right paper-toast.paper-toast-open {
bottom: 12px;
transform: translateY(0px);
}
</style>
@-webkit-keyframes cooking {
from {
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cooking {
from {
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
.low {
-webkit-animation: cooking 3s linear 0.2s infinite;
animation: cooking 3s linear 0.2s infinite;
}
.middle {
-webkit-animation: cooking 2s linear 0.2s infinite;
animation: cooking 2s linear 0.2s infinite;
}
.high {
-webkit-animation: cooking 1s linear 0.2s infinite;
animation: cooking 1s linear 0.2s infinite;
}
:host.top-left,
:host.bottom-left {
left: 0;
}
:host.top-left,
:host.top-right {
top: 0;
transform: translateY(0px);
}
:host.top-left paper-toast,
:host.top-right paper-toast {
top: 0;
transform: translateY(-100px);
}
:host.top-left paper-toast.paper-toast-open,
:host.top-right paper-toast.paper-toast-open {
top: 12px;
transform: translateY(0px);
}
:host.bottom-left,
:host.bottom-right {
bottom: 0;
transform: translateY(0px);
}
:host.bottom-left paper-toast,
:host.bottom-right paper-toast {
bottom: 0;
transform: translateY(100px);
}
:host.bottom-left paper-toast.paper-toast-open,
:host.bottom-right paper-toast.paper-toast-open {
bottom: 12px;
transform: translateY(0px);
}
</style>
<template>
<paper-toast id="toast">
<span id="grill"></span>
</paper-toast>

0 comments on commit 57ac653

Please sign in to comment.
You can’t perform that action at this time.