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