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

Filter 

<button onclick="toggleMenu()" class="rh-filter" id="dropdownBtn">	
  Filter
  <span class="rh-filter-icon"></span>
</button>
<div id="myDropdown" class="rh-filter-menu" aria-labelledby="dropdownBtn">
    <div class="rh-filter-menu-triangle"></div>
    <div class="rh-filter-menu-border"></div>
    <ul class="rh-filter-menu-content">
        <li class="rh-filter-menu-item" onclick="selectItem(this)">Placeholder1</li>
        <li class="rh-filter-menu-item" onclick="selectItem(this)">Placeholder2</li>
        <li class="rh-filter-menu-item" onclick="selectItem(this)">Placeholder3</li>
    </ul>
</div>
 
<button onclick="toggleMenu()" class="{{name}}" id="dropdownBtn">	
  {{ text }}
  <span class="rh-filter-icon"></span>
</button>
<div id="myDropdown" class="rh-filter-menu" aria-labelledby="dropdownBtn">
  <div class="rh-filter-menu-triangle"></div>
  <div class="rh-filter-menu-border"></div>
  <ul class="rh-filter-menu-content">
    <li class="rh-filter-menu-item" onclick="selectItem(this)">Placeholder1</li>      
    <li class="rh-filter-menu-item" onclick="selectItem(this)">Placeholder2</li>
    <li class="rh-filter-menu-item" onclick="selectItem(this)">Placeholder3</li>
  </ul>
</div>
 
{
  "text": "Filter",
  "name": "rh-filter"
}
  • Content: 
    .rh-filter {
    /* Positionering */
    align-items: center;

    /* Box-modell/beteende */
    display: flex;
    width: 90%;
    outline: none;
    padding-left: 0.9375em; //em(15);
    padding-top: 0.625em; //em(10);
    padding-right: 0.9375em; //em(15);
    padding-bottom: 0.625em; //em(10);

    /* Visuellt */
    border: $FILTER--BORDER;
    border-radius: $FILTER--BORDER-RADIUS;
    background-color: $FILTER--BACKGROUND-COLOR;

    /* Typografi */
    font-size: $FILTER--SMALL-FONT-SIZE;
    color: $FILTER--TEXT-COLOR;

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

    &-icon {
        /* Box-modell/beteende */
        margin-left: auto;

        /* Typografi */
        @if $FILTER__ICON--COLOR {
            color: $FILTER__ICON--COLOR;
        }

        &:after {
            /* Box-modell/beteende */
            display: inline-block;
            margin: 0;


            /* Typografi */
            font-size: $FILTER__ICON--SMALL-FONT-SIZE;
            font-family: $FILTER__ICON--FONT-FAMILY;

            /* Blandat/övrigt */
            content: "\e842";
        }

        @include medium {
            /* Typografi */
            font-size: $FILTER__ICON--MEDIUM-FONT-SIZE;
        }

        @include large {
            /* Typografi */
            font-size: $FILTER__ICON--LARGE-FONT-SIZE;
        }
    }

    &:hover {
        /* Visuellt */
        border: $FILTER--HOVER-BORDER;
    }

    &:disabled {
        /* Visuellt */
        background-color: $FILTER--DISABLED-BACKGROUND-COLOR;
        border: $FILTER--DISABLED-BORDER;

        /* Typografi */
        color: $FILTER--DISABLED-TEXT-COLOR;

        /* Blandat/övrigt */
        cursor: unset;
    }

    @include medium {
        /* Typografi */
        font-size: $FILTER--MEDIUM-FONT-SIZE;
    }

    @include large {
        /* Typografi */
        font-size: $FILTER--LARGE-FONT-SIZE;
    }
}

