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

Label: Default 

<span class="rh-label rh-label--small">100</span>
 
<span class="{{className}}{{#if modifier}} {{className}}--{{modifier}}{{/if}}">{{ labelContent }}</span>
 
{
  "name": "default",
  "modifier": "small",
  "className": "rh-label",
  "labelContent": "100",
  "extendClass": ""
}
  • Content: 
    .rh-label {
    /* Box-modell/beteende */
    border-radius: $LABEL--BORDER-RADIUS;
    display: inline-block;
    min-width: $LABEL--MIN-WIDTH;
    vertical-align: baseline;

    /* Visuellt */
    background-color: $LABEL--BACKGROUND-COLOR;

    /* Typografi */
    @if $LABEL--TEXT-COLOR {
        color: $LABEL--TEXT-COLOR;
    }
    @if $LABEL--FONT-SIZE {
        font-size: $LABEL--FONT-SIZE;
    }
    line-height: $LABEL--LINE-HEIGHT;
    text-align: $LABEL--TEXT-ALIGN;
    white-space: $LABEL--WHITE-SPACE;

    @include large {
        /* Box-modell/beteende */
        min-width: $LABEL--LARGE--MIN-WIDTH;
    }

    &--small {
        padding: $LABEL--PADDING;
    }

    &--medium {
        padding: $LABEL--MEDIUM-PADDING;
    }
}
  • URL: /components/raw/label/_label.scss
  • Filesystem Path: components/Atoms/label/_label.scss
  • Size: 747 Bytes
  • Content: 
    {
    "name": "regionhalland/label",
    "description": "Label",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/label/composer.json
  • Filesystem Path: components/Atoms/label/composer.json
  • Size: 275 Bytes
  • Content: 
    /* --------------- */
/* Atomen "Label" */
/* --------------- */

// ------ Base settings ------
$LABEL--BORDER-RADIUS: 0.9375em; // 15px
$LABEL--BACKGROUND-COLOR: $base3-light;
// ------ End of base settings ------

// ------ Common ------
// Box-modell/beteende
$LABEL--MIN-WIDTH: 0.6875em; // 11 px

// Typografi
$LABEL--FONT-SIZE: false; // false
$LABEL--LINE-HEIGHT: 1;
$LABEL--TEXT-COLOR: false; // false
$LABEL--TEXT-ALIGN: center;
$LABEL--WHITE-SPACE: nowrap;

// large-modifiern
$LABEL--LARGE--MIN-WIDTH: 0.75em; // 12px
// ------ End of common ------

// ------ Variants ------
// Small
$LABEL--PADDING: 0.3125em 0.5625em; // 5px 9px

// Medium
$LABEL--MEDIUM-PADDING: 0.5em 0.75em; // 8px 12px
// ------ End of variants ------
  • URL: /components/raw/label/label.settings.scss
  • Filesystem Path: components/Atoms/label/label.settings.scss
  • Size: 737 Bytes

Atomen “Label”

Versionshistorik

  • 1.0.0.20200121 (2020-01-21)
    • Komponents namn bytts från Labels till Label.
    • Inställningar är grupperad i 3 grupper som är:
      • base
      • common
      • variants
    • Nya beteende skapas:
      • --small
      • --medium
    • Globala variabler används.
  • 1.0.0.201911271825 Bytt defaulttexten i config
  • 1.0.0.20191127 Mappnamn och komponent i synk, kommentering standardiserad
  • 1.0.0-20191108 Settingsfil implementerad och komponentens text flyttad till config-fil för att skrivas över med configuration när atomen inkluderas i molekyler/organismer. git