[Summary view] [Print] [Text view]

   1  /**
   2   * Colors
   3   */
   4  /**
   5   * Typography
   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   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Applies editor left position to the selector passed as argument
  72   */
  73  /**
  74   * Styles that are reused verbatim in a few places
  75   */
  76  /**
  77   * Allows users to opt-out of animations via OS-level preferences.
  78   */
  79  /**
  80   * Reset default styles for JavaScript UI based pages.
  81   * This is a WP-admin agnostic reset
  82   */
  83  /**
  84   * Reset the WP Admin page styles for Gutenberg-like pages.
  85   */
  86  /**
  87   * Editor only CSS.
  88   */
  89  .editor-styles-wrapper .wp-block-navigation ul {
  90    margin-top: 0;
  91    margin-bottom: 0;
  92    margin-left: 0;
  93    padding-left: 0;
  94  }
  95  .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
  96    margin: revert;
  97  }
  98  
  99  .wp-block-navigation-item__label {
 100    display: inline;
 101  }
 102  
 103  /**
 104   * Submenus.
 105   */
 106  .wp-block-navigation__container,
 107  .wp-block-navigation-item {
 108    background-color: inherit;
 109  }
 110  
 111  .wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container {
 112    opacity: 0;
 113    visibility: hidden;
 114  }
 115  
 116  .has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container {
 117    display: flex;
 118    opacity: 1;
 119    visibility: visible;
 120  }
 121  
 122  .is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container {
 123    opacity: 1;
 124    visibility: visible;
 125  }
 126  
 127  .is-editing > .wp-block-navigation__container {
 128    visibility: visible;
 129    opacity: 1;
 130    display: flex;
 131    flex-direction: column;
 132  }
 133  
 134  .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
 135    opacity: 1;
 136    visibility: hidden;
 137  }
 138  .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container .block-editor-block-draggable-chip-wrapper {
 139    visibility: visible;
 140  }
 141  
 142  .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
 143    display: block;
 144    position: static;
 145    width: 100%;
 146  }
 147  .is-editing > .wp-block-navigation__submenu-container > .block-list-appender .block-editor-button-block-appender {
 148    color: #fff;
 149    background: #1e1e1e;
 150    padding: 0;
 151    width: 24px;
 152    margin-right: 0;
 153    margin-left: auto;
 154  }
 155  
 156  .wp-block-navigation__submenu-container .block-list-appender {
 157    display: none;
 158  }
 159  
 160  /**
 161   * Colors Selector component
 162   */
 163  .block-library-colors-selector {
 164    width: auto;
 165  }
 166  .block-library-colors-selector .block-library-colors-selector__toggle {
 167    display: block;
 168    margin: 0 auto;
 169    padding: 3px;
 170    width: auto;
 171  }
 172  .block-library-colors-selector .block-library-colors-selector__icon-container {
 173    height: 30px;
 174    position: relative;
 175    margin: 0 auto;
 176    padding: 3px;
 177    display: flex;
 178    align-items: center;
 179    border-radius: 4px;
 180  }
 181  .block-library-colors-selector .block-library-colors-selector__state-selection {
 182    margin-left: auto;
 183    margin-right: auto;
 184    border-radius: 11px;
 185    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 186    width: 22px;
 187    min-width: 22px;
 188    height: 22px;
 189    min-height: 22px;
 190    line-height: 20px;
 191    padding: 2px;
 192  }
 193  .block-library-colors-selector .block-library-colors-selector__state-selection > svg {
 194    min-width: auto !important;
 195  }
 196  .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg,
 197  .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path {
 198    color: inherit;
 199  }
 200  
 201  .block-library-colors-selector__popover .color-palette-controller-container {
 202    padding: 16px;
 203  }
 204  .block-library-colors-selector__popover .components-base-control__label {
 205    height: 20px;
 206    line-height: 20px;
 207  }
 208  .block-library-colors-selector__popover .component-color-indicator {
 209    float: right;
 210    margin-top: 2px;
 211  }
 212  .block-library-colors-selector__popover .components-panel__body-title {
 213    display: none;
 214  }
 215  
 216  .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
 217    background-color: #1e1e1e;
 218    color: #fff;
 219    height: 24px;
 220  }
 221  .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender {
 222    padding: 0;
 223  }
 224  
 225  .wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender {
 226    background-color: transparent;
 227    color: #1e1e1e;
 228  }
 229  
 230  /**
 231   * Setup state
 232   */
 233  @keyframes loadingpulse {
 234    0% {
 235      opacity: 1;
 236    }
 237    50% {
 238      opacity: 0.5;
 239    }
 240    100% {
 241      opacity: 1;
 242    }
 243  }
 244  .components-placeholder.wp-block-navigation-placeholder {
 245    outline: none;
 246    padding: 0;
 247    box-shadow: none;
 248    background: none;
 249    min-height: 0;
 250  }
 251  .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset {
 252    font-size: inherit;
 253  }
 254  .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button {
 255    margin-bottom: 0;
 256  }
 257  .components-placeholder.wp-block-navigation-placeholder {
 258    color: inherit;
 259  }
 260  .wp-block-navigation.is-selected .components-placeholder.wp-block-navigation-placeholder {
 261    color: #1e1e1e;
 262  }
 263  
 264  .wp-block-navigation-placeholder__preview {
 265    display: flex;
 266    align-items: center;
 267    min-width: 96px;
 268    font-size: 13px;
 269    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 270  }
 271  .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview {
 272    display: none;
 273  }
 274  .wp-block-navigation-placeholder__preview {
 275    color: currentColor;
 276    background: transparent;
 277  }
 278  .wp-block-navigation-placeholder__preview::before {
 279    content: "";
 280    display: block;
 281    position: absolute;
 282    top: 0;
 283    right: 0;
 284    bottom: 0;
 285    left: 0;
 286    pointer-events: none;
 287    border: 1px dashed currentColor;
 288    border-radius: inherit;
 289  }
 290  .wp-block-navigation-placeholder__preview > svg {
 291    fill: currentColor;
 292  }
 293  
 294  .wp-block-navigation.is-vertical .is-small .components-placeholder__fieldset,
 295  .wp-block-navigation.is-vertical .is-medium .components-placeholder__fieldset {
 296    min-height: 90px;
 297  }
 298  
 299  .wp-block-navigation.is-vertical .is-large .components-placeholder__fieldset {
 300    min-height: 132px;
 301  }
 302  
 303  .wp-block-navigation-placeholder__preview,
 304  .wp-block-navigation-placeholder__controls {
 305    padding: 6px 8px;
 306    flex-direction: row;
 307    align-items: flex-start;
 308  }
 309  
 310  .wp-block-navigation-placeholder__controls {
 311    border-radius: 2px;
 312    background-color: #fff;
 313    box-shadow: inset 0 0 0 1px #1e1e1e;
 314    display: none;
 315    position: relative;
 316    z-index: 1;
 317  }
 318  .wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls {
 319    display: flex;
 320  }
 321  .wp-block-navigation-placeholder__controls {
 322    float: left;
 323    width: 100%;
 324  }
 325  .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,
 326  .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,
 327  .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr {
 328    display: none;
 329  }
 330  .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions {
 331    flex-direction: column;
 332    align-items: flex-start;
 333  }
 334  .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr {
 335    display: none;
 336  }
 337  .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon {
 338    margin-right: 12px;
 339    height: 36px;
 340  }
 341  
 342  .wp-block-navigation-placeholder__actions__indicator {
 343    display: flex;
 344    padding: 0 6px 0 0;
 345    align-items: center;
 346    justify-content: flex-start;
 347    line-height: 0;
 348    height: 36px;
 349    margin-left: 4px;
 350  }
 351  .wp-block-navigation-placeholder__actions__indicator svg {
 352    margin-right: 4px;
 353    fill: currentColor;
 354  }
 355  
 356  .wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset {
 357    flex-direction: row !important;
 358  }
 359  
 360  .wp-block-navigation-placeholder__actions {
 361    display: flex;
 362    font-size: 13px;
 363    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 364    gap: 6px;
 365    align-items: center;
 366  }
 367  .wp-block-navigation-placeholder__actions .components-dropdown,
 368  .wp-block-navigation-placeholder__actions > .components-button {
 369    margin-right: 0;
 370  }
 371  .wp-block-navigation-placeholder__actions {
 372    height: 100%;
 373  }
 374  .wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr {
 375    border: 0;
 376    min-height: 1px;
 377    min-width: 1px;
 378    background-color: #1e1e1e;
 379    margin: auto 0;
 380    height: 100%;
 381    max-height: 16px;
 382  }
 383  
 384  /**
 385   * Mobile menu.
 386   */
 387  @media (min-width: 600px) {
 388    .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close {
 389      display: none;
 390    }
 391  }
 392  
 393  .wp-block-navigation__responsive-container.is-menu-open {
 394    position: fixed;
 395    top: 159px;
 396  }
 397  @media (min-width: 782px) {
 398    .wp-block-navigation__responsive-container.is-menu-open {
 399      top: 97px;
 400    }
 401  }
 402  @media (min-width: 782px) {
 403    .wp-block-navigation__responsive-container.is-menu-open {
 404      left: 36px;
 405    }
 406  }
 407  @media (min-width: 960px) {
 408    .wp-block-navigation__responsive-container.is-menu-open {
 409      left: 160px;
 410    }
 411  }
 412  
 413  .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 414  .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 415    top: 145px;
 416  }
 417  
 418  .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open {
 419    left: 0;
 420    top: 159px;
 421  }
 422  @media (min-width: 782px) {
 423    .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open {
 424      top: 65px;
 425    }
 426  }
 427  .is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 428  .is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 429    top: 113px;
 430  }
 431  
 432  body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
 433    top: 0;
 434    right: 0;
 435    bottom: 0;
 436    left: 0;
 437  }
 438  
 439  .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 440  .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
 441    padding: 0;
 442    height: auto;
 443    color: inherit;
 444  }
 445  
 446  .components-heading.wp-block-navigation-off-canvas-editor__title {
 447    margin: 0;
 448  }
 449  
 450  .wp-block-navigation-off-canvas-editor__header {
 451    margin-bottom: 8px;
 452  }
 453  
 454  .is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender {
 455    margin-top: 16px;
 456  }
 457  
 458  @keyframes fadein {
 459    0% {
 460      opacity: 0;
 461    }
 462    100% {
 463      opacity: 1;
 464    }
 465  }
 466  .wp-block-navigation__loading-indicator-container {
 467    padding: 8px 12px;
 468  }
 469  
 470  .wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
 471    margin-top: 0;
 472  }
 473  
 474  @keyframes fadeouthalf {
 475    0% {
 476      opacity: 1;
 477    }
 478    100% {
 479      opacity: 0.5;
 480    }
 481  }
 482  .wp-block-navigation-delete-menu-button {
 483    width: 100%;
 484    justify-content: center;
 485    margin-bottom: 16px;
 486  }
 487  
 488  .components-button.is-link.wp-block-navigation-manage-menus-button {
 489    margin-bottom: 16px;
 490  }
 491  
 492  .wp-block-navigation__overlay-menu-preview {
 493    display: flex;
 494    align-items: center;
 495    justify-content: space-between;
 496    width: 100%;
 497    background-color: #f0f0f0;
 498    padding: 0 24px;
 499    height: 64px !important;
 500    grid-column: span 2;
 501  }
 502  .wp-block-navigation__overlay-menu-preview.open {
 503    box-shadow: inset 0 0 0 1px #e0e0e0;
 504    outline: 1px solid transparent;
 505    background-color: #fff;
 506  }
 507  
 508  .wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty {
 509    display: none;
 510  }
 511  
 512  .wp-block-navigation-placeholder__actions hr + hr {
 513    display: none;
 514  }
 515  
 516  /**
 517   * Navigation selector styles
 518   */
 519  .wp-block-navigation__navigation-selector {
 520    margin-bottom: 16px;
 521    width: 100%;
 522  }
 523  
 524  .wp-block-navigation__navigation-selector-button {
 525    border: 1px solid;
 526    justify-content: space-between;
 527    width: 100%;
 528  }
 529  
 530  .wp-block-navigation__navigation-selector-button__icon {
 531    flex: 0 0 auto;
 532  }
 533  
 534  .wp-block-navigation__navigation-selector-button__label {
 535    flex: 0 1 auto;
 536    overflow: hidden;
 537    text-overflow: ellipsis;
 538    white-space: nowrap;
 539  }
 540  
 541  .wp-block-navigation__navigation-selector-button--createnew {
 542    border: 1px solid;
 543    margin-bottom: 16px;
 544    width: 100%;
 545  }
 546  
 547  .wp-block-navigation__responsive-container-open.components-button {
 548    opacity: 1;
 549  }
 550  
 551  .wp-block-navigation__menu-inspector-controls {
 552    overflow-x: auto;
 553  }
 554  .wp-block-navigation__menu-inspector-controls::-webkit-scrollbar {
 555    width: 12px;
 556    height: 12px;
 557  }
 558  .wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track {
 559    background-color: transparent;
 560  }
 561  .wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb {
 562    background-color: transparent;
 563    border-radius: 8px;
 564    border: 3px solid transparent;
 565    background-clip: padding-box;
 566  }
 567  .wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb {
 568    background-color: #949494;
 569  }
 570  .wp-block-navigation__menu-inspector-controls {
 571    scrollbar-width: thin;
 572    scrollbar-gutter: stable both-edges;
 573    scrollbar-color: transparent transparent;
 574  }
 575  .wp-block-navigation__menu-inspector-controls:hover, .wp-block-navigation__menu-inspector-controls:focus, .wp-block-navigation__menu-inspector-controls:focus-within {
 576    scrollbar-color: #949494 transparent;
 577  }
 578  .wp-block-navigation__menu-inspector-controls {
 579    will-change: transform;
 580  }
 581  @media (hover: none) {
 582    .wp-block-navigation__menu-inspector-controls {
 583      scrollbar-color: #949494 transparent;
 584    }
 585  }
 586  
 587  .wp-block-navigation__menu-inspector-controls__empty-message {
 588    margin-left: 24px;
 589  }
 590  
 591  .editor-sidebar__panel .wp-block-navigation__submenu-header {
 592    margin-top: 0;
 593    margin-bottom: 0;
 594  }
 595  
 596  .wp-block-navigation__submenu-accessibility-notice {
 597    grid-column: span 2;
 598  }
 599  
 600  .wp-block-navigation__overlay-edit-button {
 601    margin-top: 24px;
 602  }
 603  
 604  .wp-block-navigation__overlay-selector {
 605    position: relative;
 606  }
 607  
 608  .wp-block-navigation__overlay-create-button {
 609    position: absolute;
 610    top: -4px;
 611    right: 0;
 612    z-index: 1;
 613  }