discourse/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
Osama Sayegh f94951147e
FIX: Replace R2 gem with rtlcss for generating RTL CSS (#19636)
We've had a couple of problems with the R2 gem where it generated a broken RTL CSS bundle that caused a badly broken layout when Discourse is used in an RTL language, see a3ce93b and 5926386. For this reason, we're replacing R2 with `rtlcss` that can handle modern CSS features better than R2 does.

`rltcss` is written in JS and available as an npm package. Calling the `rltcss` from rubyland is done via the `rtlcss_wrapper` gem which contains a distributable copy of the `rtlcss` package and loads/calls it with Mini Racer. See https://github.com/discourse/rtlcss_wrapper for more details.

Internal topic: t/76263.
2023-02-01 14:21:15 +03:00

55 lines
1.4 KiB
SCSS

.sidebar-more-section-links-details {
&:focus-within,
&:hover {
background: var(--d-sidebar-highlight-color);
}
.sidebar-more-section-links-details-summary {
color: var(--primary-high);
transition: background-color 0.25s;
display: flex;
align-items: center;
list-style: none;
box-sizing: border-box;
.sidebar-more-section-links-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: var(--d-sidebar-section-link-prefix-width);
height: var(--d-sidebar-section-link-prefix-width);
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
.d-icon {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
}
&::before {
display: none;
}
}
.sidebar-more-section-links-details-content-wrapper {
position: absolute;
width: 100%;
z-index: z("modal", "content") + 1;
background: transparent;
}
.sidebar-more-section-links-details-content {
background-color: var(--secondary);
box-shadow: shadow("dropdown");
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
.sidebar-row {
padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3);
}
}
.sidebar-more-section-links-details-content-secondary {
border-top: 1.5px solid var(--primary-low);
}
}