b3589e1d89
- Use padding-inline-start for gutter - Refactor other rules that used left/right margins/paddings, to make future accidental breakage less likely Fixes #4538
117 lines
3.1 KiB
SCSS
117 lines
3.1 KiB
SCSS
menupopup {
|
|
color-scheme: auto;
|
|
--panel-padding: 5px 0;
|
|
menu, menuitem {
|
|
appearance: none;
|
|
margin-inline: 5px;
|
|
padding: 3px 10px;
|
|
border-radius: 4px;
|
|
|
|
&[_moz-menuactive] {
|
|
// Try best to match the native menu style
|
|
@include light-dark(
|
|
background-color, color-mix(in srgb, -moz-mac-active-menuitem 75%, transparent),
|
|
color-mix(in srgb, -moz-mac-active-menuitem 90%, transparent)
|
|
);
|
|
color: -moz-mac-menutextselect;
|
|
}
|
|
|
|
&:is([checked="true"], [selected="true"]) {
|
|
appearance: none !important;
|
|
border-radius: 4px;
|
|
&::before {
|
|
content: '\2713';
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 0;
|
|
width: 14px;
|
|
margin-inline-start: 0px !important;
|
|
}
|
|
}
|
|
|
|
&[disabled="true"] {
|
|
appearance: auto;
|
|
}
|
|
}
|
|
|
|
menulist > &,
|
|
&[needsgutter] {
|
|
menu, menuitem {
|
|
padding-inline-start: 20px;
|
|
|
|
// Add padding here so that it won't look weird when the customElement.js is not yet loaded
|
|
&:is([checked="true"], [selected="true"]) {
|
|
padding-inline-start: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
menuseparator {
|
|
appearance: none;
|
|
margin-inline: 15px;
|
|
border-bottom: 1px solid;
|
|
padding-bottom: 0px;
|
|
@include light-dark(border-color, rgba(170, 170, 170, 0.5), rgba(100, 100, 100, 0.5));
|
|
}
|
|
|
|
.menu-right {
|
|
appearance: none;
|
|
@include svgicon-menu("chevron-8", "universal", "8");
|
|
rotate: -90deg;
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
// Overwrite menulist rules
|
|
menulist > menupopup > menuitem::after,
|
|
menulist > menupopup > menuitem::before {
|
|
content: none;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
// Modified based on rules from https://searchfox.org/mozilla-esr102/source/browser/base/content/browser.css
|
|
|
|
/* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
|
|
instead of "transform" and "opacity" for these animations.
|
|
The -moz-window* properties apply to the whole window including the window's
|
|
shadow, and they don't affect the window's "shape", so the system doesn't
|
|
have to recompute the shadow shape during the animation. This makes them a
|
|
lot faster. In fact, Gecko no longer triggers shadow shape recomputations
|
|
for repaints.
|
|
These properties are not implemented on other platforms. */
|
|
menupopup:not([animate="false"]) {
|
|
transition-property: -moz-window-transform, -moz-window-opacity;
|
|
transition-duration: 0.18s, 0.18s;
|
|
transition-timing-function:
|
|
var(--animation-easing-function), ease-out;
|
|
}
|
|
|
|
/* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
|
|
* Big Sur, see bug 1672091. */
|
|
@media (-moz-mac-big-sur-theme: 0) {
|
|
menupopup:not([animate="false"]) {
|
|
-moz-window-opacity: 0;
|
|
-moz-window-transform: translateY(-70px);
|
|
}
|
|
|
|
menupopup[side="bottom"]:not([animate="false"]) {
|
|
-moz-window-transform: translateY(70px);
|
|
}
|
|
}
|
|
|
|
/* [animate] is here only so that this rule has greater specificity than the
|
|
* rule right above */
|
|
menupopup[animate][animate="open"] {
|
|
-moz-window-opacity: 1.0;
|
|
transition-duration: 0.18s, 0.18s;
|
|
-moz-window-transform: none;
|
|
transition-timing-function:
|
|
var(--animation-easing-function), ease-in-out;
|
|
}
|
|
|
|
menupopup[animate][animate="cancel"] {
|
|
-moz-window-opacity: 0;
|
|
-moz-window-transform: none;
|
|
}
|
|
|
|
// End of browser.css
|