@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: #d63638; // current WP destructive/error red (matches core .notice-error, delete actions) $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 `` 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 $shadow-a45; 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; // Kept below the z-index range third-party admin dialogs commonly use (e.g. SiteOrigin // Page Builder's own overlay sits around 100001-100002) so a builder opened from inside // this modal (via a widget's own "edit"/"open builder" control) renders above it, not hidden // underneath. Still well above ordinary wp-admin page chrome (#adminmenuwrap is 9990). z-index: 99900; 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: none; } .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: none; 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: var(--gray) !important; letter-spacing: 0.5px !important; padding: 8px 6px 4px !important; border-bottom: 1px solid var(--light-gray) !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: var(--light-gray) !important; border-color: var(--light-gray) !important; } &.select2-selected { background: var(--feather-gray) !important; border-color: var(--wp-admin-theme-color) !important; color: var(--wp-admin-theme-color) !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: var(--light-gray) !important; border-color: var(--light-gray) !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(--gray); border-radius: 4px; cursor: pointer; color: var(--semidark-gray); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; position: relative; &:hover { border-color: var(--gray); color: var(--black); } &:focus { border-color: var(--wp-admin-theme-color); box-shadow: 0 0 0 1px var(--wp-admin-theme-color); outline: none; } } .mmm-icon-selector-trigger-preview { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--semidark-gray); 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 var(--gray); border-radius: 4px; box-shadow: 0 4px 12px $shadow-a12; // closest existing shadow token to color picker popup shadow (alpha .15) width: 200px; } .mmm-icon-selector-search-wrap { padding: 8px; border-bottom: 1px solid var(--light-gray); background: var(--feather-gray); border-top-left-radius: 4px; border-top-right-radius: 4px; } .mmm-icon-selector-search { width: 100% !important; height: 30px !important; } .mmm-icon-selector-list { max-height: 280px; overflow-y: auto; padding: 4px; } .mmm-icon-selector-group-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--gray); padding: 8px 8px 4px 8px; border-bottom: 1px solid var(--light-gray); 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: var(--gray); .mmm-icon-selector-item-preview { border: 1px dashed var(--light-gray); background: var(--feather-gray); position: relative; &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 12px; height: 1px; background: $error; } } } } .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: grid; grid-auto-flow: column; grid-auto-columns: 1fr; place-items: center; width: 100%; .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; display: inline-flex; align-items: center; justify-content: 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: 400px; } .mmm-icon-selector-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; } .mmm-icon-selector-item[data-value="disabled"] { grid-column: 1 / -1; } .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; 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 var(--light-gray); border-radius: 2px; background: var(--feather-gray); 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: $error; } } .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 $shadow-a07; @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 var(--megamenu-form-control-border, var(--gray)); border-radius: 2px; background: #fff; box-shadow: none; 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); box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 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 `