// vf-search @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ @import 'vf-search.variables.scss'; // embl-grid @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ .vf-form--search { .vf-button { align-self: start; margin: calc(#{space(400)} / 2); margin: calc(var(--vf-sidebar--spacing, #{space(400)}) / 2); } .vf-button__icon { fill: neutral(0); height: 1em; width: 1em; } } .vf-form--search.vf-sidebar { --vf-sidebar-spacing: #{space(200)}; --vf-sidebar-main-width: 60%; overflow: visible; .vf-form__item { position: relative; } .vf-form__item:last-of-type { padding-right: #{space(100)}; } .vf-form__helper { flex-basis: 100%; margin-left: calc(var(--vf-sidebar-spacing) / 2); } > * { align-items: center; } } .vf-form--search--responsive { @media (max-width: $vf-breakpoint--sm - 1) { .vf-button { margin-left: space(0); padding: .5rem; } .vf-button__text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } } @media (min-width: $vf-breakpoint--sm) { .vf-button__icon { display: none; } } } .vf-form--search--mini { .vf-button { margin-left: space(0); padding: .5rem; } } .vf-form--search__results-list { --vf-stack-margin--custom: 0; background-color: neutral(0); border: 2px solid color(grey); border-top: 0; position: absolute; width: calc(100% - 4px); z-index: 5150; .vf-list__item { margin: 0; padding: 12px 8px; &:hover { background-color: color(blue--light); cursor: pointer; } } .vf-form__input:focus + & { border-color: color(grey--dark); box-shadow: 0 0 0 .0625rem color(grey--dark); } } .vf-container--search { --vf-container__background-color: var(--vf-container--search__background-color); --vf-container__padding: #{space(800)} 0; // This should be part of the as yet (26/03/21) created generic `vf-container` container. background-color: neutral(0); background-color: var(--vf-container__background-color, #{neutral(0)}); padding: 1rem 0; padding: var(--vf-container__padding, 1rem 0); }