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 .wp-block-navigation {

    78   position: relative;

    79   --navigation-layout-justification-setting: flex-start;

    80   --navigation-layout-direction: row;

    81   --navigation-layout-wrap: wrap;

    82   --navigation-layout-justify: flex-start;

    83   --navigation-layout-align: center;

    84 }

    85 .wp-block-navigation ul {

    86   margin-top: 0;

    87   margin-bottom: 0;

    88   margin-right: 0;

    89   padding-right: 0;

    90 }

    91 .wp-block-navigation ul,

    92 .wp-block-navigation ul li {

    93   list-style: none;

    94   padding: 0;

    95 }

    96 .wp-block-navigation .wp-block-navigation-item {

    97   display: flex;

    98   align-items: center;

    99   position: relative;

   100 }

   101 .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty {

   102   display: none;

   103 }

   104 .wp-block-navigation .wp-block-navigation-item__content {

   105   color: inherit;

   106   display: block;

   107   padding: 0;

   108 }

   109 .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content {

   110   text-decoration: underline;

   111 }

   112 .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active {

   113   text-decoration: underline;

   114 }

   115 .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content {

   116   text-decoration: line-through;

   117 }

   118 .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active {

   119   text-decoration: line-through;

   120 }

   121 .wp-block-navigation:where(:not([class*="has-text-decoration"])) a {

   122   text-decoration: none;

   123 }

   124 .wp-block-navigation:where(:not([class*="has-text-decoration"])) a:focus, .wp-block-navigation:where(:not([class*="has-text-decoration"])) a:active {

   125   text-decoration: none;

   126 }

   127 .wp-block-navigation .wp-block-navigation__submenu-icon {

   128   align-self: center;

   129   line-height: 0;

   130   display: inline-block;

   131   font-size: inherit;

   132   padding: 0;

   133   background-color: inherit;

   134   color: currentColor;

   135   border: none;

   136   width: 0.6em;

   137   height: 0.6em;

   138   margin-right: 0.25em;

   139 }

   140 .wp-block-navigation .wp-block-navigation__submenu-icon svg {

   141   display: inline-block;

   142   stroke: currentColor;

   143   width: inherit;

   144   height: inherit;

   145   margin-top: 0.075em;

   146 }

   147 .wp-block-navigation.is-vertical {

   148   --navigation-layout-direction: column;

   149   --navigation-layout-justify: initial;

   150   --navigation-layout-align: flex-start;

   151 }

   152 .wp-block-navigation.no-wrap {

   153   --navigation-layout-wrap: nowrap;

   154 }

   155 .wp-block-navigation.items-justified-center {

   156   --navigation-layout-justification-setting: center;

   157   --navigation-layout-justify: center;

   158 }

   159 .wp-block-navigation.items-justified-center.is-vertical {

   160   --navigation-layout-align: center;

   161 }

   162 .wp-block-navigation.items-justified-right {

   163   --navigation-layout-justification-setting: flex-end;

   164   --navigation-layout-justify: flex-end;

   165 }

   166 .wp-block-navigation.items-justified-right.is-vertical {

   167   --navigation-layout-align: flex-end;

   168 }

   169 .wp-block-navigation.items-justified-space-between {

   170   --navigation-layout-justification-setting: space-between;

   171   --navigation-layout-justify: space-between;

   172 }

   173 

   174 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) {

   175   background-color: inherit;

   176   color: inherit;

   177   position: absolute;

   178   z-index: 2;

   179   display: flex;

   180   flex-direction: column;

   181   align-items: normal;

   182   opacity: 0;

   183   transition: opacity 0.1s linear;

   184   visibility: hidden;

   185   width: 0;

   186   height: 0;

   187   overflow: hidden;

   188   right: -1px;

   189   top: 100%;

   190 }

   191 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content {

   192   display: flex;

   193   flex-grow: 1;

   194 }

   195 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {

   196   margin-left: 0;

   197   margin-right: auto;

   198 }

   199 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {

   200   margin: 0;

   201 }

   202 @media (min-width: 782px) {

   203   .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container {

   204     right: 100%;

   205     top: -1px;

   206   }

   207   .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container::before {

   208     content: "";

   209     position: absolute;

   210     left: 100%;

   211     height: 100%;

   212     display: block;

   213     width: 0.5em;

   214     background: transparent;

   215   }

   216   .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon {

   217     margin-left: 0.25em;

   218   }

   219   .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg {

   220     transform: rotate(90deg);

   221   }

   222 }

   223 .wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {

   224   visibility: visible;

   225   overflow: visible;

   226   opacity: 1;

   227   width: auto;

   228   height: auto;

   229   min-width: 200px;

   230 }

   231 .wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {

   232   visibility: visible;

   233   overflow: visible;

   234   opacity: 1;

   235   width: auto;

   236   height: auto;

   237   min-width: 200px;

   238 }

   239 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {

   240   visibility: visible;

   241   overflow: visible;

   242   opacity: 1;

   243   width: auto;

   244   height: auto;

   245   min-width: 200px;

   246 }

   247 

   248 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {

   249   right: 0;

   250   top: 100%;

   251 }

   252 @media (min-width: 782px) {

   253   .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {

   254     right: 100%;

   255     top: 0;

   256   }

   257 }

   258 

   259 .wp-block-navigation-submenu {

   260   position: relative;

   261   display: flex;

   262 }

   263 .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {

   264   stroke: currentColor;

   265 }

   266 

   267 button.wp-block-navigation-item__content {

   268   background-color: transparent;

   269   border: none;

   270   color: currentColor;

   271   font-size: inherit;

   272   font-family: inherit;

   273   line-height: inherit;

   274   font-style: inherit;

   275   font-weight: inherit;

   276   text-transform: inherit;

   277   text-align: right;

   278 }

   279 

   280 .wp-block-navigation-submenu__toggle {

   281   cursor: pointer;

   282 }

   283 

   284 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {

   285   padding-left: 0.85em;

   286 }

   287 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {

   288   margin-right: -0.6em;

   289   pointer-events: none;

   290 }

   291 

   292 /**

   293  * Margins

   294  */

   295 .wp-block-navigation__responsive-container,

   296 .wp-block-navigation__responsive-close,

   297 .wp-block-navigation__responsive-dialog,

   298 .wp-block-navigation,

   299 .wp-block-navigation .wp-block-page-list,

   300 .wp-block-navigation__container,

   301 .wp-block-navigation__responsive-container-content {

   302   gap: inherit;

   303 }

   304 

   305 .wp-block-navigation:where(.has-background),

   306 .wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list,

   307 .wp-block-navigation:where(.has-background) .wp-block-navigation__container {

   308   gap: inherit;

   309 }

   310 

   311 /**

   312  * Paddings

   313  */

   314 .wp-block-navigation:where(.has-background) .wp-block-navigation-item__content {

   315   padding: 0.5em 1em;

   316 }

   317 

   318 .wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {

   319   padding: 0.5em 1em;

   320 }

   321 

   322 /**

   323  * Justifications.

   324  */

   325 .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container,

   326 .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container,

   327 .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container,

   328 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {

   329   right: auto;

   330   left: 0;

   331 }

   332 .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,

   333 .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,

   334 .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,

   335 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {

   336   right: -1px;

   337   left: -1px;

   338 }

   339 @media (min-width: 782px) {

   340   .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,

   341 .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,

   342 .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,

   343 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {

   344     right: auto;

   345     left: 100%;

   346   }

   347 }

   348 

   349 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {

   350   background-color: #fff;

   351   color: #000;

   352   border: 1px solid rgba(0, 0, 0, 0.15);

   353 }

   354 

   355 .wp-block-navigation__container {

   356   display: flex;

   357   flex-wrap: var(--navigation-layout-wrap, wrap);

   358   flex-direction: var(--navigation-layout-direction, initial);

   359   justify-content: var(--navigation-layout-justify, initial);

   360   align-items: var(--navigation-layout-align, initial);

   361   list-style: none;

   362   margin: 0;

   363   padding-right: 0;

   364 }

   365 .wp-block-navigation__container .is-responsive {

   366   display: none;

   367 }

   368 

   369 .wp-block-navigation__container:only-child,

   370 .wp-block-page-list:only-child {

   371   flex-grow: 1;

   372 }

   373 

   374 /**

   375  * Mobile menu.

   376  */

   377 .wp-block-navigation__responsive-container {

   378   display: none;

   379   position: fixed;

   380   top: 0;

   381   right: 0;

   382   left: 0;

   383   bottom: 0;

   384 }

   385 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {

   386   display: flex;

   387   flex-wrap: var(--navigation-layout-wrap, wrap);

   388   flex-direction: var(--navigation-layout-direction, initial);

   389   justify-content: var(--navigation-layout-justify, initial);

   390   align-items: var(--navigation-layout-align, initial);

   391 }

   392 .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {

   393   color: inherit !important;

   394   background-color: inherit !important;

   395 }

   396 .wp-block-navigation__responsive-container.is-menu-open {

   397   display: flex;

   398   flex-direction: column;

   399   background-color: inherit;

   400   padding: 2rem;

   401   overflow: auto;

   402   z-index: 100000;

   403 }

   404 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {

   405   padding-top: calc(2rem + 24px);

   406   overflow: visible;

   407   display: flex;

   408   flex-direction: column;

   409   flex-wrap: nowrap;

   410   align-items: var(--navigation-layout-justification-setting, inherit);

   411 }

   412 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,

   413 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list,

   414 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {

   415   justify-content: flex-start;

   416 }

   417 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {

   418   display: none;

   419 }

   420 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container,

   421 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {

   422   opacity: 1;

   423   visibility: visible;

   424   height: auto;

   425   width: auto;

   426   overflow: initial;

   427   min-width: 200px;

   428   position: static;

   429   border: none;

   430   padding-right: 2rem;

   431   padding-left: 2rem;

   432 }

   433 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,

   434 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {

   435   gap: inherit;

   436 }

   437 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {

   438   padding-top: var(--wp--style--block-gap, 2em);

   439 }

   440 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {

   441   padding: 0;

   442 }

   443 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,

   444 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,

   445 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {

   446   display: flex;

   447   flex-direction: column;

   448   align-items: var(--navigation-layout-justification-setting, initial);

   449 }

   450 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,

   451 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,

   452 .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {

   453   color: inherit !important;

   454   background: transparent !important;

   455 }

   456 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {

   457   left: auto;

   458   right: auto;

   459 }

   460 @media (min-width: 600px) {

   461   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {

   462     display: block;

   463     width: 100%;

   464     position: relative;

   465     z-index: auto;

   466     background-color: inherit;

   467   }

   468   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {

   469     display: none;

   470   }

   471   .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {

   472     right: 0;

   473   }

   474 }

   475 

   476 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {

   477   background-color: #fff;

   478   color: #000;

   479 }

   480 

   481 .wp-block-navigation__toggle_button_label {

   482   font-size: 1rem;

   483   font-weight: bold;

   484 }

   485 

   486 .wp-block-navigation__responsive-container-open,

   487 .wp-block-navigation__responsive-container-close {

   488   vertical-align: middle;

   489   cursor: pointer;

   490   color: currentColor;

   491   background: transparent;

   492   border: none;

   493   margin: 0;

   494   padding: 0;

   495 }

   496 .wp-block-navigation__responsive-container-open svg,

   497 .wp-block-navigation__responsive-container-close svg {

   498   fill: currentColor;

   499   pointer-events: none;

   500   display: block;

   501   width: 24px;

   502   height: 24px;

   503 }

   504 

   505 .wp-block-navigation__responsive-container-open {

   506   display: flex;

   507 }

   508 @media (min-width: 600px) {

   509   .wp-block-navigation__responsive-container-open:not(.always-shown) {

   510     display: none;

   511   }

   512 }

   513 

   514 .wp-block-navigation__responsive-container-close {

   515   position: absolute;

   516   top: 0;

   517   left: 0;

   518   z-index: 2;

   519 }

   520 

   521 .wp-block-navigation__responsive-close {

   522   width: 100%;

   523 }

   524 .wp-block-navigation__responsive-close:focus {

   525   outline: none;

   526 }

   527 

   528 .is-menu-open .wp-block-navigation__responsive-close,

   529 .is-menu-open .wp-block-navigation__responsive-dialog,

   530 .is-menu-open .wp-block-navigation__responsive-container-content {

   531   box-sizing: border-box;

   532 }

   533 

   534 .wp-block-navigation__responsive-dialog {

   535   position: relative;

   536 }

   537 

   538 html.has-modal-open {

   539   overflow: hidden;

   540 }