0c758dbe5b
Some popover menus, like the contacts menu, still show their icon using an img element. The main CSS rules assume that a "content-box" sizing is being used, and thus set the size and padding of the image to add up to the line height. However, ".app-*" descendants use a "border-box" sizing, so when a menu with an image was shown in an app the icon was not properly shown. Now both the width and height of the image is set to the item height in those cases, which causes the visible size of the icon to be the item height minus the padding (the same as when "content-box" sizing is used). Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
1246 lines
26 KiB
SCSS
1246 lines
26 KiB
SCSS
/**
|
|
* @copyright Copyright (c) 2016-2017, John Molakvoæ <skjnldsv@protonmail.com>
|
|
* @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
|
|
* @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
|
|
* @copyright Copyright (c) 2016, pgys <info@pexlab.space>
|
|
* @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
|
|
* @copyright Copyright (c) 2016, Stefan Weil <sw@weilnetz.de>
|
|
* @copyright Copyright (c) 2016, Roeland Jago Douma <rullzer@owncloud.com>
|
|
* @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
|
|
* @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
|
|
* @copyright Copyright (c) 2015, Thomas Müller <thomas.mueller@tmit.eu>
|
|
* @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
|
|
* @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
*/
|
|
|
|
/* BASE STYLING ------------------------------------------------------------ */
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
margin-bottom: 12px;
|
|
line-height: 140%;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 15px;
|
|
font-weight: 300;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* do not use italic typeface style, instead lighter color */
|
|
em {
|
|
font-style: normal;
|
|
opacity: .5;
|
|
}
|
|
|
|
dl {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
dt,
|
|
dd {
|
|
display: inline-block;
|
|
padding: 12px;
|
|
padding-left: 0;
|
|
}
|
|
|
|
dt {
|
|
width: 130px;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
|
|
kbd {
|
|
padding: 4px 10px;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
|
|
border-radius: var(--border-radius);
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* APP STYLING ------------------------------------------------------------ */
|
|
|
|
#content[class*='app-'] * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* APP-NAVIGATION ------------------------------------------------------------ */
|
|
/* Navigation: folder like structure */
|
|
#app-navigation {
|
|
width: $navigation-width;
|
|
position: fixed;
|
|
top: $header-height;
|
|
left: 0;
|
|
z-index: 500;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
// Do not use vh because of mobile headers
|
|
// are included in the calculation
|
|
height: calc(100% - #{$header-height});
|
|
box-sizing: border-box;
|
|
background-color: var(--color-main-background);
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
border-right: 1px solid var(--color-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
/* 'New' button */
|
|
.app-navigation-new {
|
|
display: block;
|
|
padding: 10px;
|
|
button {
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: 10px;
|
|
padding-left: 34px;
|
|
background-position: 10px center;
|
|
text-align: left;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
}
|
|
> ul {
|
|
position: relative;
|
|
height: 100%;
|
|
width: inherit;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> li {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
order: 1;
|
|
flex-shrink: 0;
|
|
|
|
/* Pinned-to-bottom entries */
|
|
&.pinned {
|
|
order: 2;
|
|
&.first-pinned {
|
|
margin-top: auto !important;
|
|
}
|
|
}
|
|
|
|
> .app-navigation-entry-deleted {
|
|
/* Ugly hack for overriding the main entry link */
|
|
padding-left: 44px !important;
|
|
}
|
|
> .app-navigation-entry-edit {
|
|
/* Ugly hack for overriding the main entry link */
|
|
/* align the input correctly with the link text
|
|
44px-6px padding for the input */
|
|
padding-left: 38px !important;
|
|
}
|
|
|
|
&.active,
|
|
a:hover,
|
|
a:focus,
|
|
a:active,
|
|
a.selected ,
|
|
a.active {
|
|
&,
|
|
> a {
|
|
opacity: 1;
|
|
box-shadow: inset 4px 0 var(--color-primary);
|
|
}
|
|
}
|
|
|
|
/* align loader */
|
|
&.icon-loading-small:after {
|
|
left: 22px;
|
|
top: 22px;
|
|
}
|
|
|
|
/* hide and animate deletion/collapse of subitems */
|
|
&.deleted,
|
|
&.collapsible:not(.open) {
|
|
> ul {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
overflow-y: hidden;
|
|
/* bezier override the hide/slow effect due to the 2000 max-height */
|
|
transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
|
|
opacity 250ms ease-in-out;
|
|
}
|
|
}
|
|
|
|
&.app-navigation-caption {
|
|
font-weight: bold;
|
|
line-height: 44px;
|
|
padding: 0 44px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
// !important to overwrite specific hover and focus
|
|
opacity: .7;
|
|
box-shadow: none !important;
|
|
user-select: none;
|
|
pointer-events:none;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 22px;
|
|
}
|
|
}
|
|
|
|
/* Second level nesting for lists */
|
|
> ul {
|
|
flex: 0 1 auto;
|
|
width: 100%;
|
|
transition: max-height 2000ms ease-in-out,
|
|
opacity 250ms ease-in-out;
|
|
max-height: 9999px;
|
|
opacity: 1;
|
|
position: relative;
|
|
> li {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 44px;
|
|
&:hover,
|
|
&:focus,
|
|
&.active,
|
|
a.selected {
|
|
&,
|
|
> a {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
box-shadow: inset 4px 0 var(--color-primary);
|
|
}
|
|
|
|
/* align loader */
|
|
&.icon-loading-small:after {
|
|
left: 22px; /* 44px / 2 */
|
|
}
|
|
|
|
> .app-navigation-entry-deleted {
|
|
/* margin to keep active indicator visible */
|
|
margin-left: 4px;
|
|
padding-left: 84px;
|
|
}
|
|
|
|
> .app-navigation-entry-edit {
|
|
/* margin to keep active indicator visible */
|
|
margin-left: 4px;
|
|
/* align the input correctly with the link text
|
|
44px+44px-4px-6px padding for the input */
|
|
padding-left: 78px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* Menu and submenu */
|
|
> li,
|
|
> li > ul > li {
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
/* hide icons if loading */
|
|
&.icon-loading-small {
|
|
> a,
|
|
> .app-navigation-entry-bullet {
|
|
/* hide icon or bullet if loading state*/
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
/* Main entry link */
|
|
> a {
|
|
background-size: 16px 16px;
|
|
background-position: 14px center;
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
justify-content: space-between;
|
|
line-height: 44px;
|
|
min-height: 44px;
|
|
padding: 0 12px 0 44px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-main-text);
|
|
opacity: .57;
|
|
flex: 1 1 0px;
|
|
z-index: 100; /* above the bullet to allow click*/
|
|
/* TODO: forbid using img as icon in menu? */
|
|
&:first-child img {
|
|
margin-right: 11px;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: -30px;
|
|
}
|
|
|
|
/* counter can also be inside the link */
|
|
> .app-navigation-entry-utils {
|
|
display: inline-block;
|
|
float: right;
|
|
.app-navigation-entry-utils-counter {
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
/* Bullet icon */
|
|
> .app-navigation-entry-bullet {
|
|
position: absolute;
|
|
display: block;
|
|
margin: 16px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: background 100ms ease-in-out;
|
|
|
|
+ a {
|
|
/* hide icon if bullet, can't have both */
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
/* popover fix the flex positionning of the li parent */
|
|
> .app-navigation-entry-menu {
|
|
top: 44px;
|
|
}
|
|
|
|
/* show edit/undo field if editing/deleted */
|
|
&.editing .app-navigation-entry-edit {
|
|
opacity: 1;
|
|
z-index: 250;
|
|
}
|
|
&.deleted .app-navigation-entry-deleted {
|
|
transform: translateX(0);
|
|
z-index: 250;
|
|
}
|
|
}
|
|
}
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Button styling for menu, edit and undo
|
|
*/
|
|
.app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button,
|
|
.app-navigation-entry-deleted .app-navigation-entry-deleted-button {
|
|
border: 0;
|
|
opacity: 0.5;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Collapsible menus
|
|
*/
|
|
.collapsible {
|
|
/* Fallback for old collapse button.
|
|
TODO: to be removed. Leaved here for retro compatibility */
|
|
.collapse {
|
|
opacity: 0;
|
|
position: absolute;
|
|
width: 44px;
|
|
height: 44px;
|
|
margin: 0;
|
|
z-index: 110;
|
|
}
|
|
&:before {
|
|
position: absolute;
|
|
height: 44px;
|
|
width: 44px;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
@include icon-color('triangle-s', 'actions', $color-black, 1, true);
|
|
background-size: 16px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
border: none;
|
|
border-radius: 0;
|
|
outline: none !important;
|
|
box-shadow: none;
|
|
content: ' ';
|
|
opacity: 0;
|
|
-webkit-transform: rotate(-90deg);
|
|
-ms-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
z-index: 50;
|
|
}
|
|
|
|
/* force padding on link no matter if 'a' has an icon class */
|
|
> a:first-child {
|
|
padding-left: 44px;
|
|
}
|
|
&:before,
|
|
> a {
|
|
transition: background-position 100ms ease-in-out,
|
|
transform 250ms ease-in-out,
|
|
opacity 100ms ease-in-out;
|
|
}
|
|
&:hover > a,
|
|
&:focus > a {
|
|
background-position-x: -50px;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
.app-navigation-entry-bullet {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
&.open {
|
|
&:before {
|
|
-webkit-transform: rotate(0);
|
|
-ms-transform: rotate(0);
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* App navigation utils, buttons and counters for drop down menu
|
|
*/
|
|
.app-navigation-entry-utils {
|
|
flex: 0 1 auto;
|
|
ul {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
li {
|
|
width: 44px !important;
|
|
height: 44px;
|
|
}
|
|
button {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
}
|
|
.app-navigation-entry-utils-menu-button {
|
|
/* Prevent bg img override if an icon class is set */
|
|
button:not([class^='icon-']):not([class*=' icon-']) {
|
|
background-image: url('../img/actions/more.svg?v=1');
|
|
}
|
|
&:hover button,
|
|
&:focus button {
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.app-navigation-entry-utils-counter {
|
|
overflow: hidden;
|
|
text-align: right;
|
|
font-size: 9pt;
|
|
line-height: 44px;
|
|
padding: 0 12px; /* Same padding as all li > a in the app-navigation */
|
|
|
|
&.highlighted {
|
|
padding: 0;
|
|
text-align: center;
|
|
span {
|
|
padding: 2px 5px;
|
|
border-radius: 10px;
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-text);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Editable entries
|
|
*/
|
|
.app-navigation-entry-edit {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
display: block;
|
|
width: calc(100% - 1px); /* Avoid border overlapping */
|
|
transition: opacity 250ms ease-in-out;
|
|
opacity: 0;
|
|
position: absolute;
|
|
background-color: var(--color-main-background);
|
|
z-index: -1;
|
|
form,
|
|
div {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
}
|
|
input {
|
|
padding: 5px;
|
|
margin-right: 0;
|
|
height: 38px;
|
|
&:hover,
|
|
&:focus {
|
|
/* overlapp borders */
|
|
z-index: 1;
|
|
}
|
|
}
|
|
input[type='text'] {
|
|
width: 100%;
|
|
min-width: 0; /* firefox hack: override auto */
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
button,
|
|
input:not([type='text']) {
|
|
width: 36px;
|
|
height: 38px;
|
|
flex: 0 0 36px;
|
|
&:not(:last-child) {
|
|
border-radius: 0 !important;
|
|
}
|
|
&:not(:first-child) {
|
|
margin-left: -1px;
|
|
}
|
|
&:last-child {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Deleted entries with undo button
|
|
*/
|
|
.app-navigation-entry-deleted {
|
|
display: inline-flex;
|
|
padding-left: 44px;
|
|
transform: translateX(#{$navigation-width});
|
|
.app-navigation-entry-deleted-description {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex: 1 1 0px;
|
|
line-height: 44px;
|
|
}
|
|
.app-navigation-entry-deleted-button {
|
|
margin: 0;
|
|
height: 44px;
|
|
width: 44px;
|
|
line-height: 44px;
|
|
&:hover,
|
|
&:focus {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Common rules for animation of undo and edit entries
|
|
*/
|
|
.app-navigation-entry-edit,
|
|
.app-navigation-entry-deleted {
|
|
width: calc(100% - 1px); /* Avoid border overlapping */
|
|
transition: transform 250ms ease-in-out,
|
|
opacity 250ms ease-in-out,
|
|
z-index 250ms ease-in-out;
|
|
position: absolute;
|
|
left: 0;
|
|
background-color: var(--color-main-background);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/**
|
|
* drag and drop
|
|
*/
|
|
.drag-and-drop {
|
|
-webkit-transition: padding-bottom 500ms ease 0s;
|
|
transition: padding-bottom 500ms ease 0s;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.app-navigation-entry-utils ul,
|
|
.app-navigation-entry-menu ul {
|
|
list-style-type: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* CONTENT --------------------------------------------------------- */
|
|
#content {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
// padding is included in height
|
|
padding-top: $header-height;
|
|
min-height: 100%;
|
|
}
|
|
|
|
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
|
|
/* Part where the content will be loaded into */
|
|
#app-content {
|
|
z-index: 1000;
|
|
background-color: var(--color-main-background);
|
|
position: relative;
|
|
flex-basis: 100vw;
|
|
min-height: 100%;
|
|
/* margin if navigation element is here */
|
|
#app-navigation:not(.hidden) + & {
|
|
margin-left: $navigation-width;
|
|
}
|
|
/* no top border for first settings item */
|
|
> .section:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
/* if app-content-list is present */
|
|
#app-content-wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: stretch;
|
|
/* make sure we have at least full height for loaders or such
|
|
no need for list/details since we have a flex stretch */
|
|
min-height: 100%;
|
|
|
|
/* CONTENT DETAILS AFTER LIST*/
|
|
.app-content-details {
|
|
/* grow full width */
|
|
flex-grow: 1;
|
|
#app-navigation-toggle-back {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* APP-SIDEBAR ------------------------------------------------------------ */
|
|
/*
|
|
Sidebar: a sidebar to be used within #content
|
|
#app-content will be shrinked properly
|
|
*/
|
|
#app-sidebar {
|
|
width: 27vw;
|
|
min-width: $sidebar-min-width;
|
|
max-width: $sidebar-max-width;
|
|
display: block;
|
|
@include position('sticky');
|
|
top: $header-height;
|
|
right:0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
z-index: 1500;
|
|
height: calc(100vh - #{$header-height});
|
|
background: var(--color-main-background);
|
|
border-left: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
// no animations possible, use OC.Apps.showAppSidebar
|
|
&.disappear {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* APP-SETTINGS ------------------------------------------------------------ */
|
|
/* settings area */
|
|
#app-settings {
|
|
// To the bottom w/ flex
|
|
margin-top: auto;
|
|
&.open,
|
|
&.opened {
|
|
#app-settings-content {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
#app-settings-content {
|
|
display: none;
|
|
padding: 10px;
|
|
background-color: var(--color-main-background);
|
|
/* restrict height of settings and make scrollable */
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
|
|
/* display input fields at full width */
|
|
input[type='text'] {
|
|
width: 93%;
|
|
}
|
|
|
|
.info-text {
|
|
padding: 5px 0 7px 22px;
|
|
color: var(--color-text-lighter);
|
|
}
|
|
input {
|
|
&[type='checkbox'],
|
|
&[type='radio'] {
|
|
&.radio,
|
|
&.checkbox {
|
|
+ label {
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: 5px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#app-settings-header {
|
|
box-sizing: border-box;
|
|
background-color: var(--color-main-background);
|
|
}
|
|
|
|
|
|
.settings-button {
|
|
display: block;
|
|
height: 44px;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--color-main-background);
|
|
@include icon-color('settings-dark', 'actions', $color-black, 1, true);
|
|
background-position: 14px center;
|
|
background-repeat: no-repeat;
|
|
box-shadow: none;
|
|
border: 0;
|
|
border-radius: 0;
|
|
text-align: left;
|
|
padding-left: 42px;
|
|
font-weight: 400;
|
|
|
|
/* like app-navigation a */
|
|
color: var(--color-main-text);
|
|
opacity: .57;
|
|
|
|
&.opened,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--color-main-background);
|
|
opacity: 1;
|
|
box-shadow: inset 4px 0 var(--color-primary);
|
|
}
|
|
}
|
|
|
|
/* GENERAL SECTION ------------------------------------------------------------ */
|
|
.section {
|
|
display: block;
|
|
padding: 30px;
|
|
color: var(--color-text-lighter);
|
|
margin-bottom: 24px;
|
|
&.hidden {
|
|
display: none !important;
|
|
}
|
|
/* slight position correction of checkboxes and radio buttons */
|
|
input {
|
|
&[type='checkbox'],
|
|
&[type='radio'] {
|
|
vertical-align: -2px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
.sub-section {
|
|
position: relative;
|
|
margin-top: 10px;
|
|
margin-left: 27px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.appear {
|
|
opacity: 1;
|
|
-webkit-transition: opacity 500ms ease 0s;
|
|
-moz-transition: opacity 500ms ease 0s;
|
|
-ms-transition: opacity 500ms ease 0s;
|
|
-o-transition: opacity 500ms ease 0s;
|
|
transition: opacity 500ms ease 0s;
|
|
&.transparent {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* TABS ------------------------------------------------------------ */
|
|
.tabHeaders {
|
|
display: inline-block;
|
|
margin: 15px;
|
|
.tabHeader {
|
|
float: left;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
color: var(--color-text-lighter);
|
|
margin-bottom: 1px;
|
|
a {
|
|
color: var(--color-text-lighter);
|
|
margin-bottom: 1px;
|
|
}
|
|
&.selected {
|
|
font-weight: 600;
|
|
}
|
|
&.selected,
|
|
&:hover,
|
|
&:focus {
|
|
margin-bottom: 0px;
|
|
color: var(--color-main-text);
|
|
border-bottom: 1px solid var(--color-text-lighter);
|
|
}
|
|
}
|
|
}
|
|
.tabsContainer {
|
|
clear: left;
|
|
.tab {
|
|
padding: 0 15px 15px;
|
|
}
|
|
}
|
|
|
|
/* POPOVER MENU ------------------------------------------------------------ */
|
|
$popoveritem-height: 38px;
|
|
$popovericon-size: 16px;
|
|
|
|
.ie,
|
|
.edge {
|
|
.bubble, .bubble:after,
|
|
.popovermenu, .popovermenu:after,
|
|
#app-navigation .app-navigation-entry-menu,
|
|
#app-navigation .app-navigation-entry-menu:after {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
.bubble,
|
|
.app-navigation-entry-menu,
|
|
.popovermenu {
|
|
position: absolute;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid transparent;
|
|
z-index: 110;
|
|
margin: 5px;
|
|
margin-top: -5px;
|
|
right: 0;
|
|
filter: drop-shadow(0 1px 3px var(--color-box-shadow));
|
|
display: none;
|
|
|
|
&:after {
|
|
bottom: 100%;
|
|
// Required right-distance is half menu icon size + right padding
|
|
// = 16px/2 + 14px = 22px
|
|
// popover right margin is 5px, arrow width is 9px to center and border is 1px
|
|
// 22px - 9px - 5px - 1px = 7px
|
|
right: 7px;
|
|
/* change this to adjust the arrow position */
|
|
border: solid transparent;
|
|
content: ' ';
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
border-bottom-color: var(--color-main-background);
|
|
border-width: 9px;
|
|
}
|
|
/* Center the popover */
|
|
&.menu-center {
|
|
transform: translateX(50%);
|
|
right: 50%;
|
|
margin-right: 0;
|
|
&:after {
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
/* Align the popover to the left */
|
|
&.menu-left {
|
|
right: auto;
|
|
left: 0;
|
|
margin-right: 0;
|
|
&:after {
|
|
left: 6px;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
display: block;
|
|
}
|
|
|
|
&.contactsmenu-popover {
|
|
margin: 0;
|
|
}
|
|
|
|
ul {
|
|
/* Overwrite #app-navigation > ul ul */
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
}
|
|
li {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
> button,
|
|
> a,
|
|
> .menuitem {
|
|
cursor: pointer;
|
|
line-height: $popoveritem-height;
|
|
border: 0;
|
|
background-color: transparent;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
height: auto;
|
|
margin: 0;
|
|
font-weight: 300;
|
|
box-shadow: none;
|
|
width: 100%;
|
|
color: var(--color-main-text);
|
|
white-space: nowrap;
|
|
/* Override the app-navigation li opacity */
|
|
opacity: .7 !important;
|
|
span[class^='icon-'],
|
|
span[class*=' icon-'],
|
|
&[class^='icon-'],
|
|
&[class*=' icon-'] {
|
|
min-width: 0; /* Overwrite icons*/
|
|
min-height: 0;
|
|
background-position: #{($popoveritem-height - $popovericon-size) / 2} center;
|
|
background-size: $popovericon-size;
|
|
}
|
|
span[class^='icon-'],
|
|
span[class*=' icon-'] {
|
|
/* Keep padding to define the width to
|
|
assure correct position of a possible text */
|
|
padding: #{$popoveritem-height / 2} 0 #{$popoveritem-height / 2} $popoveritem-height;
|
|
}
|
|
// If no icons set, force left margin to align
|
|
&:not([class^='icon-']):not([class*='icon-']) {
|
|
> span,
|
|
> input,
|
|
> form {
|
|
&:not([class^='icon-']):not([class*='icon-']):first-child {
|
|
margin-left: $popoveritem-height;
|
|
}
|
|
}
|
|
}
|
|
&[class^='icon-'],
|
|
&[class*=' icon-'] {
|
|
padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
|
|
}
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
opacity: 1 !important;
|
|
}
|
|
/* prevent .action class to break the design */
|
|
&.action {
|
|
padding: inherit !important;
|
|
}
|
|
> span {
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
> p {
|
|
width: 150px;
|
|
line-height: 1.6em;
|
|
padding: 8px 0;
|
|
white-space: normal;
|
|
}
|
|
> select {
|
|
margin: 0;
|
|
margin-left: 6px;
|
|
}
|
|
/* Add padding if contains icon+text */
|
|
&:not(:empty) {
|
|
padding-right: 10px !important;
|
|
}
|
|
/* DEPRECATED! old img in popover fallback
|
|
* TODO: to remove */
|
|
> img {
|
|
width: $popovericon-size;
|
|
padding: #{($popoveritem-height - $popovericon-size) / 2};
|
|
}
|
|
/* checkbox/radio fixes */
|
|
> input.radio + label,
|
|
> input.checkbox + label {
|
|
padding: 0 !important;
|
|
width: 100%;
|
|
}
|
|
> input.checkbox + label::before {
|
|
margin: -2px 13px 0;
|
|
}
|
|
> input.radio + label::before {
|
|
margin: -2px 12px 0;
|
|
}
|
|
> input:not([type=radio]):not([type=checkbox]):not([type=image]) {
|
|
width: 150px;
|
|
}
|
|
form {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
/* put a small space between text and form
|
|
if there is an element before */
|
|
&:not(:first-child) {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
/* no margin if hidden span before */
|
|
> span.hidden + form,
|
|
> span[style*='display:none'] + form {
|
|
margin-left: 0;
|
|
}
|
|
/* Inputs inside popover supports text, submit & reset */
|
|
input {
|
|
min-width: #{$popoveritem-height - 4px}; /* twice the margin */
|
|
max-height: #{$popoveritem-height - 4px}; /* twice the margin */
|
|
margin: 2px 0;
|
|
flex: 1 1 auto;
|
|
&:not(:first-child) {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
/* css hack, only first not hidden*/
|
|
&:not(.hidden):not([style*='display:none']) {
|
|
&:first-of-type {
|
|
> button, > a, > .menuitem {
|
|
> form, > input {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
&:last-of-type {
|
|
> button, > a, > .menuitem {
|
|
> form, > input {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> button {
|
|
padding: 0;
|
|
span {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
/* "app-*" descendants use border-box sizing, so the height of the icon must be
|
|
* set to the height of the item (as well as its width to make it squared). */
|
|
#content[class*='app-'] {
|
|
.bubble,
|
|
.app-navigation-entry-menu,
|
|
.popovermenu {
|
|
li {
|
|
> button,
|
|
> a,
|
|
> .menuitem {
|
|
/* DEPRECATED! old img in popover fallback
|
|
* TODO: to remove */
|
|
> img {
|
|
width: $popoveritem-height;
|
|
height: $popoveritem-height;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CONTENT LIST ------------------------------------------------------------ */
|
|
.app-content-list {
|
|
width: 300px;
|
|
@include position('sticky');
|
|
top: $header-height;
|
|
border-right: 1px solid var(--color-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform 250ms ease-in-out;
|
|
min-height: calc(100vh - #{$header-height});
|
|
max-height: calc(100vh - #{$header-height});
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
flex: 0 0 300px;
|
|
|
|
/* Default item */
|
|
.app-content-list-item {
|
|
position: relative;
|
|
height: 68px;
|
|
border-top: 1px solid var(--color-border);
|
|
cursor: pointer;
|
|
padding: 10px 7px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
|
|
/* Icon fixes */
|
|
&,
|
|
> .app-content-list-item-menu {
|
|
> [class^='icon-'],
|
|
> [class*=' icon-'] {
|
|
order: 4;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: -7px; // right padding of item
|
|
padding: 22px;
|
|
opacity: .3;
|
|
cursor: pointer;
|
|
&:hover,
|
|
&:focus {
|
|
opacity: .7;
|
|
}
|
|
&[class^='icon-star'],
|
|
&[class*=' icon-star'] {
|
|
opacity: .7;
|
|
&:hover,
|
|
&:focus {
|
|
opacity: 1 ;
|
|
}
|
|
|
|
}
|
|
&.icon-starred {
|
|
opacity: 1 ;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background-color: var(--color-background-dark);
|
|
// display checkbox on hover/focus/active
|
|
.app-content-list-item-checkbox.checkbox + label {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.app-content-list-item-checkbox.checkbox + label,
|
|
.app-content-list-item-star {
|
|
position: absolute;
|
|
height: 40px;
|
|
width: 40px;
|
|
z-index: 50;
|
|
}
|
|
|
|
.app-content-list-item-checkbox.checkbox {
|
|
&:checked,
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
+ label {
|
|
// display checkbox if checked
|
|
display: flex;
|
|
// if checked, lower the opacity of the avatar
|
|
+ .app-content-list-item-icon {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
}
|
|
+ label {
|
|
top: 14px;
|
|
left: 7px;
|
|
// hidden by default, only chown on hover-focus or if checked
|
|
display: none;
|
|
&::before {
|
|
margin: 0;
|
|
}
|
|
/* Hide the star, priority to the checkbox */
|
|
~ .app-content-list-item-star {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-content-list-item-star {
|
|
display: flex;
|
|
top: 10px;
|
|
left: 32px;
|
|
background-size: 16px;
|
|
height: 20px;
|
|
width: 20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.app-content-list-item-icon {
|
|
position: absolute;
|
|
display: inline-block;
|
|
height: 40px;
|
|
width: 40px;
|
|
line-height: 40px;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
margin-right: 10px;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
text-transform: capitalize;
|
|
object-fit: cover;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
top: 50%;
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.app-content-list-item-line-one,
|
|
.app-content-list-item-line-two {
|
|
display: block;
|
|
padding-left: 50px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
order: 1;
|
|
flex: 1 1 0px;
|
|
padding-right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-content-list-item-line-two {
|
|
opacity: .5;
|
|
order: 3;
|
|
flex: 1 0;
|
|
flex-basis: calc(100% - 44px);
|
|
}
|
|
|
|
.app-content-list-item-details {
|
|
order: 2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100px;
|
|
opacity: .5;
|
|
font-size: 80%;
|
|
user-select: none;
|
|
}
|
|
|
|
.app-content-list-item-menu {
|
|
order: 4;
|
|
position: relative;
|
|
.popovermenu {
|
|
margin: 0;
|
|
right: -5px;
|
|
}
|
|
}
|
|
}
|
|
&.selection .app-content-list-item-checkbox.checkbox + label {
|
|
display: flex;
|
|
}
|
|
}
|