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

Button: With Icon 

<button class="rh-button rh-button--icon" aria-label="Text som förklarar funktionen om man lyssnar med talsyntes utan att se kontexten" role="button">Button Default with Icon</button>
 
<button class="{{name}}{{#if modifier}} {{name}}--{{ modifier }}{{/if}}{{#if extendClass}} {{extendClass}}{{/if}}" aria-label="Text som förklarar funktionen om man lyssnar med talsyntes utan att se kontexten" role="button">{{ text }}</button>
 
{
  "text": "Button Default with Icon",
  "name": "rh-button",
  "extendClass": "",
  "modifier": "icon"
}
  • Content: 
    .rh-button {
    /* Positionering */
    position: relative;

    /* Box-modell/beteende */
    display: inline-block;

    /* Visuellt */
    @if $button--padding {
        padding-top: $button--padding-top;//em(10)
        padding-right: $button--padding-right;//em(6)
        padding-bottom: $button--padding-bottom;//em(10)
        padding-left: $button--padding-left;//em(6)
    }

    @if $button--background-color {
        background-color: $button--background-color;
    }
    border: $button--border;
    border-radius: $button--border-radius;
    @if $button--box-shadow {
        box-shadow: $button--box-shadow;
    }

    /* Typografi */
    color: $button-text--color; //$black
    text-align: $button-text--text-align; //center
    font-family: inherit;

    @if $button-text--font-size {
        font-size: $button-text--font-size; //$font-size-small
    }

    line-height: $button-text--line-height; //em(16)
    @if $button--text-decoration {
        text-decoration: $button--text-decoration;
    }

    /* Blandat/övrigt */
    outline: none;

    &:hover{
        /* Typografi */
        @if $button--hover-text-decoration {
            text-decoration: $button--hover-text-decoration;
        }
    }
    &:active{
        /* Visuellt */
        background-color: $button--active-background-color; //$grey-lightest
        border: $button--active-border; //1px solid $grey-base

        /* Typografi */
        color: $button--active-color; //$black
        @if $button--active-text-decoration {
            text-decoration: $button--active-text-decoration; //none
        }
    }
    &:disabled{
        /* Visuellt */
        background-color: $button--disabled-background-color; //$grey-lighter
        border: $button--disabled-border; //0px

        /* Typografi */
        color: $button--disabled-color; //$grey-base
        @if $button--disabled-text-decoration {
            text-decoration: $button--disabled-text-decoration; //none
        }
    }

    &--primary {
        /* Visuellt */
        background-color: $button--primary-background-color;

        /* Typografi */
        @if $button--primary-color {
            color: $button--primary-color;
        }

        @if $button--primary-hover {
            &:hover{
                /* Visuellt */
                @if $button--primary-hover-background-color {
                    background-color: $button--primary-hover-background-color;
                }
                @if $button--primary-hover-border {
                    border: $button--primary-hover-border; //1px solid $color-primary
                }

                /* Typografi */
                @if $button--primary-hover-color {
                    color: $button--primary-hover-color; //$color-primary
                }
                @if $button--primary-hover-text-decoration {
                    text-decoration: $button--primary-hover-text-decoration;
                }
            }
        }

        @if $button--primary-active {
            &:active{
                /* Visuellt */
                @if $button--primary-active-background-color {
                    background-color: $button--primary-active-background-color;
                }
                @if $button--primary-active-background-color {
                    border: $button--primary-active-border; //1px solid $color-primary
                }

                /* Typografi */
                @if $button--primary-active-color {
                    color: $button--primary-active-color; //$color-primary
                }
                @if $button--primary-active-text-decoration {
                    text-decoration: $button--primary-active-text-decoration; //none
                }
            }
        }

        @if $button--primary-focus {
            &:focus{
                /* Visuellt */
                @if $button--primary-focus-background-color {
                    background-color: $button--primary-focus-background-color;
                }
                @if $button--primary-focus-border {
                    border: $button--primary-focus-border; //1px solid $color-primary
                }

                /* Typografi */
                @if $button--primary-focus-color {
                    color: $button--primary-focus-color; //$color-primary
                }
                @if $button--primary-focus-text-decoration {
                    text-decoration: $button--primary-focus-text-decoration; //none
                }
            }
        }
    }

    &--secondary {
        /* Visuellt */
        background-color: $button--secondary-background-color;

        /* Typografi */
        @if $button--secondary-color {
            color: $button--secondary-color;
        }
        &:hover{
            /* Typografi */
            @if $button--secondary-hover-text-decoration {
                text-decoration: $button--secondary-hover-text-decoration;
            }
        }
        &:active{
            /* Visuellt */
            background-color: $button--secondary-active-background-color;
            border: $button--secondary-active-border;

            /* Typografi */
            @if $button--secondary-active-color {
                color: $button--secondary-active-color;
            }
            @if $button--secondary-active-text-decoration {
                text-decoration: $button--secondary-active-text-decoration;
            }
        }
    }

    &--icon {
        @if $button--icon-background-color {
            background-color: $button--icon-background-color;
        }
        @if $button--icon-color {
            color: $button--icon-color;
        }

        &:after{
            /* Box-modell/beteende */
            display: inline-block;
            margin-left: $button--icon-margin-left; //em(16)

            /* Typografi */
            font-family: "feather";
            text-decoration: $button--icon-text-decoration;

            /* Blandat/övrigt */
            content: $button--icon;
        }
    }

    @include medium {
        /* Visuellt */
        @if $button--padding-medium {
            padding-top: $button--padding-top-medium; //em(8);
            padding-right: $button--padding-right-medium; //em(8);
            padding-bottom: $button--padding-bottom-medium; //em(8);
            padding-left: $button--padding-left-medium; //em(8);
        }

        /* Typografi */
        @if $button-text--font-size-medium {
            font-size: $button-text--font-size-medium;
        }
        line-height: $button-text--line-height-medium; //em(21);
    }
    @include large {
        /* Visuellt */
        @if $button--padding-large {
            padding-top: $button--padding-top-large; //em(10);
            padding-right: $button--padding-right-large; //em(10);
            padding-bottom: $button--padding-bottom-large; //em(10);
            padding-left: $button--padding-left-large; //em(10);
        }

        /* Typografi */
        @if $button-text--font-size-large {
            font-size: $button-text--font-size-large;
        }
        line-height: $button-text--line-height-large; //em(24);
    }
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: components/Atoms/button/_button.scss
  • Size: 7.1 KB
  • Content: 
    /* --------------- */
/* Atomen "Button" */
/* --------------- */

$button--background-color: $white;
$button--border: $border-thin--standard $grey-base;
$button--border-radius: $border-radius--standard;
$button--box-shadow: $box-shadow--standard $color-shadow;
$button-text--color: $black;
$button-text--text-align: center;
$button-text--font-size: $font-size--small; //false
$button-text--line-height: $line-height--small;
$button--text-decoration: none;

$button--padding: 0.625em; //true or false or em/px
$button--padding-top: $button--padding;
$button--padding-right: $button--padding;
$button--padding-bottom: $button--padding;
$button--padding-left: $button--padding;

// Medium breakpoint
$button--padding-medium: 0.625em; //true or false or em/px
$button--padding-top-medium: $button--padding-medium;
$button--padding-right-medium: $button--padding-medium;
$button--padding-bottom-medium: $button--padding-medium;
$button--padding-left-medium: $button--padding-medium;
$button-text--font-size-medium: $font-size-medium; //false
$button-text--line-height-medium: $line-height--medium;

// Large breakpoint
$button--padding-large: 0.625em; //true or false or em/px
$button--padding-top-large: $button--padding-large;
$button--padding-right-large: $button--padding-large;
$button--padding-bottom-large: $button--padding-large;
$button--padding-left-large: $button--padding-large;
$button-text--font-size-large: $font-size-large; //false
$button-text--line-height-large: $line-height--2xl;

// Hover
$button--hover-text-decoration: underline; //false

// Active
$button--active-background-color: $grey-lightest;
$button--active-border: $border-thin--standard $grey-base;
$button--active-color: $black;
$button--active-text-decoration: none; //false

// Disabled
$button--disabled-background-color: $grey-lighter;
$button--disabled-border: 0em;
$button--disabled-color: $grey-base;
$button--disabled-text-decoration: none; //false

// "primary"-modifier - Base settings
$button--primary-background-color: $color-primary;
$button--primary-color: $white; //false

$button--primary-effect: true;
$button--primary-effect-background-color: $white; //false
$button--primary-effect-border: $border-thin--standard $color-primary; //false
$button--primary-effect-color: $color-primary; //false
$button--primary-effect-text-decoration: underline; //false

// Specific settings
$button--primary-hover: $button--primary-effect; //Only true - false
$button--primary-hover-background-color: $button--primary-effect-background-color;
$button--primary-hover-border: $button--primary-effect-border;
$button--primary-hover-color: $button--primary-effect-color;
$button--primary-hover-text-decoration: $button--primary-effect-text-decoration;

$button--primary-active: $button--primary-effect; //Only true - false
$button--primary-active-background-color: $button--primary-effect-background-color;
$button--primary-active-border: $button--primary-effect-border;
$button--primary-active-color: $button--primary-effect-color;
$button--primary-active-text-decoration: $button--primary-effect-text-decoration;

$button--primary-focus: $button--primary-effect; //Only true - false
$button--primary-focus-background-color: $button--primary-effect-background-color;
$button--primary-focus-border: $button--primary-effect-border;
$button--primary-focus-color: $button--primary-effect-color;
$button--primary-focus-text-decoration: $button--primary-effect-text-decoration;

// "secondary"-modifier
$button--secondary-background-color: $color-secondary;
$button--secondary-color: $white; //false
$button--secondary-hover-text-decoration: underline; //false
$button--secondary-active-background-color: $white;
$button--secondary-active-border: $border-thin--standard $color-secondary;
$button--secondary-active-color: $color-secondary; //false
$button--secondary-active-text-decoration: none; //false

// "icon"-modifier
$button--icon: "\e844";
$button--icon-margin-left: 1em;
$button--icon-text-decoration: none;
$button--icon-background-color: false;
$button--icon-color: false;
  • URL: /components/raw/button/button.settings.scss
  • Filesystem Path: components/Atoms/button/button.settings.scss
  • Size: 4.1 KB
  • Content: 
    {
    "name": "regionhalland/button",
    "description": "Button",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/button/composer.json
  • Filesystem Path: components/Atoms/button/composer.json
  • Size: 278 Bytes

Atomen “Button

Versionshistorik

  • v1.0.0.20200128
    • Fler globala variabler används