Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: set CSS custom property for footer-nav-height (#17744)

This commit is contained in:
Kris 2022-08-01 18:01:06 -04:00 committed by GitHub
parent cfd0a04965
commit 8df2756bba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/stylesheets/common/components/footer-nav.scss
View File

@ -4,32 +4,36 @@
$footer-nav-height: 49px; $footer-nav-height: 49px;
:root {
--footer-nav-height: #{$footer-nav-height};
}
body.footer-nav-visible { body.footer-nav-visible {
#main-outlet { #main-outlet {
padding-bottom: $footer-nav-height + 15; padding-bottom: calc(var(--footer-nav-height) + 15px);
} }
#reply-control.draft { #reply-control.draft {
bottom: $footer-nav-height; bottom: var(--footer-nav-height);
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px; padding-bottom: 0px;
} }
#topic-progress-wrapper:not(.docked) { #topic-progress-wrapper:not(.docked) {
margin-bottom: calc(#{$footer-nav-height} + env(safe-area-inset-bottom)); margin-bottom: calc(var(--footer-nav-height) + env(safe-area-inset-bottom));
} }
.posts-filtered-notice { .posts-filtered-notice {
transition: all linear 0.1s; transition: all linear 0.1s;
bottom: calc(#{$footer-nav-height} + env(safe-area-inset-bottom)); bottom: calc(var(--footer-nav-height) + env(safe-area-inset-bottom));
} }
} }
.footer-nav { .footer-nav {
background-color: rgba(var(--header_background-rgb), 0.9); background-color: rgba(var(--header_background-rgb), 0.9);
box-shadow: shadow("footer-nav"); box-shadow: shadow("footer-nav");
height: $footer-nav-height; height: var(--footer-nav-height);
position: fixed; position: fixed;
bottom: -$footer-nav-height; bottom: calc(var(--footer-nav-height) * -1);
left: 0; left: 0;
width: 100%; width: 100%;
z-index: z("footer-nav"); z-index: z("footer-nav");
@ -73,7 +77,7 @@ body.footer-nav-visible {
} }
body.footer-nav-ipad { body.footer-nav-ipad {
padding-top: $footer-nav-height; padding-top: var(--footer-nav-height);
.footer-nav { .footer-nav {
bottom: auto; bottom: auto;
top: 0px; top: 0px;
@ -88,6 +92,6 @@ body.footer-nav-ipad {
} }
&.docked .d-header-wrap { &.docked .d-header-wrap {
top: $footer-nav-height; top: var(--footer-nav-height);
} }
} }