[Summary view] [Print] [Text view]

   1  .wp-block-search {
   2      max-width: var(--responsive--aligndefault-width);
   3  
   4      .wp-block-search__label {
   5          font-size: var(--form--font-size);
   6          font-weight: var(--form--label-weight);
   7          margin-bottom: calc(var(--global--spacing-vertical) / 3);
   8      }
   9  
  10      &.wp-block-search__button-inside .wp-block-search__inside-wrapper,
  11      .wp-block-search__input {
  12          border: var(--form--border-width) solid var(--form--border-color);
  13          border-radius: var(--form--border-radius);
  14          font-family: var(--form--font-family);
  15          font-size: var(--form--font-size);
  16          line-height: var(--form--line-height);
  17          max-width: inherit;
  18          margin-right: calc(-1 * var(--button--border-width));
  19          padding: var(--form--spacing-unit);
  20  
  21          .is-dark-theme & {
  22              background: var(--global--color-white-90);
  23          }
  24  
  25          .has-background & {
  26              border-color: var(--local--color-primary, var(--global--color-primary)) !important;
  27          }
  28      }
  29  
  30      .wp-block-search__button.wp-block-search__button {
  31          @include button-style();
  32          box-shadow: none;
  33          margin-left: 0;
  34  
  35          &.has-icon {
  36              padding: 6px calc(0.5 * var(--button--padding-horizontal));
  37              display: inherit;
  38  
  39              svg {
  40                  width: 40px;
  41                  height: 40px;
  42              }
  43          }
  44  
  45          &:hover,
  46          &:active {
  47  
  48              .has-background & {
  49                  background-color: var(--local--color-background, var(--global--color-background)) !important;
  50                  color: var(--local--color-primary, var(--global--color-primary)) !important;
  51              }
  52  
  53              .has-text-color & {
  54                  color: var(--local--color-primary, var(--global--color-primary)) !important;
  55              }
  56          }
  57  
  58          // Remove :focus styles in the editor
  59          &:focus {
  60              outline-offset: inherit;
  61              outline: inherit;
  62          }
  63      }
  64  
  65      &.wp-block-search__button-inside {
  66  
  67          .wp-block-search__inside-wrapper {
  68              padding: var(--form--border-width);
  69          }
  70  
  71          .wp-block-search__input {
  72              border: none;
  73          }
  74  
  75          &.wp-block-search__text-button,
  76          &.wp-block-search__icon-button {
  77  
  78              .wp-block-search__button {
  79                  // Search button always needs black contrast against white form background
  80                  &:hover {
  81                      color: var(--global--color-dark-gray);
  82                  }
  83  
  84                  .is-dark-theme & {
  85                      color: var(--global--color-dark-gray);
  86  
  87                      &:hover {
  88                          background-color: var(--global--color-dark-gray);
  89                          color: var(--global--color-white);
  90                      }
  91                  }
  92              }
  93          }
  94  
  95          &.wp-block-search__text-button .wp-block-search__button {
  96              // Match the text button size with the icon button.
  97              padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  98          }
  99      }
 100  }
 101  
 102  .wp-block[data-align="center"] > * {
 103      text-align: center;
 104  }
 105  
 106  .wp-block[data-align="center"] {
 107  
 108      .wp-block-search__button-only {
 109  
 110          .wp-block-search__inside-wrapper {
 111              justify-content: center;
 112          }
 113      }
 114  }