[Summary view] [Print] [Text view]

   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  :root {
  72    --wp-admin-theme-color: #007cba;
  73    --wp-admin-theme-color-darker-10: #006ba1;
  74    --wp-admin-theme-color-darker-20: #005a87;
  75    --wp-admin-border-width-focus: 2px;
  76  }
  77  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  78    :root {
  79      --wp-admin-border-width-focus: 1.5px;
  80    }
  81  }
  82  
  83  .editor-styles-wrapper .wp-block {
  84    margin-left: auto;
  85    margin-right: auto;
  86  }
  87  
  88  .wp-block {
  89    max-width: 840px;
  90    margin-top: 28px;
  91    margin-bottom: 28px;
  92  }
  93  .wp-block[data-align=wide] {
  94    max-width: 1100px;
  95  }
  96  .wp-block[data-align=full] {
  97    max-width: none;
  98  }
  99  .wp-block[data-align=left], .wp-block[data-align=right] {
 100    width: 100%;
 101    height: 0;
 102  }
 103  .wp-block[data-align=left]::before, .wp-block[data-align=right]::before {
 104    content: none;
 105  }
 106  .wp-block[data-align=left] > * {
 107    /*!rtl:begin:ignore*/
 108    float: left;
 109    margin-right: 2em;
 110    /*!rtl:end:ignore*/
 111  }
 112  .wp-block[data-align=right] > * {
 113    /*!rtl:begin:ignore*/
 114    float: right;
 115    margin-left: 2em;
 116    /*!rtl:end:ignore*/
 117  }
 118  .wp-block[data-align=full], .wp-block[data-align=wide] {
 119    clear: both;
 120  }
 121  
 122  .wp-block-group > [data-align=full] {
 123    margin-left: auto;
 124    margin-right: auto;
 125  }
 126  
 127  .wp-block-group.has-background > [data-align=full] {
 128    margin-left: -30px;
 129    width: calc(100% + 60px);
 130  }
 131  
 132  /**
 133  * Group: Full Width Alignment
 134  */
 135  [data-align=full] .wp-block-group > .wp-block {
 136    padding-left: 14px;
 137    padding-right: 14px;
 138  }
 139  @media (min-width: 600px) {
 140    [data-align=full] .wp-block-group > .wp-block {
 141      padding-left: 0;
 142      padding-right: 0;
 143    }
 144  }
 145  [data-align=full] .wp-block-group > [data-align=full] {
 146    padding-right: 0;
 147    padding-left: 0;
 148    left: 0;
 149    width: 100%;
 150    max-width: none;
 151  }
 152  [data-align=full] .wp-block-group.has-background > [data-align=full] {
 153    width: calc(100% + 60px);
 154  }