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