File: /home/icsla/public_html/wp-content/plugins/megamenu/css/admin/admin.scss
@use 'sass:math' as math;
@use 'sass:color' as color;
// Megamenu admin neutral ramp (aligned with WP admin neutrals; override per site/theme via `:root`).
:root {
--wp--preset--font-family--material-symbols: "Material Symbols", monospace;
--black: #1e1e1e; /* WP Base black */
--dark-gray: #2f2f2f; /* WP editor dark */
--semidark-gray: #3c3c3c; /* WP toolbar grey */
--gray: #757575; /* WP secondary text */
--medium-gray: #a7aaad; /* WP input border */
--light-gray: #dcdcde; /* WP surface border */
--feather-gray: #f6f7f7; /* WP sidebar background */
}
// Matches `:root` `--black`; used for Sass `color.change` shadow alphas.
$-shadow-source: #1e1e1e;
$success: #46b450;
$error: #d0011b;
$error-link: #b32d2e;
$error-link-hover: #8a2424;
$error-surface: #ffdddd;
$warning: #ffb900;
// Native fields in plugin admin: `body.maxmegamenu-admin` sets `--megamenu-form-control-border` (use `var(--megamenu-form-control-border, var(--gray))` at use sites).
// Horizontal gap between settings-page rail nav and main canvas (matches dialog rail column width intent).
$megamenu-settings-rail-gap: 24px;
// Alpha / composed shadows (tinted to match `--black`); focus halos use `--wp-admin-theme-color--rgb`.
// Five levels: feather (a05) → light (a07) → mid (a12) → strong (a22) → scrim (a45).
$shadow-a05: color.change($-shadow-source, $alpha: 0.05);
$shadow-a07: color.change($-shadow-source, $alpha: 0.07);
$shadow-a12: color.change($-shadow-source, $alpha: 0.12);
$shadow-a22: color.change($-shadow-source, $alpha: 0.22);
$shadow-a45: color.change($-shadow-source, $alpha: 0.45);
// Semantic elevation — four levels covering every shadow use in this file.
$shadow-small: 0 1px 2px $shadow-a07;
$shadow-small-hover: 0 1px 2px $shadow-a05, 0 4px 16px $shadow-a07;
$shadow-large: 0 1px 2px $shadow-a12, 0 12px 48px -8px $shadow-a22;
$shadow-large-hover: 0 4px 28px $shadow-a22;
// Chevron for `.mega-toolbar-native-select` (inline-end; `+ 3px` nudges left vs a 10px baseline).
$mega-toolbar-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23757575' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' d='M2.75 4.5L6 7.75 9.25 4.5'/%3E%3C/svg%3E");
// Modal chrome (Gutenberg / component-style dialogs)
$modal-radius: 10px;
$modal-padding-x: 36px;
@function wp-admin-theme-rgba($alpha) {
@return #{'rgba(var(--wp-admin-theme-color--rgb), #{$alpha})'};
}
$focus-ring-blue-soft: wp-admin-theme-rgba(0.4);
$focus-ring-blue-strong: wp-admin-theme-rgba(0.45);
$mega-admin-icon-hit: 40px;
$mega-admin-icon-glyph: 24px;
// Standard `:focus-visible` ring for admin controls (color + offset; use inside `&:focus-visible { }`).
@mixin mega-admin-focus-ring($color: var(--wp-admin-theme-color), $outline-offset: 2px) {
outline: 2px solid $color;
outline-offset: $outline-offset;
}
@mixin tablet {
@media only screen and (max-width: 1200px) {
@content;
}
}
@mixin megamenu-admin-icon-dashicon-child($size: $mega-admin-icon-glyph) {
.dashicons {
width: $size;
height: $size;
font-size: $size;
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
@mixin megamenu-admin-icon-button-secondary-layout(
$hit: $mega-admin-icon-hit,
$icon: $mega-admin-icon-glyph
) {
box-sizing: border-box;
flex-shrink: 0;
width: $hit;
min-width: $hit;
height: $hit;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
@include megamenu-admin-icon-dashicon-child($icon);
}
@mixin megamenu-admin-modal-button-secondary {
&:not(.is-active) {
border: 0;
color: var(--gray);
}
}
// Modal "ghost" icon buttons: align with Gutenberg `.components-button` (foreground default,
// accent on hover) + document-toolbar sizing / focus / theme-tint surfaces.
@mixin megamenu-admin-modal-ghost-icon-btn {
$ghost-foreground: var(--wp-components-color-foreground, var(--black));
$ghost-hover-fg: var(--wp-components-color-accent, var(--wp-admin-theme-color));
appearance: none;
background-color: transparent;
background-image: none;
border: 0;
border-radius: 2px;
box-shadow: none;
text-shadow: none;
color: $ghost-foreground;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
margin: 0;
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-sizing: border-box;
flex-shrink: 0;
cursor: pointer;
outline: 1px solid transparent;
transition:
background 0.1s linear,
box-shadow 0.1s linear,
color 0.1s ease;
@include megamenu-admin-icon-dashicon-child($mega-admin-icon-glyph);
.dashicons {
color: currentColor;
}
&:visited {
color: $ghost-foreground;
}
&:hover:not(:disabled) {
color: $ghost-hover-fg;
background: wp-admin-theme-rgba(0.04);
@supports (background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent)) {
background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
}
}
&:active:not(:disabled) {
background: wp-admin-theme-rgba(0.08);
@supports (background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, transparent)) {
background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, transparent);
}
}
&:focus {
outline: 1px solid transparent;
}
// Block editor document toolbar: outer theme ring + inset white (see `editor/style.css`).
&:focus:not(:active) {
box-shadow:
0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color),
inset 0 0 0 1px #fff;
}
&:disabled {
color: var(--medium-gray);
background: transparent;
opacity: 1;
box-shadow: none;
}
}
// Icon + label compact buttons: menu location card footer + location modal Settings/Preview toggle.
@mixin megamenu-location-toolbar-button-layout {
display: inline-flex;
align-items: center;
gap: 5px;
.dashicons {
flex-shrink: 0;
width: 16px;
height: 16px;
font-size: 16px;
line-height: 1;
}
}
// Segmented mode pills (sliding theme thumb): header Settings/Preview + preview footer Desktop/Mobile.
@mixin megamenu-location-settings-dialog-mode-pill-track {
gap: 4px;
align-self: center;
padding: 3px;
border-radius: 999px;
border: 1px solid var(--light-gray);
background: var(--light-gray);
box-sizing: border-box;
overflow: visible;
position: relative;
.megamenu-location-settings-dialog__mode-pill-slider {
position: absolute;
z-index: 0;
pointer-events: none;
inset-block: 3px;
inset-inline-start: 3px;
width: calc((100% - 10px) / 2);
border-radius: 999px;
background: var(--wp-admin-theme-color);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.megamenu-location-settings-dialog__mode-pill-slider {
transition-duration: 0.01ms;
}
}
}
@mixin megamenu-location-settings-dialog-mode-pill-slider-to-second(
$second-active-selector
) {
&:has(#{$second-active-selector}) .megamenu-location-settings-dialog__mode-pill-slider {
transform: translateX(calc(100% + 4px));
}
[dir="rtl"] &:has(#{$second-active-selector}) .megamenu-location-settings-dialog__mode-pill-slider {
transform: translateX(calc(-100% - 4px));
}
}
@mixin megamenu-location-settings-dialog-mode-pill-buttons {
.megamenu-location-toolbar-btn.megamenu-location-settings-dialog__mode-btn {
position: relative;
z-index: 1;
flex: 1 1 0;
min-width: 0;
justify-content: center;
margin: 0;
border: 0;
border-radius: 999px;
box-shadow: none;
background: transparent;
color: var(--black);
font-size: 13px;
font-weight: 400;
line-height: 1.3;
padding: 6px 14px;
min-height: 30px;
transition:
color 0.2s ease,
background 0.12s ease;
.dashicons {
color: var(--gray);
transition: color 0.2s ease;
}
&:focus {
box-shadow: none;
}
&:focus-visible {
@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
z-index: 2;
}
&:not(.is-active) {
&:hover:not(:disabled) {
background: color-mix(in srgb, var(--black) 4%, var(--feather-gray));
}
}
&.is-active {
background: transparent;
color: white;
border: 0;
.dashicons {
color: white;
}
&:focus-visible {
outline-color: white;
}
}
}
}
// Dashicon tile rendered on `::before` (menu icon grid).
@mixin megamenu-admin-icon-pseudo-dashicon-tile(
$hit: $mega-admin-icon-hit,
$glyph: $mega-admin-icon-glyph
) {
box-sizing: border-box;
width: $hit;
height: $hit;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
border-radius: 4px;
background: transparent;
color: var(--gray);
line-height: 1;
font-size: $glyph;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition:
background 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
}
// Shared positioning when `.megamenu-modal-close` is not inside `.megamenu-admin-modal__header-actions`.
@mixin megamenu-modal-close-button {
position: absolute;
top: 14px;
right: 12px;
z-index: 2;
}
.megamenu-modal-close {
@include megamenu-modal-close-button;
}
// Sliding underline shared by Menu Themes tabs and the location settings dialog.
@mixin nav-tab-slider-indicator {
.nav-tab-slider {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: var(--wp-admin-theme-color);
border-radius: 2px;
transition: left 0.3s ease-out, width 0.3s ease-out;
z-index: 1;
}
}
// Column span control pill: grid `.mega-col-header > .mega-col-span` + standard `.mega-widget-title-action .mega-col-span`.
@mixin mega-col-span-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
padding: 3px 2px;
border-radius: 9999px;
box-sizing: border-box;
background: white;
border: 1px solid var(--wp-admin-theme-color);
color: var(--wp-admin-theme-color);
}
// Shared vertical rail tabs: Appearance > Menus menu-item modal body + location settings modal.
@mixin megamenu-dialog-side-tab(
$accent: var(--wp-admin-theme-color),
$active-bg: transparent
) {
appearance: none;
-webkit-appearance: none;
margin: 0;
width: 100%;
display: block;
padding: 10px 12px;
box-sizing: border-box;
position: relative;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 20px;
text-align: start;
color: var(--black);
cursor: pointer;
border: 1px solid transparent;
border-radius: 0;
margin-bottom: 2px;
border-inline-start: 3px solid transparent;
background: transparent;
&:focus-visible {
@include mega-admin-focus-ring($accent);
}
&:hover {
background: var(--feather-gray);
color: var(--black);
border-color: transparent;
}
&.is-active {
color: $accent;
background: $active-bg;
border-color: transparent;
font-weight: 600;
box-shadow: none;
border-inline-start-color: $accent;
&:before {
color: $accent;
}
&:after {
display: none;
}
}
}
// Menu item modal: dashed “add widget to this column” slot (`.mega-col-add-widget`) — reused e.g. for “add another menu location”.
@mixin mega-col-add-widget-appearance {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
min-height: 32px;
padding: 6px 8px;
border: 1px dashed var(--light-gray);
border-radius: 4px;
background: var(--feather-gray);
cursor: pointer;
color: var(--gray);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
.dashicons {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 1;
opacity: 0.45;
transition: opacity 0.2s ease;
}
&:hover,
&:focus-visible {
color: var(--wp-admin-theme-color);
border-color: $focus-ring-blue-strong;
background: white;
.dashicons {
opacity: 1;
}
}
&:focus-visible {
@include mega-admin-focus-ring;
}
}
@mixin megamenu-dialog-rail-grid($column-gap: 0, $row-gap: 0) {
display: grid;
grid-template-columns: 230px 1fr;
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
width: 100%;
box-sizing: border-box;
column-gap: $column-gap;
row-gap: $row-gap;
}
@mixin megamenu-dialog-tablist-shell {
grid-column: 1;
grid-row: 1;
width: 100%;
position: relative;
min-height: 0;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}
@mixin megamenu-dialog-panels-shell($overflow: auto) {
grid-column: 2;
grid-row: 1;
min-width: 0;
min-height: 0;
overflow: $overflow;
box-sizing: border-box;
position: relative;
border: 0;
}
// Tooltip bubble: any element with [data-mega-tooltip] (plain text and/or dual enabled/disabled). Always centered below the trigger.
@mixin tooltip-popup-base {
&:before {
position: absolute;
content: attr(data-mega-tooltip);
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: white;
color: var(--black);
padding: 6px 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
border-radius: 2px;
border: 1px solid var(--gray);
box-shadow: $shadow-small;
margin-left: 0;
width: auto;
max-width: 280px;
white-space: nowrap;
box-sizing: border-box;
z-index: 101;
text-align: center;
}
// Bordered chevron (not a filled triangle): rotated square so stroke meets the bubble border.
&:after {
content: "";
position: absolute;
top: calc(100% + 6px);
left: 50%;
width: 9px;
height: 9px;
margin: 0;
background: white;
border-left: 1px solid var(--gray);
border-top: 1px solid var(--gray);
border-right: none;
border-bottom: none;
box-sizing: border-box;
transform: translate(-50%, -50%) rotate(45deg);
z-index: 102;
}
&:before,
&:after {
opacity: 0;
pointer-events: none;
text-align: center;
transition: opacity 0.3s ease;
transition-delay: 0.3s;
}
&:focus:before,
&:focus:after,
&:focus-visible:before,
&:focus-visible:after,
&:hover:before,
&:hover:after {
opacity: 1;
}
}
// Percent widths via nested @for — used by #megamenu-standard (data-columns) only.
@mixin grid-col-widths($container-attr, $item-selector, $item-attr) {
@for $of from 1 through 12 {
@for $cols from 1 through $of {
&[#{$container-attr}='#{$of}'] #{$item-selector}[#{$item-attr}='#{$cols}'] {
width: math.percentage(math.div($cols, $of));
}
}
}
}
// Full-cell overlay used to visually disable table rows.
@mixin disabled-row-overlay {
background: var(--feather-gray);
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: "";
opacity: 0.5;
z-index: 9;
}
// Small caps label above a native `<select>` (matches Menu Themes `.theme-selector-field .mega-short-desc`).
@mixin mega-toolbar-field-label {
font-size: 11px;
text-transform: uppercase;
color: var(--semidark-gray);
display: block;
margin: 0 0 2px 1px;
}
// Theme editor only: custom chevron + chrome (dialogs use native / WP admin `<select>` styling).
@mixin mega-toolbar-native-select {
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
box-sizing: border-box;
width: 300px;
max-width: 100%;
min-height: 40px;
margin: 0;
padding: 0 34px 0 10px;
border: 1px solid var(--megamenu-form-control-border, var(--gray));
border-radius: 4px;
background-color: white;
background-image: $mega-toolbar-select-chevron;
background-repeat: no-repeat;
background-position: right calc(10px + 3px) center;
background-size: 12px 12px;
color: var(--semidark-gray);
font-size: 14px;
line-height: 1.4;
font-weight: 400;
box-shadow: none;
cursor: pointer;
transition:
background-color 0.15s ease,
color 0.15s ease;
&:hover,
&:focus {
color: var(--black);
background-color: var(--feather-gray);
border-color: var(--gray);
background-image: $mega-toolbar-select-chevron;
}
&:focus-visible {
@include mega-admin-focus-ring;
border-color: var(--wp-admin-theme-color);
background-image: $mega-toolbar-select-chevron;
}
&:disabled {
opacity: 0.6;
cursor: default;
background-color: var(--feather-gray);
border-color: var(--megamenu-form-control-border, var(--gray));
background-image: $mega-toolbar-select-chevron;
}
}
// Icon-only destructive control (widget form footer + toggle bar block settings).
@mixin mega-admin-trash-icon-button {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
font: inherit;
cursor: pointer;
color: $error;
text-decoration: none;
.dashicons {
width: 20px;
height: 20px;
font-size: 20px;
line-height: 1;
}
&:hover,
&:focus-visible {
color: $error-link-hover;
background: $error-surface;
}
&:focus-visible {
@include mega-admin-focus-ring;
}
}
// Card chrome for theme editor fields (e.g. toggle block picker). Menu Themes `.theme_selector` in the dialog rail uses plain layout only (no card shell).
@mixin mega-theme-editor-card-shell {
padding: 16px 20px;
border-radius: 8px;
border: 1px solid var(--megamenu-form-control-border, var(--gray));
background: var(--feather-gray);
box-shadow: $shadow-small;
color: var(--semidark-gray);
box-sizing: border-box;
transition: box-shadow 0.2s ease;
&:hover {
box-shadow: $shadow-small-hover;
}
}
// Field label stack: table name cells (`td.mega-name`) and location modal Display Options (`.mmm-location-output-options__name.mega-name` — both use `.megamenu_outer_wrap`).
body.maxmegamenu-admin .megamenu_outer_wrap {
.mega-name:has(.mega-description) .mega-name-title {
font-weight: 500;
}
.mega-description {
font-size: 13px;
color: var(--gray);
line-height: 1.5em;
width: 80%;
p {
font-size: 12px;
}
}
}
body.maxmegamenu-admin .megamenu_outer_wrap table {
width: 100%;
border-collapse: collapse;
label {
font-size: 0.9em;
display: inline-block;
}
h5 {
font-size: 16px;
margin: 0;
}
.mega-radio-row {
// `td.mega-value` is a row flex container; without a full line basis, rows sit side-by-side.
flex: 1 1 100%;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin: 0;
input[type="radio"] {
margin: 0;
flex-shrink: 0;
}
label {
float: none;
position: static;
top: auto;
margin: 0;
font-size: 1em;
line-height: 1.4;
}
}
textarea,
input[type=text],
input[type=number],
select {
font-size: 12px;
min-height: 28px;
line-height: 26px;
}
textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
font-family: monospace;
min-height: 150px;
}
input[type=number] {
height: auto;
}
input[name=export] {
margin-top: 20px;
}
input[type=text] {
min-width: 70px;
field-sizing: content;
}
input[type=text].wide {
width: 300px;
}
input[type=submit] {
width: auto;
}
input[type=checkbox] {
margin-top: 2px;
vertical-align: middle;
}
.wide input[type=text] {
width: 300px;
}
.CodeMirror {
width: 100%;
height: auto;
min-height: 150px;
border: 1px solid var(--megamenu-form-control-border, var(--gray));
}
div.CodeMirror span.CodeMirror-matchingbracket {
color: green;
}
.CodeMirror-scroll {
min-height: 150px;
}
th {
text-align: left;
}
td {
position: relative;
padding-bottom: 25px;
padding-top: 15px;
&.mega-name {
width: 33%;
line-height: 2em;
padding-right: 30px;
vertical-align: top;
}
&.mega-name-wide {
width: 50%;
}
&.mega-value {
min-width: 0;
padding-top: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
> label {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
}
// Custom icon (Pro): same label + `.mega-short-desc` + number + unit pattern as theme rows,
// but row layout so the unit stays on the line with the input (overrides column `> label` above).
> label.mega-desc-with-input {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px;
float: none;
width: auto;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
.mega-short-desc {
flex: 1 0 100%;
float: none;
width: auto;
}
// Keep digit-sized fields from stretching in the flex row (icon/logo width & height in Pro).
input[type='number'] {
flex: 0 0 auto;
width: auto;
min-width: 3.5em;
max-width: 6em;
}
.mega-after {
flex: 0 0 auto;
display: inline;
float: none;
margin: 0;
vertical-align: middle;
line-height: inherit;
height: auto;
border: 0;
background: none;
box-shadow: none;
padding: 0;
}
}
form {
width: 100%;
}
// Full-width blocks (e.g. Menu Locations card grid): flex row would otherwise shrink-wrap.
> p,
> .mega-location-cards-root {
flex: 1 1 100%;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.mega-description {
margin-top: 5px;
}
.mega-info {
flex: 1 1 100%;
display: block;
font-size: 0.9em;
color: var(--gray);
line-height: 20px;
width: 100%;
&:before {
font: 400 20px/1 dashicons;
content: "\f348";
speak: none;
padding: 0;
margin-right: 6px;
display: inline-block;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
#megamenu-theme-textarea-custom_css {
flex: 1 1 100%;
width: 100%;
min-width: 0;
align-self: stretch;
}
}
}
ul.custom_styling_tips {
list-style-type: disc;
list-style-position: inside;
code {
margin: 10px 0 0 0;
font-size: 0.9em;
}
}
label.mega-error input {
border: 1px solid $error;
background: $error-surface;
}
div.mega-toggle_blocks {
width: 100%;
max-width: 100%;
box-sizing: border-box;
cursor: auto;
font-size: 1em;
.mega-value {
padding-bottom: 0;
}
.toggle-bar-designer {
width: 100%;
max-width: 100%;
box-sizing: border-box;
position: relative;
.mega-blocks {
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.mega-blocks .mega-left,
.mega-blocks .mega-center,
.mega-blocks .mega-right {
box-sizing: border-box;
border: 1px solid var(--light-gray);
background: var(--feather-gray);
height: 60px;
padding: 10px;
margin-top: 15px;
display: flex;
flex-basis: 33.3333%;
}
.mega-blocks .mega-left {
border-right: 0;
flex: 1;
}
.mega-blocks .mega-center {
border-left: 1px dashed var(--light-gray);
border-right: 1px dashed var(--light-gray);
justify-content: center;
}
.mega-blocks .mega-right {
border-left: 0;
flex: 1;
justify-content: flex-end;
}
.mega-blocks .mega-right .block {
margin: 0 0 0 5px;
}
.mega-blocks .block.mega-open .block-title {
border-bottom: 1px solid white;
border-radius: 3px 3px 0 0;
}
.mega-blocks .block .block-title {
padding: 0 10px;
display: inline-block;
height: 35px;
line-height: 35px;
font-size: 0.9em;
background: white;
color: var(--semidark-gray);
cursor: move;
border: 1px solid var(--light-gray);
position: relative;
z-index: 2;
border-radius: 3px;
text-align: left;
box-sizing: border-box;
white-space: nowrap;
}
.mega-blocks .block.ui-sortable-helper {
width: auto !important;
}
.mega-blocks .block .block-title .dashicons {
line-height: 35px;
cursor: pointer;
font-size: 20px;
}
.mega-blocks .block .block-settings {
padding: 10px;
display: none;
width: 300px;
vertical-align: top;
background: white;
text-align: left;
color: var(--semidark-gray);
position: absolute;
left: 0px;
top: 34px;
z-index: 1;
border: 1px solid var(--megamenu-form-control-border, var(--gray));
}
.mega-blocks .block.mega-open {
position: static;
.block-settings {
position: fixed;
left: 160px;
right: 0;
margin-left: auto;
margin-right: auto;
top: 50%;
bottom: auto;
width: calc(100% - 160px - 10%);
transform: translateY(-50%);
z-index: 40;
max-width: 700px;
height: max-content;
min-width: 0;
min-height: 0;
overflow: visible;
border-radius: 4px;
box-shadow:
$shadow-large-hover,
0 0 0 1px $shadow-a07;
border: none;
}
}
.mega-blocks .block .block-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--light-gray);
h3 {
margin: 0;
padding: 0;
border: 0;
flex: 1;
}
.mega-block-close {
flex-shrink: 0;
background: none;
border: 0;
padding: 2px;
cursor: pointer;
color: var(--gray);
line-height: 1;
&:hover {
color: var(--semidark-gray);
}
.dashicons {
font-size: 18px;
width: 18px;
height: 18px;
}
}
}
.mega-blocks .block h3 {
margin-top: 5px;
border-bottom: 1px solid var(--light-gray);
padding-bottom: 10px;
}
// Label text left, inputs grouped on the right (sentence case — no toolbar all-caps).
.block-settings > label {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 8px 12px;
box-sizing: border-box;
margin: 0 0 12px 0;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--semidark-gray);
text-transform: none;
}
.block-settings > label:last-of-type {
margin-bottom: 0;
}
.block-settings > label .mega-description {
flex: 1 0 100%;
width: 100%;
text-transform: none;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
color: var(--gray);
margin: 4px 0 0;
}
.block-settings > label input,
.block-settings > label select,
.block-settings > label input[type='number'],
.block-settings > label .icon_dropdown,
.block-settings > label .select2-container {
flex: 0 1 auto;
width: auto;
min-width: 0;
max-width: min(240px, 58%);
margin-left: auto;
box-sizing: border-box;
font-size: 14px;
font-weight: 400;
text-transform: none;
color: var(--semidark-gray);
}
.block-settings > label textarea {
flex: 0 1 auto;
width: auto;
min-width: 0;
max-width: min(100%, 320px);
min-height: 80px;
margin-left: auto;
box-sizing: border-box;
font-size: 14px;
font-weight: 400;
text-transform: none;
color: var(--semidark-gray);
}
.block-settings > label input[type='number'] {
height: 32px;
line-height: 32px;
}
.block-settings > label .mmm_image_selector {
flex: 0 1 auto;
margin-left: auto;
max-width: min(240px, 58%);
}
.block-settings .mega-color-picker-input-text {
display: none;
}
// Beat `.mega-blocks .block input[type=text] { width: 50%; }` — keep controls on the right, not half-bar width.
.mega-blocks .block .block-settings > label input[type='text'],
.mega-blocks .block .block-settings > label input[type='number'] {
width: auto;
max-width: min(240px, 58%);
}
.mega-blocks .block .block-settings > label textarea {
width: auto;
max-width: min(100%, 320px);
}
.block-settings-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
.mega-delete {
@include mega-admin-trash-icon-button;
}
}
.block-settings .mega-delete {
@include mega-admin-trash-icon-button;
margin-top: 12px;
}
.toggle-left {
border-right: 1px dashed var(--light-gray);
}
.toggle-right {
border-left: 0px solid var(--light-gray);
text-align: right;
}
.mega-blocks .block {
position: relative;
display: inline-block;
vertical-align: top;
margin: 0 5px 0 0;
}
}
}
.mega-validation-message {
display: none;
font-size: 0.8em;
color: $error;
}
label span.mega-short-desc {
font-size: 11px;
text-transform: uppercase;
color: var(--gray);
display: block;
margin: 0 0 5px;
}
label.mega-copy_color {
margin-right: 3px;
span.mega-short-desc {
visibility: hidden;
}
span.dashicons {
opacity: 0.5;
margin-top: 6px;
font-size: 16px;
cursor: pointer;
}
}
label:has(textarea) {
width: 100%;
}
// Menu item + sub-menu align rows: `select` + `.mega-description` on one line.
// Global `.mega-description { width: 80% }` above would force the description to ~80% of the cell,
// so it wraps below the select; override so both rows match.
.mega-menu-item-align,
.mega-sub-menu-align {
td.mega-value {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
select {
float: none;
flex: 0 0 auto;
}
.mega-description {
float: none;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: auto;
max-width: 100%;
flex: 1 1 auto;
min-width: 0;
}
}
}
}
// Compile-error SCSS dump (WP admin notice + AJAX notice): CodeMirror lives outside `.megamenu_outer_wrap table`.
body.maxmegamenu-admin .megamenu-compile-failed-scss-editor {
.CodeMirror {
max-height: 480px;
}
.CodeMirror-scroll {
max-height: 480px;
}
}
// Menu item modal: label column vertical padding (overrides global `.megamenu_outer_wrap table td`).
body.maxmegamenu-admin .megamenu-menu-item-dialog .megamenu_outer_wrap table td.mega-name {
padding-top: 10px;
padding-bottom: 10px;
}
// All Max Mega Menu admin modals: label column (`td.mega-name`) width and gutter.
body.maxmegamenu-admin .megamenu-admin-modal .megamenu_outer_wrap table td.mega-name {
width: 40%;
padding-right: 10px;
}
// Pro "Styling" tab: name/enable column widths + row striping; dim name/value from checkbox via :has (no JS).
body.maxmegamenu-admin.nav-menus-php .megamenu-menu-item-dialog .megamenu_outer_wrap .megamenu_content.styling {
.mega-name {
width: 40%;
}
.mega-enable {
width: 1%;
}
td.mega-enable:after {
display: none;
}
tr:has(.override_toggle_enabled:checked) td:after {
display: none;
}
tr:has(.override_toggle_enabled:not(:checked)) td.mega-name,
tr:has(.override_toggle_enabled:not(:checked)) td.mega-value {
opacity: 0.45;
filter: grayscale(0.15);
transition: opacity 0.15s ease, filter 0.15s ease;
}
tr:has(.override_toggle_enabled:checked) td.mega-name,
tr:has(.override_toggle_enabled:checked) td.mega-value {
opacity: 1;
filter: none;
}
td {
position: relative;
padding: 10px;
vertical-align: middle;
}
td:after {
content: "";
background: var(--light-gray);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
z-index: -1;
pointer-events: none;
}
}
body.rtl.maxmegamenu-admin.nav-menus-php {
.megamenu_launch {
margin-left: 0;
margin-right: 8px;
}
.megamenu-menu-item-dialog .megamenu_outer_wrap.megamenu-dialog-rail {
grid-template-columns: 1fr 230px;
}
.megamenu-menu-item-dialog .megamenu_outer_wrap .mega-tablist {
grid-column: 2;
}
.megamenu-menu-item-dialog .megamenu_outer_wrap .megamenu-dialog-panels {
grid-column: 1;
}
.megamenu-menu-item-dialog .megamenu-admin-modal__title {
flex-direction: row-reverse;
}
.megamenu-menu-item-dialog .megamenu_outer_wrap table .mega-menu-item-align td.mega-value,
.megamenu-menu-item-dialog .megamenu_outer_wrap table .mega-sub-menu-align td.mega-value {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
select {
float: none;
flex: 0 0 auto;
}
.mega-description {
float: none;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: auto;
max-width: 100%;
flex: 1 1 auto;
min-width: 0;
}
}
.megamenu-menu-item-dialog .megamenu_outer_wrap .mega-tablist button.is-active:after {
right: auto;
left: 0;
}
.megamenu-menu-item-dialog .megamenu_outer_wrap .mega_menu .mega-widget-title-action {
direction: ltr;
}
.megamenu-admin-modal {
left: 0;
right: 160px;
}
}
body.folded.maxmegamenu-admin:not(.rtl) .megamenu-admin-modal {
left: 36px;
right: 0;
}
body.rtl.folded.maxmegamenu-admin .megamenu-admin-modal {
left: 0;
right: 36px;
}
@media screen and (max-width: 782px) {
body.maxmegamenu-admin .megamenu-admin-modal {
left: 0 !important;
right: 0 !important;
}
}
body.rtl.maxmegamenu-admin .megamenu-admin-modal {
left: 0;
right: 160px;
}
body.desktop-mode-chromeless.maxmegamenu-admin .megamenu-admin-modal {
left: 0;
right: 0;
top: 0;
}
.desktop-mode-chromeless .megamenu_outer_wrap:not(.megamenu-admin-modal *) .megamenu-dialog-tablist {
display: none;
}
body.desktop-mode-chromeless.maxmegamenu-admin .megamenu_wrap.megamenu-dialog-rail:not(.megamenu-admin-modal *) {
grid-template-columns: 1fr;
}
body.desktop-mode-chromeless.maxmegamenu-admin .megamenu_wrap.megamenu-dialog-rail:not(.megamenu-admin-modal *) > .mega-tablist {
display: none;
}
body.desktop-mode-chromeless.maxmegamenu-admin .megamenu_wrap.megamenu-dialog-rail:not(.megamenu-admin-modal *) > .megamenu-dialog-panels {
grid-column: 1;
}
body.maxmegamenu-admin .wp-media-buttons {
.button {
margin: 0;
padding: 0 8px;
}
.button:has(.dashicons) {
display: inline-flex;
align-items: center;
gap: 4px;
}
.button span.dashicons {
display: flex;
align-items: center;
font-size: 16px;
}
}
// Icon-only admin buttons (e.g. Pro media selector): tighter horizontal padding than `.button-compact`.
body.maxmegamenu-admin .button.button-compact.button-icon-only {
padding: 0 6px;
}
// Saved-state dashicon alignment inside compact buttons.
body.maxmegamenu-admin .button.button-compact:has(.dashicons) {
display: inline-flex;
align-items: center;
gap: 4px;
}
body.maxmegamenu-admin .button.button-compact .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 1;
}
// Core accordion / postbox overflow would clip ::before/::after tooltips on the Menus screen.
body.maxmegamenu-admin #mega_menu_meta_box,
body.maxmegamenu-admin #mega_menu_meta_box-content,
body.maxmegamenu-admin #mega_menu_meta_box-content > :first-child,
body.maxmegamenu-admin #mega_menu_meta_box .accordion-section-content {
overflow: visible !important;
}
// Menu Locations tab: lead copy under page title (core `.description` typography).
body.maxmegamenu-admin .menu_settings.menu_settings_menu_locations > p.description {
margin: 20px 0;
}
// Menu Locations page: `h3.first` underline (global `h3` rule uses `border-bottom`; match card chrome to `--medium-gray`).
body.maxmegamenu-admin .menu_settings.menu_settings_menu_locations > h3.first {
border-bottom-color: var(--medium-gray);
}
// `.megamenu-location-toolbar-btn`: Settings/Preview on location cards + modal header (see mixin).
body.maxmegamenu-admin .megamenu-location-toolbar-btn.button.button-compact {
@include megamenu-location-toolbar-button-layout;
}
body.maxmegamenu-admin .megamenu-admin-modal__header-top .megamenu-location-toolbar-btn.button.button-compact:not(.button-secondary) {
border: 0;
box-shadow: none;
}
// Modal secondary controls: inactive tab/segment styling and other non-ghost secondaries.
// Ghost icon controls use `megamenu-admin-modal-ghost-icon-btn` (next block).
body.maxmegamenu-admin .megamenu-admin-modal button.button-secondary {
@include megamenu-admin-modal-button-secondary;
&.is-active {
border-width: 2px;
}
&:focus {
box-shadow: none;
}
}
// Ghost icon buttons: high-specificity chain wins over core `.button-secondary` without `!important`.
body.maxmegamenu-admin
.megamenu-admin-modal
button.button.button-secondary.megamenu-admin-modal-icon-btn.button-compact,
body.maxmegamenu-admin
.megamenu-admin-modal
button.button.button-secondary.megamenu-location-settings-dialog-edit-theme {
@include megamenu-admin-modal-ghost-icon-btn;
}
// Block editor: `.is-pressed` on document tools uses near-black; MMM uses `__expand-btn--expanded` with `var(--black)`.
body.maxmegamenu-admin
.megamenu-admin-modal
button.button.button-secondary.megamenu-admin-modal-icon-btn.megamenu-admin-modal__expand-btn.megamenu-admin-modal__expand-btn--expanded {
background: var(--black);
color: #fff;
&:hover:not(:disabled) {
color: #fff;
background: var(--black);
}
&:active:not(:disabled) {
color: #fff;
background: var(--semidark-gray);
@supports (background: color-mix(in srgb, var(--black) 90%, #fff)) {
background: color-mix(in srgb, var(--black) 90%, #fff);
}
}
}
// Min card height: Max Mega Menu settings pages only (not Appearance > Menus).
body.maxmegamenu-admin:not(.nav-menus-php) .menu_settings.menu_settings_menu_locations.mega-location-cards-root .mega-location-cards > .mega-location.postbox {
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
// Location cards (Menu Locations + Max Mega Menu meta box on nav-menus.php): one root, optional `--meta` for narrow column.
body.maxmegamenu-admin .menu_settings.menu_settings_menu_locations.mega-location-cards-root {
.mega-location-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
width: 100%;
body.maxmegamenu-admin.nav-menus-php & {
gap: 20px;
}
&:empty {
display: none;
}
@media screen and (max-width: 782px) {
grid-template-columns: minmax(0, 1fr);
}
@media screen and (min-width: 1800px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
// Dashed “add location” slot (same layout as `.mega-col-add-widget`, without text `color` rules — inherits UA/link styling).
a.mega-location-add-card {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
min-height: 100px;
padding: 6px 8px;
border: 1px dashed var(--wp-admin-theme-color);
border-radius: 4px;
background: white;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
gap: 6px;
text-decoration: none;
vertical-align: middle;
font-size: 13px;
font-weight: 500;
.dashicons {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 1;
opacity: 0.45;
transition: opacity 0.2s ease;
}
&:hover,
&:focus-visible {
border-style: solid;
border-color: $focus-ring-blue-strong;
background: white;
box-shadow: $shadow-small-hover;
.dashicons {
opacity: 1;
}
}
&:focus-visible {
@include mega-admin-focus-ring;
}
}
.mega-location.postbox {
margin: 0;
min-width: 0;
border: 1px solid var(--medium-gray);
border-radius: 4px;
box-shadow: $shadow-small;
background: white;
font-size: 14px;
cursor: pointer;
&:hover {
box-shadow: $shadow-small-hover;
}
&.mega-location--new-highlight {
animation: mm-mega-widget-selector-pulse 0.85s ease-in-out infinite;
@media (prefers-reduced-motion: reduce) {
animation-iteration-count: 2;
}
}
> .mega-inside {
margin: 0;
padding: 20px;
box-sizing: border-box;
body.maxmegamenu-admin.nav-menus-php & {
padding: 16px;
}
}
.mega-location__header {
padding: 0;
border: 0;
}
.mega-location__header-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mega-location__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
color: var(--black);
flex: 1 1 auto;
min-width: 0;
body.maxmegamenu-admin.nav-menus-php & {
font-size: 14px;
}
}
.mega-location__title-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 1;
}
.mega-location__title--editable .mega-location__title-cluster {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
flex: 0 0 auto;
cursor: pointer;
}
.mega-location__title--editable .mega-location__title-display {
min-width: 0;
flex: 0 1 auto;
}
.mega-location__title--editable .mega-location__title-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: underline solid var(--medium-gray) 1px;
text-underline-offset: 3px;
text-decoration-skip-ink: auto;
}
/* Our `display: block` above beats UA `[hidden]` — restore hiding when editing. */
.mega-location__title--editable .mega-location__title-text[hidden] {
display: none;
}
.mega-location__title-edit {
box-sizing: border-box;
flex-shrink: 0;
width: 20px;
min-width: 20px;
height: 20px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--gray);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
vertical-align: middle;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
@include megamenu-admin-icon-dashicon-child(16px);
&:hover,
&:focus,
&:active {
border: 0;
background: transparent;
box-shadow: none;
color: var(--black);
}
&:focus-visible {
@include mega-admin-focus-ring;
}
}
.mega-location__title--editable .mega-location__title-cluster:hover .mega-location__title-edit,
.mega-location__title--editable .mega-location__title-cluster:focus-within .mega-location__title-edit {
opacity: 1;
}
.mega-location__title-cluster:has(.mega-location__title-edit-field:not([hidden])) .mega-location__title-edit {
display: none;
}
.mega-location-card-title-input {
box-sizing: border-box;
width: fit-content;
min-width: 3ch;
max-width: 100%;
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
-webkit-field-sizing: content;
field-sizing: content;
}
.mega-location__header-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
&[data-mega-location^="max_mega_menu_"] .mega-location__delete {
display: none;
}
&[data-mega-location^="max_mega_menu_"].mega-location-mmm-off .mega-location__delete {
display: inline-flex;
}
button.mega-location-delete-link {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0 10px;
border: 0;
border-radius: 4px;
background: transparent;
color: $error-link;
font: inherit;
line-height: inherit;
text-align: inherit;
text-decoration: none;
cursor: pointer;
box-shadow: none;
&:hover,
&:focus {
color: $error-link-hover;
}
&[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.6;
}
.dashicons {
margin-right: 4px;
font-size: 18px;
width: 18px;
height: 18px;
}
}
.mega-location__meta {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 0 0 0;
font-size: 13px;
line-height: 1.5;
color: var(--gray);
body.maxmegamenu-admin.nav-menus-php & {
display: none;
}
}
.mega-location__meta p {
margin: 0;
}
.mega-location__assigned-link {
color: var(--wp-admin-theme-color);
font-weight: 400;
text-decoration: none;
&:hover,
&:focus {
color: var(--wp-admin-theme-color-darker-20);
}
}
}
// Menu location cards only: `@wordpress/components` toggle uses `--wp-components-color-accent` (WP admin theme blue).
.mega-mmm-enable-toggle {
--wp-components-color-primary: var(--wp-admin-theme-color);
--wp-components-color-accent: var(--wp-admin-theme-color);
}
&.mega-location-cards-root--meta {
.mega-location-cards {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.mega-location.postbox {
.mega-location__header-row {
flex-wrap: nowrap;
}
}
.mega-location__assigned,
.mega-location__delete,
button.mega-location-delete-link {
display: none !important;
}
.mega-location__meta:not(:has(.mega-location__description)) {
display: none !important;
}
}
}
// Plugin admin screens: white #wpwrap main canvas (Appearance > Menus keeps core WP chrome).
body.maxmegamenu-admin:not(.nav-menus-php) #wpwrap {
background-color: white;
}
// Lock document scroll while any mega admin dialog is open (menu item, location settings + preview, theme editor).
// `html` + `body`: dialog-menu-item-settings.js; `body` only: dialog-location-settings.js, theme-editor.js.
html.megamenu-dialog-open,
body.megamenu-dialog-open {
overflow: hidden;
overscroll-behavior: none;
}
body.megamenu-dialog-open #wpwrap {
overflow: hidden;
}
body.maxmegamenu-admin.nav-menus-php {
&.megamenu-dialog-open {
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu>li.current>a.current:after {
border-right-color: var(--semidark-gray);
}
}
// Appearance > Menus: map pin before the "Display location" legend (core `.menu-theme-locations` fieldset).
.menu-theme-locations .menu-settings-group-name::before {
display: inline-block;
margin-inline-end: 5px;
font-family: dashicons;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: -0.15em;
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f230"; // dashicons-location
}
.megamenu-menu-item-dialog .megamenu_outer_wrap.megamenu-dialog-rail {
flex: 1 1 auto;
width: 100%;
min-height: 0;
padding: 0;
user-select: none;
position: relative;
.CodeMirror {
user-select: auto;
}
// Custom HTML widget (core): constrain CodeMirror inside the menu-item widget form.
.mega-widget .custom-html-widget-fields .CodeMirror {
max-height: 150px;
min-height: 150px;
height: auto;
}
.mega-widget .custom-html-widget-fields .CodeMirror-scroll {
max-height: 150px;
min-height: 0;
}
.notice {
margin: 10px 0 0 0;
.notice-dismiss:focus {
box-shadow: none;
}
}
.megamenu_tabs {
li.megamenu_tab_horizontal {
cursor: pointer;
font-size: 12px;
font-weight: normal;
padding: 3px 5px;
margin: 0;
color: var(--semidark-gray);
border-radius: 3px;
background: var(--feather-gray);
border: 1px solid var(--light-gray);
&.active,
&:hover {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
color: white;
}
}
&.horizontal {
width: auto;
max-width: 100%;
margin-top: 0;
margin-bottom: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 8px 15px;
}
}
.megamenu_icon_tab_toolbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
width: 100%;
margin-top: 10px;
margin-bottom: 0;
box-sizing: border-box;
.megamenu_tabs.horizontal {
flex: 1 1 auto;
min-width: 0;
}
#filter_icons.filter_icons {
flex: 0 0 auto;
margin-left: auto;
min-height: 28px;
}
// Custom Icon sub-tab has no dashicons/FA grid — hide search (rel matches menu-item-manager `megamenu_tab_{$id}`).
&:has(li.megamenu_tab_horizontal.active[rel='megamenu_tab_custom']) {
.filter_icons,
#filter_icons.filter_icons {
display: none;
}
}
}
.filter_icons {
width: auto;
min-width: 120px;
max-width: 220px;
font-size: 0.9em;
box-sizing: border-box;
}
p.submit {
margin: 0;
padding-top: 16px;
padding-bottom: 20px;
position: sticky;
bottom: 0;
z-index: 1;
background: white;
}
.megamenu-dialog-panels {
padding: 0;
width: auto;
height: auto;
align-self: stretch;
position: relative;
> .megamenu_content {
padding: 20px 32px 0;
box-sizing: border-box;
}
> .megamenu_content.menu_icon {
padding-top: 0;
}
&:has(.mega-widget.open) {
isolation: isolate;
overflow: auto;
overscroll-behavior: contain;
height: 100%;
max-height: 100%;
min-height: 0;
// Transparent click-capture layer: prevents accidental clicks on the grid behind the
// open widget form. Visual dimming is handled by the box-shadow on `.mega-widget-inner`.
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 40;
pointer-events: auto;
background: transparent;
}
// Anchor `.mega-widget-inner` to this panels element (override grid + WP widget positioning contexts).
// This ensures `position: absolute` on `.mega-widget-inner` resolves to the panels container.
.megamenu_content.mega_menu #megamenu-grid .mega-row {
position: static;
}
.megamenu_content.mega_menu #megamenu-grid .mega-row .mega-col {
position: static;
}
.megamenu_content.mega_menu .mega-widget.open {
position: static;
}
}
}
.megamenu_content.mega_menu {
display: flex;
flex-direction: column;
gap: 16px;
#megamenu-standard,
#megamenu-grid {
display: none;
}
// `mm_panel_options` matches megamenu-pro (columns + widget); visibility follows sub menu type.
.mega-submenu-toolbar > .mm_panel_options {
display: none;
}
&[data-type='grid'] {
#megamenu-grid {
display: block;
}
.mega-submenu-toolbar > .mm_panel_options {
display: flex;
}
}
&[data-type='megamenu'] {
.mega-submenu-toolbar > .mm_panel_options {
display: flex;
}
#megamenu-standard {
display: flex;
}
.mega-submenu-toolbar > .mm_panel_options select#mm_number_of_columns {
display: inline-block;
width: auto;
min-width: 120px;
max-width: 200px;
}
}
#megamenu-tabbed {
display: none;
margin-top: 20px;
p {
font-style: italic;
}
}
&[data-type='tabbed'] #megamenu-tabbed {
display: block;
}
&[data-type='tabbed'] .mega-submenu-toolbar > .mm_panel_options {
display: none;
}
// Flyout: only the display-mode field stays in the top toolbar; hide columns + widget row.
&[data-type='flyout'] .mega-submenu-toolbar > .mm_panel_options {
display: none;
}
.mega-submenu-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
column-gap: 16px;
row-gap: 12px;
width: 100%;
margin-bottom: 20px;
overflow: visible;
> label[for='mm_enable_mega_menu'] {
@include mega-toolbar-field-label;
flex: 0 0 100%;
width: 100%;
}
// Menu item modal: layout only — no `@include mega-toolbar-native-select` (theme editor only).
> select#mm_enable_mega_menu {
width: auto;
min-width: 200px;
max-width: min(360px, 100%);
}
> .mm_panel_options {
flex-flow: row nowrap;
align-items: flex-end;
justify-content: flex-end;
gap: 12px 16px;
min-width: 0;
margin-left: auto;
flex: 1 1 auto;
// Column count applies to Standard layout only (not Grid).
select#mm_number_of_columns {
display: none;
}
select#mm_widget_selector {
min-width: 200px;
max-width: 360px;
width: auto;
flex: 1 1 auto;
}
select#mm_widget_selector.mega-widget-selector-pulse {
border-radius: 4px;
animation: mm-mega-widget-selector-pulse 0.85s ease-in-out 2;
@media (prefers-reduced-motion: reduce) {
animation-iteration-count: 1;
}
}
}
}
> #megamenu-standard,
> #megamenu-grid {
width: 100%;
}
#megamenu-grid {
padding-bottom: 100px;
> .drop-area.ui-sortable-placeholder {
max-height: none !important;
min-height: 0;
}
> .mega-row.ui-sortable-helper {
min-height: 0;
max-height: none;
}
&:not(.mega-grid--rows-sortable) .mega-row .mega-row-header {
cursor: default;
&:active {
cursor: default;
}
}
> .drop-area {
margin-top: 20px;
border: 1px dashed var(--light-gray);
background: var(--feather-gray);
max-height: 100px !important;
}
// Primary add buttons: icon aligned with label (overrides `.mega-row-header .dashicons` on Column).
button.mega-add-row,
button.mega-add-column {
display: inline-flex;
align-items: center;
gap: 4px;
.dashicons {
color: white;
line-height: 1;
width: 16px;
height: 16px;
font-size: 16px;
flex-shrink: 0;
margin: 0;
}
}
.mega-row {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
background-color: var(--feather-gray);
border: 1px solid var(--light-gray);
border-radius: 4px;
box-shadow: $shadow-small;
padding: 20px;
margin-top: 20px;
box-sizing: border-box;
position: relative;
&:first-child {
margin-top: 0;
}
// `--row-tracks` / `--span` on `.mega-row` / `.mega-col`; `--mega-cols-gap-slots` = column count − 1 (JS)
// for gap-aware widths. Flex + explicit width matches grid track fractions and allows width transitions.
.mega-row-cols {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
width: 100%;
min-width: 0;
gap: 8px;
box-sizing: border-box;
> .drop-area.ui-sortable-placeholder {
flex-shrink: 0;
max-height: none !important;
min-height: 0;
}
> .mega-col {
flex: 0 0 auto;
width: calc(
(100% - 8px * var(--mega-cols-gap-slots, 0)) * var(--span, 1) / var(--row-tracks, 12)
);
min-width: 0;
box-sizing: border-box;
transition: width 0.35s ease;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
}
.mega-row-header {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
gap: 8px;
width: 100%;
padding: 0 0 20px 0;
box-sizing: border-box;
cursor: grab;
user-select: none;
a {
cursor: pointer;
}
&:active {
cursor: grabbing;
}
.mega-disabled .dashicons {
opacity: 1;
}
.mega-row-actions .dashicons.mega-settings-open {
opacity: 1;
color: var(--black);
}
.mega-row-actions .dashicons {
opacity: 1;
color: var(--gray);
transition: color 0.15s ease, background 0.15s ease;
}
.mega-row-actions {
order: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
flex: 0 1 auto;
.mega-row-header__action--delete {
display: none;
color: $error;
}
}
// Row toolbar: settings/trash are icon `button.dashicons.mega-row-header__action`; desktop/mobile
// use an inner `.dashicons` — use one box size so flex cross-axis alignment matches.
.mega-row-header__action {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
box-shadow: none;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
&:focus-visible {
@include mega-admin-focus-ring;
}
&.dashicons {
width: 16px;
height: 16px;
font-size: 16px;
}
.dashicons {
width: 16px;
height: 16px;
font-size: 16px;
line-height: 1;
display: block;
}
}
.mega-row-actions:hover .dashicons {
color: var(--black);
}
.mega-row-settings {
order: 3;
flex: 1 1 100%;
width: 100%;
}
button.mega-add-column {
order: 2;
margin-left: auto;
cursor: pointer;
}
}
&[data-used-cols='0'] {
.mega-row-header .mega-row-actions .mega-row-header__action--delete {
display: inline-flex;
opacity: 1;
}
}
.mega-too-many-cols {
display: none;
}
&[data-too-many-cols='true'] {
.mega-too-many-cols {
display: block;
}
}
.mega-row-is-full {
display: none;
}
.notice {
margin: 10px 5px;
cursor: pointer;
}
}
.mega-col {
display: block;
position: relative;
min-width: 0;
box-sizing: border-box;
&.mega-col-add-target .mega-col-wrap {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
}
.mega-col-wrap {
background-color: white;
border: 1px solid var(--light-gray);
border-radius: 2px;
box-shadow: $shadow-small;
margin: 0;
padding: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
&:hover {
box-shadow: $shadow-small-hover;
}
}
.mega-col-widgets {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
min-height: 50px;
.mega-col-add-widget {
@include mega-col-add-widget-appearance;
margin-top: auto;
border-color: var(--light-gray);
background: white;
color: var(--black);
.dashicons {
opacity: 0.85;
color: var(--gray);
}
&:hover,
&:focus-visible {
color: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
background: white;
.dashicons {
opacity: 1;
color: var(--wp-admin-theme-color);
}
}
}
.mega-widget {
float: none;
width: 100%;
border: 0;
margin: 0;
&.mega-widget-added-pulse .mega-widget-top {
animation: mm-mega-widget-selector-pulse 0.85s ease-in-out infinite;
@media (prefers-reduced-motion: reduce) {
animation-iteration-count: 2;
}
}
.mega-widget-top {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
min-height: 42px;
box-sizing: border-box;
padding: 4px 10px;
background: white;
border: 1px solid var(--light-gray);
border-radius: 2px;
box-shadow: $shadow-small;
overflow: hidden;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
&:hover .mega-widget-top {
border: 1px solid var(--semidark-gray);
box-shadow: $shadow-small-hover;
}
&.open .mega-widget-top {
border: 1px solid var(--semidark-gray);
}
&.open .mega-widget-inner {
border: 1px solid var(--semidark-gray);
}
.mega-widget-title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
h4 {
font-weight: normal;
margin: 0;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mega-widget-desc {
font-weight: normal;
font-size: 11px;
color: var(--gray);
font-style: italic;
}
}
.mega-widget-title-action {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
position: static;
margin: 0;
padding: 0;
background: white;
border: 0;
}
&[data-type=item] form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
input, select {
align-self: flex-end;
max-width: 100%;
}
p {
width: 100%;
margin-bottom: 0;
}
.mega-widget-content {
padding-top: 10px;
}
}
}
}
.mega-col-header {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
width: 100%;
min-height: 40px;
height: auto;
box-sizing: border-box;
gap: 8px;
row-gap: 6px;
min-width: 0;
margin-bottom: 10px;
> .mega-col-actions {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
gap: 5px;
row-gap: 6px;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
user-select: none;
> :not(.mega-col-drag-handle) {
flex-shrink: 0;
}
.mega-col-header__action {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
box-shadow: none;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
&:focus-visible {
@include mega-admin-focus-ring;
}
}
> .mega-col-drag-handle {
flex: 1 1 auto;
align-self: stretch;
min-width: 24px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: grab;
border-radius: 2px;
&:active {
cursor: grabbing;
}
}
.mega-disabled .dashicons {
opacity: 1;
}
.dashicons.mega-settings-open {
opacity: 1;
color: var(--black);
}
.dashicons {
opacity: 1;
color: var(--gray);
transition: color 0.15s ease;
width: 14px;
height: 14px;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mega-col-header__action--delete {
display: none;
color: $error;
}
&:hover .dashicons {
color: var(--black);
}
}
> .mega-col-span {
@include mega-col-span-pill;
button.mega-col-contract,
button.mega-col-expand {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: inherit;
line-height: 1;
border-radius: 2px;
cursor: pointer;
box-shadow: none;
&:hover,
&:focus-visible {
color: var(--wp-admin-theme-color-darker-20);
}
&:focus-visible {
@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
}
}
button.mega-col-expand:disabled,
button.mega-col-contract:disabled {
color: var(--medium-gray);
cursor: not-allowed;
&:hover,
&:focus-visible {
color: var(--medium-gray);
}
.dashicons {
cursor: not-allowed;
}
}
.dashicons {
margin-right: 0;
width: 14px;
height: 14px;
font-size: 14px;
line-height: 1;
cursor: pointer;
color: inherit;
opacity: 1;
}
.mega-col-cols {
display: inline-flex;
align-items: center;
line-height: 1.2;
font-size: 11px;
font-weight: 600;
color: inherit;
}
}
}
// After `.mega-col-header__action--delete { display: none }` so higher specificity wins.
&[data-total-blocks='0'] .mega-col-header > .mega-col-actions > .mega-col-header__action--delete {
display: inline-flex;
opacity: 1;
}
}
button.mega-add-row {
margin-top: 20px;
}
.mega-col-settings,
.mega-row-settings {
width: 100%;
display: none;
margin: 8px 0 20px;
padding: 12px 14px;
box-sizing: border-box;
background: white;
border: 1px solid var(--light-gray);
border-radius: 2px;
box-shadow: none;
}
.mega-col-settings {
label {
width: 100%;
font-size: 11px;
text-transform: uppercase;
margin-right: 5px;
color: var(--black);
font-weight: 600;
letter-spacing: 0.02em;
}
input {
font-size: 13px;
max-width: 100%;
display: block;
width: 100%;
margin: 5px 0 10px 0;
color: var(--black);
border-color: var(--megamenu-form-control-border, var(--gray));
}
}
.mega-row-settings {
.mega-settings-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 8px;
}
label {
width: 150px;
font-size: 11px;
text-transform: uppercase;
display: inline-block;
color: var(--black);
font-weight: 600;
letter-spacing: 0.02em;
}
input,
select {
font-size: 13px;
color: var(--black);
border-color: var(--megamenu-form-control-border, var(--gray));
}
}
.mega-row-header .dashicons,
.mega-col-header .dashicons {
font-size: 13px;
width: 15px;
cursor: pointer;
}
.mega-col-header {
user-select: none;
a {
cursor: pointer;
}
}
.mega-disabled .dashicons {
&:before {
color: $error;
}
}
.drop-area {
display: inline-block;
box-sizing: border-box;
}
.ui-sortable-helper {
opacity: 0.5;
}
}
#megamenu-standard {
flex-flow: row wrap;
align-items: flex-start;
align-content: flex-start;
gap: 0;
background: var(--feather-gray);
border: 1px solid var(--light-gray);
padding: 5px;
width: 100%;
box-sizing: border-box;
min-height: 200px;
.no_widgets {
font-size: 0.9em;
margin-left: 10px;
font-style: italic;
margin-top: 10px;
color: var(--semidark-gray);
flex: 1 0 100%;
}
.drop-area {
display: block;
border: 1px solid var(--feather-gray);
box-sizing: border-box;
}
.mega-widget {
width: 100%;
h4 {
max-width: 700px;
}
}
}
.mega-widget {
box-sizing: border-box;
width: 160px;
margin: 0;
color: var(--semidark-gray);
font-size: 12px;
display: block;
border: 5px solid transparent;
flex: 0 0 auto;
&:hover {
.mega-widget-top {
border: 1px solid var(--semidark-gray);
}
.mega-widget-inner {
border: 1px solid var(--semidark-gray);
}
}
textarea {
max-height: 100px;
}
}
.mega-widget.open {
.mega-widget-top {
border: 1px solid var(--semidark-gray);
cursor: move;
position: relative;
z-index: 50;
box-sizing: border-box;
opacity: 0.5;
filter: brightness(0.88);
transition: opacity 0.15s ease, filter 0.15s ease;
}
.mega-widget-inner {
border: 1px solid var(--semidark-gray);
// Absolute within the panels container (rows, cols, and the open widget are all
// position: static so `.megamenu-dialog-panels` is the nearest positioned ancestor).
// JS sets --mmm-panels-scroll to the panels' scrollTop when the widget opens, so
// `top: calc(var(…) + 50%)` places the form at the centre of the *visible* panels
// area regardless of how far the user has scrolled.
position: absolute;
left: 10%;
right: 10%;
top: calc(var(--mmm-panels-scroll, 0px) + 50%);
bottom: auto;
transform: translateY(-50%);
width: auto;
margin: 0;
z-index: 60;
box-sizing: border-box;
max-width: 100%;
// Cap height to 90% of the panels visible height so the form never overflows.
max-height: 90%;
height: max-content;
min-width: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
background: white;
box-shadow:
$shadow-large-hover,
0 0 0 1px $shadow-a07,
0 0 0 9999px rgba(0, 0, 0, 0.4);
border-radius: 4px;
&.mmm-widget-inner--preparing {
opacity: 0;
pointer-events: none;
transition: none;
}
&.mmm-widget-inner--show {
opacity: 1;
transition: opacity 0.2s ease;
}
}
.mega-widget-inner > form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding: 0 15px 0;
margin-bottom: 0;
box-sizing: border-box;
}
.mega-widget-inner .mega-widget-dialog-header {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 0 10px;
margin: 0;
border-bottom: 1px solid var(--light-gray);
}
.mega-widget-inner .mega-widget-dialog-title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0 4px 0 2px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--black);
border-bottom: 0;
}
.mega-widget-inner .mega-widget-dialog-close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--gray);
cursor: pointer;
box-sizing: border-box;
.dashicons {
width: 18px;
height: 18px;
font-size: 18px;
line-height: 1;
}
&:hover,
&:focus-visible {
color: var(--black);
background: var(--feather-gray);
}
&:focus-visible {
@include mega-admin-focus-ring;
}
}
.mega-widget-inner .mega-widget-content {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
// Single scrollbar on `.mega-widget-inner` (viewport-capped).
overflow-y: visible;
}
.mega-widget-inner .mega-widget-form-footer {
flex: 0 0 auto;
margin-top: 0;
padding-top: 10px;
padding-bottom: 12px;
border-top: 1px solid var(--light-gray);
background: white;
}
.mega-widget-action {
&::after {
content: '\f142';
}
}
}
.mega-widget-top {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 42px;
box-sizing: border-box;
border: 0;
box-shadow: none;
border: 1px solid var(--light-gray);
padding: 0 10px;
background: white;
overflow: hidden;
}
.mega-widget[data-type='menu_item'] {
.mega-widget-top {
cursor: default;
}
}
.mega-widget-title {
flex: 1 1 auto;
min-width: 0;
h4 {
color: var(--semidark-gray);
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
border-bottom: 0;
font-size: 12px;
text-overflow: ellipsis;
line-height: 1.35;
&:after {
color: #d54e21;
display: none;
font: normal 20px/1 'dashicons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 5px;
content: '\f463';
animation: mm-rotation 2s infinite linear;
vertical-align: middle;
}
}
h4.loading {
&:after {
display: inline-block;
}
}
}
.mega-widget[data-type='menu_item'] {
.mega-widget-title {
h4 {
&:before {
color: var(--semidark-gray);
font: normal 16px/1 'dashicons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 2px;
content: "\f333";
vertical-align: middle;
top: -1px;
position: relative;
}
}
}
form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
input, select {
align-self: flex-end;
max-width: 100%;
}
p {
width: 100%;
margin-bottom: 0;
}
}
}
.mega-widget-form-footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
box-sizing: border-box;
margin-top: 12px;
padding-top: 4px;
clear: both;
.mega-widget-controls {
display: flex;
align-items: center;
flex: 0 0 auto;
margin: 0;
padding: 0;
}
}
.mega-widget-controls {
flex: 0 0 auto;
.mega-delete {
@include mega-admin-trash-icon-button;
}
}
.mega-widget-inner {
display: none;
width: 100%;
background: white;
form {
padding: 0 15px 15px 15px;
margin-bottom: 0;
}
p {
font-size: 12px;
}
select {
font-size: 12px;
}
input {
font-size: 12px;
}
}
.mega-widget-title-action {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 0;
margin: 0;
position: static;
font-weight: normal;
opacity: 1;
background: white;
.mega-col-span {
@include mega-col-span-pill;
.mega-widget-option.mega-widget-contract,
.mega-widget-option.mega-widget-expand {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: 2px;
color: inherit;
&:hover,
&:focus-visible {
color: var(--wp-admin-theme-color-darker-20);
}
&::after {
color: inherit;
}
&:focus-visible {
@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
}
}
.mega-widget-cols {
display: inline-flex;
align-items: center;
line-height: 1.2;
font-size: 11px;
font-weight: 600;
color: inherit;
}
}
}
.mega-widget-option {
right: 0;
appearance: none;
-webkit-appearance: none;
border: 0;
background: 0 0;
font: 400 16px/1 dashicons;
speak: none;
display: block;
padding: 0;
margin: 0;
text-indent: 0;
text-align: center;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
color: var(--gray);
box-shadow: none;
&:hover {
color: var(--semidark-gray);
cursor: pointer;
}
&::after {
padding: 0;
font: 400 16px/1 dashicons;
display: block;
}
}
.mega-widget-cols {
display: inline-flex;
align-items: center;
line-height: 1.2;
color: var(--gray);
font-size: 11px;
}
h5 {
margin: 10px 0 0 10px;
text-transform: uppercase;
}
.mega-widget-expand {
&::after {
content: '\f345';
}
}
.mega-widget-contract {
&::after {
content: '\f341';
}
}
.mega-widget-action {
&::after {
content: '\f107';
margin: 0;
}
}
.mega-widget-option.disabled {
&:hover {
color: var(--gray);
}
}
.mega-widget[data-columns='1'] {
.mega-widget-contract {
display: none;
}
}
#megamenu-standard {
@include grid-col-widths('data-columns', '.mega-widget', 'data-columns');
.mega-widget {
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
}
}
.menu_icon {
.menu_icon__header {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
padding-top: 20px;
padding-bottom: 20px;
> h4 {
margin-top: 0;
}
}
.icon_selector {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
gap: 10px;
>div {
flex: 0 0 auto;
padding: 0;
width: 40px;
height: 40px;
box-sizing: border-box;
position: relative;
}
> div.mmm-icon-filter-hidden {
display: none !important;
}
label {
display: block;
width: 40px;
height: 40px;
position: relative;
z-index: 0;
cursor: pointer;
user-select: none;
&:before {
content: var(--mmm-i);
speak: none;
@include megamenu-admin-icon-pseudo-dashicon-tile;
}
}
input.radio {
position: absolute;
inset: 0;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
box-sizing: border-box;
opacity: 0;
cursor: pointer;
z-index: 1;
&:checked {
~ {
label {
color: var(--gray);
}
}
}
}
> div:has(input:focus-visible) label:before {
@include mega-admin-focus-ring;
}
> div:has(input:checked) label:before {
color: var(--wp-admin-theme-color);
background: transparent;
box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
}
> div:has(input:checked):hover label:before {
color: var(--wp-admin-theme-color);
background: var(--light-gray);
box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
}
> div:has(input:not(:checked)):hover label:before {
color: var(--black);
background: var(--light-gray);
}
.dash {
label {
&:before {
font-style: normal;
font-variant: normal;
text-decoration: inherit;
text-rendering: auto;
font-family: dashicons;
}
}
}
.material {
label {
&:before {
font-family: var(--wp--preset--font-family--material-symbols);
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
}
}
div.disabled label:before {
content: "";
}
}
// Max Mega Menu Pro: FA / Genericons tiles use `label[rel]` for the glyph (HTML entity), not `--mmm-i`.
.megamenu_tab_fontawesome,
.megamenu_tab_fontawesome5,
.megamenu_tab_fontawesome6,
.megamenu_tab_genericons {
.icon_selector label[rel]:before {
content: attr(rel);
speak: none;
@include megamenu-admin-icon-pseudo-dashicon-tile(40px, 24px);
}
}
.megamenu_tab_fontawesome .icon_selector .fa label[rel]:before {
font-family: FontAwesome;
}
.megamenu_tab_fontawesome5 .icon_selector {
.fas label[rel]:before,
.far label[rel]:before {
font-family: 'Font Awesome 5 Free';
}
.far label[rel]:before {
font-weight: 400;
}
.fas label[rel]:before {
font-weight: 900;
}
.fab label[rel]:before {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
.fal label[rel]:before {
font-family: 'Font Awesome 5 Free';
font-weight: 300;
}
.fas.pro label[rel]:before,
.far.pro label[rel]:before,
.fal.pro label[rel]:before {
font-family: 'Font Awesome 5 Pro';
}
}
.megamenu_tab_fontawesome6 .icon_selector {
.fab label[rel]:before {
font: var(--fa-font-brands);
font-size: 24px;
}
.far label[rel]:before {
font: var(--fa-font-regular);
font-size: 24px;
}
.fas label[rel]:before {
font: var(--fa-font-solid);
font-size: 24px;
}
}
.megamenu_tab_genericons .icon_selector .genericon label[rel]:before {
font-family: Genericons;
}
.mega-material-notice {
margin: 12px 0;
padding: 10px 12px;
background: var(--feather-gray);
border-left: 4px solid var(--wp-admin-theme-color, #3858e9);
font-size: 13px;
strong {
font-weight: 600;
}
}
}
@at-root body.maxmegamenu-admin.nav-menus-php .megamenu-menu-item-dialog .general_settings table {
td {
padding-top: 3px;
padding-bottom: 3px;
}
td.mega-value--pill {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px 12px;
.components-form-toggle {
flex-shrink: 0;
}
.mega-description,
em {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
margin: 0;
text-align: inherit;
}
.mega-description {
display: block;
}
}
}
form,
.megamenu_content {
> h4.first {
margin: 0 0 0.85em 0;
}
> h4 {
display: flow-root;
border-bottom: 1px solid var(--light-gray);
padding: 0 0 12px 0;
font-weight: 600;
color: var(--black);
margin: 1.5em 0 1em 0;
}
}
select {
border-radius: 4px;
border-color: var(--megamenu-form-control-border, var(--gray));
background-color: white;
}
.description,
.mega-description {
color: var(--gray);
font-style: italic;
}
img {
height: auto;
max-width: 100%;
}
}
&.megamenu_enabled {
.megamenu_prefix {
display: block;
font-size: 0.9em;
border-left: 3px solid $warning;
padding-left: 10px;
margin-top: 3px;
}
}
.megamenu_prefix {
display: none;
}
// Uses core .button.button-primary.button-small; only layout, reveal, dashicon, and non-disabled attr state.
.megamenu_launch.button.button-primary.button-small {
margin-left: 8px;
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1.15;
min-height: 22px;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1;
position: relative;
&:focus-visible {
opacity: 1;
}
&.megamenu_disabled,
&[aria-disabled="true"] {
cursor: not-allowed;
color: var(--gray) !important;
background: var(--feather-gray) !important;
border-color: var(--light-gray) !important;
box-shadow: none !important;
}
&.megamenu_disabled:hover,
&.megamenu_disabled:active,
&[aria-disabled="true"]:hover,
&[aria-disabled="true"]:active {
color: var(--gray) !important;
background: var(--feather-gray) !important;
border-color: var(--light-gray) !important;
box-shadow: none !important;
}
&:before {
font-family: dashicons;
content: "\f111"; // dashicons-admin-generic
font-size: 12px;
width: 12px;
height: 12px;
line-height: 12px;
color: rgba(white, 0.92);
display: inline-block;
flex-shrink: 0;
}
&.megamenu_disabled:before,
&[aria-disabled="true"]:before {
color: var(--medium-gray);
}
}
// Restore hidden state when the launch control has programmatic :focus (e.g. after modal close) but not :focus-visible.
.menu-item-bar .menu-item-handle:not(:hover) .megamenu_launch.button.button-primary.button-small:focus:not(:focus-visible) {
opacity: 0;
}
.menu-item-bar {
.menu-item-handle {
// Hover only: focus-within would keep the button visible when focus returns after closing the modal.
&:hover {
.megamenu_launch {
opacity: 1;
}
}
}
.dashicons-admin-generic {
&:before {
font-size: 1.2em;
margin-right: 1px;
height: auto;
}
}
}
#nav-menu-meta .mega_menu_meta_box {
// Core wraps the callback in a div (historically .inside); target first child without using that class name.
#mega_menu_meta_box-content > :first-child {
margin: 0;
padding: 14px;
box-sizing: border-box;
}
.accordion-section-content {
padding: 0;
}
}
.menu-item-handle {
.item-title {
margin-right: 0;
}
}
}
// Shared modal shell (menu item editor, preview, location settings): fixed overlay inset from the admin menu edge.
// Same `body` block continues below with theme editor / `#wpbody` layout (icon dropdown, Menu Themes tabs, etc.).
body.maxmegamenu-admin {
--megamenu-form-control-border: var(--gray);
--mmm-admin-bar-offset: 0;
// @wordpress/components defaults (e.g. form toggles) prefer `--wp-components-color-accent` with a blue
// fallback. Tie component accents to the active admin color scheme so location cards + dialogs match
// Modern purple / user scheme instead of isolated Gutenberg blue.
--wp-components-color-primary: var(--wp-admin-theme-color);
--wp-components-color-accent: var(--wp-admin-theme-color);
--wp-components-color-accent-darker-10: var(
--wp-admin-theme-color-darker-10,
var(--wp-admin-theme-color)
);
--wp-components-color-accent-darker-20: var(
--wp-admin-theme-color-darker-20,
var(--wp-admin-theme-color)
);
&.admin-bar {
--mmm-admin-bar-offset: 32px;
@media screen and (max-width: 782px) {
--mmm-admin-bar-offset: 46px;
}
}
.megamenu_outer_wrap {
input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='time'],
input[type='url'],
input[type='week'] {
padding: 0 6px;
}
}
.megamenu-admin-modal td.mega-value p {
margin: 0;
font-style: italic;
}
[data-mega-tooltip] {
position: relative;
@include tooltip-popup-base;
}
// Optional placement (default mixin is below). Used e.g. for disabled mobile preview in footer toolbar.
// Gap must clear a 9px square at 45° (~6.4px half-extent each way); 8px was too narrow and drew the
// chevron inside the bubble. Use 14px gutter and center the arrow on it.
[data-mega-tooltip][data-mega-tooltip-position="right"] {
&:before {
top: 50%;
left: 100%;
right: auto;
margin-left: 14px;
margin-top: 0;
transform: translateY(-50%);
text-align: start;
white-space: normal;
width: max-content;
max-width: min(400px, calc(100vw - 100px));
min-width: 0;
}
// SW-corner L + 45deg → tip points left (offset tuned vs :before margin-left).
&:after {
top: 50%;
left: calc(100% + 14px);
width: 9px;
height: 9px;
margin: 0;
background: white;
border-left: 1px solid var(--gray);
border-bottom: 1px solid var(--gray);
border-right: none;
border-top: none;
box-sizing: border-box;
transform: translate(-50%, -50%) rotate(45deg);
}
}
&.rtl [data-mega-tooltip][data-mega-tooltip-position="right"] {
&:before {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 14px;
transform: translateY(-50%);
}
// NE-corner L + 45deg → tip points right; mirror LTR.
&:after {
left: auto;
right: calc(100% + 14px);
width: 9px;
height: 9px;
margin: 0;
background: white;
border-top: 1px solid var(--gray);
border-right: 1px solid var(--gray);
border-bottom: none;
border-left: none;
box-sizing: border-box;
transform: translate(50%, -50%) rotate(45deg);
}
}
[data-mega-tooltip][data-mega-tooltip-enabled] {
&.mega-enabled:before {
content: attr(data-mega-tooltip-enabled);
}
&.mega-disabled:before {
content: attr(data-mega-tooltip-disabled);
}
}
// Labels wrapping core `components-form-toggle` (styles from `wp-components`).
.mega-mmm-enable-toggle,
.mmm-settings-pill-field-label {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
max-width: 100%;
cursor: pointer;
}
.mega-mmm-enable-toggle .components-form-toggle {
flex-shrink: 0;
margin-right: 4px;
}
// Location settings modal pill wrapper (label + switch inside).
.mmm-settings-pill-field {
display: inline-block;
vertical-align: top;
align-self: flex-start;
margin: 0 0 14px 0;
max-width: 100%;
box-sizing: border-box;
&:last-child {
margin-bottom: 0;
}
}
// Collapsed panel size — same for preview, location settings, and menu item (until expanded).
$megamenu-modal-panel-collapsed-max-width: 1200px;
$megamenu-modal-panel-collapsed-max-vh: 70vh;
$megamenu-modal-panel-collapsed-height-cap: 960px;
// Expanded: explicit calc so height/max-height can transition (not `auto` / `none`).
$megamenu-modal-panel-expanded-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 40px);
.megamenu-admin-modal {
display: none;
position: fixed;
z-index: 100050;
top: var(--wp-admin--admin-bar--height, 32px);
right: 0;
bottom: 0;
left: 160px;
margin: 0;
border: none;
outline: none;
padding: 20px 24px;
overflow: auto;
box-sizing: border-box;
flex-direction: row;
// Stretch on the main axis only; keep cross-axis centering so height changes grow from the middle.
align-items: center;
justify-content: stretch;
&.is-open {
display: flex;
}
&.megamenu-admin-modal--wpcontent-expanded {
.megamenu-admin-modal__panel {
// Same width model as collapsed (`width: 100%` + max-width); only max-width grows — interpolates smoothly.
max-width: 100%;
// Stay centered like collapsed; do not stretch to top (that caused jump-then-expand-down).
height: $megamenu-modal-panel-expanded-height;
max-height: $megamenu-modal-panel-expanded-height;
min-height: 0;
// Match collapsed so margin doesn’t snap (auto → 0 was causing a horizontal jump with width).
margin-inline: auto;
margin-block: auto;
}
}
&__backdrop {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
border: 0;
background: $shadow-a45;
cursor: pointer;
}
&__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
// Interpolates cleanly to expanded `max-width: 100%` (avoid `width: min()` ↔ `100%` which jumps).
width: 100%;
max-width: $megamenu-modal-panel-collapsed-max-width;
// Same expression for height + max-height so transitions don’t fight (was max-height: 70vh with height min(70vh, 960px)).
$megamenu-modal-panel-collapsed-height: min(#{$megamenu-modal-panel-collapsed-max-vh}, #{$megamenu-modal-panel-collapsed-height-cap});
max-height: $megamenu-modal-panel-collapsed-height;
height: $megamenu-modal-panel-collapsed-height;
min-height: 0;
flex-shrink: 0;
margin-inline: auto;
margin-block: auto;
align-self: center;
background: white;
border-radius: $modal-radius;
box-shadow: $shadow-large;
overflow: hidden;
font-size: 14px;
line-height: 1.5;
transition:
width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
margin-inline 0.3s ease;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
&__header {
flex: 0 0 auto;
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
box-sizing: border-box;
padding: 0;
background: white;
min-height: 0;
border-bottom: 0;
box-shadow:
0 1px 2px $shadow-a05,
0 2px 10px $shadow-a07;
.megamenu-admin-modal__title-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
flex: 1 1 auto;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.megamenu-admin-modal__title-group > .megamenu-admin-modal__title {
flex: 1 1 auto;
min-width: 0;
}
.megamenu-admin-modal__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
min-width: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
color: var(--black);
br {
display: none;
}
}
.megamenu-admin-modal__title-icon.dashicons {
flex-shrink: 0;
width: 24px;
height: 24px;
font-size: 24px;
line-height: 1;
color: var(--gray);
}
.megamenu-admin-modal__title-text {
min-width: 0;
}
.megamenu_subtitle {
margin: 0;
font-size: 13px;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
color: var(--gray);
line-height: 1.3;
letter-spacing: 0;
}
.megamenu-admin-modal__header-meta {
flex: 0 0 auto;
align-self: center;
}
.megamenu-admin-modal__header-actions {
position: static;
flex-shrink: 0;
margin-inline-start: auto;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 6px;
.megamenu-modal-close {
position: static;
top: auto;
right: auto;
z-index: auto;
}
.megamenu-admin-modal__expand-btn {
position: static;
top: auto;
right: auto;
z-index: auto;
.megamenu-admin-modal__expand-icon--contract {
display: none;
}
&.megamenu-admin-modal__expand-btn--expanded {
.megamenu-admin-modal__expand-icon--expand {
display: none;
}
.megamenu-admin-modal__expand-icon--contract {
display: inline-block;
}
}
}
}
}
&__header-top {
display: flex;
align-items: center;
justify-content: stretch;
gap: 24px;
padding: 24px;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: 0;
.megamenu-admin-modal__title-group {
flex: 1 1 auto;
min-width: 0;
}
}
&__body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
textarea,
input[type="text"],
input[type="number"],
input[type="search"],
select {
border-radius: 4px;
}
}
// Centered loading overlay + spinner (preview iframe shell, location + menu item modal bodies).
.megamenu-admin-modal__loading-host {
position: relative;
}
.megamenu-admin-modal__loading-overlay {
display: none;
position: absolute;
inset: 0;
z-index: 2;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--light-gray);
pointer-events: none;
}
.megamenu-admin-modal__loading-host--loading .megamenu-admin-modal__loading-overlay {
display: flex;
}
.megamenu-admin-modal__loading-spinner {
box-sizing: border-box;
width: 36px;
height: 36px;
border: 3px solid var(--light-gray);
border-top-color: var(--wp-admin-theme-color);
border-radius: 50%;
animation: megamenu-admin-modal-loading-spin 0.7s linear infinite;
}
@keyframes megamenu-admin-modal-loading-spin {
to {
transform: rotate(360deg);
}
}
.megamenu-admin-modal__body-slot {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
&.megamenu-location-settings-dialog &__body {
padding: 0;
}
&.megamenu-location-settings-dialog &__body .megamenu-admin-modal__body-slot {
padding: 8px $modal-padding-x 0;
}
&.megamenu-menu-item-dialog &__body {
padding: 0;
}
// Footer bar: location settings (Save), preview (viewport). Menu item modal has no footer row.
&__footer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 24px;
border-top: 0;
p.submit {
margin: 0;
padding: 0;
line-height: inherit;
}
.spinner {
float: none;
margin: 0;
visibility: hidden;
}
}
}
// Scroll-down hint: bottom-center of the *panels* column (rail is 230px + 1fr; not the full dialog width).
.mmm-scroll-hint {
position: absolute;
bottom: 20px;
left: calc(50% + 230px / 2);
transform: translateX(-50%);
z-index: 5;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px 5px 8px;
background: white;
border: 1px solid var(--wp-admin-theme-color);
border-radius: 20px;
box-shadow: $shadow-small, 0 2px 6px $shadow-a12;
color: var(--semidark-gray);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
white-space: nowrap;
// Hidden until JS activates; visibility controls interactivity during fade.
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0s 0.2s;
&.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.2s ease, visibility 0s;
}
// Before JS runs (or after close), snap to hidden via display:none.
&[hidden] {
display: none !important;
}
.dashicons {
font-size: 14px;
width: 14px;
height: 14px;
line-height: 1;
color: var(--gray);
}
&:hover {
background: var(--feather-gray);
border-color: var(--wp-admin-theme-color-darker-20);
box-shadow: $shadow-small-hover;
}
&:focus-visible {
@include mega-admin-focus-ring;
}
}
// Appearance > Menus + RTL: rail columns swap (panels first / inline-start) — re-center over panels.
&.rtl.nav-menus-php .megamenu-menu-item-dialog .mmm-scroll-hint {
left: calc(50% - 230px / 2);
}
// Menu item modal body grid (sibling of .megamenu-admin-modal to avoid Sass duplicating `body` when nesting `.megamenu-admin-modal__*`).
// Collapsed panel width/height match preview + location (shared `&__panel` above).
.megamenu-admin-modal.megamenu-menu-item-dialog {
.megamenu-admin-modal__header-actions .megamenu-menu-item-dialog-saving-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
flex-shrink: 0;
pointer-events: none;
&[hidden] {
display: none !important;
}
.megamenu-menu-item-dialog-saving-indicator__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 22px;
line-height: 1;
color: var(--gray);
animation: mm-rotation 2s infinite linear;
}
}
.megamenu-admin-modal__body .megamenu_outer_wrap {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
font-size: 14px;
line-height: 1.5;
.mega-tablist {
button.megamenu-dialog-tab.mega_menu:before {
content: "\f116";
}
button.megamenu-dialog-tab.general_settings:before {
content: "\f111";
}
button.megamenu-dialog-tab.menu_icon:before {
content: "\f128";
}
button.megamenu-dialog-tab.styling:before {
content: "\f540";
}
button.megamenu-dialog-tab.roles:before {
content: "\f110";
}
button.megamenu-dialog-tab.badge:before {
content: "\f313"; // dashicons-awards
}
button.megamenu-dialog-tab .mm-tab-dirty-indicator {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-inline-start: 4px;
.dashicons {
width: 16px;
height: 16px;
font-size: 16px;
line-height: 1;
color: #dba617;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}
.megamenu_tabs li.megamenu_tab_horizontal {
font-size: 14px;
padding: 5px 8px;
}
.filter_icons {
font-size: 1em;
}
}
}
.megamenu-admin-modal.megamenu-location-settings-dialog.megamenu-location-settings-dialog--preview-visible {
.megamenu-admin-modal__body.megamenu-location-settings-dialog__body-stack {
background-color: white;
background-image: none;
}
.megamenu-location-settings-dialog__preview-panel {
flex: 1 1 auto;
min-height: 360px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.megamenu-location-settings-dialog__preview-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
width: 100%;
flex: 0 0 auto;
}
.megamenu-preview-dialog__preview-bg-field {
display: inline-flex;
align-items: center;
gap: 10px;
.megamenu-preview-dialog__bg-custom-cell {
--mmm-preview-bg-hit: 30px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
flex: 0 0 38px;
box-sizing: border-box;
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
padding: 3px;
border-radius: 999px;
border: 1px solid var(--light-gray);
background: var(--light-gray);
z-index: 1;
> .megamenu-preview-dialog__bg-custom-color-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
.mega-custom-color-input-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: var(--mmm-preview-bg-hit);
height: var(--mmm-preview-bg-hit);
margin: 0;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 50%;
opacity: 0;
cursor: pointer;
.mega-color-picker-input-text {
display: none !important;
}
.mega-custom-color-input-swatch {
display: none !important;
}
}
.megamenu-preview-dialog__bg-open-picker {
position: absolute;
top: 50%;
left: 50%;
width: var(--mmm-preview-bg-hit);
height: var(--mmm-preview-bg-hit);
margin: 0;
transform: translate(-50%, -50%);
z-index: 0;
flex-shrink: 0;
padding: 0;
border: 0;
border-radius: 50%;
box-shadow: none;
background: transparent;
align-items: center;
justify-content: center;
&:not(:disabled):hover {
background: color-mix(in srgb, var(--black) 4%, var(--feather-gray));
}
&:focus-visible {
@include mega-admin-focus-ring(var(--gray), 2px);
}
}
}
.megamenu-preview-dialog__bg-swatch--preview {
display: block;
width: var(--mmm-preview-bg-hit);
height: var(--mmm-preview-bg-hit);
border-radius: 50%;
box-sizing: border-box;
flex-shrink: 0;
background-color: white;
box-shadow: inset 0 0 0 0.5px var(--light-gray);
background-image: linear-gradient(
135deg,
white 44%,
var(--gray) 44%,
var(--gray) 56%,
white 56%
);
&.megamenu-preview-dialog__bg-swatch--preview-transparent {
background-color: white;
background-image: linear-gradient(
135deg,
white 44%,
var(--gray) 44%,
var(--gray) 56%,
white 56%
);
}
}
}
.megamenu-preview-dialog__iframe-shell {
position: relative;
flex: 1 1 auto;
min-height: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
background: transparent;
}
.megamenu-preview-dialog__iframe {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
border: 0;
min-height: 0;
transition: max-width 0.2s ease-out;
background-color: white;
background-image:
linear-gradient(45deg, var(--light-gray) 25%, transparent 25%),
linear-gradient(-45deg, var(--light-gray) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--light-gray) 75%),
linear-gradient(-45deg, transparent 75%, var(--light-gray) 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
&.megamenu-preview-dialog--mobile-preview .megamenu-preview-dialog__iframe {
max-width: var(--megamenu-preview-mobile-width, 390px);
width: 100%;
}
.megamenu-admin-modal__footer {
justify-content: flex-start;
align-items: center;
gap: 0;
}
}
.megamenu-admin-modal.megamenu-scss-variables-dialog {
#megamenu-scss-variables-dialog-body.megamenu-scss-variables-dialog__slot {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
padding: 20px;
box-sizing: border-box;
}
.megamenu-scss-variables-dialog__intro {
margin: 0;
}
.megamenu-scss-vars-list {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
column-gap: 20px;
row-gap: 0;
align-items: start;
margin: 0;
overflow: auto;
padding: 0;
border: 1px solid var(--light-gray);
border-radius: $modal-radius;
font-size: 12px;
line-height: 1.45;
}
.megamenu-scss-vars-list dt {
margin: 0;
padding: 10px 0 10px 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 600;
color: var(--gray);
border-bottom: 1px solid var(--light-gray);
}
.megamenu-scss-vars-list dd {
margin: 0;
padding: 10px 14px 10px 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
word-break: break-word;
white-space: pre-wrap;
border-bottom: 1px solid var(--light-gray);
color: var(--black);
}
.megamenu-scss-vars-list dt:last-of-type,
.megamenu-scss-vars-list dd:last-of-type {
border-bottom: 0;
}
}
.megamenu-admin-modal.megamenu-location-settings-dialog {
--wp-components-color-primary: var(--wp-admin-theme-color);
--wp-components-color-accent: var(--wp-admin-theme-color);
.megamenu-admin-modal__header-top .megamenu-admin-modal__title-group {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: 12px;
row-gap: 8px;
}
.megamenu-location-settings-dialog__title-start {
min-width: 0;
}
.megamenu-admin-modal__header-top .megamenu-admin-modal__header-actions {
justify-self: end;
margin-inline-start: 0;
}
.megamenu-location-settings-dialog__title-heading.megamenu-admin-modal__title {
min-width: 0;
}
.megamenu-location-settings-dialog__assigned {
margin: 6px 0 0;
max-width: 100%;
}
.megamenu-location-settings-dialog__title-cluster {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.megamenu-location-settings-dialog__title-pin.dashicons {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 1;
}
// Segmented toggles: header Settings/Preview + footer viewport share track chrome.
.megamenu-location-settings-dialog__mode-pill {
display: inline-flex;
align-items: center;
justify-self: center;
gap: 6px;
}
// Header Settings/Preview + footer viewport: shared track chrome.
.megamenu-location-settings-dialog__mode-pill--settings-preview,
.megamenu-location-settings-dialog__mode-pill--viewport-preview {
@include megamenu-location-settings-dialog-mode-pill-track;
}
.megamenu-location-settings-dialog__mode-pill--settings-preview,
.megamenu-location-settings-dialog__mode-pill--viewport-preview {
background: var(--feather-gray);
}
.megamenu-location-settings-dialog__mode-pill--settings-preview .megamenu-location-settings-dialog__mode-pill-slider {
background: var(--wp-admin-theme-color);
}
.megamenu-location-settings-dialog__mode-pill--settings-preview {
@include megamenu-location-settings-dialog-mode-pill-slider-to-second(
".megamenu-location-settings-dialog__mode-btn--preview.is-active"
);
}
.megamenu-location-settings-dialog__mode-pill--viewport-preview {
@include megamenu-location-settings-dialog-mode-pill-slider-to-second(
".megamenu-preview-dialog__viewport-btn--desktop.is-active"
);
}
.megamenu-location-settings-dialog__mode-pill--settings-preview,
.megamenu-location-settings-dialog__mode-pill--viewport-preview {
@include megamenu-location-settings-dialog-mode-pill-buttons;
}
// Preview footer: circular icon-only segments; dark grey thumb (not theme blue).
.megamenu-location-settings-dialog__mode-pill--viewport-preview {
--mmm-viewport-pill-hit: 30px;
.megamenu-location-settings-dialog__mode-pill-slider {
width: var(--mmm-viewport-pill-hit);
height: var(--mmm-viewport-pill-hit);
border-radius: 50%;
background: var(--gray);
}
.megamenu-location-toolbar-btn.megamenu-location-settings-dialog__mode-btn {
flex: 0 0 var(--mmm-viewport-pill-hit);
width: var(--mmm-viewport-pill-hit);
height: var(--mmm-viewport-pill-hit);
min-width: var(--mmm-viewport-pill-hit);
min-height: var(--mmm-viewport-pill-hit);
padding: 0;
border-radius: 50%;
align-items: center;
justify-content: center;
&:focus-visible {
@include mega-admin-focus-ring(var(--gray), 2px);
}
&.is-active:focus-visible {
outline-color: white;
}
}
}
// Settings/Preview segment: inactive-button focus ring after shared `mode-pill-buttons` (`.is-active:focus-visible` keeps white ring via shared rules).
.megamenu-location-settings-dialog__mode-pill--settings-preview .megamenu-location-toolbar-btn.megamenu-location-settings-dialog__mode-btn:not(.is-active):focus-visible {
@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
}
.megamenu-location-settings-dialog__notices {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
margin: 0 0 14px;
box-sizing: border-box;
.notice {
margin: 0;
padding: 8px 12px;
}
}
// Collapse wrapper when both preview notices are hidden (DOM is never :empty).
.megamenu-location-settings-dialog__notices:not(:has(.megamenu-location-settings-dialog__notice:not([hidden]))) {
display: none;
}
.megamenu-location-settings-dialog__mode-btn--preview:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.megamenu-location-settings-dialog__mode-btn--preview {
.megamenu-location-settings-dialog__preview-mode-icon--active {
display: none;
}
&.is-active {
.megamenu-location-settings-dialog__preview-mode-icon--idle {
display: none;
}
.megamenu-location-settings-dialog__preview-mode-icon--active {
display: inline-flex;
}
}
}
.megamenu-location-settings-dialog__body-stack {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.megamenu-location-settings-dialog__settings-view,
.megamenu-location-settings-dialog__preview-view {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
width: 100%;
}
// `[hidden]` must win over `display: flex` above (otherwise both panes stay in the flex layout ~50/50).
.megamenu-location-settings-dialog__settings-view[hidden],
.megamenu-location-settings-dialog__preview-view[hidden] {
display: none !important;
}
.megamenu-location-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.megamenu-admin-modal__body {
.megamenu-location-settings-dialog__surface {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
min-height: 0;
box-sizing: border-box;
font-size: 14px;
display: flex;
flex-direction: column;
form.megamenu-location-settings-dialog-form {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.megamenu-location-settings-dialog-theme-selector {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.megamenu-dialog-rail {
flex: 1 1 auto;
min-height: 0;
}
tr.mega-effect_mobile {
td.mega-value {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
column-gap: 24px;
row-gap: 12px;
}
td.mega-value > label {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
}
td.mega-value > label.mega-effect_mobile_direction {
display: none;
}
&:has(select[name$="[effect_mobile]"] option[value="slide_left"]:checked)
td.mega-value
> label.mega-effect_mobile_direction,
&:has(select[name$="[effect_mobile]"] option[value="slide_right"]:checked)
td.mega-value
> label.mega-effect_mobile_direction {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
// Off-canvas + Sliding Panels: behaviour/default-state rows apply to accordion-style submenus only.
table.mobile.mmm-settings-table {
&:has(select[name$="[effect_mobile]"] option[value="slide_left"]:checked):has(
select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
)
tr.mega-mobile_behaviour,
&:has(select[name$="[effect_mobile]"] option[value="slide_left"]:checked):has(
select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
)
tr.mega-mobile_state,
&:has(select[name$="[effect_mobile]"] option[value="slide_right"]:checked):has(
select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
)
tr.mega-mobile_behaviour,
&:has(select[name$="[effect_mobile]"] option[value="slide_right"]:checked):has(
select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
)
tr.mega-mobile_state {
display: none;
}
}
.mega-tab-content-output_options textarea {
flex: 1 1 auto;
min-height: 0;
width: 100%;
box-sizing: border-box;
font-family: monospace;
font-size: 13px;
line-height: 1.45;
border: 0;
background: transparent;
resize: vertical;
color: var(--semidark-gray);
padding: 0;
}
.mega-tab-content-output_options .mmm-location-output-instruction {
margin: 0;
max-width: 100%;
font-size: 13px;
line-height: 1.45;
color: var(--semidark-gray);
}
// Display Options: stacked rows in location modal.
.mega-tab-content-output_options .mmm-location-output-options {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
.mega-tab-content-output_options .mmm-location-output-options__row {
display: grid;
grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
column-gap: 20px;
align-items: stretch;
padding: 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
box-sizing: border-box;
}
.mega-tab-content-output_options .mmm-location-output-options__row--heading {
grid-template-columns: 1fr;
padding: 10px;
.mmm-location-output-options__heading h5 {
margin: 0;
}
}
.mega-tab-content-output_options .mmm-location-output-options__name.mega-name {
min-width: 0;
margin: 0;
padding-right: 10px;
}
.mega-tab-content-output_options .mmm-location-output-options__value.mega-value {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
min-height: 0;
height: 100%;
margin: 0;
padding: 0;
border-radius: 0;
border: 0;
background: transparent;
box-sizing: border-box;
}
.mega-tab-content-output_options .mmm-location-output-options__value.mega-value > label {
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
gap: 8px;
margin: 0;
width: 100%;
font-size: 13px;
line-height: 1.45;
color: var(--gray);
}
// Section dashicons per rail tab (`megamenu-dialog-side-tab` supplies active/focus accent).
.mega-tablist button {
&::before {
content: "\f111";
}
&[data-tab-section="general"]::before {
content: "\f472";
}
&[data-tab-section="theme"]::before {
content: "\f100";
}
&[data-tab-section="advanced"]::before {
content: "\f107";
}
&[data-tab-section="output_options"]::before {
content: "\f177";
}
&[data-tab-section="sticky"]::before {
content: "\f103";
}
&[data-tab-section="overlay"]::before {
content: "\f188";
}
&[data-tab-section="mobile"]::before {
content: "\f470";
}
}
.megamenu-dialog-panels {
padding: 10px 32px 32px;
}
h5 {
font-size: 12px;
}
}
}
// Rail tabs: active accent matches WP admin theme.
.mega-tablist button {
&.is-active {
color: var(--wp-admin-theme-color);
border-inline-start-color: var(--wp-admin-theme-color);
&::before {
color: var(--wp-admin-theme-color);
}
}
&:focus-visible {
@include mega-admin-focus-ring(var(--wp-admin-theme-color));
}
}
button.megamenu-location-settings-dialog-save.button.button-primary {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
color: white;
&:hover:not(:disabled),
&:active:not(:disabled) {
background: var(--wp-admin-theme-color-darker-10, var(--wp-admin-theme-color));
border-color: var(--wp-admin-theme-color-darker-10, var(--wp-admin-theme-color));
color: white;
}
&:focus-visible {
box-shadow:
0 0 0 1px white,
0 0 0 3px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
}
}
// Vertical rail: tab button chrome (WP admin accent); shared `@include megamenu-dialog-side-tab`.
.mega-tablist button {
@include megamenu-dialog-side-tab;
&::before {
color: var(--gray);
display: inline-block;
font-family: dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle;
margin-right: 8px;
content: '\f463';
font-size: 17px;
width: 18px;
transition: color 0.15s ease;
}
}
// Let plugin settings pages use full #wpbody width (not Appearance > Menus, which shares this body class).
&:not(.nav-menus-php) #wpbody-content > .wrap {
margin-block-start: 0;
margin-inline: 0;
padding-inline: 0;
padding-block-start: 0;
}
&:not(.nav-menus-php) #wpcontent {
padding-inline-start: 0;
}
.megamenu_outer_wrap {
display: inline-block;
width: 100%;
padding: 0;
box-sizing: border-box;
.notice {
margin: 0 0 20px 0;
}
}
// Menu-item modal + location settings modal + plugin settings page: two-column rail (modal: no gap; settings: gutter).
.megamenu-admin-modal .megamenu-dialog-rail {
@include megamenu-dialog-rail-grid;
}
.megamenu_wrap.megamenu-dialog-rail {
@include megamenu-dialog-rail-grid($megamenu-settings-rail-gap, 0);
background: white;
@include tablet {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
row-gap: $megamenu-settings-rail-gap;
}
}
.mega-tablist {
@include megamenu-dialog-tablist-shell;
padding-top: 10px;
}
.megamenu-admin-modal .megamenu-dialog-panels {
@include megamenu-dialog-panels-shell;
}
.megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels {
@include megamenu-dialog-panels-shell(visible);
// After this block, unqualified shell would override a rule inside `@include tablet` on the parent.
@include tablet {
grid-column: 1;
grid-row: 2;
}
}
*:focus {
box-shadow: 0 0 0;
}
.icon_dropdown {
.select2-choice > .select2-chosen {
line-height: 28px;
margin-right: 0;
}
.select2-choice .select2-arrow {
display: none;
}
.select2-choice {
padding: 0 5px;
height: 28px;
color: var(--light-gray);
border: 1px solid var(--megamenu-form-control-border, var(--gray));
}
.select2-chosen i:before {
line-height: 28px;
font-size: 16px;
color: var(--semidark-gray);
}
}
.tpx-select2-drop {
box-shadow: 0 0 0;
min-width: 150px;
}
.select2-results {
margin: 4px 0 0 0;
padding: 4px;
list-style: none;
display: flex;
flex-flow: row wrap;
align-items: center;
// Group container LI
.select2-result-with-children {
width: 100% !important;
flex: 0 0 100% !important;
display: block !important;
margin: 0 0 12px 0;
box-sizing: border-box;
// Group Header label (e.g. Dashicons)
> .select2-result-label {
display: block !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
color: #646970 !important;
letter-spacing: 0.5px !important;
padding: 8px 6px 4px !important;
border-bottom: 1px solid #f0f0f1 !important;
margin-bottom: 8px !important;
background: transparent !important;
}
// Sub-list holding the icons
.select2-result-sub {
margin: 0 !important;
padding: 0 4px !important;
list-style: none;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
gap: 8px !important;
justify-items: center !important;
// Each individual icon item LI
li.select2-result-focusable {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
cursor: pointer;
box-sizing: border-box;
flex: none !important;
&:hover, &.select2-highlighted {
background: #f0f0f1 !important;
border-color: #dcdcde !important;
}
&.select2-selected {
background: #e5f5fa !important;
border-color: #00a0d2 !important;
color: #0073aa !important;
}
.select2-result-label {
padding: 0 !important;
margin: 0 !important;
font-size: inherit !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
border: none !important;
i {
margin: 0 !important;
display: inline-block !important;
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
line-height: 1 !important;
text-align: center !important;
}
}
}
}
}
// Handle flat list items (direct children of .select2-results)
> li.select2-result-focusable {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
cursor: pointer;
box-sizing: border-box;
&:first-child {
i {
display: none !important;
}
}
&:hover, &.select2-highlighted {
background: #f0f0f1 !important;
border-color: #dcdcde !important;
}
.select2-result-label {
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.9em !important;
i {
margin: 0 !important;
display: inline-block !important;
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
line-height: 1 !important;
text-align: center !important;
}
}
}
}
.icon_dropdown .select2-choice > .select2-chosen i,
.select2-result-label i {
margin: 0;
display: inline-block;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 1;
font-family: dashicons;
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
text-align: center;
transition: color .1s ease-in 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mmm-icon-selector-container {
position: relative;
display: inline-block;
vertical-align: middle;
* {
box-sizing: border-box;
}
}
.mmm-icon-selector-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 28px;
padding: 0;
background: #fff;
border: 1px solid var(--megamenu-form-control-border, var(--gray));
border-radius: 4px;
cursor: pointer;
color: #2c3338;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
position: relative;
&:hover {
border-color: #8c8f94;
color: #1d2327;
}
&:focus {
border-color: #2271b1;
box-shadow: 0 0 0 1px #2271b1;
outline: none;
}
}
.mmm-icon-selector-trigger-preview {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: #2c3338;
svg {
width: 18px;
height: 18px;
display: block;
stroke: currentColor;
stroke-width: 2.5;
}
i {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 1;
display: inline-block;
text-align: center;
}
}
.mega-material-symbol {
font-family: var(--wp--preset--font-family--material-symbols) !important;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
&:before {
content: attr(data-ms-icon);
}
}
.mmm-icon-selector-trigger-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 15px;
}
.mmm-icon-selector-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
margin-top: 4px;
background: #fff;
border: 1px solid #ccd0d4;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
width: 200px;
}
.mmm-icon-selector-search-wrap {
padding: 8px;
border-bottom: 1px solid #f0f0f1;
background: #f6f7f7;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.mmm-icon-selector-search {
width: 100% !important;
height: 30px !important;
padding: 4px 8px !important;
border: 1px solid #8c8f94 !important;
border-radius: 4px !important;
background: #fff !important;
font-size: 13px !important;
&:focus {
border-color: #2271b1 !important;
box-shadow: 0 0 0 1px #2271b1 !important;
outline: none !important;
}
}
.mmm-icon-selector-list {
max-height: 250px;
overflow-y: auto;
padding: 4px;
}
.mmm-icon-selector-group-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
color: #646970;
padding: 8px 8px 4px 8px;
border-bottom: 1px solid #f0f0f1;
margin-bottom: 6px;
}
.mmm-icon-selector-group-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
justify-items: center;
gap: 8px;
padding: 4px;
margin-bottom: 10px;
}
.mmm-icon-selector-item {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 4px;
cursor: pointer;
color: var(--gray);
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
&:hover, &.mmm-focused {
background: var(--light-gray);
color: var(--black);
}
&.mmm-selected {
color: var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
}
&.mmm-selected:hover, &.mmm-selected.mmm-focused {
background: var(--light-gray);
color: var(--wp-admin-theme-color);
}
&[data-value="disabled"] {
width: auto;
margin: 4px 8px;
box-sizing: border-box;
height: 30px;
justify-content: flex-start;
padding: 0 8px;
font-size: 13px;
color: #646970;
.mmm-icon-selector-item-preview {
border: 1px dashed #ccd0d4;
background: #f6f7f7;
position: relative;
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 12px;
height: 1px;
background: #d63638;
}
}
}
}
.mmm-icon-selector-item-preview {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
svg {
width: 20px;
height: 20px;
display: block;
stroke: currentColor;
}
i {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 1;
display: inline-block;
text-align: center;
}
}
.mmm-multi-preview {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
.mmm-multi-preview-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
svg {
width: 16px;
height: 16px;
display: block;
stroke: currentColor;
stroke-width: 2.5;
}
i {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 1;
display: inline-block;
text-align: center;
}
}
}
.mmm-icon-selector-multi {
.mmm-icon-selector-trigger {
width: 120px;
padding: 0 12px;
min-width: 120px;
}
.mmm-icon-selector-trigger-preview {
width: 100%;
height: auto;
}
.mmm-icon-selector-dropdown {
width: 200px;
}
.mmm-icon-selector-group-container {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 8px;
}
.mmm-icon-selector-item {
width: 100%;
height: 32px;
padding: 0 16px;
box-sizing: border-box;
&[data-value="disabled"] {
width: auto;
margin: 4px 8px;
}
}
.mmm-icon-selector-item-preview:not(.mmm-disabled-preview) {
width: 100%;
height: auto;
}
}
.mmm-disabled-preview {
border: 1px dashed #ccd0d4;
border-radius: 2px;
background: #f6f7f7;
position: relative;
width: 16px;
height: 16px;
margin-right: 8px;
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 12px;
height: 1px;
background: #d63638;
}
}
.mmm-icon-selector-item-label {
display: none;
}
.mmm-icon-selector-item[data-value="disabled"] {
.mmm-icon-selector-item-label {
display: inline-block;
margin-left: 8px;
}
}
.megamenu_header {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 8px 20px;
background: white;
padding: 30px 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--feather-gray);
box-shadow:
0 1px 2px $shadow-a05,
0 2px 10px $shadow-a07;
width: 100%;
box-sizing: border-box;
.megamenu_header_left {
flex: 1 1 200px;
min-width: 0;
.megamenu_header_title_row {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.megamenu_header_icon {
flex-shrink: 0;
width: 28px;
height: 28px;
object-fit: contain;
}
.megamenu_header_title_row h2 {
margin: 0;
padding: 0;
line-height: 1.2;
}
}
.megamenu_header_right {
margin-inline-start: auto;
}
.megamenu_header_right ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.version {
color: var(--gray);
margin-bottom: 0;
font-size: 12px;
}
}
.megamenu_wrap.megamenu-dialog-rail > .mega-tablist {
@include tablet {
grid-column: 1;
grid-row: 1;
overflow-x: auto;
overflow-y: visible;
}
nav.mega-page-navigation ul {
list-style: none;
margin: 0;
padding: 0;
@include tablet {
display: flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: center;
column-gap: 12px;
row-gap: 8px;
}
li {
margin: 0;
padding: 0;
@include tablet {
display: flex;
flex: 0 0 auto;
}
a {
@include megamenu-dialog-side-tab;
text-decoration: none;
// Match `.mega-tablist button::before` (block tab + inline-block icon).
&::before {
color: var(--gray);
display: inline-block;
font-family: dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle;
margin-right: 8px;
content: none;
font-size: 17px;
width: 18px;
transition: color 0.15s ease;
}
@include tablet {
display: inline-flex;
align-items: center;
width: auto;
margin-bottom: 0;
text-align: center;
border-inline-start: 3px solid transparent;
border-bottom: 3px solid transparent;
&:hover {
border-inline-start-color: transparent;
}
&.is-active {
border-inline-start-color: transparent;
box-shadow: none;
border-bottom-color: var(--wp-admin-theme-color);
}
&::before {
margin-right: 6px;
}
}
}
&.menu_locations a::before {
content: '\f230';
}
&.theme_editor a::before {
content: '\f100';
}
&.general_settings a::before {
content: '\f111';
}
&.tools a::before {
content: '\f107';
}
&.license a::before,
&.licence a::before {
content: '\f112';
}
}
}
}
h3.first {
margin-top: 0;
}
h3 {
display: flow-root;
font-size: 1.1em;
margin: 17px 0 5px 0;
text-indent: 1px;
border-bottom: 1px solid var(--light-gray);
padding: 0 0 10px 0;
}
h3 span {
margin-right: 10px;
}
a {
text-decoration: none;
}
.duplicate {
margin-left: 15px;
}
.megamenu_submit {
margin-bottom: 40px;
padding-top: 35px;
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 8px 16px;
box-sizing: border-box;
p.submit {
margin: 0;
padding: 0;
}
}
// Shared admin utility / tab callouts (was duplicated under location modal + Menu Locations settings).
.mega-vertical-align-top {
vertical-align: top;
}
.megamenu-admin-modal.megamenu-location-settings-dialog .megamenu-admin-modal__body .megamenu-location-settings-dialog__surface .mega-tab-content .warning,
.megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels .menu_settings.menu_settings_menu_locations .mega-tab-content .warning {
margin: 20px 0 0 0;
}
.megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels {
padding: 20px 24px 0 0;
box-sizing: border-box;
min-height: 400px;
@include tablet {
padding: 24px;
}
textarea.mega-export {
width: 100%;
height: 150px;
font-family: monospace;
margin-bottom: 10px;
font-size: 0.9em;
}
.megamenu-nav-tab-wrapper {
position: sticky;
top: 0;
z-index: 22;
margin: 0;
padding: 6px 0 10px;
display: inline-flex;
align-items: center;
align-content: center;
height: 64px;
gap: 30px;
width: 100%;
border: 0;
box-sizing: border-box;
background: white;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
@include tablet {
gap: 16px;
justify-content: space-between;
}
button.mega-tab {
appearance: none;
font: inherit;
display: flex;
cursor: pointer;
height: 100%;
align-content: center;
flex-wrap: wrap;
color: var(--semidark-gray);
font-weight: 500;
font-size: 14px;
padding: 0 5px;
margin: 0;
background: transparent;
border: 0;
box-shadow: none;
text-decoration: none;
text-align: inherit;
&:hover {
color: var(--wp-admin-theme-color);
}
&.nav-tab-active {
background: white;
position: relative;
z-index: 1;
color: var(--wp-admin-theme-color);
}
}
@include nav-tab-slider-indicator;
}
.menu_settings {
&.menu_settings_menu_themes {
form.theme_editor {
// Fill the viewport column so the sticky save bar sits on the bottom even on short tabs.
// `--mmm-theme-editor-outside-form`: header, theme selector, rails, wp padding (approximate).
--mmm-theme-editor-outside-form: clamp(260px, 38vh, 480px);
--mmm-theme-editor-form-tabs-nav-submit: clamp(140px, 18vh, 200px);
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: calc(
100dvh - var(--mmm-admin-bar-offset, 0px) - var(--mmm-theme-editor-outside-form)
);
.mega-theme-font-option {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
vertical-align: middle;
.mega-theme-font-option__reveal {
display: none;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 2.5rem;
height: 28px;
min-height: 28px;
margin: 0;
padding: 0;
border: 1px solid #949494;
border-radius: 2px;
background: #fff;
box-shadow: 0 0 0 transparent;
color: var(--semidark-gray);
cursor: pointer;
line-height: 1;
vertical-align: middle;
appearance: none;
&:hover {
border-color: var(--medium-gray);
color: var(--black);
}
&:focus {
border-color: var(--wp-admin-theme-color, #2271b1);
box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
outline: 2px solid transparent;
outline-offset: 0;
}
.dashicons {
width: 18px;
height: 18px;
font-size: 18px;
line-height: 1;
}
}
.mega-theme-font-option__select {
min-width: 12em;
max-width: 100%;
}
&.mega-theme-font-option--collapsed {
.mega-theme-font-option__reveal {
display: inline-flex;
}
.mega-theme-font-option__select {
display: none;
}
}
}
> .megamenu-nav-tab-wrapper {
flex: 0 0 auto;
}
> div.mega-tab-content {
flex: 1 1 auto;
min-height: max(
0px,
calc(
100dvh - var(--mmm-admin-bar-offset, 0px) - var(--mmm-theme-editor-outside-form) -
var(--mmm-theme-editor-form-tabs-nav-submit)
)
);
}
> .megamenu_submit {
position: sticky;
bottom: 0;
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
column-gap: 16px;
row-gap: 10px;
margin-top: auto;
margin-bottom: 0;
z-index: 25;
background: white;
padding: 20px 0 22px;
box-sizing: border-box;
box-shadow:
0 -1px 0 var(--light-gray),
0 -8px 24px $shadow-a07;
> p.submit {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.megamenu-theme-editor-submit__preview-after {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
min-width: 0;
}
.megamenu-preview-after__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
min-width: 0;
}
.megamenu-preview-after__toggle-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
cursor: pointer;
font-size: 13px;
line-height: 1.4;
color: var(--semidark-gray);
}
.megamenu-preview-after__toggle-label .components-form-toggle {
flex-shrink: 0;
}
.megamenu-preview-after__label-text {
font-size: inherit;
line-height: inherit;
color: inherit;
}
.megamenu-preview-after__location-select {
@include mega-toolbar-native-select;
width: auto;
min-width: 160px;
max-width: min(300px, 100%);
}
}
}
.theme_selector {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
row-gap: 12px;
column-gap: 32px;
overflow: visible;
box-sizing: border-box;
.theme-selector-field {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
min-width: 0;
}
.theme-editor-actions-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
// Same treatment as `label span.mega-short-desc` in `.megamenu_outer_wrap table` (location dialog / theme fields).
.theme-selector-field .mega-short-desc,
.theme-editor-actions-group .mega-short-desc {
@include mega-toolbar-field-label;
}
.theme-editor-actions-group > .mega-short-desc {
margin: 0 0 0 1px;
}
// Native menulist (single chevron): core `.wp-core-ui select` adds a Dashicon
// `background-image` — clear it or two arrows show.
select#theme_selector,
select {
@include mega-toolbar-native-select;
}
}
// Toggle Bar Designer: block-type picker (labeled `<select>` only — no card chrome or custom select styling).
form.theme_editor .mega-toggle-block-selector-field {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 0 0 20px;
max-width: 100%;
.mega-short-desc {
@include mega-toolbar-field-label;
}
select#toggle-block-selector {
max-width: 100%;
}
}
.mega-theme-editor-actions {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 0;
overflow: visible;
}
// Theme toolbar icon buttons — markup: `.button.button-secondary.button-compact.mega-theme-editor-action`.
.mega-theme-editor-actions button.mega-theme-editor-action.megamenu-preview-open {
font: inherit;
text-align: center;
}
.mega-theme-editor-action.is-busy {
pointer-events: none;
opacity: 0.65;
}
.mega-theme-editor-action:not(.mega-theme-editor-action--location-preview) {
position: relative;
overflow: visible;
text-decoration: none;
@include megamenu-admin-modal-ghost-icon-btn;
&.mega-theme-editor-action--export .dashicons,
&.mega-theme-editor-action--import .dashicons {
transform: rotate(90deg);
}
}
}
div.mega-tab-content {
position: relative;
display: block;
width: 100%;
padding: 10px 0 0;
box-sizing: border-box;
&.mega-toggle-disabled {
.mega-toggle_blocks td:after,
.mega-toggle_bar_background td:after,
.mega-toggle_bar_height td:after,
.mega-toggle_bar_border_radius td:after,
.mega-mobile_menu_overlay td:after,
.mega-mobile_menu_force_width td:after {
@include disabled-row-overlay;
}
.mega-mobile_toggle_disabled {
display: table-row;
}
}
&.mega-mobile-disabled {
tr:not(.mega-responsive_breakpoint):not(.mega-responsive_breakpoint_disabled) td:after {
@include disabled-row-overlay;
}
.mega-responsive_breakpoint_disabled {
display: table-row;
}
.mega-mobile_toggle_disabled {
display: none;
}
}
.mega-responsive_breakpoint_disabled,
.mega-mobile_toggle_disabled {
display: none;
td {
padding-top: 10px;
padding-bottom: 10px;
border-top: 0;
}
h5 {
border: 1px solid var(--light-gray);
padding: 10px;
box-sizing: border-box;
border-left: 3px solid $success;
font-size: 12px;
font-weight: normal;
margin: 0 10px;
}
}
table.mmm-settings-table td.mega-heading-cell {
vertical-align: top;
padding-bottom: 0;
h5 {
margin: 0;
font-size: 12px;
}
p.mega-description {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--gray);
}
}
table.mmm-settings-table tr:first-of-type td.mega-heading-cell {
padding-bottom: 20px;
padding-top: 0;
}
table.mmm-settings-table td.mega-heading-cell .mega-description {
font-style: italic;
}
}
}
}
}
// Theme editor (Menu Themes): tab strip stays under WP admin bar when sticky; save row pins to viewport bottom.
body.maxmegamenu-admin.admin-bar .megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels .megamenu-nav-tab-wrapper {
top: 32px;
@media screen and (max-width: 782px) {
top: 46px;
}
}
@keyframes mm-mega-widget-selector-pulse {
0%,
100% {
box-shadow: 0 0 0 0 transparent;
}
50% {
box-shadow: 0 0 0 3px $focus-ring-blue-soft;
}
}
@keyframes mm-rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
body.folded.maxmegamenu-admin .toggle-bar-designer .mega-blocks .block.mega-open .block-settings {
left: 36px;
width: calc(100% - 36px - 10%);
}
body.maxmegamenu-admin:has(.toggle-bar-designer .mega-open)::before {
content: "";
position: fixed;
inset: 0;
z-index: 30;
pointer-events: auto;
background: rgba(0, 0, 0, 0.4);
}