[Summary view] [Print] [Text view]

   1  /**
   2   * Colors
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  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  .wp-block-search__button {
  47    margin-right: 10px;
  48    word-break: normal;
  49  }
  50  .wp-block-search__button.has-icon {
  51    line-height: 0;
  52  }
  53  .wp-block-search__button svg {
  54    min-width: 24px;
  55    min-height: 24px;
  56    width: 1.25em;
  57    height: 1.25em;
  58    fill: currentColor;
  59    vertical-align: text-bottom;
  60  }
  61  
  62  :where(.wp-block-search__button) {
  63    border: 1px solid #ccc;
  64    padding: 6px 10px;
  65  }
  66  
  67  .wp-block-search__inside-wrapper {
  68    display: flex;
  69    flex: auto;
  70    flex-wrap: nowrap;
  71    max-width: 100%;
  72  }
  73  
  74  :where(.wp-block-search__label) {
  75    width: 100%;
  76  }
  77  
  78  .wp-block-search.wp-block-search__button-only .wp-block-search__button {
  79    margin-right: 0;
  80    flex-shrink: 0;
  81    max-width: 100%;
  82    box-sizing: border-box;
  83    display: flex;
  84    justify-content: center;
  85  }
  86  .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
  87    transition-property: width;
  88    min-width: 0 !important;
  89  }
  90  .wp-block-search.wp-block-search__button-only .wp-block-search__input {
  91    transition-duration: 300ms;
  92    flex-basis: 100%;
  93  }
  94  .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden {
  95    overflow: hidden;
  96  }
  97  .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
  98    overflow: hidden;
  99  }
 100  .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
 101    width: 0 !important;
 102    min-width: 0 !important;
 103    padding-right: 0 !important;
 104    padding-left: 0 !important;
 105    border-right-width: 0 !important;
 106    border-left-width: 0 !important;
 107    flex-grow: 0;
 108    margin: 0;
 109    flex-basis: 0;
 110  }
 111  .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden:focus-within {
 112    overflow: visible;
 113  }
 114  .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden:focus-within .wp-block-search__inside-wrapper {
 115    overflow: visible;
 116  }
 117  
 118  :where(.wp-block-search__input) {
 119    font-family: inherit;
 120    font-weight: inherit;
 121    font-size: inherit;
 122    line-height: inherit;
 123    letter-spacing: inherit;
 124    text-transform: inherit;
 125    font-style: inherit;
 126    padding: 8px;
 127    flex-grow: 1;
 128    margin-right: 0;
 129    margin-left: 0;
 130    min-width: 3rem;
 131    border: 1px solid #949494;
 132    text-decoration: unset !important;
 133    appearance: initial;
 134  }
 135  
 136  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 137    padding: 4px;
 138    border-width: 1px;
 139    border-style: solid;
 140    border-color: #949494;
 141    background-color: #fff;
 142    box-sizing: border-box;
 143  }
 144  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
 145    border-radius: 0;
 146    border: none;
 147    padding: 0 4px;
 148  }
 149  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
 150    outline: none;
 151  }
 152  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
 153    padding: 4px 8px;
 154  }
 155  
 156  .wp-block-search.aligncenter .wp-block-search__inside-wrapper {
 157    margin: auto;
 158  }
 159  
 160  .wp-block[data-align=right] .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
 161    float: left;
 162  }