<div class="wrapper-fluid o-domain-search o-domain-search--narrow" id="domain-search" aria-hidden="false">
<div class="wrapper u-p-x-0">
<div class="grid">
<div class="display-flex align-items-center">
<div class="grid display-flex u-p-x-0">
<label for="" class="u-visuallyhidden">sök en .se- eller .nu-domän</label>
<input type="search" class="o-domain-search__input js-search-domain-input" autocomplete="off" placeholder="sök en .se- eller .nu-domän" id="">
<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>
</div>
<div class="row o-domain-search__list-container">
<div class="grid">
<ul class="o-domain-search__list u-list-clean row">
<li class="grid-18 grid-md-7 grid-xl-4">
<a href="https://old.iis.se/domaner/registrera/tips/">Hur registrerar jag en domän?
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li class="grid-18 grid-md-10 grid-xl-4">
<a href="https://old.iis.se/domaner/kontakta-kundtjanst/?q=">
Ändra mina befintliga uppgifter
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li class="grid-sm-18 grid-md-7 grid-xl-4">
<a href="https://old.iis.se/domaner/aterforsaljare/">
Hitta återförsäljare av domäner
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li class="grid-18 grid-md-10 grid-xl-4">
<a href="https://old.iis.se/domaner/free/?q=">
Ta reda på ägaren av ett domännamn
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper-fluid o-domain-search{{#if addidional_classes}} {{addidional_classes}}{{/if}}" {{#if id}}id="{{id}}"{{/if}} aria-hidden="{{hidden}}">
<div class="wrapper u-p-x-0">
<div class="grid">
<div class="display-flex align-items-center">
<div class="grid display-flex u-p-x-0">
<label for="{{input_id}}" class="u-visuallyhidden">{{#if label}}{{label}}{{/if}}</label>
<input type="search" class="o-domain-search__input js-search-domain-input" autocomplete="off" {{#if label}}placeholder="{{label}}"{{/if}} id="{{input_id}}">
{{> @button el="button" button_type="submit" text="Sök domän" modifiers="secondary o-domain-search__submit" id="o-domain-search-submit"}}
</div>
</div>
<div class="row o-domain-search__list-container">
<div class="grid">
<ul class="o-domain-search__list u-list-clean row">
<li class="grid-18 grid-md-7 grid-xl-4">
<a href="https://old.iis.se/domaner/registrera/tips/">Hur registrerar jag en domän?
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li class="grid-18 grid-md-10 grid-xl-4">
<a href="https://old.iis.se/domaner/kontakta-kundtjanst/?q=">
Ändra mina befintliga uppgifter
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li class="grid-sm-18 grid-md-7 grid-xl-4">
<a href="https://old.iis.se/domaner/aterforsaljare/">
Hitta återförsäljare av domäner
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li class="grid-18 grid-md-10 grid-xl-4">
<a href="https://old.iis.se/domaner/free/?q=">
Ta reda på ägaren av ett domännamn
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{
"hidden": "false",
"id": "domain-search",
"addidional_classes": "o-domain-search--narrow",
"label": "sök en .se- eller .nu-domän"
}
@charset 'UTF-8';
@include organism(domain-search) {
padding: rhythm(2) 0 rhythm(1) 0;
background-color: $color-snow;
&:not([class*='is-in-mega-menu']) {
display: none;
position: absolute;
z-index: z_index(middlegroundImportant);
bottom: 0;
transform: translateY(0);
transition: transform 0.25s ease-out;
&[aria-hidden='false'] {
@extend %box-shadow;
transform: translateY(100%);
a,
button,
input {
animation-direction: reverse;
}
}
@include bp-up(xl) {
display: flex;
}
&[aria-hidden='true'] {
a,
button,
input {
display: none;
animation: 0 ease-in 0s 2s reverse both paused fadeIn;
}
}
}
a {
color: $color-cyberspace;
text-decoration: underline;
&:hover,
&:focus {
border-bottom: rem(2px) solid $color-jade;
border-radius: 0;
background-color: transparent;
text-decoration: none;
}
[class*='icon'] {
transform: translateY(rem(2px));
}
}
@include bp-up(md) {
padding: rhythm(3) rhythm(1);
}
@include e(list-container) {
padding: 0 rhythm(1) 0 rhythm(1);
}
@include e(input) {
display: block;
width: calc(100% - #{rhythm(2)});
margin-right: rhythm(2);
padding: rhythm(1) rhythm(2);
transition: padding 0.25s ease-out;
border: 0;
border-radius: $border-radius;
background-color: lighten($color-ash, 4%);
letter-spacing: -0.1px;
-webkit-appearance: none;
@include bp-up(md) {
font-size: rem(32px);
}
@include m(force-focus-look) {
background-color: lighten($color-ash, 4%);
&:focus {
background-color: lighten($color-ash, 4%);
}
}
}
@include e(list) {
display: flex;
flex-wrap: wrap;
padding: rhythm(1) 0 0 0;
li {
padding: rhythm(1) 0;
white-space: nowrap;
+ li {
border-top: 1px solid $color-concrete;
@include bp-up(md) {
padding-bottom: 0;
border-top: 0;
}
}
a {
padding: 0 rhythm(1);
border-bottom: 0;
font-size: rem($size-medium-plus);
text-decoration: underline;
@include bp-up(md) {
padding: 0;
}
}
}
}
@include bp-up(md) {
@include e(pretext) {
font-size: rem(32px);
}
}
@include e(submit) {
flex-shrink: 0;
padding-right: rhythm(4);
padding-left: rhythm(4);
font-size: rem(24px);
@include bp-down(md) {
font-size: rem($size-base);
}
@include bp-down(sm) {
padding: rhythm(0.6) rhythm(1);
font-size: rem($size-small);
}
}
@include bp-up(xl) {
display: none;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
display: none;
}
1% {
opacity: 1;
display: block;
}
100% {
opacity: 1;
display: block;
}
}
No notes defined.