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

Round button: Triangle 

<div class="rh-visual-element--triangle"></div>
 
<div class="rh-visual-element--{{ modifier }}"></div>
 
{
  "modifier": "triangle"
}
  • Content: 
    .rh-visual-element {

    &--triangle {

        /* Box modell/beteende */
        width: $VISUAL-ELEMENT--TRIANGLE--WIDTH;
        height: $VISUAL-ELEMENT--TRIANGLE--HEIGHT;

        /* Visuellt */
        border-bottom: $VISUAL-ELEMENT--TRIANGLE--BORDER-BOTTOM;
        border-left: $VISUAL-ELEMENT--TRIANGLE--BORDER-LEFT;
        border-right: $VISUAL-ELEMENT--TRIANGLE--BORDER-RIGHT;
        border-top: $VISUAL-ELEMENT--TRIANGLE--BORDER-TOP;
    }

    &--vuxhalland-logo-stripe {

        /* Box modell/beteende */
        height: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--HEIGHT;
        width: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--WIDTH;
        /* Visuellt */
        background: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--BACKGROUND;
        padding-top: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--PADDING-TOP;
        padding-bottom: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--PADDING-BOTTOM;

        /* Typografi */
        line-height: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--LINE-HEIGHT;

        @include medium {

            /* Box modell/beteende */
            height: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--HEIGHT;
            width: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--WIDTH;

            /* Typografi */
            line-height: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--LINE-HEIGHT;

            /* Visuellt */
            padding-top: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--PADDING-TOP;
            padding-bottom: $VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--PADDING-BOTTOM;
        }
    }
}
  • URL: /components/raw/visual-element/_visual-element.scss
  • Filesystem Path: components/Atoms/visual-element/_visual-element.scss
  • Size: 1.6 KB
  • Content: 
    {
    "name": "regionhalland/visual-element",
    "description": "Visual element",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/visual-element/composer.json
  • Filesystem Path: components/Atoms/visual-element/composer.json
  • Size: 294 Bytes
  • Content: 
    // "Visual element - triangle"
$VISUAL-ELEMENT--TRIANGLE--HEIGHT: 0;
$VISUAL-ELEMENT--TRIANGLE--WIDTH: 0;
$VISUAL-ELEMENT--TRIANGLE--BORDER-BOTTOM: 50px solid $vuxhalland2;
$VISUAL-ELEMENT--TRIANGLE--BORDER-LEFT: 50px solid $vuxhalland2;
$VISUAL-ELEMENT--TRIANGLE--BORDER-RIGHT: 50px solid transparent;
$VISUAL-ELEMENT--TRIANGLE--BORDER-TOP: 50px solid transparent;

// "Visual element - vuxhalland logo stripe" default
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--BACKGROUND: $vuxhalland2;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--HEIGHT: auto;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--LINE-HEIGHT: 1.4;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--PADDING-TOP: 1em;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--PADDING-BOTTOM: 1em;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--WIDTH: 100%;

// "Visual element - vuxhalland logo stripe" from medium viewport
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--HEIGHT: 100px;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--LINE-HEIGHT: 100px;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--PADDING-TOP: 0;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--PADDING-BOTTOM: 0;
$VISUAL-ELEMENT--VUXHALLAND-LOGO-STRIPE--MEDIUM--WIDTH: 15em;
  • URL: /components/raw/visual-element/visual-element.settings.scss
  • Filesystem Path: components/Atoms/visual-element/visual-element.settings.scss
  • Size: 1.2 KB

Atomen “Visual element”

Innehåller element i DOM:en som används för dekor istället för bilder. T.ex. den stripe och triangel som används i huvudet på vuxhalland.se.

Versioner

  • 1.0.0.20191113 - Flyttad till gitrepo
  • 1.0.0.20191108 - Kompletterad med settingsfil och denna readme.