[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  .nux-dot-tip::before, .nux-dot-tip::after {
  84    border-radius: 100%;
  85    content: " ";
  86    pointer-events: none;
  87    position: absolute;
  88  }
  89  .nux-dot-tip::before {
  90    animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
  91    background: rgba(0, 115, 156, 0.9);
  92    opacity: 0.9;
  93    height: 24px;
  94    left: -12px;
  95    top: -12px;
  96    transform: scale(0.3333333333);
  97    width: 24px;
  98  }
  99  .nux-dot-tip::after {
 100    background: #00739c;
 101    height: 8px;
 102    left: -4px;
 103    top: -4px;
 104    width: 8px;
 105  }
 106  @keyframes nux-pulse {
 107    100% {
 108      background: rgba(0, 115, 156, 0);
 109      transform: scale(1);
 110    }
 111  }
 112  .nux-dot-tip .components-popover__content {
 113    width: 350px;
 114  }
 115  .nux-dot-tip .components-popover__content > div {
 116    padding: 20px 18px;
 117  }
 118  @media (min-width: 600px) {
 119    .nux-dot-tip .components-popover__content {
 120      width: 450px;
 121    }
 122  }
 123  .nux-dot-tip .components-popover__content .nux-dot-tip__disable {
 124    position: absolute;
 125    right: 0;
 126    top: 0;
 127  }
 128  .nux-dot-tip[data-y-axis=top] {
 129    margin-top: -4px;
 130  }
 131  .nux-dot-tip[data-y-axis=bottom] {
 132    margin-top: 4px;
 133  }
 134  .nux-dot-tip[data-y-axis=middle][data-y-axis=left] {
 135    margin-left: -4px;
 136  }
 137  .nux-dot-tip[data-y-axis=middle][data-y-axis=right] {
 138    margin-left: 4px;
 139  }
 140  .nux-dot-tip[data-y-axis=top] .components-popover__content {
 141    margin-bottom: 20px;
 142  }
 143  .nux-dot-tip[data-y-axis=bottom] .components-popover__content {
 144    margin-top: 20px;
 145  }
 146  .nux-dot-tip[data-y-axis=middle][data-y-axis=left] .components-popover__content {
 147    margin-right: 20px;
 148  }
 149  .nux-dot-tip[data-y-axis=middle][data-y-axis=right] .components-popover__content {
 150    margin-left: 20px;
 151  }
 152  .nux-dot-tip[data-y-axis=left], .nux-dot-tip[data-y-axis=center], .nux-dot-tip[data-y-axis=right] {
 153    z-index: 1000001;
 154  }
 155  @media (max-width: 600px) {
 156    .nux-dot-tip[data-y-axis=left] .components-popover__content, .nux-dot-tip[data-y-axis=center] .components-popover__content, .nux-dot-tip[data-y-axis=right] .components-popover__content {
 157      align-self: end;
 158      left: 5px;
 159      margin: 20px 0 0 0;
 160      max-width: none !important;
 161      position: fixed;
 162      right: 5px;
 163      width: auto;
 164    }
 165  }
 166  .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
 167    /*!rtl:ignore*/
 168    margin-left: 0;
 169  }
 170  .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
 171    /*!rtl:ignore*/
 172    margin-right: 0;
 173  }
 174  .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
 175    /*!rtl:ignore*/
 176    margin-left: -12px;
 177  }
 178  .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
 179    /*!rtl:ignore*/
 180    margin-right: -12px;
 181  }