aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorkimsible <kimsible@users.noreply.github.com>2020-08-10 23:28:31 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-11 08:03:28 +0200
commit7034b3c908e96e3e26aaa66299b75290adc98f02 (patch)
tree93a1e08ec555de097805228f4dbb8166ebb82608 /client/src/sass
parent30bc55c88b3b7416c2224925e88639694fd32746 (diff)
downloadPeerTube-7034b3c908e96e3e26aaa66299b75290adc98f02.tar.gz
PeerTube-7034b3c908e96e3e26aaa66299b75290adc98f02.tar.zst
PeerTube-7034b3c908e96e3e26aaa66299b75290adc98f02.zip
Refactor - improve offset content handling with fixed sub-menu and broadcast-message
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss35
1 files changed, 21 insertions, 14 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 946647ccb..3722348a0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -138,10 +138,6 @@ label {
138 flex-grow: 1; 138 flex-grow: 1;
139 } 139 }
140 140
141 my-top-menu-dropdown + .margin-content {
142 padding-top: $sub-menu-height + $sub-menu-margin-bottom;
143 }
144
145 .sub-menu { 141 .sub-menu {
146 background-color: pvar(--submenuColor); 142 background-color: pvar(--submenuColor);
147 width: 100%; 143 width: 100%;
@@ -149,22 +145,20 @@ label {
149 align-items: center; 145 align-items: center;
150 padding-left: $not-expanded-horizontal-margins; 146 padding-left: $not-expanded-horizontal-margins;
151 padding-right: $not-expanded-horizontal-margins; 147 padding-right: $not-expanded-horizontal-margins;
152 148 height: $sub-menu-height;
153 & + .margin-content { 149 margin-bottom: $sub-menu-margin-bottom;
154 padding-top: $sub-menu-margin-bottom;
155 }
156 150
157 &.sub-menu-fixed { 151 &.sub-menu-fixed {
158 height: $sub-menu-height;
159 position: fixed; 152 position: fixed;
160 z-index: #{z('header') - 1}; 153 z-index: #{z('header') - 1};
161
162 & + .margin-content {
163 padding-top: $sub-menu-height + $sub-menu-margin-bottom;
164 }
165 } 154 }
166 } 155 }
167 156
157 // Use an appropriate offset top when sub-menu fixed
158 .margin-content.offset-content {
159 padding-top: $sub-menu-height + $sub-menu-margin-bottom;
160 }
161
168 // Override some properties if the main content is expanded (no menu on the left) 162 // Override some properties if the main content is expanded (no menu on the left)
169 &.expanded { 163 &.expanded {
170 margin-left: 0; 164 margin-left: 0;
@@ -305,9 +299,17 @@ table {
305 } 299 }
306} 300}
307 301
302/* offsetTop for scrollToAnchor */
303
308.anchor { 304.anchor {
309 position: relative; 305 position: relative;
310 top: #{-($header-height + 20px)}; // offsetTop scrollToAnchor 306 top: #{-($header-height + 20px)};
307}
308
309.offset-content { // if sub-menu fixed
310 .anchor {
311 top: #{-($header-height + $sub-menu-height + 20px)};
312 }
311} 313}
312 314
313@media screen and (max-width: #{breakpoint(xxl)}) { 315@media screen and (max-width: #{breakpoint(xxl)}) {
@@ -363,6 +365,11 @@ table {
363 overflow-x: auto; 365 overflow-x: auto;
364 } 366 }
365 367
368 // Use an appropriate offset top when sub-menu fixed
369 .margin-content.offset-content {
370 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
371 }
372
366 .admin-sub-header { 373 .admin-sub-header {
367 @include admin-sub-header-responsive(15px*2); 374 @include admin-sub-header-responsive(15px*2);
368 } 375 }