<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"
}
  • Content:
    @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%);
    		}
    
    		@include bp-up(xl) {
    			display: flex;
    		}
    	}
    
    	&[tabindex='-1'] {
    		a,
    		button,
    		input {
    			visibility: hidden;
    		}
    	}
    
    	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;
    	}
    }
    
  • URL: /components/raw/domain-search/_domain-search.scss
  • Filesystem Path: src/organisms/domain-search/_domain-search.scss
  • Size: 2.3 KB

No notes defined.