discourse/app/assets/stylesheets/common/base/sidebar-more-section-links....

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

75 lines
2.6 KiB
SCSS
Raw Normal View History

.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 {
// the multiplication by 1 here is a workaround for a bug in the R2 gem
// that we use to generate RTL CSS.
// the gem generates RTL CSS by converting anything left to right and
// vice versa. for example, a `padding-right: 1px;` property becomes
// `padding-left: 1px;` when it goes through the gem.
// the gem also handles the `padding` property (and similar properties)
// when it's in the 4-sides form, e.g. `padding: 1px 2px 3px 4px;` which
// gets converted to `padding: 1px 4px 3px 2px;`.
// however, the problem is that the gem detects 4-sides properties pretty
// naively - it splits the property value on /\s+/ and if it has 4 parts,
// it swaps the second and fourth parts.
// if you remove the by 1 multiplication in our rule below, we end up
// with a value that can be split into 4 parts and that causes the R2 gem
// to convert the rule to this:
// padding: 0.33rem 3) / calc(var(--d-sidebar-row-horizontal-padding);
// which is clearly invalid and breaks all the rules that come after this
// one in the application CSS bundle.
// in the long term we should probably find (or write ourselves)
// something that's smarter than R2, but for now let's workaround the bug
// in R2.
padding: 0.33rem calc(1 * var(--d-sidebar-row-horizontal-padding) / 3);
}
}
.sidebar-more-section-links-details-content-secondary {
border-top: 1.5px solid var(--primary-low);
}
}