{% extends "hydra_presentation/dom_module.html" %}
{% load static %}
{% load polymer %}
{% block components %}
{% for component in module.components %}
{% link component %}
{% endfor %}
{% block styles %}
{% for style in module.styles %}
{% link style %}
{% endfor %}
{% endblock styles %}
{% block icons %}
{% endblock icons %}
{% for mixin in module.mixins %}
{% link mixin %}
{% endfor %}
{% for route, page in module.pages.items %}
{% link page %}
{% endfor %}
{% endblock components %}
{% block style %}
:host {
--app-primary-color: #4285f4;
--app-primary-text-color: white;
--app-secondary-color: black;
--app-overlay-color: #323232;
display: block;
height: 100%;
}
app-drawer-layout:not([narrow]) [drawer-toggle] {
display: none;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
.error {
color: red;
background-color: transparent;
@apply --layout-horizontal;
@apply --layout-center-center;
}
.warning {
color: yellow;
background-color: transparent;
@apply --layout-horizontal;
@apply --layout-center-center;
}
.success {
color: green;
background-color: transparent;
@apply --layout-horizontal;
@apply --layout-center-center;
}
.notification {
color: white;
background-color: transparent;
@apply --layout-horizontal;
@apply --layout-center-center;
}
.main-toolbar {
@apply --layout-horizontal;
@apply --layout-center-center;
}
#mainToast > paper-fab {
position: absolute;
top: -20px;
right: -20px;
--paper-fab-background: var(--app-overlay-color);
}
#mainToast > iron-list {
}
#mainToast {
max-height: 50vh;
}
{% endblock style %}
{% block content %}
{% verbatim %}