<div class="o-domain-search display-flex align-items-center background-snow u-p-3 u-m-x-0">
<form action="/" class="o-domain-search__form" target="_top" method="get" role="search">
<div class="o-domain-search__form-wrapper wrapper display-flex u-p-x-0">
<label for="domain-search-input" class="u-visuallyhidden">Sök ledig domän</label>
<input type="search" class="o-domain-search__input js-search-domain-input" autocomplete="off" placeholder="Sök ledig domän" id="domain-search-input">
<button id="o-domain-search-submit" type="submit" class="a-button a-button--secondary o-domain-search__submit">
<span class="a-button__text">Sök domän</span>
</button>
</div>
</form>
</div>
<div class="o-domain-search display-flex align-items-center background-snow u-p-3 u-m-x-0">
<form action="{{action}}" class="o-domain-search__form" target="_top" method="{{method}}" role="search"{{#if novalidate}} novalidate{{/if}}>
<div class="o-domain-search__form-wrapper wrapper display-flex u-p-x-0">
<label for="{{input_id}}" class="u-visuallyhidden">{{label}}</label>
<input
type="search"
class="o-domain-search__input js-search-domain-input"
autocomplete="off"
placeholder="{{placeholder}}"
id="{{input_id}}"
{{#if value}}value="{{value}}"{{/if}}>
{{> @button el="button" button_type="submit" text=button_text modifiers="secondary o-domain-search__submit" id=button_id}}
</div>
</form>
</div>
{
"action": "/",
"method": "get",
"novalidate": false,
"input_id": "domain-search-input",
"label": "Sök ledig domän",
"placeholder": "Sök ledig domän",
"button_text": "Sök domän",
"button_id": "o-domain-search-submit",
"value": ""
}
@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;
@include mixin.organism(domain-search) {
@include breakpoint.bp-up(md) {
padding: func.rhythm(3) func.rhythm(1);
}
@include bem.e(form) {
width: 100%;
}
@include bem.e(input) {
display: block;
width: calc(100% - #{func.rhythm(2)});
padding: func.rhythm(1) func.rhythm(2);
transition: padding 0.25s ease-out;
border: 1px solid colors.$color-granit;
border-top-left-radius: var.$border-radius;
border-bottom-left-radius: var.$border-radius;
background-color: color.adjust(colors.$color-ash, $lightness: 4%);
letter-spacing: -0.1px;
-webkit-appearance: none;
@include breakpoint.bp-up(lg) {
font-size: func.to_rem(32px);
}
}
@include bem.e(submit) {
flex-shrink: 0;
padding-right: func.rhythm(4);
padding-left: func.rhythm(4);
font-size: func.to_rem(24px);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@include breakpoint.bp-down(md) {
font-size: func.to_rem(var.$size-base);
}
@include breakpoint.bp-down(xs) {
padding: func.rhythm(0.6) func.rhythm(1);
font-size: func.to_rem(var.$size-medium);
}
}
}
No notes defined.