[Summary view] [Print] [Text view]

   1  /**
   2   * SCSS Variables.
   3   *
   4   * Please use variables from this sheet to ensure consistency across the UI.
   5   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   6   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
   7   */
   8  /**
   9   * Colors
  10   */
  11  /**
  12   * Fonts & basic variables.
  13   */
  14  /**
  15   * Typography
  16   */
  17  /**
  18   * Grid System.
  19   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  20   */
  21  /**
  22   * Radius scale.
  23   */
  24  /**
  25   * Elevation scale.
  26   */
  27  /**
  28   * Dimensions.
  29   */
  30  /**
  31   * Mobile specific styles
  32   */
  33  /**
  34   * Editor styles.
  35   */
  36  /**
  37   * Block & Editor UI.
  38   */
  39  /**
  40   * Block paddings.
  41   */
  42  /**
  43   * React Native specific.
  44   * These variables do not appear to be used anywhere else.
  45   */
  46  /**
  47   * Typography
  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  .wp-block[data-align=center] > .wp-block-icon {
  97    display: flex;
  98    justify-content: center;
  99  }
 100  
 101  .wp-block-icon__inserter-sidebar {
 102    padding-bottom: 24px;
 103  }
 104  @media (min-width: 782px) {
 105    .wp-block-icon__inserter-sidebar {
 106      overflow-x: visible;
 107      overflow-y: auto;
 108      position: absolute;
 109      top: 72px;
 110      left: 0;
 111      bottom: 0;
 112      width: 280px;
 113      padding-top: 24px;
 114      padding-inline: 24px;
 115    }
 116  }
 117  
 118  @media (min-width: 782px) {
 119    .wp-block-icon__inserter-panel {
 120      margin-inline-start: 280px;
 121    }
 122  }
 123  
 124  .wp-block-icon__inserter-loading {
 125    display: flex;
 126    justify-content: center;
 127    padding: 24px;
 128  }
 129  
 130  .wp-block-icon__inserter-grid-icons-list {
 131    display: grid;
 132    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 133  }
 134  
 135  .wp-block-icon__inserter-grid-no-results {
 136    display: flex;
 137    justify-content: center;
 138  }
 139  
 140  .wp-block-icon__inserter-grid-icons-list-item {
 141    display: flex;
 142    flex-direction: column;
 143    height: auto !important;
 144  }
 145  
 146  .wp-block-icon__inserter-grid-icons-list-item-icon {
 147    padding: 12px;
 148  }
 149  .wp-block-icon__inserter-grid-icons-list-item-icon svg {
 150    display: block;
 151    width: 24px;
 152    height: 24px;
 153  }
 154  
 155  .wp-block-icon__inserter-grid-icons-list-item-title {
 156    font-size: 12px;
 157    padding: 4px 4px 8px;
 158    overflow-wrap: break-word;
 159  }
 160  
 161  .wp-block-icon__toolbar-content {
 162    width: 250px;
 163  }
 164  
 165  .wp-block-icon__placeholder {
 166    backdrop-filter: blur(100px);
 167  }