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

Buttongroup elements: Default 

<div class="rh-buttongroup__button">
    <a class="rh-buttongroup__button-text" href="#">Default</a> <span class="rh-label rh-label--small">100</span>
</div>
 
<div class="rh-buttongroup__button{{#if modifier}} rh-buttongroup__button--{{modifier}}{{/if}}">
    <a class="rh-buttongroup__button-text" href="#">{{text}}</a> {{render '@label'}}
</div>
 
{
  "text": "Default",
  "name": "buttongroup button",
  "extendClass": "",
  "labelcontent": "12"
}
  • Content: 
    .rh-buttongroup__button {
    /* Box-modell/beteende */
    min-width: $BUTTONGROUP__BUTTON--MIN-WIDTH;

    /* Visuellt */
    background-color: $BUTTONGROUP__BUTTON--BACKGROUND-COLOR;
    border-bottom: $BUTTONGROUP__BUTTON--BORDER-BOTTOM;
    padding:$BUTTONGROUP__BUTTON--PADDING;

    &--left {
        /* Visuellt */
        border-bottom-left-radius: $BUTTONGROUP__BUTTON--LEFT--BORDER-BOTTOM-LEFT-RADIUS;
        border-top-left-radius: $BUTTONGROUP__BUTTON--LEFT--BORDER-TOP-LEFT-RADIUS;
        border-right: $BUTTONGROUP__BUTTON--LEFT--BORDER-RIGHT;
    }

    &--right {
        /* Visuellt */
        border-bottom-right-radius: $BUTTONGROUP__BUTTON--RIGHT--BORDER-BOTTOM-RIGHT-RADIUS;
        border-top-right-radius: $BUTTONGROUP__BUTTON--RIGHT--BORDER-TOP-RIGHT-RADIUS;
        border-left: $BUTTONGROUP__BUTTON--RIGHT--BORDER-LEFT;
    }

    &--active,&:focus,&:active,&:hover {
        /* Visuellt */
        background-color: $BUTTONGROUP__BUTTON--ACTIVE--BACKGROUND-COLOR;
        border-bottom: $BUTTONGROUP__BUTTON--ACTIVE--BORDER-BOTTOM;
    }
}

.rh-buttongroup__button-text {
    /* Typografi */
    color: $BUTTONGROUP__BUTTON-TEXT--COLOR;
    text-decoration: $BUTTONGROUP__BUTTON-TEXT--TEXT-DECORATION;
}
  • URL: /components/raw/buttongroup-elements/_buttongroup-elements.scss
  • Filesystem Path: components/Molecules/buttongroup-elements/_buttongroup-elements.scss
  • Size: 1.2 KB
  • Content: 
    /* -------------------------------- */
/* Molekylen "Buttongroup elements" */
/* -------------------------------- */

// Grundbeteende
$BUTTONGROUP__BUTTON--BACKGROUND-COLOR: $grey-lighter;
$BUTTONGROUP__BUTTON--BORDER-BOTTOM: 4px solid $grey-dark;
$BUTTONGROUP__BUTTON--MIN-WIDTH: 6em;
$BUTTONGROUP__BUTTON--PADDING: 2ex;

// left-modifier
$BUTTONGROUP__BUTTON--LEFT--BORDER-BOTTOM-LEFT-RADIUS: $border-radius--large;
$BUTTONGROUP__BUTTON--LEFT--BORDER-RIGHT: $border-thin--standard $grey-base;
$BUTTONGROUP__BUTTON--LEFT--BORDER-TOP-LEFT-RADIUS: $border-radius--large;

// right-modifier
$BUTTONGROUP__BUTTON--RIGHT--BORDER-BOTTOM-RIGHT-RADIUS: $border-radius--large;
$BUTTONGROUP__BUTTON--RIGHT--BORDER-LEFT: $border-thin--standard $grey-base;
$BUTTONGROUP__BUTTON--RIGHT--BORDER-TOP-RIGHT-RADIUS: $border-radius--large;

// active-modifier och pseudoklasserna foucs, active och hover
$BUTTONGROUP__BUTTON--ACTIVE--BACKGROUND-COLOR: $grey-lightest;
$BUTTONGROUP__BUTTON--ACTIVE--BORDER-BOTTOM: 4px solid $complementary2;

// Länkarna buttongroup__button-text
$BUTTONGROUP__BUTTON-TEXT--COLOR: $black;
$BUTTONGROUP__BUTTON-TEXT--TEXT-DECORATION: none;
  • URL: /components/raw/buttongroup-elements/buttongroup-elements.settings.scss
  • Filesystem Path: components/Molecules/buttongroup-elements/buttongroup-elements.settings.scss
  • Size: 1.2 KB
  • Content: 
    {
  "name": "regionhalland/buttongroup-elements",
  "description": "Buttongroup elements",
  "type": "styleguide-molecule",
  "license": "GPL-3.0",
  "authors": [
    {
        "name": "Region Halland",
        "email": "webbplatser@regionhalland.se"
    }
  ],
  "require": {}
}
  • URL: /components/raw/buttongroup-elements/composer.json
  • Filesystem Path: components/Molecules/buttongroup-elements/composer.json
  • Size: 279 Bytes

Buttongroup elements

Innehåller de knappar som används för att skapa buttongroup-organismen.

Beroenden

  • Använder atomen “labels”
  • Ingår i organismen “buttongroup”

Versioner

1.0.0.20200130

  • Globala variabler används

1.0.0.20200123

  • Justerat rendering av label efter att atomen döpts om.

1.0.0.20191107

  • Första version