Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
:host {
--button-size-icon: var(--tab-min-height);
--button-min-height: var(--button-size-icon);
}
.wrapper {
display: grid;
grid-template-rows: auto min-content min-content;
box-sizing: border-box;
height: 100%;
padding-inline: 0;
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "sidebar.verticalTabs") {
:host([expanded]) & {
/* TODO: Should this be some other pixel value between 5/6? Need to be careful of Linux where font size is larger */
--tab-pinned-horizontal-count: 5;
/* TODO: These --space-* tokens should use semantic names shared with tabs.css */
min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
}
}
}
.actions-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
> moz-button:not(.tools-overflow) {
--button-outer-padding-inline: var(--space-medium);
--button-outer-padding-block: var(--space-xsmall);
&:first-of-type {
--button-outer-padding-block-start: var(--space-small);
}
&:last-of-type {
--button-outer-padding-block-end: var(--space-small);
}
}
}
.tools-and-extensions[orientation="horizontal"] {
:host([expanded]) & {
/* button width + extra inline padding to extend to the edge of sidebar + inline padding between adjacent buttons */
--first-last-button-width: calc(var(--button-size-icon) + var(--space-medium) + var(--space-xxsmall));
display: grid;
grid-template-columns: var(--first-last-button-width) repeat(4, calc(var(--button-size-icon) + var(--space-xsmall))) var(--first-last-button-width);
}
> moz-button.tools-overflow {
width: min-content;
--button-outer-padding-inline: var(--space-xxsmall);
--button-outer-padding-block: var(--space-xxsmall);
/* First button in every row */
&:nth-of-type(6n + 1) {
--button-outer-padding-inline-start: var(--space-medium);
}
/* Last button in every row */
&:nth-of-type(6n) {
--button-outer-padding-inline-end: var(--space-medium);
}
}
}
.bottom-actions > moz-button:last-of-type {
--button-outer-padding-block-end: var(--space-medium);
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "sidebar.verticalTabs") {
.tools-and-extensions > moz-button:last-of-type {
--button-outer-padding-block-end: var(--space-medium);
}
}
@media (prefers-reduced-motion: no-preference) {
moz-button::part(label) {
opacity: 0;
transition: opacity 300ms ease-in-out;
}
}
.expanded-button {
width: 100%;
&::part(button) {
font-size: var(--font-size-large);
font-weight: var(--font-weight);
justify-content: flex-start;
padding-inline: calc((var(--button-size-icon) - var(--icon-size-default)) / 2 - var(--border-width));
}
&::part(label) {
opacity: 1;
}
}
.tools-and-extensions {
align-self: start;
}
.bottom-actions {
align-self: end;
}