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

Round button 

<a href="" class="icon-log-in rh-round-button"></a>
 
<a href="" class="{{icon}} rh-round-button"></a>
 
{
  "icon": "icon-log-in"
}
  • Content: 
    .rh-round-button {

    /* Visuellt */
    background: $round-button--background;

    @if $round-button--border {
        border: $round-button--border;
    }

    border-radius: $round-button--border-radius;
    padding: $round-button--padding;

    /* Typografi */
    color: $round-button--color;
    font-family: $round-button--font-family;
    font-size: $round-button--font-size;
    text-decoration: $round-button--text-decoration;

    &--small {
        padding: $round-button--padding-small;
    }

    &:hover,
    &:active {

        /* Visuellt */
        @if $round-button--background-color-hover-active {
            background-color: $round-button--background-color-hover-active;
        }

        /* Typografi */
        @if $round-button--color-hover-active {
            color: $round-button--color-hover-active;
        }
    }

    // &--vuxhalland {
    //     /* Visuellt */
    //     background: $vuxhalland;
    //     border: 1px solid $vuxhalland;

    //     /* Typografi */
    //     color: black;
    // }

    //&--vuxhalland:hover,
    // &:active {
    //     /* Typografi */
    //     color: black;
    // }

}
  • URL: /components/raw/round-button/_round-button.scss
  • Filesystem Path: components/Atoms/round-button/_round-button.scss
  • Size: 1.1 KB
  • Content: 
    {
    "name": "regionhalland/round-button",
    "description": "Atomen round-button",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/round-button/composer.json
  • Filesystem Path: components/Atoms/round-button/composer.json
  • Size: 297 Bytes
  • Content: 
    /* Atoms - Round button */
$round-button--background: $base3;
$round-button--border: 0.0625em solid $color-secondary;
$round-button--border-radius: 50%;
$round-button--padding: 0.375em; //em(6)
$round-button--padding-small: 0.25em; //em(4)

$round-button--color: $white;
$round-button--background-color-hover-active: $white;
$round-button--color-hover-active: $color-secondary;

$round-button--font-family: "feather";// !important
$round-button--font-size: $h4-small;
$round-button--text-decoration: none;

// New version for round button
$round-button-fx--background: $base3; //Can using "false"
$round-button-fx--border: 0.0625em solid $color-secondary; //Can using "false"
$round-button-fx--border-radius: 50%;
$round-button-fx--color: $white; //Can using "false"
$round-button-fx--font-family: "feather";
$round-button-fx--text-decoration: none;

$round-button-fx--background-color-hover-active: $white; //Can using "false"
$round-button-fx--color-hover-active: $color-secondary; //Can using "false"

$round-button-fx-small--height: 1.875em;
$round-button-fx-small--width: 1.875em;

$round-button-fx-responsive--height: 2.1875em;
$round-button-fx-responsive--width: 2.1875em;
$round-button-fx-responsive--height-medium: 2.5em;
$round-button-fx-responsive--width-medium: 2.5em;

$round-button-fx-responsive--icon-font-size-medium: 1.2em;
  • URL: /components/raw/round-button/round-button.settings.scss
  • Filesystem Path: components/Atoms/round-button/round-button.settings.scss
  • Size: 1.3 KB

Atomen “Round button”

Denna atom fasas ut - implementera den inte.