You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
roundcubemail/skins/elastic/styles/layout.less

263 lines
6.7 KiB
Plaintext

/**
* Roundcube webmail styles for the Elastic skin
*
* Copyright (c) 2017, The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original autors in the README file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@screen-width-large: 1200px;
@screen-width-medium: 1024px;
@screen-width-small: 768px;
@screen-width-xs: 480px;
@screen-width-mini: 320px;
@page-font-size: 14px;
@page-min-width: 240px;
@taskmenu-width: 65px;
/*** Responsive design - Layout ***/
/*
- Desktop - Big screen (width > 1200px)
-----------------------------------------------------------------------------------------------------
| menu | sidebar | list | content |
-----------------------------------------------------------------------------------------------------
- Desktop - Normal screen (1200px => width => 768px)
-------------------------------------------------------------------
|menu| sidebar/list | content |
-------------------------------------------------------------------
- Tablet (480px < width < 768px) - typical: 768x1024 (iPad Mini/Air)
------------------------------------------
|menu| sidebar/list/content |
------------------------------------------
- Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
------------------------
| sidebar/list/content |
------------------------
NOTE: below 1024px we do some UI elements bigger, as this is good (imho)
assumption that in this size we're dealing with touch device. Is it?
should we rather feature detect tables/phones?
*/
html {
height: 100%;
font-size: @page-font-size;
}
body {
line-height: 1;
min-width: @page-min-width;
height: 100%;
overflow: hidden;
}
body > #layout {
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100%;
width: 100%;
& > div {
&.sidebar,
&.list {
display: flex;
flex-grow: 2;
flex-direction: column;
min-width: 300px;
max-width: 30%;
border-right: 1px solid @color-layout-border;
}
&.content {
display: flex;
flex-grow: 6;
flex-direction: column;
min-width: 50%;
background-color: @color-layout-content-background;
& > iframe,
& > .content,
& > .content > iframe {
height: 100%;
width: 100%;
overflow: auto;
border: 0;
flex: 1;
}
}
&.sidebar {
min-width: 220px;
background-color: @color-layout-sidebar-background;
}
&.list {
min-width: 300px;
background-color: @color-layout-list-background;
}
&.menu {
width: @taskmenu-width;
background-color: @color-taskmenu-background;
a,
a:before {
display: block;
width: @taskmenu-width;
}
}
& > .scroller {
flex: 1;
}
& > .content.only > .scroller {
overflow: auto;
}
& > .header,
& > .footer {
background-color: @color-layout-header-background;
font-size: 1rem;
font-weight: bold;
line-height: 2.5rem;
height: 2.5rem;
padding: 0 0.25em;
margin: 0;
position: relative; /* for absolute positioning of searchbar */
overflow: hidden;
white-space: nowrap;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
& > .header {
border-bottom: 1px solid #ddd;
.header-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
}
& > .footer {
border-top: 1px solid #ddd;
}
}
}
html.iframe body {
overflow: auto;
#content {
height: 100%;
}
}
@media screen and (max-width: @screen-width-large) {
body > #layout > div.sidebar,
body > #layout > div.list {
min-width: 260px;
}
body > #layout > div:not(.selected),
body > #layout > div.menu span.inner {
display: none;
}
body > #layout > div.menu,
body > #layout > div.content {
display: flex;
}
body > #layout > div.menu a,
body > #layout > div.menu a:before,
body > #layout > div.menu {
width: 45px;
}
body > #layout > div.menu a:before {
margin: 0.4em 0;
}
}
@media screen and (max-width: @screen-width-medium) {
html:not(.iframe) {
font-size: 120%;
}
}
@media screen and (max-width: @screen-width-small) {
body > #layout > div > .header > .toolbar:not(.searchbar),
body > #layout > div:not(.selected) {
display: none;
}
body > #layout > div.menu {
display: flex;
}
body > #layout > div.sidebar,
body > #layout > div.list {
max-width: 100%;
}
}
@media screen and (max-width: @screen-width-xs) {
body > #layout > div.menu span.inner {
display: block;
}
body > #layout > div.menu {
display: none;
position: absolute;
z-index: 100;
top: 0;
left: 0;
right: 0;
width: auto;
margin: 38pt 3pt 3pt 3pt;
padding-bottom: 8pt;
opacity: 0.96;
text-align:center;
border-radius: 4pt;
}
body > #layout > div.menu a,
body > #layout > div.menu a:before {
display: inline-block;
width: 100px;
}
}
@media screen and (max-width: @screen-width-mini) {
body > #layout > div.sidebar,
body > #layout > div.list {
min-width: @page-min-width;
}
}
@media screen and (min-width: (@screen-width-large + 1px)) {
body > #layout > div > .header > a.back-list-button,
body > #layout > div > .header > a.back-sidebar-button {
display: none;
}
}
@media screen and (min-width: (@screen-width-small + 1px)) {
body > #layout > .content > .header > .header-title,
body > #layout > div > .header > .buttons,
body > #layout > div > .header > a.toolbar-menu-button {
display: none;
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
body > #layout > div > .header > a.menu-button {
display: none;
}
}