*/
.rb-c-alert {
border-radius: 4px;
border: 1px transparent solid;
margin: 0 0 1em 0;
padding: 1em;
/**
* Content to display within the alert.
*
* If showing only a single paragraph of text, this should be a ``
`` tag.
* If showing multiple paragraphs, or other HTML content, use a ``
``
* with the content inside.
*
* Structure:
*
...
*
*
*
...
*
...
* ...
*
*/
/**
* A close button for the alert.
*
* DOM Attributes:
* aria-label (string):
* The accessibility label for the button.
*
* role (string):
* This must be set to ``button``.
*
* tabindex (number):
* The tab index. This should be set to ``0`` in most cases.
*
* title (string):
* The tooltip label for the button.
*
* Structure:
*
*/
/**
* An optional header above content in the alert.
*
* This may be used anywhere within an ``.rb-c-alert__content`` to provide
* a heading above some part of the content. A common usage would be to
* provide it as the first element to create a prominent heading for the
* alert.
*
* Structure:
*
* text...
*
*/
}
.rb-c-alert:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: left;
font-size: 18px;
margin-right: 0.5em;
text-align: center;
width: 18px;
}
.rb-c-alert:last-child {
margin-bottom: 0;
}
.rb-c-alert.-is-error {
background: var(--ink-c-alert-error-bg);
border-color: var(--ink-c-alert-error-border-color);
color: var(--ink-c-alert-error-fg);
}
.rb-c-alert.-is-error:before {
content: "\f06a";
}
.rb-c-alert.-is-info {
background: var(--ink-c-alert-info-bg);
border-color: var(--ink-c-alert-info-border-color);
color: var(--ink-c-alert-info-fg);
}
.rb-c-alert.-is-info:before {
content: "\f05a";
}
.rb-c-alert.-is-success {
background: var(--ink-c-alert-success-bg);
border-color: var(--ink-c-alert-success-border-color);
color: var(--ink-c-alert-success-fg);
}
.rb-c-alert.-is-success:before {
content: "\f00c";
}
.rb-c-alert.-is-warning {
background: var(--ink-c-alert-warning-bg);
border-color: var(--ink-c-alert-warning-border-color);
color: var(--ink-c-alert-warning-fg);
}
.rb-c-alert.-is-warning:before {
content: "\f071";
}
.rb-c-alert__content {
margin: 0;
padding: 0;
overflow: hidden;
}
.rb-c-alert__content > :first-child {
margin-top: 0;
padding-top: 0;
}
.rb-c-alert__content > :last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.rb-c-alert__close {
cursor: pointer;
float: right;
padding: 6px;
margin: -10px -6px -6px -6px;
}
.rb-c-alert__close:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f00d";
}
.rb-c-alert__heading {
font-size: 100%;
font-weight: bold;
margin: 2em 0 1em 0;
padding: 0;
}
/**
* Common styles for avatars.
*/
/**
* A standard avatar on the page.
*
* This will style the avatar to be shown as a circle, and help
* vertically-align it to make it appear correctly next to text.
*/
.djblets-o-avatar {
border-radius: 50%;
vertical-align: middle;
}
.banner {
background: var(--rb-p-draft-bg);
border-width: 1px;
border-color: var(--rb-p-draft-border-color);
border-style: solid;
margin-bottom: 10px;
padding: var(--ink-u-spacing-m);
z-index: 100;
}
.banner > h1,
.banner > p {
display: inline;
margin-right: 0.2em;
padding: 0;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
.banner p {
display: block;
margin: 1em 0;
}
}
.banner .banner-actions {
display: inline-flex;
margin-left: 1em;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
.banner .banner-actions {
display: block;
margin-left: 0;
margin-top: 1em;
}
}
/**
* The unified banner.
*
* This banner replaces a number of previous banners -- banners for the review
* request draft, review draft, and review reply drafts. It's split into two
* major parts:
*
* 1. The review area. This deals with reviews and drafts. It contains the main
* "Review" menu, publish button, mode switcher (for choosing different
* active drafts), and the change description field (when there's a review
* request update draft).
*
* 2. The dock area. This is currently unused, but we have plans to use this
* for an expandable file display on the diffviewer, as well as allow
* extensions to drop in their own content.
*
* Modifiers:
* -has-draft:
* Whether there are any drafts present.
*
* -has-multiple:
* Whether there are multiple drafts present.
*
* Structure:
*
*
...
*
...
*
*/
.rb-c-unified-banner {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: none;
margin: -1.5em -1.5em 1.5em -1.5em;
z-index: 100;
/**
* The main section of the review banner relating to reviews and drafts.
*
* Modifiers:
* -has-draft:
* Whether there's any draft objects present.
*
* Structure:
*
*/
/**
* The menu within the draft mode selector.
*
* Modifiers:
* -is-open:
* The menu is open.
*/
/**
* The mode label.
*/
/**
* The publish/discard buttons.
*/
/**
* The "Review" menu and other actions.
*/
/**
* The notice about the existence of an unpublished draft.
*
* When viewing a review request as a privileged user (admin or the "can
* edit review request" privilege), the user can see drafts which have
* not yet been published. We add a notice to the dock area of the banner
* that indicates this, and allows them to switch between viewing the
* draft data and viewing as if they were a regular user.
*/
/*
* This makes sure that items in the review menu are clickable across
* their entire breadth.
*/
/*
* Handle styling for the embedded menus for the draft mode and Reviews
* menu.
*
* NOTE: Ideally, a lot of this would be common, and be based on action
* styling. However, we don't have styling specific to menu actions
* as of this writing (April 15, 2024), and the draft mode and review
* menus have different layouts. For now, we're just handling each
* specially.
*/
/*
* Move the menu up one so that the top-level menu item's border will
* overlap, making it appear seamless.
*/
/* Set up layout for the top-level menu item. */
/* Increase the top level menu item's font size to be more header-sized. */
/* Ensure the labels have menu background/border styling when open. */
/* Give the review menu a left border to match the right. */
/**
* The link to the interdiff, if present.
*
* Structure:
*
*/
/**
* The "dock" portion of the unified banner.
*/
}
.rb-c-unified-banner.-has-multiple {
box-shadow: none;
}
.rb-c-unified-banner.-has-multiple::after {
background: var(--rb-p-draft-bg);
border-color: var(--rb-p-draft-border-color);
border-style: solid;
border-width: 0 1px 1px 1px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
content: ' ';
display: block;
height: 2px;
margin: 0 0.3em;
}
.rb-c-unified-banner .rb-c-actions a,
.rb-c-unified-banner a[role="button"] {
color: inherit;
cursor: pointer;
text-decoration: none;
}
.rb-c-unified-banner__review {
background: var(--rb-c-review-request-bg-color);
border-bottom: var(--rb-c-review-request-border);
display: flex;
flex-direction: column;
gap: var(--ink-u-spacing-m);
padding: 0 var(--ink-u-spacing-m);
position: relative;
}
.-has-draft .rb-c-unified-banner__review {
background: var(--rb-p-draft-bg);
border-bottom: 1px var(--rb-p-draft-border-color) solid;
}
.rb-c-unified-banner__changedesc {
padding-bottom: var(--ink-u-spacing-m);
}
.rb-c-unified-banner__changedesc > label {
line-height: 16px;
}
.rb-c-unified-banner__changedesc > p {
margin: 0 0 var(--ink-u-spacing-m);
}
.rb-c-unified-banner__changedesc .rb-c-text-editor {
margin-top: 0;
}
.rb-c-unified-banner__controls {
align-items: center;
display: flex;
gap: var(--ink-u-spacing-m);
}
.rb-c-unified-banner__controls > div:not(:empty) {
margin-right: 1em;
}
.rb-c-unified-banner__menu-label {
display: flex;
gap: var(--ink-u-spacing-s);
}
.rb-c-unified-banner__mode-selector {
/*
* We'd normally put this in @vars below in customize-component(), but
* we need these same variables to be usable by the menu dropdown action
* element.
*/
margin-left: calc(-1 * var(--ink-u-spacing-m));
}
.rb-c-unified-banner__mode-selector,
.rb-c-unified-banner__mode-selector .ink-c-menu {
--ink-c-menu-bg: var(--rb-p-draft-bg);
--ink-c-menu-border: 1px var(--rb-p-draft-border-color) solid;
--ink-c-menu-item-selected-bg: var(--rb-p-draft-hover-bg);
--ink-c-menu-item-selected-fg: var(--rb-p-draft-hover-fg);
}
@media only screen and (max-width: 800px) {
.rb-c-unified-banner__mode-selector,
.rb-c-unified-banner__mode-selector .ink-c-menu {
/* Make sure the menu items appear over the Review menu on mobile. */
z-index: 112;
}
}
.rb-c-unified-banner__mode-selector .ink-c-menu {
/**
* Populate a menu schema.
*
* This will provide the structure for a menu component, populating the
* parts of the component with the provided style rules.
*
* Menu components can be embedded in another element, or can pop up when
* triggered by another element.
*
* They may contain menu items (standard, checkbox, or radio menu items)
* and separators. Menu items may optionally have icons and displayed
* keyboard shortcuts.
*
* Version Added:
* 1.0
*
* Args:
* @name (string):
* The name of the CSS class that this schema would populate.
*
* @schema-rules (ruleset, optional):
* Any rules to apply to part of the schema.
*
* @specialize-schema-rules (ruleset, optional):
* Any additional specialized rules to apply to part of the schema.
*
* This is a convenience to allow themes or specializations of
* components to easily inject additional rules into the schema.
*/
/**
* Add rules to a component based on the current context's schema.
*
* This is used within an existing ``.populate()`` mixin to add new
* rules for one or more parts. It takes care of generating the selector
* for the component as well.
*
* Within the context, this will be available as ``.add()``.
*
* Version Added:
* 1.0
*
* Args:
* @rules (rulset):
* The rules to add to the component.
*
* Example:
* .add({
* @state-hover: {
* background: blue;
* color: red;
* };
* });
*/
/**
* Add schema and specialized rules for the given rules key.
*
* This is used inside a schema definition to add the caller's rules for
* a given rules key. It will add the rules found in ``@schema-rules``
* in the current context, followed by the rules in ``@specialize-rules``.
*
* This cannot be called outside of a schema definition.
*
* Within the context, this will be available as ``.add-rules()``.
*
* Version Added:
* 1.0
*
* Args:
* @rules-key (string):
* The key within the rules definitions to add.
*
* Example:
* .add-rules('state-hover');
*/
/**
* Main part of the component.
*
* Accessibility Notes:
* Most menus will have a controller element set. This element
* should have the following attributes pointing to the menu:
*
* ``aria-controls`` must be set to the ID of the menu.
*
* ``aria-expanded`` must be set to ``false`` when the menu is
* closed or ``true`` when open.
*
* ``aria-haspopup`` must be set to ``true``.
*
* DOM Attributes:
* aria-label (string):
* A label describing this menu.
*
* This must be set if ``aria-labelledby`` is not set.
*
* aria-labelledby (string):
* The ID of an element describing this menu.
*
* This must be set if ``aria-label`` is not set.
*
* role (string):
* This must be set to "menu".
*
* tabIndex (number):
* This must always be set to 0 when the menu can be interacted
* with (embedded or open), or -1 if it cannot (closed).
*
* aria-activedescendant (string, optional):
* Set to the ID of the selected menu item, if one is selected.
*
* Modifiers:
* -has-icons:
* The menu has menu items containing icons.
*
* -has-shortcuts:
* The menu has menu items containing keyboard shortcuts.
*
* -is-embedded:
* The menu is embedded in another element.
*
* -is-open:
* The menu is open.
*
* This must also be set if the menu is embedded.
*
* js-no-animation:
* Opening/closing animation is actively being disabled.
*
* Structure:
*
*/
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
border-left: 0;
min-width: 30em;
/**
* A menu item.
*
* This may be a standard menu item, a checkbox menu item, or a radio
* menu item.
*
* Menu items may optionally contain icons and/or keyboard shortcuts.
*
* A menu item that triggers an action requiring further interaction
* (such as a confirmation dialog) should have a label ending in
* "...".
*
* DOM Attributes:
* id (string):
* The ID of the menu item.
*
* This must be set so that the main menu element can refer
* to it using ``aria-activedescendant``.
*
* role (string):
* For standard menu items, set ``menuitem``.
*
* For checkbox menu items, set ``menuitemcheckbox``.
*
* For radio menu items, set ``menuitemradio``.
*
* aria-checked (boolean, optional):
* Whether the menu item is checked.
*
* This is only used for checkbox and radio menu items.
*
* aria-selected (boolean, optional):
* Whether the menu item is currently selected.
*
* This must be ``true`` when the menu item is selected by
* either mouse or keyboard navigation.
*
* Structure:
*
*/
/**
* An icon shown alongside a menu item.
*
* Population of the icon is dependent on the implementation.
*
* DOM Attributes:
* aria-hidden (boolean):
* ``true``, always.
*
* Structure:
*
* html...
*
*/
/**
* The label shown for a menu item.
*
* Structure:
*
*/
/**
* The inner container for a menu item.
*
* This contains the label, icon, and keyboard shortcut.
*
* It may either be a ```` (standard for menu items) or an
* ```` (used for menu items that link to other pages).
*
* Structure:
* <(span | a) class="@{name}__item-inner"
* [href="..."]>
* [...]
*
* [...]
*
* ...
*
*/
/**
* A separator menu item.
*
* DOM Attributes:
* role (string)
* This must be ``separator``.
*
* Structure:
*
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-icons) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-shortcuts) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons.-has-shortcuts {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons:not(.-has-shortcuts) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts:not(.-has-icons) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-embedded {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-open {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-is-embedded):not(.-is-open) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item[aria-selected="true"] {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item:focus {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-icon {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-label {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
font-size: var(--ink-u-font-sm);
font-weight: bold;
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:link,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:visited {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-shortcut {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner__mode-selector .ink-c-menu__separator {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
@media only screen and (max-width: 800px) {
.rb-c-unified-banner__draft-actions {
/**
* On mobile the buttons might be squished up against the left side
* of the screen. Add a margin to make it look better
*/
margin-left: var(--ink-u-spacing-m);
}
}
.rb-c-unified-banner__review-actions {
margin: 0;
padding: 0;
}
.rb-c-unified-banner .rb-c-actions {
list-style: none;
}
.rb-c-unified-banner .rb-c-actions__action a {
display: flex;
gap: var(--ink-u-spacing-s);
}
.rb-c-unified-banner__unpublished-draft {
background: var(--ink-p-accent-info-bg);
color: var(--ink-p-accent-info-fg);
padding: var(--ink-u-spacing-m);
}
.rb-c-unified-banner__unpublished-draft:not(:last-child) {
border-bottom: var(--rb-c-review-request-border);
}
.rb-c-unified-banner__unpublished-draft a {
color: var(--ink-p-link-fg-on-light);
}
.rb-c-unified-banner__unpublished-draft a:hover {
color: var(--ink-p-link-hover-fg-on-light);
}
.rb-c-unified-banner #action-review-menu {
position: relative;
}
.rb-c-unified-banner #action-review-menu .ink-c-menu {
/**
* Populate a menu schema.
*
* This will provide the structure for a menu component, populating the
* parts of the component with the provided style rules.
*
* Menu components can be embedded in another element, or can pop up when
* triggered by another element.
*
* They may contain menu items (standard, checkbox, or radio menu items)
* and separators. Menu items may optionally have icons and displayed
* keyboard shortcuts.
*
* Version Added:
* 1.0
*
* Args:
* @name (string):
* The name of the CSS class that this schema would populate.
*
* @schema-rules (ruleset, optional):
* Any rules to apply to part of the schema.
*
* @specialize-schema-rules (ruleset, optional):
* Any additional specialized rules to apply to part of the schema.
*
* This is a convenience to allow themes or specializations of
* components to easily inject additional rules into the schema.
*/
/**
* Add rules to a component based on the current context's schema.
*
* This is used within an existing ``.populate()`` mixin to add new
* rules for one or more parts. It takes care of generating the selector
* for the component as well.
*
* Within the context, this will be available as ``.add()``.
*
* Version Added:
* 1.0
*
* Args:
* @rules (rulset):
* The rules to add to the component.
*
* Example:
* .add({
* @state-hover: {
* background: blue;
* color: red;
* };
* });
*/
/**
* Add schema and specialized rules for the given rules key.
*
* This is used inside a schema definition to add the caller's rules for
* a given rules key. It will add the rules found in ``@schema-rules``
* in the current context, followed by the rules in ``@specialize-rules``.
*
* This cannot be called outside of a schema definition.
*
* Within the context, this will be available as ``.add-rules()``.
*
* Version Added:
* 1.0
*
* Args:
* @rules-key (string):
* The key within the rules definitions to add.
*
* Example:
* .add-rules('state-hover');
*/
/**
* Main part of the component.
*
* Accessibility Notes:
* Most menus will have a controller element set. This element
* should have the following attributes pointing to the menu:
*
* ``aria-controls`` must be set to the ID of the menu.
*
* ``aria-expanded`` must be set to ``false`` when the menu is
* closed or ``true`` when open.
*
* ``aria-haspopup`` must be set to ``true``.
*
* DOM Attributes:
* aria-label (string):
* A label describing this menu.
*
* This must be set if ``aria-labelledby`` is not set.
*
* aria-labelledby (string):
* The ID of an element describing this menu.
*
* This must be set if ``aria-label`` is not set.
*
* role (string):
* This must be set to "menu".
*
* tabIndex (number):
* This must always be set to 0 when the menu can be interacted
* with (embedded or open), or -1 if it cannot (closed).
*
* aria-activedescendant (string, optional):
* Set to the ID of the selected menu item, if one is selected.
*
* Modifiers:
* -has-icons:
* The menu has menu items containing icons.
*
* -has-shortcuts:
* The menu has menu items containing keyboard shortcuts.
*
* -is-embedded:
* The menu is embedded in another element.
*
* -is-open:
* The menu is open.
*
* This must also be set if the menu is embedded.
*
* js-no-animation:
* Opening/closing animation is actively being disabled.
*
* Structure:
*
*/
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
/**
* A menu item.
*
* This may be a standard menu item, a checkbox menu item, or a radio
* menu item.
*
* Menu items may optionally contain icons and/or keyboard shortcuts.
*
* A menu item that triggers an action requiring further interaction
* (such as a confirmation dialog) should have a label ending in
* "...".
*
* DOM Attributes:
* id (string):
* The ID of the menu item.
*
* This must be set so that the main menu element can refer
* to it using ``aria-activedescendant``.
*
* role (string):
* For standard menu items, set ``menuitem``.
*
* For checkbox menu items, set ``menuitemcheckbox``.
*
* For radio menu items, set ``menuitemradio``.
*
* aria-checked (boolean, optional):
* Whether the menu item is checked.
*
* This is only used for checkbox and radio menu items.
*
* aria-selected (boolean, optional):
* Whether the menu item is currently selected.
*
* This must be ``true`` when the menu item is selected by
* either mouse or keyboard navigation.
*
* Structure:
*
*/
/**
* An icon shown alongside a menu item.
*
* Population of the icon is dependent on the implementation.
*
* DOM Attributes:
* aria-hidden (boolean):
* ``true``, always.
*
* Structure:
*
* html...
*
*/
/**
* The label shown for a menu item.
*
* Structure:
*
*/
/**
* The inner container for a menu item.
*
* This contains the label, icon, and keyboard shortcut.
*
* It may either be a ```` (standard for menu items) or an
* ```` (used for menu items that link to other pages).
*
* Structure:
* <(span | a) class="@{name}__item-inner"
* [href="..."]>
* [...]
*
* [...]
*
* ...
*
*/
/**
* A separator menu item.
*
* DOM Attributes:
* role (string)
* This must be ``separator``.
*
* Structure:
*
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu:not(.-has-icons) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-icons {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu:not(.-has-shortcuts) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-shortcuts {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-icons.-has-shortcuts {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-icons:not(.-has-shortcuts) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-shortcuts:not(.-has-icons) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-is-embedded {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-is-open {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu:not(.-is-embedded):not(.-is-open) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item[aria-selected="true"] {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item:focus {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-icon {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-label {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-label > a {
display: inline-block;
padding: var(--ink-c-menu-item-padding);
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-inner,
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-inner:link,
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-inner:visited {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
padding: 0;
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-shortcut {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__separator {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu,
.rb-c-unified-banner__mode-selector .ink-c-menu {
/**
* Populate a menu schema.
*
* This will provide the structure for a menu component, populating the
* parts of the component with the provided style rules.
*
* Menu components can be embedded in another element, or can pop up when
* triggered by another element.
*
* They may contain menu items (standard, checkbox, or radio menu items)
* and separators. Menu items may optionally have icons and displayed
* keyboard shortcuts.
*
* Version Added:
* 1.0
*
* Args:
* @name (string):
* The name of the CSS class that this schema would populate.
*
* @schema-rules (ruleset, optional):
* Any rules to apply to part of the schema.
*
* @specialize-schema-rules (ruleset, optional):
* Any additional specialized rules to apply to part of the schema.
*
* This is a convenience to allow themes or specializations of
* components to easily inject additional rules into the schema.
*/
/**
* Add rules to a component based on the current context's schema.
*
* This is used within an existing ``.populate()`` mixin to add new
* rules for one or more parts. It takes care of generating the selector
* for the component as well.
*
* Within the context, this will be available as ``.add()``.
*
* Version Added:
* 1.0
*
* Args:
* @rules (rulset):
* The rules to add to the component.
*
* Example:
* .add({
* @state-hover: {
* background: blue;
* color: red;
* };
* });
*/
/**
* Add schema and specialized rules for the given rules key.
*
* This is used inside a schema definition to add the caller's rules for
* a given rules key. It will add the rules found in ``@schema-rules``
* in the current context, followed by the rules in ``@specialize-rules``.
*
* This cannot be called outside of a schema definition.
*
* Within the context, this will be available as ``.add-rules()``.
*
* Version Added:
* 1.0
*
* Args:
* @rules-key (string):
* The key within the rules definitions to add.
*
* Example:
* .add-rules('state-hover');
*/
/**
* Main part of the component.
*
* Accessibility Notes:
* Most menus will have a controller element set. This element
* should have the following attributes pointing to the menu:
*
* ``aria-controls`` must be set to the ID of the menu.
*
* ``aria-expanded`` must be set to ``false`` when the menu is
* closed or ``true`` when open.
*
* ``aria-haspopup`` must be set to ``true``.
*
* DOM Attributes:
* aria-label (string):
* A label describing this menu.
*
* This must be set if ``aria-labelledby`` is not set.
*
* aria-labelledby (string):
* The ID of an element describing this menu.
*
* This must be set if ``aria-label`` is not set.
*
* role (string):
* This must be set to "menu".
*
* tabIndex (number):
* This must always be set to 0 when the menu can be interacted
* with (embedded or open), or -1 if it cannot (closed).
*
* aria-activedescendant (string, optional):
* Set to the ID of the selected menu item, if one is selected.
*
* Modifiers:
* -has-icons:
* The menu has menu items containing icons.
*
* -has-shortcuts:
* The menu has menu items containing keyboard shortcuts.
*
* -is-embedded:
* The menu is embedded in another element.
*
* -is-open:
* The menu is open.
*
* This must also be set if the menu is embedded.
*
* js-no-animation:
* Opening/closing animation is actively being disabled.
*
* Structure:
*
*/
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
margin-top: -1px;
/**
* A menu item.
*
* This may be a standard menu item, a checkbox menu item, or a radio
* menu item.
*
* Menu items may optionally contain icons and/or keyboard shortcuts.
*
* A menu item that triggers an action requiring further interaction
* (such as a confirmation dialog) should have a label ending in
* "...".
*
* DOM Attributes:
* id (string):
* The ID of the menu item.
*
* This must be set so that the main menu element can refer
* to it using ``aria-activedescendant``.
*
* role (string):
* For standard menu items, set ``menuitem``.
*
* For checkbox menu items, set ``menuitemcheckbox``.
*
* For radio menu items, set ``menuitemradio``.
*
* aria-checked (boolean, optional):
* Whether the menu item is checked.
*
* This is only used for checkbox and radio menu items.
*
* aria-selected (boolean, optional):
* Whether the menu item is currently selected.
*
* This must be ``true`` when the menu item is selected by
* either mouse or keyboard navigation.
*
* Structure:
*
*/
/**
* An icon shown alongside a menu item.
*
* Population of the icon is dependent on the implementation.
*
* DOM Attributes:
* aria-hidden (boolean):
* ``true``, always.
*
* Structure:
*
* html...
*
*/
/**
* The label shown for a menu item.
*
* Structure:
*
*/
/**
* The inner container for a menu item.
*
* This contains the label, icon, and keyboard shortcut.
*
* It may either be a ```` (standard for menu items) or an
* ```` (used for menu items that link to other pages).
*
* Structure:
* <(span | a) class="@{name}__item-inner"
* [href="..."]>
* [...]
*
* [...]
*
* ...
*
*/
/**
* A separator menu item.
*
* DOM Attributes:
* role (string)
* This must be ``separator``.
*
* Structure:
*
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu:not(.-has-icons),
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-icons) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-icons,
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu:not(.-has-shortcuts),
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-shortcuts) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-shortcuts,
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-icons.-has-shortcuts,
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons.-has-shortcuts {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-icons:not(.-has-shortcuts),
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons:not(.-has-shortcuts) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-has-shortcuts:not(.-has-icons),
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts:not(.-has-icons) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-is-embedded,
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-embedded {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu.-is-open,
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-open {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu:not(.-is-embedded):not(.-is-open),
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-is-embedded):not(.-is-open) {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item,
.rb-c-unified-banner__mode-selector .ink-c-menu__item {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item[aria-selected="true"],
.rb-c-unified-banner__mode-selector .ink-c-menu__item[aria-selected="true"] {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item:focus,
.rb-c-unified-banner__mode-selector .ink-c-menu__item:focus {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-icon,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-icon {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-label,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-label {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-inner,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner,
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-inner:link,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:link,
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-inner:visited,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:visited {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__item-shortcut,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-shortcut {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu .ink-c-menu__separator,
.rb-c-unified-banner__mode-selector .ink-c-menu__separator {
/*
* Note that we need to cover both the "@name" and "name" key forms.
* This is the reason for the apparent duplication below.
*/
}
.rb-c-unified-banner #action-review-menu > a,
.rb-c-unified-banner__mode-selector .rb-c-unified-banner__menu .rb-c-unified-banner__mode {
border-right: 1px transparent solid;
box-sizing: border-box;
display: flex;
font-weight: bold;
padding: var(--ink-u-spacing-m);
position: relative;
z-index: 111;
}
.rb-c-unified-banner #action-review-menu .rb-c-unified-banner__menu-label,
.rb-c-unified-banner__mode-selector .rb-c-actions__action-label {
font-size: var(--ink-u-font-sm);
}
.rb-c-unified-banner #action-review-menu.-is-menu-open > a,
.rb-c-unified-banner__mode-selector .rb-c-unified-banner__menu.-is-menu-open .rb-c-unified-banner__mode {
background: var(--ink-c-menu-bg);
border-right: var(--ink-c-menu-border);
}
.rb-c-unified-banner #action-review-menu > a {
border-left: 1px transparent solid;
}
.rb-c-unified-banner #action-review-menu.-is-menu-open > a {
border-left: var(--ink-c-menu-border);
}
.rb-c-unified-banner__interdiff-link {
margin-top: 1em;
}
.rb-c-unified-banner__interdiff-link a {
color: var(--ink-p-link-fg);
}
.rb-c-unified-banner__dock:not(:empty) {
background: var(--rb-c-review-request-bg-color);
border-bottom: var(--rb-c-review-request-border);
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
.rb-c-unified-banner__changedesc {
padding: 0 var(--ink-u-spacing-m) var(--ink-u-spacing-m) var(--ink-u-spacing-m);
}
.rb-c-unified-banner__controls {
flex-wrap: wrap;
}
.rb-c-unified-banner__mode-selector {
margin-left: 0;
}
.rb-c-unified-banner__review {
padding: 0;
z-index: 110;
}
}
.box,
.modalbox {
background: var(--ink-p-container-bg);
border: var(--ink-g-border-container);
border-radius: var(--ink-u-border-radius-std);
box-shadow: var(--ink-g-shadow-std);
box-sizing: border-box;
background-position: top left;
background-repeat: repeat-x;
}
.box.important {
background-color: #FDF2A0;
background-image: url("../images/gold_box_top_bg.33df1a7c2e1b.png");
color: var(--ink-p-fg-on-light);
display: flex;
border: 1px #B7A93E solid;
padding: 0 10px;
}
.box.important:before {
background-color: currentColor;
background-repeat: no-repeat;
content: "";
display: inline-block;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: var(--ink-c-alert-warning-icon);
mask-image: var(--ink-c-alert-warning-icon);
width: var(--ink-u-icon-l);
height: var(--ink-u-icon-l);
margin: 10px 10px 0 0;
}
.box.important a {
color: var(--ink-p-link-fg-on-light);
}
.box.important a:hover {
color: var(--ink-p-link-hover-fg-on-light);
}
.box-head,
.modalbox-title {
background: var(--ink-p-header-bg);
border-bottom: var(--ink-g-border-header);
margin: 0;
padding: var(--ink-u-spacing-s) var(--ink-u-spacing-sm);
border-radius: var(--ink-u-border-radius-std) var(--ink-u-border-radius-std) 0 0;
}
.box-title,
.modalbox-title {
font-size: 120%;
}
.box-title {
margin: 0;
padding: 0;
}
.box-main {
padding: 1em;
}
.box-container {
margin-bottom: 10px;
width: 100%;
}
.box-inner,
.modalbox-inner {
border-radius: var(--ink-u-border-radius-std);
}
.box-inner form {
margin: 0;
}
.box-inner .rb-c-form__actions {
margin: 0;
padding: 1em 0 1em 1em;
}
.modalbox,
.modalbox-bg {
z-index: 120;
}
/**
* A button.
*
* Buttons are clickable and perform an action when clicked. They generally
* contain text or other markup (like an embedded icon).
*
* This component is automatically used for ``