BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Search: Large 

<div class="rh-search-bar">
    <input type="text" class="rh-search-bar__input rh-search-bar__input--large" placeholder="Placeholder">
    <button type="submit" class="rh-search-bar__button rh-search-bar__button--large">
		Sök
	</button>
</div>
 
<div class="rh-search-bar">
	<input type="text" class="rh-search-bar__input{{#if modifier}} rh-search-bar__input--{{modifier}}{{/if}}" placeholder="Placeholder"{{#if disabled}} disabled{{/if}}>
	<button type="submit" class="rh-search-bar__button{{#if modifier}} rh-search-bar__button--{{modifier}}{{/if}}"{{#if disabled}} disabled{{/if}}>
		Sök
	</button>
</div>
 
{
  "caption": "Search field",
  "name": "rh-search-field",
  "modifier": "large"
}
  • Content: 
    .rh-search-bar {
    /* Positionering */
    align-items: center;

    /* Box-modell/beteende */
    display: flex;
    width: 100%;

    .rh-search-bar__input {
        /* Box-modell/beteende */
        width: 100%;
        padding: $search-field__term--padding; //em(10);
        margin-right: -5px;
        height: $search-field__box-height; //40px

        /* Visuellt */
        border-top: $search-field__term--border-top; //1px solid $grey-light;
        border-left: $search-field__term--border-left; //1px solid $grey-light;
        border-bottom: $search-field__term--border-bottom; //1px solid $grey-light;
        border-right: $search-field__term--border-right; //0;
        border-radius: $search-field__term--border-radius; //4px 0 0 4px;

        /* Typografi */
        @if $search-field__term--color {
            color: $search-field__term--color;
        }
        @if $search-field__term--font-size {
            font-size: $search-field__term--font-size;
        }
        @if $search-field__term--font-family {
            font-family: $search-field__term--font-family;
        }

        /* Blandat/övrigt */
        outline: none;

        @include medium {
            @if $search-field__term--font-size-medium {
                /* Typografi */
                font-size: $search-field__term--font-size-medium;
            }
        }

        @include large {
            @if $search-field__term--font-size-large {
                /* Typografi */
                font-size: $search-field__term--font-size-large;
            }
        }

        &::placeholder {
            /* Chrome, Firefox, Opera, Safari 10.1+ */
            
            /* Typografi */
            color: $grey-darker;

            /* Blandat/övrigt */
            opacity: 1;
            /* Firefox */
        }

        &:-ms-input-placeholder {
            /* Internet Explorer 10-11 */

            /* Typografi */
            color: $grey-darker;
        }

        &::-ms-input-placeholder {
            /* Microsoft Edge */

            /* Typografi */
            color: $grey-darker;
        }

        &:focus {
            /* Visuellt */
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            border-right: 0;
        }

        &--large {
            /* Box-modell/beteende */
            @if $search-field__box-height-larger {
                height: $search-field__box-height-larger;
            }
            padding: em(15);

            /* Typografi */
            font-size: $p-large;

            @include large {
                /* Box-modell/beteende */
                padding: em(20);
            }
        }

        &:disabled {
            /* Visuellt */
            border: 1px solid $grey-light;
            background-color: $grey-lightest;
            
            /* Blandat/övrigt */
            cursor: not-allowed;
            
            &::placeholder {
                /* Chrome, Firefox, Opera, Safari 10.1+ */
                
                /* Typografi */
                color: $grey-base;

                /* Blandat/övrigt */
                opacity: 1;
                /* Firefox */
            }

            &:-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                /* Typografi */
                color: $grey-base;
            }

            &::-ms-input-placeholder {
                /* Microsoft Edge */
                /* Typografi */
                color: $grey-base;
            }
        }
    }

    .rh-search-bar__button {
        /* Box-modell/beteende */
        height: $search-field__box-height; //40px
        
        @if $search-field__button--padding-top {
            padding-top: $search-field__button--padding-top; //em(10);
        }
        @if $search-field__button--padding-right {
            padding-right: $search-field__button--padding-right; //em(10);
        }
        @if $search-field__button--padding-bottom {
            padding-bottom: $search-field__button--padding-bottom; //em(10);
        }
        @if $search-field__button--padding-left {
            padding-left: $search-field__button--padding-left; //em(10);
        }

        /* Visuellt */
        @if $search-field__button--border {
            border: $search-field__button--border;
        }
        border-radius: $search-field__button--border-radius;
        background: $search-field__button--background;

        /* Typografi */
        color: $search-field__button--color;
        text-align: center;
        font-size: $search-field__button--font-size;
        font-weight: $search-field__button--font-weight;

        min-width: 4em;

        /* Blandat/övrigt */
        cursor: pointer;

        @include medium {
            /* Typografi */
            font-size: $p-medium;
        }

        @include large {
            /* Typografi */
            font-size: $p-large;
        }

        &:active {
            /* Visuellt */
            border: 1px solid $complementary2;
            background: $complementary2;
        }

        &--large {
            /* Box-modell/beteende */
            @if $search-field__box-height-larger {
                height: $search-field__box-height-larger;
            }
            padding: em(15);

            /* Typografi */
            font-size: $p-large;

            @include large {
                /* Box-modell/beteende */
                padding: em(20);
            }
        }

        &:disabled {
            /* Visuellt */
            border: 1px solid $grey-light;
            background-color: $grey-light;

            /* Typografi */
            color: $grey-dark;

            /* Blandat/övrigt */
            cursor: not-allowed;
        }
    }
}
  • URL: /components/raw/search-field/_search-field.scss
  • Filesystem Path: components/Atoms/search-field/_search-field.scss
  • Size: 5.8 KB
  • Content: 
    {
    "name": "regionhalland/search-field",
    "description": "Atomen search-field",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/search-field/composer.json
  • Filesystem Path: components/Atoms/search-field/composer.json
  • Size: 297 Bytes
  • Content: 
    /* Atoms - Search field */
$search-field__box-height: 2.5em; //40px
$search-field__box-height-larger: 3.75em; //60px

$search-field__term--padding: 0.625em;

$search-field__term--border-styling: $border-thin--standard $grey-light;
$search-field__term--border-top: $search-field__term--border-styling;
$search-field__term--border-left: $search-field__term--border-styling;
$search-field__term--border-bottom: $search-field__term--border-styling;
$search-field__term--border-right: 0;
$search-field__term--border-radius: 0.25em 0 0 0.25em;

$search-field__term--color: $grey-darker;
$search-field__term--font-size: $font-size--xs;
$search-field__term--font-size-medium: $font-size--medium;
$search-field__term--font-size-large: $font-size--medium;
$search-field__term--font-family: false;

$search-field__button--padding-top: false;
$search-field__button--padding-right: false;
$search-field__button--padding-bottom: false;
$search-field__button--padding-left: false;

$search-field__button--border: $border-thin--standard $base3-dark;
$search-field__button--border-radius: 0 0.25em 0.25em 0;
$search-field__button--background: $base3;
$search-field__button--color: $white;
$search-field__button--font-size: $p-small;
$search-field__button--font-weight: normal;
  • URL: /components/raw/search-field/search-field.settings.scss
  • Filesystem Path: components/Atoms/search-field/search-field.settings.scss
  • Size: 1.3 KB

Atomen “Search field”

Planerad utveckling

  • Dela upp i separata atomer för input och button (dagens atom blir då molekylen search bar)

Versioner

  • 1.0.0.20200124 Globala variabler används
  • 1.0.0.20191227 Brutit isär till separata varianter + nya klassnamn enligt BEM.
  • 1.0.0.20191121 Flyttat till gitrepo
  • 1.0.0.20191112 Status uppdaterad och README skapad