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