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

252 lines
6.3 KiB
Plaintext

@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 @layout-border-color;
}
&.content {
display: flex;
flex-grow: 6;
flex-direction: column;
min-width: 50%;
background-color: @layout-content-background-color;
& > iframe,
& > .content,
& > .content > iframe {
height: 100%;
width: 100%;
overflow: auto;
border: 0;
flex: 1;
}
}
&.sidebar {
min-width: 220px;
background-color: @layout-sidebar-background-color;
}
&.list {
min-width: 300px;
background-color: @layout-list-background-color;
}
&.menu {
width: @taskmenu-width;
background-color: @taskmenu-background-color;
a,
a:before {
display: block;
width: @taskmenu-width;
}
}
& > .scroller {
flex: 1;
}
& > .content.only > .scroller {
overflow: auto;
}
& > .header,
& > .footer {
background-color: @layout-header-background-color;
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;
}
}