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

Navigation left 

<div class="rh-navigation-left">
    <div class="rh-navigation-left__header">
        <p class="rh-navigation-left__header-text">
            Läkemedelsgenomgångar
        </p>
    </div>

    <div>
        <div class="rh-navigation-left__item">
            <p class="rh-navigation-left__item-text">
                <a class="rh-link--navigation rh-navigation-left__item-link" href="#">
                    <span class="rh-navigation-left__item-box">Äldre och läkemedel</span>
                </a>
            </p>
        </div>

        <div class="rh-navigation-left__item">
            <p class="rh-navigation-left__item-text">
                <a class="rh-link--navigation rh-navigation-left__item-link" href="#">
                    <span class="rh-navigation-left__item-box">Verktyg vid läkemedelsgenomgångar särskilda boenden</span>
                </a>
            </p>
        </div>
    </div>
</div>
 
<div class="rh-navigation-left">
    <div class="rh-navigation-left__header">
        <p class="rh-navigation-left__header-text">
            Läkemedelsgenomgångar
        </p>
    </div>

    <div>
        <div class="rh-navigation-left__item">
            <p class="rh-navigation-left__item-text">
                <a class="rh-link--navigation rh-navigation-left__item-link" href="#">
                    <span class="rh-navigation-left__item-box">Äldre och läkemedel</span>
                </a>
            </p>
        </div>

        <div class="rh-navigation-left__item">
            <p class="rh-navigation-left__item-text">
                <a class="rh-link--navigation rh-navigation-left__item-link" href="#">
                    <span class="rh-navigation-left__item-box">Verktyg vid läkemedelsgenomgångar särskilda boenden</span>
                </a>
            </p>
        </div>
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    /* Needed components
@import '../../Atoms/link/_link.scss';
*/

.rh-navigation-left {
    p { margin-bottom: 0; } // Reset

    &__header {
        padding: $navigation-left__header--padding;
        background-color: $navigation-left__header--background-color;
        border-radius: $navigation-left__header--border-radius;

        &-text {
            color: $navigation-left__header-text--color;
            font-size: $navigation-left__header-text--font-size;
            font-weight: $navigation-left__header-text--font-weight;
            word-break: $navigation-left__header-text--word-break;
            line-height: $navigation-left__header-text--line-height;
        }
    }

    &__item {
        min-height: $navigation-left__item--min-height;

        border-style: $navigation-left__item--border-style;
        border-width: $navigation-left__item--border-width;
        border-color: $navigation-left__item--border-color;

        &:hover {
            background-color: $navigation-left__item--hover-background-color;
        }

        &-box {
            display: $navigation-left__item-box--display;
            padding: $navigation-left__item-box--padding;
        }

        &-text {
            line-height: $navigation-left__item-text--line-height;
        }

        &-link {
            color: $navigation-left__item-link--color;

            &:focus {
                color: $color-primary;
                text-decoration: $navigation-left__item-link--focus--text-decoration;
                font-weight: $navigation-left__item-link--focus--font-weight;
                outline: $navigation-left__item-link--focus--outline;
            }
        }
    }
}
  • URL: /components/raw/navigation-left/_navigation-left.scss
  • Filesystem Path: components/Molecules/navigation-left/_navigation-left.scss
  • Size: 1.7 KB
  • Content: 
    {
    "name": "regionhalland/navigation-left",
    "description": "Navigation left",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/navigation-left/composer.json
  • Filesystem Path: components/Molecules/navigation-left/composer.json
  • Size: 299 Bytes
  • Content: 
    /* Molecule - Navigation left */
// --- Base settings ---
$navigation-left__header--background-color: $base3-dark;
$navigation-left__item--hover-background-color: $base3-light;
// --- End of base settings ---

$navigation-left__header--padding: 0.6875em 0.8125em;
$navigation-left__header--border-radius: $border-radius--standard $border-radius--standard 0 0;

$navigation-left__header-text--color: $white;
$navigation-left__header-text--font-size: $font-size--xl;
$navigation-left__header-text--font-weight: bold;
$navigation-left__header-text--word-break: break-word;
$navigation-left__header-text--line-height: $line-height--2xl;

$navigation-left__item--min-height: $line-height--2xl; //3.75em;
$navigation-left__item--border-style: solid;
$navigation-left__item--border-width: 0 0.0625em 0.0625em 0.0625em;
$navigation-left__item--border-color: $grey-light;

$navigation-left__item-box--display: flex;
$navigation-left__item-box--padding: 1.157em 0.8125em;
$navigation-left__item-text--line-height: $line-height--2xl;
$navigation-left__item-link--color: $black;

// Focus state
$navigation-left__item-link--focus--text-decoration: underline;
$navigation-left__item-link--focus--font-weight: bold;
$navigation-left__item-link--focus--outline: none;
  • URL: /components/raw/navigation-left/navigation-left.settings.scss
  • Filesystem Path: components/Molecules/navigation-left/navigation-left.settings.scss
  • Size: 1.3 KB

Navigation left

Tänkt att fungera som en vanlig vänstermeny. Placera i en container för att begränsa bredden.

Versionshistorik

  • 1.1.2 - Globala variabler används
  • 1.1.1 - “Stable”
  • 1.1.0 - Fokusbeteende introducerat
  • 1.0.0 - Första versionen