{{item.description}}
{{item.description}}
-Busca usa ciudad usando la caja de busqueda
Busca usa ciudad usando la caja de busqueda
-
- Traffic Incidents ({{city}})
+ paper-header-panel {
+ width: 100%;
+ height: 100%;
+ background-color: #eee;
+ font-family: 'Dosis', sans-serif;
+ @apply(--shadow-elevation-3dp);
+ }
+
+ .paper-header {
+ height: var(--ti-header-height, 50px);
+ font-size: 16px;
+ line-height: 50px;
+ padding: 5px 10px;
+ color: white;
+ font-weight: bold;
+ transition: height 0.2s;
+ background-color: #B2002F;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ @apply(--ti-header);
+ }
+
+ paper-icon-button#search:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+ }
+
+ .paper-header paper-icon-button#search,
+ .paper-header[active] .input-container {
+ display: inline-block;
+ }
+
+ .paper-header .input-container,
+ .paper-header[active] paper-icon-button#search {
+ display: none;
+ }
+
+ .paper-header[active] .input-container {
+ flex: 1;
+ @apply(--ti-input-container-active)
+ }
+
+ .paper-header .input-container {
+ flex: none;
+ margin: 0 8px 0 16px;
+ position: relative;
+ top: -2px;
+ -webkit-animation: fadein 0.3s;
+ /* Safari, Chrome and Opera > 12.1 */
+ -moz-animation: fadein 0.3s;
+ /* Firefox < 16 */
+ -ms-animation: fadein 0.3s;
+ /* Internet Explorer */
+ -o-animation: fadein 0.3s;
+ /* Opera < 12.1 */
+ animation: fadein 0.3s;
+ @apply(--ti-input)
+ }
+
+ .paper-header .title {
+ flex: 1;
+ cursor: pointer;
+ }
+
+ .paper-header[active] .title {
+ flex: none;
+ }
+
+ input {
+ background-color: transparent;
+ outline: none;
+ border: none;
+ border-bottom: 2px solid #eee;
+ width: 100%;
+ font-size: 16px;
+ font-family: 'Dosis', sans-serif;
+ color: white;
+ font-weight: bold;
+ @apply(--ti-searchBox)
+ }
+
+ ::-webkit-input-placeholder {
+ /* Chrome/Opera/Safari */
+ color: white;
+ font-weight: normal;
+ }
+
+ ::-moz-placeholder {
+ /* Firefox 19+ */
+ color: white;
+ font-weight: normal;
+ }
+
+ :-ms-input-placeholder {
+ /* IE 10+ */
+ color: white;
+ font-weight: normal;
+ }
+
+ :-moz-placeholder {
+ /* Firefox 18- */
+ color: white;
+ font-weight: normal;
+ }
+
+ .card {
+ padding: 6px 18px 18px 18px;
+ margin: 5px 0;
+ background-color: white;
+ @apply(--shadow-elevation-2dp);
+ @apply(--ti-card);
+
+ }
+
+ .content {
+ margin-top: -5px;
+ padding: 12px;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ position: relative;
+ @apply(--ti-content);
+ }
+
+ p {
+ margin: 0;
+ }
+
+ paper-spinner {
+ display: none;
+ }
+
+ paper-spinner[active] {
+ display: inline-block;
+ }
+
+ @font-face {
+ font-family: "Flaticon";
+ src: url("./fonts/Flaticon.eot");
+ src: url("./fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
+ url("./fonts/Flaticon.woff") format("woff"),
+ url("./fonts/Flaticon.ttf") format("truetype"),
+ url("./fonts/Flaticon.svg#Flaticon") format("svg");
+ font-weight: normal;
+ font-style: normal;
+ }
+
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
+ @font-face {
+ font-family: "Flaticon";
+ src: url("./fonts/Flaticon.svg#Flaticon") format("svg");
+ }
+ }
+
+ [class^="flaticon"]:before,
+ [class*=" flaticon"]:before,
+ [class^="flaticon"]:after,
+ [class*=" flaticon"]:after {
+ font-family: Flaticon;
+ font-size: 25px;
+ font-style: normal;
+ margin-right: 15px;
+ padding: 4px;
+ font-weight: 600;
+ }
+
+ /* Congestion and mass transit*/
+
+ .flaticon[data-type="2"]:before,
+ .flaticon[data-type="4"]:before {
+ content: "\f105";
+ font-size: 24px;
+ border: 2px solid black;
+ background-color: #003e87;
+ border-radius: 2px;
+ text-shadow: 0px 0px 7px black;
+ padding: 3px;
+ color: white;
+ }
+
+ .flaticon[data-type="1"]:before {
+ content: "\f100";
+ border-radius: 50%;
+ border: 2px solid white;
+ background-color: #003e87;
+ color: white;
+ text-shadow: 0px 0px 4px black;
+ box-shadow: 0px 0px 2px black, 0px 0px 2px black;
+ }
+
+ /* Accident and Disabled vehicle */
+
+ .flaticon[data-type="3"]:before {
+ content: "\f101";
+ border-radius: 50%;
+ border: 2px solid white;
+ background-color: #003e87;
+ color: white;
+ text-shadow: 0px 0px 4px black;
+ box-shadow: 0px 0px 2px black, 0px 0px 2px black;
+ }
+
+ /* Miscellaneous, other news, planned evnet*/
+
+ .flaticon[data-type="5"]:before,
+ .flaticon[data-type="6"]:before,
+ .flaticon[data-type="7"]:before {
+ content: "\f102";
+ background-color: #003e87;
+ color: white;
+ border-radius: 100%;
+ padding: 0px;
+ font-size: 28px;
+ text-shadow: 0px 0px 2px black;
+ box-shadow: 0px 0px 2px black, 0px 0px 2px black;
+ }
+
+ /* Working */
+
+ .flaticon[data-type="9"]:before {
+ content: "\f107";
+ background-color: white;
+ border: 2px solid red;
+ color: black;
+ border-radius: 50%;
+ }
+
+ /* road hazard, Alert*/
+
+ .flaticon[data-type="8"]:before,
+ .flaticon[data-type="10"]:before {
+ content: "\f106";
+ background-color: white;
+ border: 2px solid red;
+ color: black;
+ border-radius: 50%;
+ }
+
+ /* Weather */
+
+ .flaticon[data-type="11"]:before {
+ content: "\f103";
+ }
+
+ .time {
+ text-align: right;
+ margin-bottom: 5px;
+ font-size: 13px;
+ position: relative;
+ }
+
+ .time .more_info {
+ opacity: 0;
+ background-color: #eee;
+ position: absolute;
+ right: 0;
+ top: -18px;
+ padding: 8px;
+ border: 1px solid #333;
+ border-radius: 8px;
+ }
+
+ .time:hover .more_info {
+ opacity: 1;
+ transition-delay: 1s;
+ transition: 0s opacity line;
+ -webkit-transition-delay: 1s;
+ /* Safari */
+ @apply(--shadow-elevation-4dp)
+ }
+
+ @keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ /* Firefox < 16 */
+
+ @-moz-keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ /* Safari, Chrome and Opera > 12.1 */
+
+ @-webkit-keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ /* Internet Explorer */
+
+ @-ms-keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ /* Opera < 12.1 */
+
+ @-o-keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+
+
+ Traffic Incidents
+ ({{city}})
{{item.description}} {{item.description}} Busca usa ciudad usando la caja de busqueda Busca usa ciudad usando la caja de busqueda