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

Filter alphabet 

<div class="rh-filter-alphabet">
    <a href="#" class="rh-filter-alphabet-link">A</a>
    <a href="#" class="rh-filter-alphabet-link">B</a>
    <a href="#" class="rh-filter-alphabet-link">C</a>
    <span class="rh-filter-alphabet-link rh-filter-alphabet-link--inactive">D</span>
    <a href="#" class="rh-filter-alphabet-link">E</a>
    <a href="#" class="rh-filter-alphabet-link">F</a>
    <a href="#" class="rh-filter-alphabet-link">G</a>
    <a href="#" class="rh-filter-alphabet-link">H</a>
    <a href="#" class="rh-filter-alphabet-link">I</a>
    <span class="rh-filter-alphabet-link rh-filter-alphabet-link--inactive">J</span>
    <a href="#" class="rh-filter-alphabet-link">K</a>
    <a href="#" class="rh-filter-alphabet-link">L</a>
    <a href="#" class="rh-filter-alphabet-link">M</a>
    <a href="#" class="rh-filter-alphabet-link">N</a>
    <a href="#" class="rh-filter-alphabet-link rh-filter-alphabet-link--active">O</a>
    <a href="#" class="rh-filter-alphabet-link">P</a>
    <a href="#" class="rh-filter-alphabet-link">Q</a>
    <a href="#" class="rh-filter-alphabet-link">R</a>
    <a href="#" class="rh-filter-alphabet-link">S</a>
    <a href="#" class="rh-filter-alphabet-link">T</a>
    <a href="#" class="rh-filter-alphabet-link">U</a>
    <a href="#" class="rh-filter-alphabet-link">V</a>
    <a href="#" class="rh-filter-alphabet-link">W</a>
    <a href="#" class="rh-filter-alphabet-link">X</a>
    <a href="#" class="rh-filter-alphabet-link">Y</a>
    <a href="#" class="rh-filter-alphabet-link">Z</a>
    <a href="#" class="rh-filter-alphabet-link">Å</a>
    <a href="#" class="rh-filter-alphabet-link">Ä</a>
    <a href="#" class="rh-filter-alphabet-link">Ö</a>
</div>
 
<div class="rh-filter-alphabet">
	<a href="#" class="rh-filter-alphabet-link">A</a>
	<a href="#" class="rh-filter-alphabet-link">B</a>
	<a href="#" class="rh-filter-alphabet-link">C</a>
	<span class="rh-filter-alphabet-link rh-filter-alphabet-link--inactive">D</span>
	<a href="#" class="rh-filter-alphabet-link">E</a>
	<a href="#" class="rh-filter-alphabet-link">F</a>
	<a href="#" class="rh-filter-alphabet-link">G</a>
	<a href="#" class="rh-filter-alphabet-link">H</a>
	<a href="#" class="rh-filter-alphabet-link">I</a>
	<span class="rh-filter-alphabet-link rh-filter-alphabet-link--inactive">J</span>
	<a href="#" class="rh-filter-alphabet-link">K</a>
	<a href="#" class="rh-filter-alphabet-link">L</a>
	<a href="#" class="rh-filter-alphabet-link">M</a>
	<a href="#" class="rh-filter-alphabet-link">N</a>
	<a href="#" class="rh-filter-alphabet-link rh-filter-alphabet-link--active">O</a>
	<a href="#" class="rh-filter-alphabet-link">P</a>
	<a href="#" class="rh-filter-alphabet-link">Q</a>
	<a href="#" class="rh-filter-alphabet-link">R</a>
	<a href="#" class="rh-filter-alphabet-link">S</a>
	<a href="#" class="rh-filter-alphabet-link">T</a>
	<a href="#" class="rh-filter-alphabet-link">U</a>
	<a href="#" class="rh-filter-alphabet-link">V</a>
	<a href="#" class="rh-filter-alphabet-link">W</a>
	<a href="#" class="rh-filter-alphabet-link">X</a>
	<a href="#" class="rh-filter-alphabet-link">Y</a>
	<a href="#" class="rh-filter-alphabet-link">Z</a>
	<a href="#" class="rh-filter-alphabet-link">Å</a>
	<a href="#" class="rh-filter-alphabet-link">Ä</a>
	<a href="#" class="rh-filter-alphabet-link">Ö</a>
