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

Event card calender: Sold Out 

<div class="rh-event-card-calendar">
    <div class="rh-event-card-calendar__date">
        <div class="rh-event-card-calendar__day"><strong>14</strong></div>
        <div class="rh-event-card-calendar__month">sep</div>
    </div>

    <div class="rh-event-card-calendar__description">
        <h3 class="rh-event-card-calendar__title"><a class="rh-event-card-calendar__link">Lorem ipsum dolor sit amet</a></h3>
        <span class="rh-event-card-calendar__time">
            18.30 - 21.30
        </span>

        <span>|</span>

        <span class="rh-event-card-calendar__venue rh-event-card-calendar__venue--sold-out">
                Fullbokat
            </span>

        <p class="rh-event-card-calendar__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <span class="rh-label rh-label--small">Utveckling</span> <span class="rh-label rh-label--small">Politik</span> <span class="rh-label rh-label--small">Karriär</span> </div>
</div>
 
<div class="rh-event-card-calendar">
    <div class="rh-event-card-calendar__date">
        <div class="rh-event-card-calendar__day"><strong>{{date.day}}</strong></div>
        <div class="rh-event-card-calendar__month">{{date.month}}</div>
    </div>

    <div class="rh-event-card-calendar__description">
        <h3 class="rh-event-card-calendar__title"><a class="rh-event-card-calendar__link">{{title}}</a></h3>
        <span class="rh-event-card-calendar__time">
            {{time.start}} - {{time.end}}
        </span>

        <span>|</span>

        {{#if availability}}
            <span class="rh-event-card-calendar__venue">
                Platser finns
            </span>
        {{else}}
            <span class="rh-event-card-calendar__venue rh-event-card-calendar__venue--sold-out">
                Fullbokat
            </span>
        {{/if}}

        <p class="rh-event-card-calendar__text">{{description}}</p>

        {{> @label className="rh-label rh-label--small" labelContent=labelcontent1 }}
        {{> @label className="rh-label rh-label--small" labelContent=labelcontent2 }}
        {{> @label className="rh-label rh-label--small" labelContent=labelcontent3 }}
    </div>
</div>
 
{
  "title": "Lorem ipsum dolor sit amet",
  "date": {
    "day": "14",
    "month": "sep"
  },
  "time": {
    "start": "18.30",
    "end": "21.30"
  },
  "availability": false,
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat.",
  "labelcontent1": "Utveckling",
  "labelcontent2": "Politik",
  "labelcontent3": "Karriär"
}
  • Content: 
    .rh-event-card-calendar {
    /* Positionering */
    align-items: $EVENT-CARD-CALENDAR--ALIGN-ITEMS;

    /* Box-modell/beteende */
    display: $EVENT-CARD-CALENDAR--DISPLAY;

    &--small {
        /* Positionering */
        align-items: $EVENT-CARD-CALENDAR--SMALL--ALIGN-ITEMS;

        /* Box-modell/beteende */
        margin-top: $EVENT-CARD-CALENDAR--SMALL--MARGIN-TOP;
    }

    &__date {
        /* Positionering */
        align-content: $EVENT-CARD-CALENDAR__DATE--ALIGN-CONTENT;

        /* Box-modell/beteende */
        flex: $EVENT-CARD-CALENDAR__DATE--FLEX;
        height: $EVENT-CARD-CALENDAR__DATE--HEIGHT;
        width: $EVENT-CARD-CALENDAR__DATE--WIDTH;

        /* Visuellt */
        background-color: $EVENT-CARD-CALENDAR__DATE--BACKGROUND-COLOR;

        /* Typografi */
        text-align: $EVENT-CARD-CALENDAR__DATE--TEXT-ALIGN;

        @include medium {
            /* Box-modell/beteende */
            flex: $EVENT-CARD-CALENDAR__DATE--MEDIUM--FLEX;
            height: $EVENT-CARD-CALENDAR__DATE--MEDIUM--HEIGHT;
            width: $EVENT-CARD-CALENDAR__DATE--MEDIUM--WIDTH;
        }
    }

    &__day {
        /* Box-modell/beteende */
        margin-top: $EVENT-CARD-CALENDAR__DAY--MARGIN-TOP;

        /* Typografi */
        color: $EVENT-CARD-CALENDAR__DAY--COLOR;
        line-height: $EVENT-CARD-CALENDAR__DAY--LINE-HEIGHT;

        @include medium {
            /* Box-modell/beteende */
            margin-top: $EVENT-CARD-CALENDAR__DAY--MEDIUM--MARGIN-TOP;
        }

        @include large {
            /* Box-modell/beteende */
            margin-top: $EVENT-CARD-CALENDAR__DAY--LARGE--MARGIN-TOP;
        }
    }

    &__month {
        /* Typografi */
        color: $EVENT-CARD-CALENDAR__MONTH--COLOR;
        line-height: $EVENT-CARD-CALENDAR__MONTH--LINE-HEIGTH;
        font-weight: $EVENT-CARD-CALENDAR__MONTH--FONT-WEIGHT;
    }

    &__description {
        /* Box-modell/beteende */
        margin-left: $EVENT-CARD-CALENDAR__DESCRIPTION--MARGIN-LEFT;
    }

    &__title {
        /* Typografi */
        line-height: $EVENT-CARD-CALENDAR__TITLE--LINE-HEIGHT; 
    }

    &__text {
        padding-top: $EVENT-CARD-CALENDAR--TEXT--PADDING-TOP;
    }

    &__link {
        /* Typografi */
        font-size: $EVENT-CARD-CALENDAR__LINK--FONT-SIZE;
        text-decoration: $EVENT-CARD-CALENDAR__LINK--TEXT-DECORATION;
        color: $EVENT-CARD-CALENDAR__LINK--COLOR;

        /* Blandat/övrigt */
        cursor: $EVENT-CARD-CALENDAR__LINK--CUROSR;

        &:hover,
        &:active {
            /* Typografi */
            text-decoration: $EVENT-CARD-CALENDAR__LINK--HOVER--TEXT-DECORATION;
        }

        &:visited {
            /* Typografi */
            color: $EVENT-CARD-CALENDAR__LINK--VISITED--COLOR;
        }
    }

    &__time {
        /* Typografi */
        color: $EVENT-CARD-CALENDAR__TIME--COLOR;

        &:before {
            /* Typografi */
            font-family: $EVENT-CARD-CALENDAR__TIME--BEFORE--FONT-FAMILY;

            /* Blandat/övrigt */
            content: $EVENT-CARD-CALENDAR__TIME--BEFORE--CONTENT;
        }

        &-small {
            /* Box-modell/beteende */
            margin-bottom: $EVENT-CARD-CALENDAR__TIME--SMALL--MARGIN-BOTTOM;

            /* Typografi */
            line-height: $EVENT-CARD-CALENDAR__TIME--SMALL--LINE-HEIGHT;
        }
    }

    &__venue {
        /* Typografi */
        color: $EVENT-CARD-CALENDAR__VENUE--COLOR;

        &:before {
            /* Typografi */
            font-family: $EVENT-CARD-CALENDAR__VENUE--BEFORE--FONT-FAMILY; 
            color: $EVENT-CARD-CALENDAR__VENUE--BEFORE--COLOR;

            /* Blandat/övrigt */
            content: $EVENT-CARD-CALENDAR__VENUE--BEFORE--CONTENT;
        }

        &--small {
            /* Box-modell/beteende */
            margin-bottom: $EVENT-CARD-CALENDAR__VENUE--SMALL--MARGIN-BOTTOM;

            /* Typografi */
            line-height: $EVENT-CARD-CALENDAR__VENUE--SMALL--LINE-HEIGHT;
        }
    }

    &__venue--sold-out {
        &:before {
            /* Typografi */
            color: $EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--COLOR;

            /* Blandat/övrigt */
            content: $EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--CONTENT;
        }
    }
}
  • URL: /components/raw/event-card-calendar/_event-card-calendar.scss
  • Filesystem Path: components/Molecules/event-card-calendar/_event-card-calendar.scss
  • Size: 4.3 KB
  • Content: 
    {
    "name": "regionhalland/event-card-calendar",
    "description": "Event card calendar",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/event-card-calendar/composer.json
  • Filesystem Path: components/Molecules/event-card-calendar/composer.json
  • Size: 307 Bytes
  • Content: 
    /* ---------------------------------------------- */
/*    Molekylen "Event card calendar"             */
/* ---------------------------------------------- */

// event-card-calendar - grundläggande inställningar
$EVENT-CARD-CALENDAR--ALIGN-ITEMS: flex-start;
$EVENT-CARD-CALENDAR--DISPLAY: flex;

// event-card-calendar - Small-modifier
$EVENT-CARD-CALENDAR--SMALL--ALIGN-ITEMS: center;
$EVENT-CARD-CALENDAR--SMALL--MARGIN-TOP: $space-5;

// date - grundläggande inställningar
$EVENT-CARD-CALENDAR__DATE--ALIGN-CONTENT: center;
$EVENT-CARD-CALENDAR__DATE--FLEX: 0 0 60px;
$EVENT-CARD-CALENDAR__DATE--HEIGHT: 60px;
$EVENT-CARD-CALENDAR__DATE--WIDTH: 60px;
$EVENT-CARD-CALENDAR__DATE--BACKGROUND-COLOR: $base2;
$EVENT-CARD-CALENDAR__DATE--TEXT-ALIGN: center;

// date - modifier "medium"
$EVENT-CARD-CALENDAR__DATE--MEDIUM--FLEX: 0 0 80px;
$EVENT-CARD-CALENDAR__DATE--MEDIUM--HEIGHT: 80px;
$EVENT-CARD-CALENDAR__DATE--MEDIUM--WIDTH: 80px;

// day - grundläggande inställningar
$EVENT-CARD-CALENDAR__DAY--MARGIN-TOP: $space-2;
$EVENT-CARD-CALENDAR__DAY--COLOR: $white;
$EVENT-CARD-CALENDAR__DAY--LINE-HEIGHT: $line-height--medium;

// day - medium
$EVENT-CARD-CALENDAR__DAY--MEDIUM--MARGIN-TOP: $space-3;

// day - large
$EVENT-CARD-CALENDAR__DAY--LARGE--MARGIN-TOP: $space-2; //em(10);

// month - grundläggande
$EVENT-CARD-CALENDAR__MONTH--COLOR: $white;
$EVENT-CARD-CALENDAR__MONTH--LINE-HEIGTH: $line-height--small; //1em;
$EVENT-CARD-CALENDAR__MONTH--FONT-WEIGHT: normal;

// description - grundläggande
$EVENT-CARD-CALENDAR__DESCRIPTION--MARGIN-LEFT: $space-5;

// title - grundläggande
$EVENT-CARD-CALENDAR__TITLE--LINE-HEIGHT: $line-height--large;

// text- grundläggande
$EVENT-CARD-CALENDAR--TEXT--PADDING-TOP: 1ex;

// link - grundläggande
$EVENT-CARD-CALENDAR__LINK--FONT-SIZE: inherit;
$EVENT-CARD-CALENDAR__LINK--TEXT-DECORATION: none;
$EVENT-CARD-CALENDAR__LINK--COLOR: inherit;
$EVENT-CARD-CALENDAR__LINK--CUROSR: pointer;

// link - Hover och active states
$EVENT-CARD-CALENDAR__LINK--HOVER--TEXT-DECORATION: underline;

// link - visited
$EVENT-CARD-CALENDAR__LINK--VISITED--COLOR: $link-visited;

// time - grundinställningar
$EVENT-CARD-CALENDAR__TIME--COLOR: $grey-darkest;
$EVENT-CARD-CALENDAR__TIME--BEFORE--FONT-FAMILY: $icon--font-family;
$EVENT-CARD-CALENDAR__TIME--BEFORE--CONTENT: "\e84d";

// time - small
$EVENT-CARD-CALENDAR__TIME--SMALL--MARGIN-BOTTOM: 0;
$EVENT-CARD-CALENDAR__TIME--SMALL--LINE-HEIGHT: 0.625em; //em(10);

// venue
$EVENT-CARD-CALENDAR__VENUE--COLOR: $grey-darkest;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--FONT-FAMILY: $icon--font-family;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--COLOR: $color-secondary;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--CONTENT: "\e83f";

// venue - small
$EVENT-CARD-CALENDAR__VENUE--SMALL--MARGIN-BOTTOM: 0;
$EVENT-CARD-CALENDAR__VENUE--SMALL--LINE-HEIGHT: 0.625em; //em(10);

// venue - sold out
$EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--COLOR: $warning;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--CONTENT: "\e8f6";
  • URL: /components/raw/event-card-calendar/event-card-calendar.settings.scss
  • Filesystem Path: components/Molecules/event-card-calendar/event-card-calendar.settings.scss
  • Size: 3 KB

Molekyeln “Event card calendar”

Versionshistorik

  • 1.0.0.20200203 Globala variabler används
  • 1.0.0.20200123 Justerat sökväg till label efter att atomen döpts om.
  • 1.0.0.20200117 Status “wip”
  • 1.0.0.20191210 Brytande ändringar - omimplementerad med ny namngivning och settingsfil.
  • 1.0.0.20191121 Flyttat till gitrepo

Notes

Komponenten fungerar bra på följande webbläsaren:

  • Internet Explorer 11
  • Microsoft Edge
  • Google Chrome
  • Mozila Firefox
  • Safari