12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103 |
- /**
- * @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: $border-radius;
- display: inline-block;
- white-space: nowrap;
- }
-
-
- /* APP STYLING -------------------------------------------------------------- */
-
- #app {
- height: 100%;
- width: 100%;
- * {
- box-sizing: border-box;
- }
- }
-
- /* APP-NAVIGATION ------------------------------------------------------------*/
-
- /* Navigation: folder like structure */
-
- #app-navigation {
- width: 250px;
- height: 100%;
- float: left;
- box-sizing: border-box;
- background-color: $color-main-background;
- padding-bottom: 44px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- border-right: 1px solid $color-border;
- display: flex;
- flex-direction: column;
- 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;
- }
-
- &:focus,
- &:hover,
- &.active,
- a.selected {
- &,
- > a {
- opacity: 1;
- box-shadow: inset 2px 0 $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;
- /* 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;
- }
- }
-
- /* Second level nesting for lists */
- > ul {
- flex: 0 1 auto;
- padding-left: 44px;
- 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;
- &:focus,
- &:hover,
- &.active,
- a.selected {
- &,
- > a {
- opacity: 1;
- }
- }
-
- /* align loader */
- &.icon-loading-small:after {
- left: 22px; /* 44px / 2 */
- }
- }
- }
- }
- /* 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: none !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: $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;
- }
-
- /* 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;
- }
- &.without-app-settings {
- padding-bottom: 0;
- }
-
- /**
- * 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;
- }
- &:after {
- position: absolute;
- height: 44px;
- width: 44px;
- margin: 0;
- padding: 0;
- background: none;
- background-image: url('../img/actions/triangle-s.svg?v=1');
- 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);
- }
-
- /* force padding on link no matter if 'a' has an icon class */
- > a:first-child {
- padding-left: 44px;
- }
- &:after,
- > a {
- transition: background 100ms ease-in-out,
- transform 250ms ease-in-out,
- opacity 100ms ease-in-out;
- }
- &:hover > a,
- &:focus > a {
- background-position-x: -50px;
- }
- &:hover,
- &:focus {
- &:after {
- opacity: 1;
- }
- }
- &.open {
- &:after {
- -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 */
- }
- }
-
- /**
- * 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: $color-main-background;
- z-index: -1;
- form,
- div {
- display: inline-flex;
- width: 100%;
- }
- input {
- padding: 5px;
- margin-right: 0;
- height: 38px;
- &:hover {
- /* 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;
- }
- &: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(250px);
- .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: $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: $color-error;
- }
- .app-navigation-separator {
- border-bottom: 1px solid nc-lighten($color-main-text, 86%);
- }
-
- .app-navigation-entry-utils ul,
- .app-navigation-entry-menu ul {
- list-style-type: none;
- }
- }
-
- /* APP-CONTENT ---------------------------------------------------------------*/
- /* Part where the content will be loaded into */
- #app-content {
- position: relative;
- height: 100%;
- overflow-y: auto;
- /* no top border for first settings item */
- > .section:first-child {
- border-top: none;
- }
- &.with-app-sidebar {
- margin-right: 27%;
- }
- }
-
- #app-content-wrapper {
- min-width: 100%;
- min-height: 100%;
- }
-
- /* APP-SIDEBAR ----------------------------------------------------------------*/
-
- /*
- Sidebar: a sidebar to be used within #app-content
- have it as first element within app-content in order to shrink other
- sibling containers properly. Compare Files app for example.
- */
- #app-sidebar {
- position: fixed;
- top: 45px;
- right: 0;
- left: auto;
- bottom: 0;
- width: 27%;
- min-width: 300px;
- display: block;
- background: $color-main-background;
- border-left: 1px solid $color-border;
- -webkit-transition: margin-right 300ms;
- transition: margin-right 300ms;
- overflow-x: hidden;
- overflow-y: auto;
- visibility: visible;
- z-index: 500;
- &.disappear {
- visibility: hidden;
- }
- }
-
- /* APP-SETTINGS ---------------------------------------------------------------*/
-
- /* settings area */
- #app-settings {
- position: fixed;
- width: 250px;
- /* change to 100% when layout positions are absolute */
- bottom: 0;
- z-index: 140;
- &.open,
- &.opened {
- #app-settings-content {
- display: block;
- }
- }
- }
-
- #app-settings-content {
- display: none;
- padding: 10px;
- background-color: $color-main-background;
- /* restrict height of settings and make scrollable */
- max-height: 300px;
- overflow-y: auto;
- border-right: 1px solid $color-border;
- width: 250px;
- box-sizing: border-box;
-
- /* display input fields at full width */
- input[type='text'] {
- width: 93%;
- }
-
- .info-text {
- padding: 5px 0 7px 22px;
- color: rgba($color-main-text, .4);
- }
- input {
- &[type='checkbox'],
- &[type='radio'] {
- &.radio,
- &.checkbox {
- + label {
- display: inline-block;
- width: 100%;
- padding: 5px 0;
- }
- }
- }
- }
- }
-
- #app-settings-header {
- border-right: 1px solid $color-border;
- width: 250px;
- box-sizing: border-box;
- background-color: $color-main-background;
- }
-
- .settings-button {
- display: block;
- height: 44px;
- width: 100%;
- padding: 0;
- margin: 0;
- background-color: $color-main-background;
- background-image: url('../img/actions/settings-dark.svg?v=1');
- 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: $color-main-text;
- opacity: .57;
-
- &.opened,
- &:hover {
- background-color: $color-main-background;
- opacity: 1;
- box-shadow: inset 2px 0 $color-primary;
- }
- }
-
- /* GENERAL SECTION ---------------------------------------------------------- */
- .section {
- display: block;
- padding: 30px;
- color: nc-lighten($color-main-text, 33%);
- 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: 5px;
- cursor: pointer;
- color: nc-lighten($color-main-text, 33%);
- margin-bottom: 1px;
- a {
- color: nc-lighten($color-main-text, 33%);
- margin-bottom: 1px;
- }
- &.selected {
- font-weight: 600;
- border-bottom: 1px solid nc-lighten($color-main-text, 20%);
- }
- &:hover {
- border-bottom: 1px solid nc-lighten($color-main-text, 20%);
- }
- &.selected, &:hover {
- margin-bottom: 0px;
- color: $color-main-text;
- a {
- margin-bottom: 0px;
- color: $color-main-text;
- }
- }
- }
- }
- .tabsContainer {
- clear: left;
- .tab {
- padding: 0 15px 15px;
- }
- }
-
- /* POPOVER MENU ------------------------------------------------------------- */
- .ie,
- .edge {
- .bubble, .bubble:after,
- .popovermenu, .popovermenu:after,
- #app-navigation .app-navigation-entry-menu,
- #app-navigation .app-navigation-entry-menu:after {
- border: 1px solid $color-border;
- }
- }
-
- .bubble,
- .app-navigation-entry-menu,
- .popovermenu {
- position: absolute;
- background-color: $color-main-background;
- color: $color-main-text;
- border-radius: $border-radius;
- z-index: 110;
- margin: 5px;
- margin-top: -5px;
- right: 0;
- filter: drop-shadow(0 1px 3px $color-box-shadow);
- display: none;
-
- &:after {
- bottom: 100%;
- /* Min-width of popover is 36px and arrow width is 20px
- wich leaves us 8px right and 8px left */
- right: 8px;
- /* change this to adjust the arrow position */
- border: solid transparent;
- content: ' ';
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-bottom-color: $color-main-background;
- border-width: 10px;
- }
- /* 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;
- }
-
- ul {
- /* Overwrite #app-navigation > ul ul */
- display: flex !important;
- flex-direction: column;
- }
- li {
- display: flex;
- flex: 0 0 auto;
- > button,
- > a,
- > .menuitem {
- cursor: pointer;
- line-height: 36px;
- border: 0;
- background-color: transparent;
- display: flex;
- align-items: center;
- width: auto;
- height: auto;
- margin: 0;
- font-weight: 300;
- box-shadow: none;
- width: 100%;
- color: $color-main-text;
- /* Override the app-navigation li opacity */
- opacity: .7 !important;
- [class^='icon-'],
- [class*=' icon-'],
- &[class^='icon-'],
- &[class*=' icon-'] {
- min-width: 0; /* Overwrite icons*/
- min-height: 0;
- background-position: 10px center;
- background-size: 16px;
- }
- [class^='icon-'],
- [class*=' icon-'] {
- /* Keep padding to define the width to
- assure correct position of a possible text */
- padding: 18px 0 18px 36px;
- }
- &[class^='icon-'],
- &[class*=' icon-'] {
- padding: 0 10px 0 36px !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;
- }
- > select {
- margin: 0;
- margin-left: 6px;
- }
- /* Add padding if contains icon+text */
- &:not(:empty) {
- padding-right: 10px !important;
- }
- > img {
- width: 16px;
- padding: 0 10px;
- }
- /* checkbox/radio fixes */
- > input.radio + label,
- > input.checkbox + label {
- padding: 0 !important;
- width: 100%;
- }
- > input.checkbox + label::before {
- margin: -2px 12px 0;
- }
- > input.radio + label::before {
- margin: -2px 11px 0;
- }
- }
- > button {
- padding: 0;
- span {
- opacity: 1;
- }
- }
-
- }
- }
-
-
- #app-content-wrapper {
- display: flex;
- position: relative;
- align-items: start;
- height: 100%;
- width: 100%;
- .app-content-list,
- .app-content-detail {
- min-height: 100%;
- max-height: 100%;
- overflow-x: hidden;
- overflow-y: auto;
- }
- }
- .app-content-list {
- width: 300px;
- border-right: 1px solid nc-darken($color-main-background, 8%);
- display: flex;
- flex-direction: column;
- transition: transform 250ms ease-in-out;
-
- /* Default item */
- .app-content-list-item {
- position: relative;
- height: 68px;
- border-top: 1px solid nc-darken($color-main-background, 8%);
- 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: -10px;
- 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: nc-darken($color-main-background, 6%);
- }
-
- .app-content-list-item-checkbox.checkbox + label,
- .app-content-list-item-star {
- position: absolute;
- height: 40px;
- width: 40px;
- display: flex;
- z-index: 50;
- + .app-content-list-item-icon {
- opacity: .7;
- }
- }
-
- .app-content-list-item-checkbox.checkbox + label {
- top: 14px;
- left: 7px;
- &::before {
- margin: 0;
- }
- /* Hide the star, priority to the checkbox */
- ~ .app-content-list-item-star {
- display: none;
- }
- }
-
- .app-content-list-item-star {
- 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% - 24px);
- }
-
- .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;
- }
- }
- }
- }
- /* App content */
- .app-content-detail {
- /* grow full width */
- flex-grow: 1;
-
- #app-navigation-toggle-back {
- display: none;
- }
- }
-
- /* Mobile width < 768px */
- @media only screen and (max-width: 768px) {
-
- /* full width for message list on mobile */
- .app-content-list {
- width: 100%;
- background: $color-main-background;
- position: relative;
- z-index: 100;
- }
-
- /* overlay message detail on top of message list */
- .app-content-detail {
- background: $color-main-background;
- width: 100%;
- left: 0;
- height: 100%;
- top: 0;
- box-shadow: 0 0 100px rgba(100, 100, 100, .9);
- position: absolute;
- }
-
- /* Show app details page */
- #app-content.showdetails {
- #app-navigation-toggle {
- transform: translateX(-44px);
- }
- #app-navigation-toggle-back {
- position: fixed;
- display: inline-block !important;
- top: 45px;
- left: 0;
- width: 44px;
- height: 44px;
- z-index: 149;
- background-color: rgba(255, 255, 255, .7);
- cursor: pointer;
- opacity: .6;
- transform: rotate(90deg);
- }
- .app-content-list {
- transform: translateX(-100%);
- }
- }
-
- /* end of media query */
- }
|