Internetstiftelsen Styleguide

Domain Search 

<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>

                    <button href="#" class="a-button a-button--icon" data-toggle-icon-target="myIcon" data-toggle-icon="arrow-forwards|check" data-toggle-text="Button with icon|Foo" data-toggle-target="boo">
                        <span class="a-button__text" id="boo">Button with icon</span>
                        <svg class="icon a-button__icon" id="myIcon">
                            <use xlink:href="#icon-arrow-forwards"></use>
                        </svg>
                    </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%);

			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;
	}
}
  • URL: /components/raw/domain-search/_domain-search.scss
  • Filesystem Path: src/organisms/domain-search/_domain-search.scss
  • Size: 2.6 KB

No notes defined.