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