aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-08-17 10:17:54 +0200
committerGitHub <noreply@github.com>2020-08-17 10:17:54 +0200
commit245b9d27bc10a4d8c8eb64add06b653f12763f56 (patch)
tree4c48717c07d15e08ef36ca600c967b4982a7d03d /client/src/sass
parent30d55e75cae1adec3fc43c84691975bf8b97db34 (diff)
downloadPeerTube-245b9d27bc10a4d8c8eb64add06b653f12763f56.tar.gz
PeerTube-245b9d27bc10a4d8c8eb64add06b653f12763f56.tar.zst
PeerTube-245b9d27bc10a4d8c8eb64add06b653f12763f56.zip
On touchscreens add content overlay for opened menu (#3088)
* Overflow:hidden on touchscreen when modal-open * Do not display menu by default on touchscreens * Add content overlay on touchscreens when menu is opened * Fix zIndex overlay for search infos * On touchscreens close menu on swipe left Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/bootstrap.scss23
1 files changed, 23 insertions, 0 deletions
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 308a28658..a3b60198c 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -150,6 +150,29 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
150 width: 100vw; // Make sure the content fits all the available width 150 width: 100vw; // Make sure the content fits all the available width
151} 151}
152 152
153// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
154@media (hover: none) and (pointer: coarse) {
155 .modal-open, .menu-open {
156 overflow: hidden !important;
157 }
158
159 // On touchscreen devices display content overlay when opened menu
160 .menu-open {
161 .main-col {
162 &::before {
163 background-color: black;
164 width: 100vw;
165 height: 100vh;
166 opacity: 0.75;
167 content: '';
168 display: block;
169 position: fixed;
170 z-index: z('header') - 1;
171 }
172 }
173 }
174}
175
153// Nav customizations 176// Nav customizations
154.nav .nav-link { 177.nav .nav-link {
155 display: flex !important; 178 display: flex !important;