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

Paginering elements: Left 

<a class="rh-pagination-link rh-pagination-link--left">Föregående sida</a>
 
<a class="{{name}}{{#if modifier}} {{name}}--{{ modifier }}{{/if}}">{{ paginationElementText }}</a>
 
{
  "caption": "Paginering elements Default",
  "name": "rh-pagination-link",
  "paginationElementText": "Föregående sida",
  "modifier": "left"
}
  • Content: 
    .rh-pagination-link {
    /* Box-modell/beteende */
    padding-top: 0.625em;//em(10);
    padding-bottom: 0.625em;//em(10);
    padding-left: 0.9375em;//em(15);
    padding-right: 0.9375em;//em(15);

    /* Visuellt */
    border: $pagination-link--border;

    /* Typografi */
    text-decoration: none;
    color: $black;
    font-size: $p-small;

    @include medium {
        /* Typografi */
        font-size: $p-medium;
    }

    @include large {
        /* Typografi */
        font-size: $p-large;
    }

    &:active,
    &:hover {
        /* Visuellt */
        background-color: $pagination-link--hover-background-color;

        /* Typografi */
        color: $pagination-link--hover-text-color;
    }

    &--current {
        /* Visuellt */
        background-color: $pagination-link-current--background-color;

        /* Typografi */
        color: $pagination-link-current--text-color;
        font-weight: $pagination-link-current--font-weight;

        &:hover,
        &:active {
            /* Visuellt */
            background-color: $pagination-link-current--background-color-hover-active;

            /* Typografi */
            color: $pagination-link-current--text-color-hover-active;
            font-weight: $pagination-link-current--font-weight-hover-active;
        }
    }

    &--left {
        /* Visuellt */
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    &--right {
        /* Visuellt */
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}
  • URL: /components/raw/pagination-elements/_pagination-elements.scss
  • Filesystem Path: components/Atoms/pagination-elements/_pagination-elements.scss
  • Size: 1.6 KB
  • Content: 
    {
    "name": "regionhalland/pagination-elements",
    "description": "Pagination elements",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/pagination-elements/composer.json
  • Filesystem Path: components/Atoms/pagination-elements/composer.json
  • Size: 304 Bytes
  • Content: 
    /* Atoms - Pagination elements */
$pagination-link--border: $border-thin--standard $grey-dark; //0.046875em solid $grey-dark;
$pagination-link--hover-background-color: $base3;
$pagination-link--hover-text-color: $white;

$pagination-link-current--background-color: $complementary2;
$pagination-link-current--text-color: $black;
$pagination-link-current--font-weight: bold;

$pagination-link-current--background-color-hover-active: $complementary2;
$pagination-link-current--text-color-hover-active: $black;
$pagination-link-current--font-weight-hover-active: bold;
  • URL: /components/raw/pagination-elements/pagination-elements.settings.scss
  • Filesystem Path: components/Atoms/pagination-elements/pagination-elements.settings.scss
  • Size: 564 Bytes

Pagination elements

planerade ändringar

  • Settingsfilen skall gås igenom.

Versioner

1.0.0.20200203

  • Förbättring av border property.

1.0.0.20200123

  • Global variabler används

1.0.0.20191127

Brytande ändringar:

  • -previous är nu --left
  • -next är nu --right

Övriga ändringar:

  • .hbs och config-filerna ändrade för att visa varje variant för sig själv.

1.0.0.20191112

Flyttat till gitrepo