Internetstiftelsen Styleguide

Domain Search 

<div class="wrapper-fluid o-domain-search background-snow 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>
    </div>
</div>
 
<div class="wrapper-fluid o-domain-search{{#if white_background}} background-snow{{/if}}{{#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>
	</div>
</div>
 
{
  "hidden": "false",
  "id": "domain-search",
  "addidional_classes": "o-domain-search--narrow",
  "label": "sök en .se- eller .nu-domän",
  "white_background": true
}
  • Content: 
    @charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.organism(domain-search) {
	padding: func.rhythm(2) 0 func.rhythm(1) 0;

	&:not([class*='is-in-mega-menu']) {
		display: none;
		position: absolute;
		z-index: func.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 breakpoint.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: colors.$color-cyberspace;
		text-decoration: underline;

		&:hover,
		&:focus {
			border-bottom: func.to_rem(2px) solid colors.$color-jade;
			border-radius: 0;
			background-color: transparent;
			text-decoration: none;
		}

		[class*='icon'] {
			transform: translateY(func.to_rem(2px));
		}
	}

	@include breakpoint.bp-up(md) {
		padding: func.rhythm(3) func.rhythm(1);
	}

	@include bem.e(list-container) {
		padding: 0 func.rhythm(1) 0 func.rhythm(1);
	}

	@include bem.e(input) {
		display: block;
		width: calc(100% - #{func.rhythm(2)});
		margin-right: func.rhythm(2);
		padding: func.rhythm(1) func.rhythm(2);
		transition: padding 0.25s ease-out;
		border: 0;
		border-radius: var.$border-radius;
		background-color: color.adjust(colors.$color-ash, $lightness: 4%);
		letter-spacing: -0.1px;
		-webkit-appearance: none;

		@include breakpoint.bp-up(md) {
			font-size: func.to_rem(32px);
		}

		@include bem.m(force-focus-look) {
			background-color:  color.adjust(colors.$color-ash, $lightness: 4%);

			&:focus {
				background-color:  color.adjust(colors.$color-ash, $lightness: 4%);
			}
		}
	}

	@include bem.e(list) {
		display: flex;
		flex-wrap: wrap;
		padding: func.rhythm(1) 0 0 0;

		li {
			padding: func.rhythm(1) 0;
			white-space: nowrap;

			+ li {
				border-top: 1px solid colors.$color-concrete;

				@include breakpoint.bp-up(md) {
					padding-bottom: 0;
					border-top: 0;
				}
			}

			a {
				padding: 0 func.rhythm(1);
				border-bottom: 0;
				font-size: func.to_rem(var.$size-medium-plus);
				text-decoration: underline;

				@include breakpoint.bp-up(md) {
					padding: 0;
				}
			}
		}
	}

	@include breakpoint.bp-up(md) {

		@include bem.e(pretext) {
			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);

		@include breakpoint.bp-down(md) {
			font-size: func.to_rem(var.$size-base);
		}

		@include breakpoint.bp-down(sm) {
			padding: func.rhythm(0.6) func.rhythm(1);
			font-size: func.to_rem(var.$size-small);
		}
	}

	@include breakpoint.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: 3.4 KB

No notes defined.