1 /**

     2  * Colors

     3  */

     4 /**

     5  * Breakpoints & Media Queries

     6  */

     7 /**

     8  * SCSS Variables.

     9  *

    10  * Please use variables from this sheet to ensure consistency across the UI.

    11  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.

    12  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.

    13  */

    14 /**

    15  * Colors

    16  */

    17 /**

    18  * Fonts & basic variables.

    19  */

    20 /**

    21  * Grid System.

    22  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

    23  */

    24 /**

    25  * Dimensions.

    26  */

    27 /**

    28  * Shadows.

    29  */

    30 /**

    31  * Editor widths.

    32  */

    33 /**

    34  * Block & Editor UI.

    35  */

    36 /**

    37  * Block paddings.

    38  */

    39 /**

    40  * React Native specific.

    41  * These variables do not appear to be used anywhere else.

    42  */

    43 /**

    44 *  Converts a hex value into the rgb equivalent.

    45 *

    46 * @param {string} hex - the hexadecimal value to convert

    47 * @return {string} comma separated rgb values

    48 */

    49 /**

    50  * Breakpoint mixins

    51  */

    52 /**

    53  * Long content fade mixin

    54  *

    55  * Creates a fading overlay to signify that the content is longer

    56  * than the space allows.

    57  */

    58 /**

    59  * Focus styles.

    60  */

    61 /**

    62  * Applies editor left position to the selector passed as argument

    63  */

    64 /**

    65  * Styles that are reused verbatim in a few places

    66  */

    67 /**

    68  * Allows users to opt-out of animations via OS-level preferences.

    69  */

    70 /**

    71  * Reset default styles for JavaScript UI based pages.

    72  * This is a WP-admin agnostic reset

    73  */

    74 /**

    75  * Reset the WP Admin page styles for Gutenberg-like pages.

    76  */

    77 /**

    78 * Submenus.

    79 */

    80 .wp-block-navigation .has-child {

    81   cursor: pointer;

    82 }

    83 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {

    84   z-index: 28;

    85 }

    86 .wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container {

    87   z-index: 29;

    88 }

    89 .wp-block-navigation .has-child.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected > .wp-block-navigation__submenu-container {

    90   visibility: visible !important;

    91   opacity: 1 !important;

    92   min-width: 200px !important;

    93   height: auto !important;

    94   width: auto !important;

    95   overflow: visible !important;

    96 }

    97 

    98 /**

    99  * Navigation Items.

   100  */

   101 .wp-block-navigation-item .wp-block-navigation-item__content {

   102   cursor: text;

   103 }

   104 .wp-block-navigation-item.is-editing, .wp-block-navigation-item.is-selected {

   105   min-width: 20px;

   106 }

   107 .wp-block-navigation-item .block-list-appender {

   108   margin-top: 16px;

   109   margin-right: auto;

   110   margin-bottom: 16px;

   111   margin-left: 16px;

   112 }

   113 

   114 .wp-block-navigation-link__invalid-item {

   115   color: #000;

   116 }

   117 

   118 .wp-block-navigation-link__missing_text-tooltip {

   119   position: absolute;

   120   width: 1px;

   121   height: 1px;

   122   padding: 0;

   123   margin: -1px;

   124   overflow: hidden;

   125 }

   126 

   127 /**

   128  * Menu item setup state. Is shown when a menu item has no URL configured.

   129  */

   130 .wp-block-navigation-link__placeholder {

   131   position: relative;

   132   text-decoration: none !important;

   133   box-shadow: none !important;

   134   background-image: none !important;

   135 }

   136 .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {

   137   --wp-underline-color: var(--wp-admin-theme-color);

   138   background-image: linear-gradient(45deg, transparent 20%, var(--wp-underline-color) 30%, var(--wp-underline-color) 36%, transparent 46%), linear-gradient(135deg, transparent 54%, var(--wp-underline-color) 64%, var(--wp-underline-color) 70%, transparent 80%);

   139   background-position: 0 100%;

   140   background-size: 6px 3px;

   141   background-repeat: repeat-x;

   142   padding-bottom: 0.1em;

   143 }

   144 .is-dark-theme .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {

   145   --wp-underline-color: #fff;

   146 }

   147 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {

   148   cursor: pointer;

   149 }

   150 

   151 /**

   152 * Link Control Transforms

   153 */

   154 .link-control-transform {

   155   border-top: 1px solid #ccc;

   156   padding: 0 16px 8px 16px;

   157 }

   158 

   159 .link-control-transform__subheading {

   160   font-size: 11px;

   161   text-transform: uppercase;

   162   font-weight: 500;

   163   color: #1e1e1e;

   164   margin-bottom: 1.5em;

   165 }

   166 

   167 .link-control-transform__items {

   168   display: flex;

   169   justify-content: space-between;

   170 }

   171 

   172 .link-control-transform__item {

   173   flex-basis: 33%;

   174   flex-direction: column;

   175   gap: 8px;

   176   height: auto;

   177 }