</div>
 
/* No context defined for this component. */
  • Content: 
    .rh-filter-alphabet {
    /* Box-modell/beteende */
    display: $filter-alphabet--display;
    flex-wrap: $filter-alphabet--flex-wrap;

    /* Visuellt */
    border: $filter-alphabet--border;
    border-radius: $filter-alphabet--border-radius;

    @include medium {
        /* Box-modell/beteende */
        max-width: $filter-alphabet--medium--max-width;
    }

    @include large {
        /* Box-modell/beteende */
        max-width: $filter-alphabet--large--max-width;
    }

    &-link {
        /* Box-modell/beteende */
        padding-top: $filter-alphabet-link--padding-top;
        padding-bottom: $filter-alphabet-link--padding-bottom;
        padding-left: $filter-alphabet-link--padding-left;
        padding-right: $filter-alphabet-link--padding-right;

        /* Typografi */
        text-decoration: $filter-alphabet-link--text-decoration;
        color: $black;
        font-size: $p-small;

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

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

        &:active,
        &:hover,
        &--active {
            /* Visuellt */
            background-color: $filter-alphabet--background-color-active-hover;
            
            /* Typografi */
            color: $filter-alphabet--text-color-active-hover;
        }

        &--inactive {
            /* Visuellt */
            background-color: $filter-alphabet-link--inactive--background-color;

            /* Typografi */
            color: $filter-alphabet-link--inactive--color;

            &:hover {
                /* Visuellt */
                background-color: $filter-alphabet-link--inactive--background-color;

                /* Typografi */
                color: $filter-alphabet-link--inactive--color;
            }
        }

        &:focus {
            /* Visuellt */
            background-color: $filter-alphabet-link--focus--background-color;
            outline: $filter-alphabet-link--focus--outline;

            /* Typografi */
            color: $filter-alphabet-link--focus--color;
        }
    }
}
  • URL: /components/raw/filter-alphabet/_filter-alphabet.scss
  • Filesystem Path: components/Molecules/filter-alphabet/_filter-alphabet.scss
  • Size: 2.1 KB
  • Content: 
    {
    "name": "regionhalland/filter-alphabet",
    "description": "Filter alphabet",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/filter-alphabet/composer.json
  • Filesystem Path: components/Molecules/filter-alphabet/composer.json
  • Size: 299 Bytes
  • Content: 
    /* Molecule - Filter alphabet */
$filter-alphabet--display: flex;
$filter-alphabet--flex-wrap: wrap;
$filter-alphabet--border: $border-thin--standard $grey-dark;
$filter-alphabet--border-radius: $border-radius--standard; //4px

$filter-alphabet--background-color-active-hover: $base3;
$filter-alphabet--text-color-active-hover: $white;

$filter-alphabet-link--focus--background-color: $base3-light;
$filter-alphabet-link--focus--color: $black;
$filter-alphabet-link--focus--outline: none;

//Medium
$filter-alphabet--medium--max-width: 843px;

// Large
$filter-alphabet--large--max-width: 898px;

$filter-alphabet-link--padding-top: 0.9375em; //em(15);
$filter-alphabet-link--padding-bottom: 0.9375em; //em(15);
$filter-alphabet-link--padding-left: 0.625em; //em(10);
$filter-alphabet-link--padding-right: 0.625em; //em(10);
$filter-alphabet-link--text-decoration: none;

$filter-alphabet-link--inactive--background-color: $white;
$filter-alphabet-link--inactive--color: $grey-base;
  • URL: /components/raw/filter-alphabet/filter-alphabet.settings.scss
  • Filesystem Path: components/Molecules/filter-alphabet/filter-alphabet.settings.scss
  • Size: 984 Bytes
  • Handle: @filter-alphabet
  • Preview:
  • Filesystem Path: components/Molecules/filter-alphabet/filter-alphabet.hbs

Filter alphabet

Versionshistorik

  • 1.0.2 Globala variabler används
  • 1.0.0 Första release