diff options
Diffstat (limited to 'core/css/mobile.scss')
| -rw-r--r-- | core/css/mobile.scss | 72 |
1 files changed, 30 insertions, 42 deletions
diff --git a/core/css/mobile.scss b/core/css/mobile.scss index d1abb0176a5..ebb175a5793 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -1,8 +1,14 @@ -@media only screen and (max-width: $breakpoint-mobile) { +/*! + * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +@use 'variables'; + +@media only screen and (width < #{variables.$breakpoint-mobile}) { /* position share dropdown */ #dropdown { - margin-right: 10% !important; + margin-inline-end: 10% !important; width: 80% !important; } @@ -14,13 +20,15 @@ /* fix error display on smaller screens */ .error-wide { width: 100%; - margin-left: 0 !important; + margin-inline-start: 0 !important; box-sizing: border-box; } /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ - #app-navigation { - transform: translateX(-#{$navigation-width}); + #app-navigation:not(.vue) { + transform: translateX(-#{variables.$navigation-width}); + position: fixed; + height: var(--body-height); } .snapjs-left { #app-navigation { @@ -29,12 +37,12 @@ } #app-navigation:not(.hidden) + #app-content { - margin-left: 0; + margin-inline-start: 0; } .skip-navigation.skip-content { - left: 3px; - margin-left: 0; + inset-inline-start: 3px; + margin-inline-start: 0; } /* full width for message list on mobile */ @@ -64,8 +72,8 @@ #app-navigation-toggle-back { position: fixed; display: inline-block !important; - top: $header-height; - left: 0; + top: variables.$header-height; + inset-inline-start: 0; width: 44px; height: 44px; z-index: 1050; // above app-content @@ -83,7 +91,7 @@ #app-navigation-toggle { position: fixed; display: inline-block !important; - left: 0; + inset-inline-start: 0; width: 44px; height: 44px; z-index: 1050; // above app-content @@ -96,50 +104,35 @@ } /* position controls for apps with app-navigation */ - #app-navigation + #app-content #controls { - padding-left: 44px; + #app-navigation + #app-content .files-controls { + padding-inline-start: 44px; } /* .viewer-mode is when text editor, PDF viewer, etc is open */ - #body-user .app-files.viewer-mode #controls { - padding-left: 0 !important; + #body-user .app-files.viewer-mode .files-controls { + padding-inline-start: 0 !important; } .app-files.viewer-mode #app-navigation-toggle { display: none !important; } table.multiselect thead { - left: 0 !important; + inset-inline-start: 0 !important; } /* prevent overflow in user management controls bar */ #usersearchform { display: none; } - #body-settings #controls { - min-width: $breakpoint-mobile !important; - } - - /* do not show dates in filepicker */ - #oc-dialog-filepicker-content .filelist #headerSize, - #oc-dialog-filepicker-content .filelist #headerDate, - #oc-dialog-filepicker-content .filelist .filesize, - #oc-dialog-filepicker-content .filelist .date { - display: none; - } - #oc-dialog-filepicker-content .filelist .filename { - max-width: 100%; - } - - .snapjs-left table.multiselect thead { - top: 44px; + #body-settings .files-controls { + min-width: variables.$breakpoint-mobile !important; } /* end of media query */ } @media only screen and (max-width: 480px) { - #header .header-right > div > .menu { + #header .header-end > div > .menu { max-width: calc(100vw - 10px); position: fixed; &::after { @@ -147,7 +140,7 @@ } } /* Arrow directly child of menutoggle */ - #header .header-right > div { + #header .header-end > div { &.openedMenu { &::after { display: block; @@ -162,19 +155,14 @@ width: 0; position: absolute; pointer-events: none; - right: 15px; + inset-inline-end: 15px; z-index: 2001; display: none; } /* settings need a different offset, since they have a right padding */ &#settings::after { - right: 27px; + inset-inline-end: 27px; } } - - #notification-container { - max-width: 100%; - width: 100%; - } } |