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

Buttongroup 

<div class="rh-buttongroup">
    <div class="rh-buttongroup__button rh-buttongroup__button--left">
        <a class="rh-buttongroup__button-text" href="#">Left</a> <span class="rh-label rh-label--small">100</span>
    </div>
    <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 rh-buttongroup__button--right">
        <a class="rh-buttongroup__button-text" href="#">Right</a> <span class="rh-label rh-label--small">100</span>
    </div>
</div>
 
<div class="rh-buttongroup">
    {{render '@buttongroup-elements--left'}}
    {{render '@buttongroup-elements'}}
    {{render '@buttongroup-elements--right'}}
</div>
 
/* No context defined for this component. */
  • Content: 
    .rh-buttongroup {
    /* Box-modell/beteende */
    display: $BUTTONGROUP--DISPLAY;
    justify-content: $BUTTONGROUP--JUSTIFY-CONTENT;

    /* Typografi */
    text-align: $BUTTONGROUP--TEXT-ALIGN;

    @include medium {
        justify-content: $BUTTONGROUP--MEDIUM--JUSTIFY-CONTENT;
    }
}

.rh-buttongroup__button .rh-labels {
    /* Box-modell/beteende */
    display: $BUTTONGROUP__BUTTON--LABELS--DISPLAY;

    @include medium {
        /* Box-modell/beteende */
        display: $BUTTONGROUP__BUTTON--LABELS--MEDIUM--DISPLAY;
    }
}
  • URL: /components/raw/buttongroup/_buttongroup.scss
  • Filesystem Path: components/Organisms/buttongroup/_buttongroup.scss
  • Size: 542 Bytes
  • Content: 
    /* ------------------------ */
/* Organismen "Buttongroup" */
/* ------------------------ */

// Buttongroup
$BUTTONGROUP--DISPLAY: flex;
$BUTTONGROUP--JUSTIFY-CONTENT: center;
$BUTTONGROUP--TEXT-ALIGN: center;
$BUTTONGROUP--MEDIUM--JUSTIFY-CONTENT: left;

// Labels inkluderade i "buttongroup button"
$BUTTONGROUP__BUTTON--LABELS--DISPLAY: none;
$BUTTONGROUP__BUTTON--LABELS--MEDIUM--DISPLAY: inline; // Visa from medium eller inte
  • URL: /components/raw/buttongroup/buttongroup.settings.scss
  • Filesystem Path: components/Organisms/buttongroup/buttongroup.settings.scss
  • Size: 433 Bytes
  • Content: 
    {
    "name": "regionhalland/buttongroup",
    "description": "Buttongroup-organismen",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/buttongroup/composer.json
  • Filesystem Path: components/Organisms/buttongroup/composer.json
  • Size: 303 Bytes

Organismen “Buttongroup”

Versioner

  • 1.0.0-20191108 Settingsfil introducerad, kod flyttad till “buttongroup-elements” och .hbs-filen ombyggd

Beroenden

  • Inkluderar molekylen “Buttongroup elements” som i sin tur inkluderar atomen “labels”