You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.7 KiB
57 lines
1.7 KiB
/** |
|
* @file |
|
* Search block — input styling. |
|
* |
|
* The submit button inherits from .button / .button--primary (Drupal applies |
|
* those classes automatically); see css/components/button.css. |
|
* |
|
* Markup hooks come from templates/block/block--search-form-block.html.twig |
|
* (outer .block-search) and Drupal's Form API (.form-search on the input). |
|
*/ |
|
@layer components { |
|
.block-search .form-search { |
|
padding: var(--size-2) var(--size-3); |
|
border: 1px solid var(--surface-2); |
|
border: 1px solid #ccc; |
|
border-radius: var(--radius-2); |
|
font: inherit; |
|
} |
|
.block-search .form-search:focus { |
|
outline: 2px solid var(--upei-red); |
|
outline-offset: 2px; |
|
} |
|
|
|
/* Icon-on-input treatment: the .block-search__field wrapper (added in |
|
templates/block/block--search-form-block.html.twig) provides the |
|
positioning context for an absolute-positioned icon overlaid on |
|
the left side of the search input. |
|
|
|
The SVG is sized via `width` / `height` here rather than on the |
|
<svg> root, which lets the same icon scale to any context just by |
|
changing the .block-search__icon size. The `color` property |
|
recolors the icon because the SVG uses stroke="currentColor". */ |
|
.block-search__field { |
|
position: relative; |
|
display: inline-flex; |
|
align-items: center; |
|
} |
|
.block-search__icon { |
|
position: absolute; |
|
left: var(--size-3); |
|
top: 50%; |
|
width: 1em; |
|
height: 1em; |
|
transform: translateY(-50%); |
|
color: var(--text-2); |
|
pointer-events: none; |
|
} |
|
.block-search__icon svg { |
|
width: 100%; |
|
height: 100%; |
|
display: block; |
|
} |
|
.block-search .form-search { |
|
padding-left: calc(var(--size-3) * 2 + 1em); |
|
} |
|
|
|
}
|
|
|