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

Search external link: Warning 

<div class="rh-search-external rh-search-external--warning">
    <div class="rh-search-external__header">
        <p class="rh-search-external__header-title mr2">
            Secondary variant lorem ipsum dolor sit amet
        </p>

        <div class="rh-overflow--hidden">
            <div class="rh-block-icon-link rh-block-icon-link--warning rh-element--clickable rh-w--fit-content rh-search-external__header-icon-link" tabindex="0">
                <a href="#" class="rh-element--clickable-link" title="" tabindex="-1"></a>

                <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-button-circle--warning rh-block-icon-link__icon--warning mr1">
                    <span class="icon-external-link"></span>
                </span>

                <a href="#" class="rh-link--navigation rh-block-icon-link__link--warning" tabindex="-1">Länk till annan webb plats</a>
            </div>
        </div>
    </div>

    <p class="rh-search-external__description mt1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidiunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequst.
    </p>
</div>
 
<div class="rh-search-external{{#if modifier}} rh-search-external--{{modifier}}{{/if}}">
    {{!-- Header --}}
    <div class="rh-search-external__header">
        <p class="rh-search-external__header-title mr2">
            {{title}}
        </p>

        <div class="rh-overflow--hidden">{{!-- Trick for IE11 when wrapping text in flex --}}
            <div class="rh-block-icon-link rh-block-icon-link--{{modifier}} rh-element--clickable rh-w--fit-content rh-search-external__header-icon-link" tabindex="0">
                <a href="#" class="rh-element--clickable-link" title="" tabindex="-1"></a>

                <span class="rh-button-circle rh-button-circle--default rh-button-circle--small{{#if extendClass}} {{extendClass}}{{/if}} rh-block-icon-link__icon--{{modifier}} mr1">
                    <span class="icon-external-link"></span>
                </span>

                <a href="#" class="rh-link--navigation rh-block-icon-link__link--{{modifier}}" tabindex="-1">{{linkText}}</a>
            </div>
        </div>
    </div>

    {{!-- Content --}}
	<p class="rh-search-external__description mt1">
        {{description}}
    </p>
</div>
 
{
  "name": "default",
  "status": "wip",
  "modifier": "warning",
  "title": "Secondary variant lorem ipsum dolor sit amet",
  "linkText": "Länk till annan webb plats",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidiunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequst.",
  "extendClass": "rh-button-circle--warning"
}
  • Content: 
    .rh-search-external {
    p {margin-bottom: 0;} // Reset

    padding: $search-external--padding;
    border-radius: .25em;

    &__header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &-title {
            margin-top: .5em;
            font-size: $font-size--medium;
            font-weight: bold;

            @include medium {font-size: $font-size--large;}
            @include large {font-size: $font-size--xl;}
        }

        &-icon-link {
            margin-top: .5em;

            >a {
                font-size: $font-size--small;
                @include medium {font-size: $font-size--medium;}//15px
            }
        }
    }

    &__description {
        font-size: $font-size--medium;
        @include medium {font-size: $font-size--standard;}
    }

    &--default {
	    border: $search-external-default--border;
        background-color: $search-external-default--background-color;

        @if $search-external-default__icon {
            // Reuse the component Atoms/button-circle - Change styling for icon
            .rh-circle-button {
                @if $search-external-default__icon--color {
                    color: $search-external-default__icon--color;
                }
                @if $search-external-default__icon--background-color {
                    background-color: $search-external-default__icon--background-color;
                }

                &:hover, &:active, &:focus {
                    @if $search-external-default__icon--highlight-color {
                        color: $search-external-default__icon--highlight-color;
                    }
                    @if $search-external-default__icon--highlight-background-color {
                        background-color: $search-external-default__icon--highlight-background-color;
                    }
                }
            }
        }
    }

    &--warning {
        border: $search-external-warning--border;
        background-color: $search-external-warning--background-color;

        @if $search-external-warning__icon {
            // Reuse the component Atoms/button-circle - Change styling for icon
            .rh-circle-button {
                @if $search-external-warning__icon--color {
                    color: $search-external-warning__icon--color;
                }
                @if $search-external-warning__icon--background-color {
                    background-color: $search-external-warning__icon--background-color;
                }

                &:hover, &:active, &:focus {
                    @if $search-external-warning__icon--highlight-color {
                        color: $search-external-warning__icon--highlight-color;
                    }
                    @if $search-external-warning__icon--highlight-background-color {
                        background-color: $search-external-warning__icon--highlight-background-color;
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/search-external-link/_search-external-link.scss
  • Filesystem Path: components/Molecules/search-external-link/_search-external-link.scss
  • Size: 3 KB
  • Content: 
    {
    "name": "regionhalland/search-external-link",
    "description": "search external link",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/search-external-link/composer.json
  • Filesystem Path: components/Molecules/search-external-link/composer.json
  • Size: 309 Bytes
  • Content: 
    /// MOLECULE - Search external link
// --------- Base settings ----------
$search-external--padding: 1em 1em 1.5em 1em; //16px - 16px - 24px - 16px

// Modifier --default
$search-external-default--border: $border-thin--standard $base3; //1px
$search-external-default--background-color: $grey-lightest;

// Modifier --secondary
$search-external-warning--border: $border-thin--standard $warning-dark; //1px
$search-external-warning--background-color: $warning-light;
// ------ End of base settings ------

// Other settings
$search-external-default__icon: true; // Activating styling for icon - Using only true or false
$search-external-default__icon--color: false; //false
$search-external-default__icon--background-color: false; //false
$search-external-default__icon--highlight-color: false; //false
$search-external-default__icon--highlight-background-color: false; //false

$search-external-warning__icon: true; // Activating styling for icon - Using only true or false
$search-external-warning__icon--color: $white; //false
$search-external-warning__icon--background-color: $warning-dark; //false
$search-external-warning__icon--highlight-color: $white; //false
$search-external-warning__icon--highlight-background-color: $warning; //false
  • URL: /components/raw/search-external-link/search-external-link.settings.scss
  • Filesystem Path: components/Molecules/search-external-link/search-external-link.settings.scss
  • Size: 1.2 KB

Molekylen “Search external link”

Versionshistorik

1.0.0.20200129 (2020-01-29)

  • Globala variabler används.

1.0.0.20200123 (2020-01-23)

  • Sökväg till Atoms/button-circle justerad efter namnbyte.

1.0.0.20191217 (2019-12-17)

  • Skrivit om komponenten. Det är återanvändning av:
    • Atoms/circle-button
    • Molecules/block-icon-link
    • Utilities klasser

1.0.0.20191122

  • Flyttat till gitrepo.