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

Link: Navigation 

<a href="#" class="rh-link rh-link--navigation" title="Förklara vart länken leder">Länkar i navigationskomponenter kan se annorlunda ut</a>
 
<a href="#" class="{{className}}{{#if modifier}} {{className}}--{{ modifier }}{{/if}}{{#if extendClass}} {{extendClass}}{{/if}}" title="Förklara vart länken leder">{{ text }}</a>
 
{
  "className": "rh-link",
  "text": "Länkar i navigationskomponenter kan se annorlunda ut",
  "extendClass": "",
  "modifier": "navigation"
}
  • Content: 
    .rh-link {
	&--navigation {
		/* Visuellt */
		@if $LINK--COLOR {
			color: $LINK--COLOR;
		}

		/* Typografi */
		@if $LINK--TEXT-DECORATION {
			text-decoration: $LINK--TEXT-DECORATION;
		}

		&:hover, &:active, &:focus {
			@if $LINK--HIGHLIGHT-TEXT-DECORATION {
				text-decoration: $LINK--HIGHLIGHT-TEXT-DECORATION;
			}
		}
	}
}
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/Atoms/link/_link.scss
  • Size: 336 Bytes
  • Content: 
    {
    "name": "regionhalland/link",
    "description": "Atomen link",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/link/composer.json
  • Filesystem Path: components/Atoms/link/composer.json
  • Size: 281 Bytes
  • Content: 
    /* Atoms - Link */
$LINK--COLOR: $black; //false
$LINK--TEXT-DECORATION: none; //false

// HIGHLIGHT === :hover, :active, :focus
$LINK--HIGHLIGHT-TEXT-DECORATION: underline; //false
  • URL: /components/raw/link/link.settings.scss
  • Filesystem Path: components/Atoms/link/link.settings.scss
  • Size: 181 Bytes

Atomen “Link”

Planerad utveckling

  • Konstanterna i settings skall döpas om.

Versioner

  • 1.0.0.20200120 (2020-01-20)
    • className används i .config.json för att det skiljer sig med attributet name som har använts för en variant av komponenten.
    • Förbättring SCSS-kod.
    • *-HIGHLIGHT-* används i ett CSS-klassnamn när det gäller för alla beteenden :hover , :active, :focus.
  • 1.0.0.20200108 Focusstate introducerat, extendClass-funktion introducerad för användning när man inkluderar länken i molekyler/organismer.
  • 1.0.0.20191121 Flyttat till gitrepo
  • 1.0.0.20191112 Visar även –navigation varianten + skapat README.md