[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-left: 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  .wp-block-search__label {
  75    width: 100%;
  76  }
  77  
  78  .wp-block-search.wp-block-search__button-only .wp-block-search__button {
  79    margin-left: 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-left: 0 !important;
 104    padding-right: 0 !important;
 105    border-left-width: 0 !important;
 106    border-right-width: 0 !important;
 107    flex-grow: 0;
 108    margin: 0;
 109    flex-basis: 0;
 110  }
 111  
 112  :where(.wp-block-search__input) {
 113    font-family: inherit;
 114    font-weight: inherit;
 115    font-size: inherit;
 116    line-height: inherit;
 117    letter-spacing: inherit;
 118    text-transform: inherit;
 119    font-style: inherit;
 120    padding: 8px;
 121    flex-grow: 1;
 122    margin-left: 0;
 123    margin-right: 0;
 124    min-width: 3rem;
 125    border: 1px solid #949494;
 126    text-decoration: unset !important;
 127    appearance: initial;
 128  }
 129  
 130  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 131    padding: 4px;
 132    border-width: 1px;
 133    border-style: solid;
 134    border-color: #949494;
 135    background-color: #fff;
 136    box-sizing: border-box;
 137  }
 138  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
 139    border-radius: 0;
 140    border: none;
 141    padding: 0 4px;
 142  }
 143  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
 144    outline: none;
 145  }
 146  :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
 147    padding: 4px 8px;
 148  }
 149  
 150  .wp-block-search.aligncenter .wp-block-search__inside-wrapper {
 151    margin: auto;
 152  }
 153  
 154  .wp-block[data-align=right] .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
 155    float: right;
 156  }