Jabit-Server/webapp/app/styles/shared-styles.html

77 lines
1.4 KiB
HTML

<!-- shared styles for all elements and index.html -->
<dom-module id="shared-styles">
<template>
<style>
.page-title {
@apply(--paper-font-display2);
}
@media (max-width: 600px) {
.page-title {
font-size: 24px!important;
}
}
paper-material {
border-radius: 2px;
height: 100%;
padding: 16px 0 16px 0;
width: calc(98.66% - 16px);
margin: 16px auto;
background: white;
}
/* Breakpoints */
/* Small */
@media (max-width: 600px) {
paper-material {
--menu-container-display: none;
width: calc(97.33% - 32px);
padding-left: 16px;
padding-right: 16px;
}
paper-toolbar.tall .app-name {
font-size: 24px;
font-weight: 400;
}
#drawer .paper-toolbar {
margin-left: 16px;
}
#overlay {
min-width: 360px;
}
.bg {
background: white;
}
}
/* Tablet+ */
@media (min-width: 601px) {
paper-material {
width: calc(98% - 46px);
margin-bottom: 32px;
padding-left: 30px;
padding-right: 30px;
}
#drawer.paper-drawer-panel > [drawer] {
border-right: 1px solid rgba(0, 0, 0, 0.14);
}
iron-pages {
padding: 48px 62px;
}
}
</style>
</template>
</dom-module>