discourse/app/assets/stylesheets/common/components/footer-nav.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

94 lines
2.0 KiB
SCSS
Raw Normal View History

// --------------------------------------------------
// Footer nav bar (displayed in DiscourseHub app and PWAs)
// --------------------------------------------------
$footer-nav-height: 49px;
body.footer-nav-visible {
#main-outlet {
padding-bottom: $footer-nav-height + 15;
}
#reply-control.draft {
bottom: $footer-nav-height;
2019-04-15 19:10:18 -04:00
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
}
#topic-progress-wrapper:not(.docked) {
margin-bottom: calc(#{$footer-nav-height} + env(safe-area-inset-bottom));
}
.posts-filtered-notice {
transition: all linear 0.1s;
bottom: calc(#{$footer-nav-height} + env(safe-area-inset-bottom));
}
}
.footer-nav {
background-color: rgba(var(--header_background-rgb), 0.9);
box-shadow: shadow("footer-nav");
height: $footer-nav-height;
position: fixed;
bottom: -$footer-nav-height;
left: 0;
width: 100%;
z-index: z("footer-nav");
transition: all linear 0.1s;
.d-icon {
color: var(--header_primary-medium);
}
&.visible {
bottom: 0px;
}
.footer-nav-widget {
display: flex;
justify-content: "space-evenly";
@include unselectable;
button {
flex: 1;
margin: 4px;
border-radius: 2px;
padding: 14px 18px;
&:disabled {
opacity: 0.6;
}
}
}
}
@supports (padding: max(0px)) {
.footer-nav.visible {
padding-bottom: unquote("max(5px, env(safe-area-inset-bottom))");
}
}
@supports (-webkit-backdrop-filter: blur(10px)) {
body:not(.footer-nav-ipad) .footer-nav {
background-color: rgba(var(--header_background-rgb), 0.7);
2019-04-12 12:29:54 -04:00
-webkit-backdrop-filter: blur(20px);
}
}
body.footer-nav-ipad {
padding-top: $footer-nav-height;
.footer-nav {
bottom: auto;
top: 0px;
background-color: var(--header_background);
z-index: z("ipad-header-nav");
2019-05-09 10:25:22 -04:00
padding-bottom: 0; // resets safe-area-inset-bottom
}
#reply-control,
#reply-control.fullscreen {
z-index: z("ipad-header-nav") + 1;
}
&.docked .d-header-wrap {
top: $footer-nav-height;
}
}