1 /**

     2  * Colors

     3  */

     4 /**

     5  * Breakpoints & Media Queries

     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  * Colors

    16  */

    17 /**

    18  * Fonts & basic variables.

    19  */

    20 /**

    21  * Grid System.

    22  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

    23  */

    24 /**

    25  * Dimensions.

    26  */

    27 /**

    28  * Shadows.

    29  */

    30 /**

    31  * Editor widths.

    32  */

    33 /**

    34  * Block & Editor UI.

    35  */

    36 /**

    37  * Block paddings.

    38  */

    39 /**

    40  * React Native specific.

    41  * These variables do not appear to be used anywhere else.

    42  */

    43 /**

    44  * Breakpoint mixins

    45  */

    46 /**

    47  * Long content fade mixin

    48  *

    49  * Creates a fading overlay to signify that the content is longer

    50  * than the space allows.

    51  */

    52 /**

    53  * Focus styles.

    54  */

    55 /**

    56  * Applies editor left position to the selector passed as argument

    57  */

    58 /**

    59  * Styles that are reused verbatim in a few places

    60  */

    61 /**

    62  * Allows users to opt-out of animations via OS-level preferences.

    63  */

    64 /**

    65  * Reset default styles for JavaScript UI based pages.

    66  * This is a WP-admin agnostic reset

    67  */

    68 /**

    69  * Reset the WP Admin page styles for Gutenberg-like pages.

    70  */

    71 /**

    72 * Editor Normalization Styles

    73 *

    74 * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming

    75 * of the editor by themes.

    76 */

    77 .editor-styles-wrapper {

    78   padding: 8px;

    79   /**

    80   * The following styles revert to the browser defaults overriding the WPAdmin styles.

    81   * This is only needed while the block editor is not being loaded in an iframe.

    82   */

    83   font-family: serif;

    84   font-size: initial;

    85   line-height: initial;

    86   color: initial;

    87   background: #fff;

    88 }

    89 .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {

    90   margin-right: -8px;

    91   margin-left: -8px;

    92 }

    93 .editor-styles-wrapper .wp-align-wrapper {

    94   max-width: 840px;

    95 }

    96 .editor-styles-wrapper .wp-align-wrapper > .wp-block, .editor-styles-wrapper .wp-align-wrapper.wp-align-full {

    97   max-width: none;

    98 }

    99 .editor-styles-wrapper .wp-align-wrapper.wp-align-wide {

   100   max-width: 840px;

   101 }

   102 .editor-styles-wrapper a {

   103   transition: none;

   104 }

   105 .editor-styles-wrapper code,

   106 .editor-styles-wrapper kbd {

   107   padding: 0;

   108   margin: 0;

   109   background: inherit;

   110   font-size: inherit;

   111   font-family: monospace;

   112 }

   113 .editor-styles-wrapper p {

   114   font-size: revert;

   115   line-height: revert;

   116   margin: revert;

   117 }

   118 .editor-styles-wrapper ul,

   119 .editor-styles-wrapper ol {

   120   margin: revert;

   121   padding: revert;

   122   list-style-type: revert;

   123   box-sizing: revert;

   124 }

   125 .editor-styles-wrapper ul ul,

   126 .editor-styles-wrapper ul ol,

   127 .editor-styles-wrapper ol ul,

   128 .editor-styles-wrapper ol ol {

   129   margin: revert;

   130 }

   131 .editor-styles-wrapper ul li,

   132 .editor-styles-wrapper ol li {

   133   margin: revert;

   134 }

   135 .editor-styles-wrapper ul ul,

   136 .editor-styles-wrapper ol ul {

   137   list-style-type: revert;

   138 }

   139 .editor-styles-wrapper h1,

   140 .editor-styles-wrapper h2,

   141 .editor-styles-wrapper h3,

   142 .editor-styles-wrapper h4,

   143 .editor-styles-wrapper h5,

   144 .editor-styles-wrapper h6 {

   145   font-size: revert;

   146   margin: revert;

   147   color: revert;

   148   line-height: revert;

   149   font-weight: revert;

   150 }

   151 .editor-styles-wrapper select {

   152   font-family: system-ui;

   153   -webkit-appearance: revert;

   154   color: revert;

   155   border: revert;

   156   border-radius: revert;

   157   background: revert;

   158   box-shadow: revert;

   159   text-shadow: revert;

   160   outline: revert;

   161   cursor: revert;

   162   transform: revert;

   163   font-size: revert;

   164   line-height: revert;

   165   padding: revert;

   166   margin: revert;

   167   min-height: revert;

   168   max-width: revert;

   169   vertical-align: revert;

   170   font-weight: revert;

   171 }

   172 .editor-styles-wrapper select:disabled,

   173 .editor-styles-wrapper select:focus {

   174   color: revert;

   175   border-color: revert;

   176   background: revert;

   177   box-shadow: revert;

   178   text-shadow: revert;

   179   cursor: revert;

   180   transform: revert;

   181 }