.rh-filter-menu {
    /* Positionering */
    position: relative;
    z-index: 1;

    /* Box-modell/beteende */
    display: none;
    width: 100%;
    margin-top: 0.3125em; //em(5);

    /* Visuellt */
    border-radius: $FILTER__MENU--BORDER-RADIUS;
    -webkit-border-radius: $FILTER__MENU--BORDER-RADIUS; //em(5); // Safari 3-4, iOS 1-3.2, Android 1.6-
    box-shadow: $FILTER__MENU--BOX-SHADOW;
    -webkit-box-shadow: $FILTER__MENU--BOX-SHADOW; // Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+
    border: $FILTER__MENU--BORDER;
    background-color: $FILTER__MENU--BACKGROUND-COLOR;

    &-triangle {
        /* Positionering */
        z-index: 3;
        position: absolute;
        top: -1.75em; //em(-28);
        left: 0.9375em; //em(15);

        /* Visuellt */
        border-top: 15px solid transparent;
        border-bottom: 15px solid $white;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
    }

    &-border {
        /* Positionering */
        z-index: 2;
        position: absolute;
        top: -1.8125em; //em(-29);
        left: 0.9375em; //em(15);

        /* Box-modell/beteende */
        margin-top: -0.0625em; //em(-1);

        /* Visuellt */
        border-top: 15px solid transparent;
        border-bottom: $FILTER__MENU-BORDER-BOTTOM;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
    }

    &-content {
        /* Box-modell/beteende */
        padding-top: 0.25em; //em(4);
        padding-bottom: 0.25em; //em(4);
    }

    &-item {
        /* Box-modell/beteende */
        padding-left: 1em; //em(16);
        padding-top: 0.5625em; //em(9);
        padding-right: 1em; //em(16);
        padding-bottom: 0.5625em; //em(9);

        /* Typografi */
        font-size: $FILTER__MENU-ITEM--SMALL-FONT-SIZE;

        &:hover {
            /* Typografi */
            font-weight: bold;

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

        @include medium {
            /* Typografi */
            font-size: $FILTER__MENU-ITEM--MEDIUM-FONT-SIZE;
        }

        @include large {
            /* Typografi */
            font-size: $FILTER__MENU-ITEM--LARGE-FONT-SIZE;
        }
    }
}

.rh-filter-show {
    /* Box-modell/beteende */
    //display: block !important;
    display: block;
}

.rh-filter-selected {
    /* Typografi */
    //color: black !important;
    @if $FILTER-SELECTED--TEXT-COLOR {
        color: $FILTER-SELECTED--TEXT-COLOR;
    }
}

.rh-filter-active {
    /* Visuellt */
    //background-color: $yellow-background !important;
    //border: 1px solid $complementary2 !important;
    background-color: $FILTER-ACTIVE--BACKGROUND-COLOR;
    border: $FILTER-ACTIVE--BORDER;

    .rh-filter-icon:after {
        /* Blandat/övrigt */
        content: "\e845";
    }
}
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: components/Atoms/filter/_filter.scss
  • Size: 4.7 KB
  • Content: 
    {
    "name": "regionhalland/filter",
    "description": "Atomen filter",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/filter/composer.json
  • Filesystem Path: components/Atoms/filter/composer.json
  • Size: 285 Bytes
  • Content: 
    function toggleMenu() {
  document.getElementById("myDropdown").classList.toggle("rh-filter-show");
  document.getElementById("dropdownBtn").classList.toggle("rh-filter-active");
}

function selectItem(sel) {
  document.getElementById("dropdownBtn").classList.toggle("rh-filter-active");
  document.getElementById("dropdownBtn").style.color = "black";
  document.getElementById("myDropdown").classList.toggle("rh-filter-show");

  var text = document.getElementById("dropdownBtn").firstChild;
  text.data = sel.innerText;
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.rh-filter')) {
    var dropdowns = document.getElementsByClassName("rh-filter-menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('rh-filter-show')) {
        openDropdown.classList.remove('rh-filter-show');
      }
    }

    var btn = document.getElementsByClassName("rh-filter");
    var i;
    for (i = 0; i < btn.length; i++) {
      var activeBtn = btn[i];
      if (activeBtn.classList.contains('rh-filter-active')) {
        activeBtn.classList.remove('rh-filter-active');
      }
    }
  }
}
  • URL: /components/raw/filter/filter.js
  • Filesystem Path: components/Atoms/filter/filter.js
  • Size: 1.2 KB
  • Content: 
    /* Atom - Filter */
// --- Base settings ---
$FILTER__MAIN--COLOR: $base3;
$FILTER__MAIN--BACKGROUND-COLOR: $base3-light;
// --- End of base settings ---

$FILTER--BORDER: $border-thin--standard $grey-light;
$FILTER--BORDER-RADIUS: $border-radius--standard;
$FILTER--BACKGROUND-COLOR: $white;
$FILTER--TEXT-COLOR: $grey-dark;
$FILTER--SMALL-FONT-SIZE: $p-small;
$FILTER--MEDIUM-FONT-SIZE: $p-medium;
$FILTER--LARGE-FONT-SIZE: $p-large;

$FILTER--HOVER-BORDER: $border-thin--standard $grey-dark;

$FILTER--DISABLED-BACKGROUND-COLOR: $grey-lightest;
$FILTER--DISABLED-BORDER: $border-thin--standard $grey-light;
$FILTER--DISABLED-TEXT-COLOR: $grey-base;

$FILTER__ICON--COLOR: false; // false - Ex: $black
$FILTER__ICON--FONT-FAMILY: $icon--font-family;
$FILTER__ICON--SMALL-FONT-SIZE: $h4-small;
$FILTER__ICON--MEDIUM-FONT-SIZE: $h4-medium;
$FILTER__ICON--LARGE-FONT-SIZE: $h4-large;

$FILTER__MENU--BORDER-RADIUS: $border-radius--standard;
$FILTER__MENU--BOX-SHADOW: $box-shadow--standard $color-shadow;
$FILTER__MENU--BORDER: $border-thin--standard $FILTER__MAIN--COLOR;
$FILTER__MENU--BACKGROUND-COLOR: $white;

$FILTER__MENU-BORDER-BOTTOM: 15px solid $FILTER__MAIN--COLOR;

$FILTER__MENU-ITEM--SMALL-FONT-SIZE: $p-small;
$FILTER__MENU-ITEM--MEDIUM-FONT-SIZE: $p-medium;
$FILTER__MENU-ITEM--LARGE-FONT-SIZE: $p-large;

$FILTER-SELECTED--TEXT-COLOR: false; // false - Ex: $black

$FILTER-ACTIVE--BACKGROUND-COLOR: $FILTER__MAIN--BACKGROUND-COLOR;
$FILTER-ACTIVE--BORDER: $border-thin--standard $FILTER__MAIN--COLOR;
  • URL: /components/raw/filter/filter.settings.scss
  • Filesystem Path: components/Atoms/filter/filter.settings.scss
  • Size: 1.5 KB

Atomen “Filter”

Implementera inte. Denna används inte på någon webbplats idag, men finns kvar då vi planerar att granska den och se om vi kan färdigställa den till användbart skick.

Versionshistorik

  • 1.0.0.20200126 (2020-01-26)
    • Filen .settings.scss skapats.
    • Globala variabler används.
  • 1.0.0.20191121 Skapat denna readme efter flytt till gitrepo