discourse/app/assets/stylesheets/common/base/sidebar-footer.scss
Keegan George ea27079ffa
FIX: Sidebar scroll fade on older iOS (#18299)
* DEV: Use explicit transparent color rather than keyword
* DEV: Use variable for dark mode
* DEV: Add mobile style
2022-09-21 09:03:40 +10:00

69 lines
1.4 KiB
SCSS

.sidebar-footer-wrapper {
box-sizing: border-box;
width: 100%;
position: sticky;
bottom: 0;
.sidebar-footer-container {
display: flex;
align-items: stretch;
position: relative;
border-top: 1.5px solid var(--primary-low);
background: var(--primary-very-low);
padding: 0.5em 0.8em;
&:before {
// fade to make scroll more apparent
position: absolute;
content: "";
display: block;
height: 1.5em;
top: calc(-1.5em - 1px);
left: -0.5em;
right: -0.5em;
width: calc(100% + 0.5em);
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(var(--primary-very-low-rgb), 0),
rgba(var(--primary-very-low-rgb), 1)
);
}
}
.sidebar-footer-link {
display: inline-flex;
align-items: center;
height: 100%;
font-size: var(--font-down-1);
color: var(--primary-high);
padding: 0 0.5em;
&:hover,
&:focus {
background: var(--d-sidebar-highlight-color);
}
}
.sidebar-footer-links-separator {
color: var(--primary-low-mid);
}
.sidebar-footer-actions {
margin-left: auto;
}
.sidebar-footer-actions-button.btn {
background: transparent;
border: none;
padding: 0.25em 0.4em;
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
}
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
}
}
}