[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  .preference-base-option + .preference-base-option {
  47    margin-top: 16px;
  48  }
  49  
  50  /**
  51   * Breakpoints & Media Queries
  52   */
  53  /**
  54   * Typography
  55   */
  56  /**
  57  *  Converts a hex value into the rgb equivalent.
  58  *
  59  * @param {string} hex - the hexadecimal value to convert
  60  * @return {string} comma separated rgb values
  61  */
  62  /**
  63   * Long content fade mixin
  64   *
  65   * Creates a fading overlay to signify that the content is longer
  66   * than the space allows.
  67   */
  68  /**
  69   * Breakpoint mixins
  70   */
  71  /**
  72   * Focus styles.
  73   */
  74  /**
  75   * Standard focus rings for the WordPress Design System.
  76   *
  77   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  78   * e.g. `&:focus { @include outset-ring__focus(); }`.
  79   */
  80  /**
  81   * Applies editor left position to the selector passed as argument
  82   */
  83  /**
  84   * Styles that are reused verbatim in a few places
  85   */
  86  /**
  87   * Allows users to opt-out of animations via OS-level preferences.
  88   */
  89  /**
  90   * Reset default styles for JavaScript UI based pages.
  91   * This is a WP-admin agnostic reset
  92   */
  93  /**
  94   * Reset the WP Admin page styles for Gutenberg-like pages.
  95   */
  96  /**
  97   * Creates a checkerboard pattern background to indicate transparency.
  98   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  99   */
 100  @media (min-width: 600px) {
 101    .preferences-modal {
 102      width: calc(100% - 32px);
 103      height: calc(100% - 128px);
 104    }
 105  }
 106  @media (min-width: 782px) {
 107    .preferences-modal {
 108      width: 750px;
 109    }
 110  }
 111  @media (min-width: 960px) {
 112    .preferences-modal {
 113      height: 70%;
 114    }
 115  }
 116  @media (max-width: 781px) {
 117    .preferences-modal .components-modal__content {
 118      padding: 0;
 119    }
 120  }
 121  
 122  .preferences__tabs-tablist {
 123    position: absolute !important;
 124    top: 88px;
 125    left: 16px;
 126    width: 160px;
 127  }
 128  
 129  .preferences__tabs-tabpanel {
 130    padding-left: 24px;
 131    margin-left: 160px;
 132  }
 133  
 134  @media (max-width: 781px) {
 135    .preferences__provider {
 136      height: 100%;
 137    }
 138  }
 139  .preferences-modal__section {
 140    border: 0;
 141    padding: 0;
 142    margin: 0 0 2.5rem 0;
 143  }
 144  .preferences-modal__section:last-child {
 145    margin: 0;
 146  }
 147  
 148  .preferences-modal__section-legend {
 149    margin-bottom: 8px;
 150  }
 151  
 152  .preferences-modal__section-title {
 153    font-size: 0.9rem;
 154    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 155    margin-top: 0;
 156  }
 157  
 158  .preferences-modal__section-description {
 159    margin: -8px 0 8px 0;
 160    font-size: 12px;
 161    font-style: normal;
 162    color: #757575;
 163  }
 164  
 165  .preferences-modal__section:has(.preferences-modal__section-content:empty) {
 166    display: none;
 167  }