Page MenuHomePhorge
Files F7058198

layout.less
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

layout.less
View Options

/**
* 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: 70px;
/*** 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 {
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-direction: column;
max-width: 30%;
border-right: 1px solid @color-layout-border;
}
&.content {
display: flex;
flex: 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;
flex: 2;
}
&.list {
min-width: 300px;
background-color: @color-layout-list-background;
flex: 3;
}
&.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;
flex: 3;
}
body > #layout > div:not(.selected) {
display: none;
}
body > #layout > div.menu,
body > #layout > div.content {
display: flex;
}
}
@media screen and (max-width: @screen-width-medium) {
html:not(.iframe) {
font-size: 120%;
}
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;
}
body > #layout > div.menu span.inner {
display: none;
}
}
@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: none;
}
}
@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;
}
}

File Metadata

Mime Type
text/plain
Expires
Fri, Jun 12, 4:31 AM (7 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
914813
Default Alt Text
layout.less (6 KB)

Event Timeline