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