[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-right: auto;
  85    margin-left: 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    float: left;
 108    margin-right: 2em;
 109  }
 110  .wp-block[data-align=right] > * {
 111    float: right;
 112    margin-left: 2em;
 113  }
 114  .wp-block[data-align=full], .wp-block[data-align=wide] {
 115    clear: both;
 116  }
 117  
 118  .wp-block-group > [data-align=full] {
 119    margin-right: auto;
 120    margin-left: auto;
 121  }
 122  
 123  .wp-block-group.has-background > [data-align=full] {
 124    margin-right: -30px;
 125    width: calc(100% + 60px);
 126  }
 127  
 128  /**
 129  * Group: Full Width Alignment
 130  */
 131  [data-align=full] .wp-block-group > .wp-block {
 132    padding-right: 14px;
 133    padding-left: 14px;
 134  }
 135  @media (min-width: 600px) {
 136    [data-align=full] .wp-block-group > .wp-block {
 137      padding-right: 0;
 138      padding-left: 0;
 139    }
 140  }
 141  [data-align=full] .wp-block-group > [data-align=full] {
 142    padding-left: 0;
 143    padding-right: 0;
 144    right: 0;
 145    width: 100%;
 146    max-width: none;
 147  }
 148  [data-align=full] .wp-block-group.has-background > [data-align=full] {
 149    width: calc(100% + 60px);
 150  }