@randstad-design/orbit-multitheme/dist/assets/theme-randstad/components/cards/job.css.map

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["../scss/04_organisms/cards/_general.scss","00_helpers/mixins/_word-break.scss","../scss/00_tools/cssVartoSass.scss","00_helpers/variables/_sizing.scss","00_helpers/variables/_transitions.scss","00_helpers/variables/_cards.scss","00_helpers/variables/_spacing.scss","00_helpers/mixins/_font-style.scss","00_helpers/variables/_fonts.scss","00_helpers/mixins/_colors.scss","00_helpers/variables/_colors.scss","00_helpers/mixins/_media-queries.scss","00_helpers/variables/_icons.scss","00_helpers/mixins/grid/_grid-columns.scss","00_helpers/mixins/cards/_general.scss","00_tools/_background-variants.scss","00_helpers/mixins/bg-map-buttons/_button-bg-map.scss","../scss/04_organisms/notifications/_notice-in-page.scss","00_helpers/mixins/notifications/_notice-in-page.scss"],"names":[],"mappings":"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BfuC,EAAA;EgBmB3C;IACE,sChBpByC;IgBqBzC,sChBrByC,EAAA;IgBmB1C;MAKG,+BhBxBuC,EAAA;EgB4B3C;IACE,6ChB7ByC;IgB8BzC,wChB9ByC,EAAA;IgB4B1C;MAKG,iChBjCuC,EAAA;EgBqC3C;IACE,sChBtCyC;IgBuCzC,qChBvCyC,EAAA;IgBqC1C;MAKG,8BhB1CuC,EAAA;EgB8C3C;IACE,kChB/CyC,EAAA;IakF/B;MGhCR,yChBlDuC,EAAA;MakF/B;QG7BN,yBhBrDqC,EAAA;IakF/B;MGhCR,yChBlDuC,EAAA;MakF/B;QG7BN,yBhBrDqC,EAAA;IakF/B;MGhCR,kChBlDuC,EAAA;MakF/B;QG7BN,mChBrDqC,EAAA;IakF/B;MGhCR,kChBlDuC,EAAA;MakF/B;QG7BN,mChBrDqC,EAAA;IakF/B;MGhCR,mDhBlDuC,EAAA;MakF/B;QG7BN,mChBrDqC,EAAA;IakF/B;MGhCR,mDhBlDuC,EAAA;MakF/B;QG7BN,6ChBrDqC,EAAA;IakF/B;MGhCR,mDhBlDuC,EAAA;MakF/B;QG7BN,mChBrDqC,EAAA","file":"job.css","sourcesContent":[".cards {\n  // specific for format-carousel\n  &__list--format-carousel {\n    display: flex;\n  }\n\n  // item\n  &__item {\n    @include word-break;\n    background: returnColorCSSVar('brand-tertiary');\n    border: 2px solid transparent;\n    border-radius: $border-radius--l;\n    display: flex !important; // overwrite potential inline style set by slick slider\n    flex-direction: column;\n    height: 100%;\n    min-height: 290px;\n    padding: $cards-item-spacing-bottom-top + 2 $cards-item-spacing-left-right +\n      2; //add 2 px to fit in grid\n    position: relative;\n    transition: border $transition-duration, color $transition-duration;\n  }\n\n  img {\n    align-self: flex-start;\n    flex-shrink: 0; // prevent image stretch in ie\n    max-width: 100%;\n  }\n\n  &__list--format-list & {\n    img {\n      max-width: $cards-item-image-width;\n    }\n  }\n\n  // header\n  &__header {\n    display: flex;\n    justify-content: space-between;\n    gap: 10px;\n  }\n\n  &__logo-title-container {\n    width: 100%;\n\n    .notice-in-page {\n      margin-top: $spacing--s;\n      max-width: unset;\n    }\n  }\n\n  // logo\n  &__logo {\n    margin-bottom: $spacing--s;\n    max-width: $cards-logo-max-width;\n    width: 100%;\n\n    .cards__logo-image {\n      background-position-y: center;\n      background-repeat: no-repeat;\n      background-size: contain;\n      max-height: $cards-logo-image-height;\n    }\n  }\n\n  // title\n  &__title {\n    @include font-style($cards-title);\n    min-width: 0; // fix issues with word-break on flex items\n  }\n\n  // link\n  &__link {\n    color: returnColorCSSVar('brand-secondary');\n    text-decoration: none;\n    text-decoration-color: transparent;\n    &:hover {\n      text-decoration: none;\n    }\n\n    // &:focus {\n    //   outline: solid currentColor;\n    // }\n\n    .make-entire-card-clickable {\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      z-index: 1;\n      width: 100%;\n    }\n  }\n\n  &__description {\n    @include color-dark-shade-alternative;\n    display: none;\n    margin: $spacing--s 0;\n    max-height: $baseline * 8.6;\n    overflow: hidden;\n    padding-right: 100px;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n\n  // icon toggler\n  .icon__toggler {\n    flex-shrink: 0;\n    margin-left: auto; // prevents svg from moving outside of parent\n    z-index: 2;\n\n    .icon {\n      @include color-dark-shade-alternative;\n    }\n\n    // prevent icon hover effect on touch devices\n    @media (hover: none) {\n      &:not(.icon__toggler--active):hover svg {\n        @include color-dark-shade-alternative;\n      }\n    }\n  }\n\n  // meta\n  &__meta {\n    @include font-style('body--m', 'body--l');\n    color: $color-brand--two;\n\n    &-item {\n      align-items: flex-start;\n      display: flex;\n      word-break: break-word;\n\n      & + & {\n        margin-top: $spacing--xxs;\n      }\n\n      .icon {\n        flex-shrink: 0;\n        margin-right: 15px;\n        margin-top: $baseline * 0.3;\n      }\n\n      &--link a {\n        white-space: pre-wrap; // fixes text behavior long words when meta items include a link\n      }\n    }\n  }\n\n  // card disabled\n  &__item--disabled {\n    .cards__title,\n    .cards__title a,\n    .cards__meta,\n    .cards__meta-item .icon,\n    .cards__date {\n      @include color-dark-shade-alternative;\n    }\n\n    .cards__info-wrapper,\n    .cards__backside-card,\n    .cards__backside-footer {\n      display: none;\n    }\n\n    .cards__link {\n      pointer-events: none;\n    }\n\n    .icon__toggler {\n      display: none;\n    }\n\n    .icon__toggler.icon__toggler--active {\n      display: block;\n    }\n  }\n\n  // footer\n  &__footer {\n    @include font-style('body--m', 'body--l');\n    display: flex;\n    justify-content: space-between;\n    margin-top: auto;\n  }\n\n  &__time-info {\n    display: flex;\n    flex-direction: column-reverse;\n    white-space: nowrap;\n  }\n\n  &__status-info {\n    @include font-style('body--m');\n  }\n\n  &__info-wrapper {\n    align-items: center;\n    background: transparent;\n    display: flex;\n    height: $baseline * 4;\n    justify-content: center;\n    margin-bottom: $baseline * -0.7;\n    margin-right: -5px;\n    width: $icon-size--xl;\n    z-index: 1;\n\n    .cards__info-button {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  &__info-button {\n    .icon {\n      transition: color $transition-duration--fast;\n    }\n  }\n\n  &__expiration {\n    display: inline-block;\n  }\n\n  &__date,\n  &__expiration {\n    margin: $spacing--xxs $spacing--xxs 0 0;\n  }\n\n  // specific styling for the backside/overlay description when clicked on info-button\n  &__backside-card {\n    height: 0;\n    opacity: 0;\n\n    .cards__backside-description {\n      @include font-style('body--m');\n      bottom: -$spacing--s; //set for animation transition\n      display: block; /* Fallback for non-webkit */\n      display: -webkit-box;\n      height: 88%;\n      margin-bottom: 20px;\n      opacity: 0;\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n    }\n\n    .cards__backside-footer {\n      bottom: -$spacing--s; //set for animation transition\n      display: inline-flex;\n      opacity: 0;\n\n      &--horizontal {\n        @include font-style('body--m');\n        align-items: center;\n        display: flex;\n        text-decoration: none;\n        white-space: nowrap;\n      }\n\n      &--job-link {\n        margin-right: 30px;\n      }\n\n      &--close-backside {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      .button-text {\n        color: inherit;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .icon {\n        color: inherit;\n        margin-right: 10px;\n        top: $cards-backside-footer-icon-top;\n      }\n    }\n  }\n\n  // backside is active\n  li.cards__item--backside-active {\n    .cards__backside-card,\n    & {\n      height: 100%;\n      opacity: 1;\n    }\n\n    .cards__backside-description {\n      bottom: 0; //set for animation transition\n      hyphens: auto;\n      opacity: 1;\n      position: relative;\n      transition: opacity $transition-duration ease 100ms,\n        bottom $transition-duration;\n      visibility: visible;\n\n      &::before {\n        content: '';\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n      }\n    }\n\n    .cards__backside-footer {\n      bottom: 0; //set for animation transition\n      opacity: 1;\n      position: relative;\n      transition: opacity $transition-duration ease 100ms,\n        bottom $transition-duration;\n      visibility: visible;\n\n      &--close-backside {\n        cursor: pointer;\n        opacity: 1;\n        transition-duration: $transition-duration--faster;\n        visibility: visible;\n\n        &:hover {\n          transition-duration: $transition-duration--faster;\n        }\n      }\n    }\n\n    .cards__header,\n    .cards__meta,\n    .cards__footer,\n    .cards__title,\n    .cards__badge {\n      display: none;\n    }\n  }\n\n  //class set from cards.js to animate close backside, code is duplicated for purpose of animation (iow, the other class does not exist at the moment its active)\n  &__item--animate {\n    .cards__backside-card,\n    & {\n      animation: blueToOffWhite 300ms;\n      height: 100%;\n      opacity: 1;\n    }\n\n    .cards__backside-description {\n      bottom: 0; //set for animation transition\n      display: block; /* Fallback for non-webkit */\n      display: -webkit-box;\n      height: 88%;\n      margin-bottom: 20px;\n      opacity: 0;\n      overflow: hidden;\n      pointer-events: none;\n      position: relative;\n      transition: opacity $transition-duration--faster;\n      visibility: visible;\n\n      &::before {\n        content: '';\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n      }\n    }\n\n    .cards__backside-footer {\n      bottom: 0;\n      display: inline-flex;\n      opacity: 0;\n      position: relative;\n      transition: bottom $transition-duration--faster;\n      visibility: visible;\n\n      &--close-backside {\n        opacity: 0;\n\n        .icon {\n          margin-right: 0;\n        }\n      }\n    }\n\n    .cards__header,\n    .cards__meta,\n    .cards__footer,\n    .cards__title {\n      display: none !important; //overwrite is needed because animation class is set by js for 300ms to overrule display flex *card.js\n    }\n  }\n\n  // 'more' card overwrites\n  &__item--more {\n    border: none;\n    min-height: 200px;\n\n    .cards__link {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    img {\n      margin: auto;\n    }\n\n    .button {\n      position: relative;\n      z-index: 1;\n    }\n\n    &-spherion {\n      justify-content: flex-end;\n      min-height: 300px;\n    }\n  }\n}\n\n// viewport s\n@include viewport--m('inversed') {\n  .cards {\n    padding: 0;\n\n    &__list {\n      //specific styling for carousel slider\n      &--format-carousel {\n        padding: 0 $grid-margin--s;\n      }\n\n      &--format-grid,\n      &--format-list {\n        .cards__item {\n          border-radius: 0;\n        }\n      }\n    }\n\n    .cards__backside-footer {\n      justify-content: space-between;\n      width: 100%;\n    }\n\n    .button-text {\n      display: none;\n    }\n  }\n  .cards__backside-card {\n    .cards__backside-description {\n      height: 84%;\n    }\n  }\n}\n\n// viewport m only\n@include viewport--m('range') {\n  .cards {\n    padding: 0 $grid-margin--m;\n\n    &__item--more {\n      img {\n        max-width: $cards-item-image-width;\n      }\n    }\n  }\n  .cards__backside-card {\n    .cards__backside-description {\n      height: 86%;\n    }\n  }\n}\n\n@include viewport--l('range') {\n  .cards__backside-footer {\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .button-text {\n    display: none;\n  }\n}\n\n// viewport m l\n@include viewport--m() {\n  .cards {\n    li.cards__item--backside-active .cards__backside-footer {\n      bottom: $spacing--xs;\n      max-width: 220px;\n    }\n\n    &__item--animate {\n      .cards__backside-footer {\n        bottom: $spacing--xs;\n      }\n    }\n  }\n}\n\n// viewport s - m\n@include viewport--l('inversed') {\n  .cards {\n    &__list.slick-slider {\n      width: grid-columns(5, 6);\n    }\n\n    &__list {\n      &--format-grid {\n        .cards__item {\n          margin-bottom: $spacing--xxs;\n        }\n      }\n\n      &--format-list {\n        .cards__item {\n          margin-bottom: $spacing--xs;\n        }\n      }\n    }\n\n    &__meta {\n      margin-bottom: $baseline * 1.5;\n      margin-top: $spacing--s;\n    }\n\n    // slick slider\n    .slick {\n      &-list {\n        overflow: visible;\n      }\n\n      &-track {\n        display: flex !important; // overwrite inline values set by slick slider\n      }\n\n      &-slide {\n        float: none;\n        height: inherit;\n\n        > div {\n          height: 100%;\n        }\n      }\n    }\n\n    // styling for cards carousel prior to slick init\n    // this will minimize content jumps\n    &__list:not(.slick-slider) {\n      width: 100%;\n\n      // item\n      .cards__item {\n        .cards__list--format-carousel & {\n          flex-shrink: 0;\n          height: auto;\n          width: grid-columns(5, 6);\n\n          &:not(:first-child) {\n            margin-left: 6vw;\n          }\n        }\n      }\n    }\n  }\n}\n\n// viewport l\n@include viewport--l {\n  .cards {\n    // meta\n    &__meta {\n      margin-top: $spacing--s;\n\n      .cards__meta-item:last-child {\n        margin-bottom: ($spacing--xs);\n      }\n    }\n\n    // list\n    &__list {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-between;\n      width: 100%;\n\n      &::after {\n        content: '';\n        display: block;\n      }\n\n      &::after,\n      .cards__item {\n        margin-bottom: $spacing--m; // margin bottom used because of IE11 (instead of grid-gap)\n        width: grid-columns(4, 12);\n      }\n\n      // if supported use grid\n      @supports (display: grid) {\n        display: grid;\n        grid-template-columns: repeat(3, grid-columns(4, 12));\n\n        & {\n          margin-bottom: $spacing--xxs;\n        }\n\n        &--halves {\n          grid-template-columns: repeat(2, grid-columns(6, 12));\n        }\n\n        &--quarters {\n          grid-template-columns: repeat(4, grid-columns(3, 12));\n          grid-row-gap: 40px;\n        }\n\n        .cards__item {\n          width: auto;\n\n          &:not(:first-child) {\n            margin-left: 0;\n          }\n        }\n        &::after {\n          content: '';\n          display: none;\n        }\n      }\n\n      // li.cards__item--backside-active .cards__backside-footer {\n      //   .icon {\n      //     top: $cards-list-backside-footer-icon-top;\n      //   }\n      // }\n\n      &--format-grid,\n      &--format-carousel {\n        .cards__meta {\n          @include font-style('body--m');\n          display: flex;\n          flex-direction: column;\n          justify-content: space-evenly;\n        }\n\n        .cards__date {\n          @include font-style('body--m');\n        }\n      }\n\n      // styling specific for display as a list\n      &--format-list {\n        &::after,\n        .cards__item {\n          margin-bottom: $spacing--s;\n          width: 100%;\n        }\n\n        @supports (display: grid) {\n          display: grid;\n          grid-template-columns: repeat(1, grid-columns(12, 12));\n        }\n\n        .cards__title {\n          @include font-style($cards-title--l, $cards-title--l);\n        }\n\n        .cards__meta {\n          display: flex;\n          flex-flow: wrap;\n          margin-top: $baseline * 3;\n        }\n\n        .cards__meta-item {\n          align-items: center;\n          margin-right: $spacing--m;\n          margin-top: 0;\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n\n          .icon {\n            margin: 0 $spacing--xs 0 0;\n            cursor: pointer;\n            z-index: 0;\n          }\n        }\n\n        .cards__description {\n          display: block;\n          display: -webkit-box;\n        }\n\n        .cards__footer {\n          display: block;\n\n          .cards__date {\n            @include font-style('body--l');\n            margin-right: $spacing--xs;\n          }\n        }\n\n        .cards__info-wrapper {\n          display: none;\n        }\n      }\n    }\n\n    // item\n    &__item {\n      flex-shrink: 0;\n      height: auto;\n      padding: $cards-item-spacing--l;\n      width: 100%;\n\n      // hover state for all cards except 'more' and 'disabled'\n      &:not(.cards__item--more):not(.cards__item--disabled):hover {\n        transition: border $transition-duration--fast;\n      }\n\n      // active state (set by JS) for all cards except 'more', 'disabled' and 'backside active'\n      &--active:not(.cards__item--more):not(.cards__item--backside-active):not(.cards__item--disabled) {\n        &,\n        &:hover,\n        &:focus {\n          transition: border $transition-duration--fast,\n            background-color $transition-duration--fast;\n        }\n      }\n    }\n  }\n}\n\n// viewport xl\n@include viewport--xl {\n  .cards {\n    &__list--format-grid {\n      .cards__item {\n        margin-bottom: $baseline * 4; // margin bottom used because of IE11 (instead of grid-gap)\n      }\n    }\n  }\n}\n\n// background mappings (was on top for cascading)\n@include cards-general-background-mapping;\n","@mixin word-break {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n}\n","// Returns CSS4 color variables\n@function returnColorCSSVar($color-name) {\n  @return var(--color-#{$color-name});\n}\n","// baseline size, used for every calculation\n$baseline: 10px;\n\n// border radius\n$border-radius: 4px;\n$border-radius--s: 3px;\n$border-radius--xs: 2px;\n$border-radius--m: 5px;\n$border-radius--m-l: 6px;\n$border-radius--l: 8px;\n$border-radius--max: 30px;\n","$transition-duration--faster: 0.1s;\n$transition-duration--fast: 0.2s;\n$transition-duration: 0.3s;\n$transition-duration--slow: 0.5s;\n$transition-duration--slower: 0.7s;\n$transition-duration--slowest: 0.9s;\n","// spacing\n$cards-item-spacing-left-right: 21px;\n$cards-item-spacing-bottom-top:$baseline * 2.6;\n$cards-item-spacing--l: $spacing--m;\n\n// sizes\n$cards-item-image-width: $baseline * 20;\n$cards-logo-max-width: $baseline * 10;\n$cards-logo-image-height: $baseline * 4;\n\n// titles\n$cards-title: 'title--xs';\n$cards-title--l: 'title--s';\n\n// back of card\n$cards-list-backside-footer-icon-top: 2px;\n\n$cards-backside-footer-icon-top: 1px;\n\n// event\n$cards-event-text-font-style: 'body--m';\n$cards-event-title-font-style: 'title--s';\n$cards-event-title-font-style--l: 'title--m';\n","// | variable      | size  | calculation     |\n// |---------------|-------|-----------------|\n// | $spacing--xxs |  5px  | $baseline * 0.5 |\n// | $spacing--xs  | 10px  | $baseline * 1   |\n// | $spacing--s   | 20px  | $baseline * 2   |\n// | $spacing--m   | 30px  | $baseline * 3   |\n// | $spacing--l   | 50px  | $baseline * 5   |\n// | $spacing--xl  | 80px  | $baseline * 8   |\n// | $spacing--xxl | 130px | $baseline * 13  |\n\n$spacing--xxs: $baseline * 0.5;\n$spacing--xs: $baseline * 1;\n$spacing--s: $baseline * 2;\n$spacing--m: $baseline * 3;\n$spacing--l: $baseline * 5;\n$spacing--xl: $baseline * 8;\n$spacing--xxl: $baseline * 13;\n\n// grid spacings\n$grid-margin--s: 25px;\n$grid-margin--m: 50px;\n$grid-margin--l: 100px;\n","// @font-style($font-style-small, $font-style-large)\n\n// $font-style-small - Desired type size for small/medium viewport.\n// $font-style-large - Desired type size for large viewport. This includes default fallback\n//                     for the S/M viewport.\n\n//\n// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 12  | body s     | 12  | body s     | 12 |                 |\n\n// import variables needed for the mixins\n@import '../variables/__variables.scss';\n\n// mixin to get applicable properties for chosen type size\n@mixin typeset($type) {\n  $type: map-get($types, $type);\n\n  font-size: (map-get($type, font-size));\n  letter-spacing: (map-get($type, letter-spacing));\n  line-height: (map-get($type, line-height));\n}\n\n// get correct font characteristics based on font\n@mixin type-size($size) {\n  $size: map-get($type-sizes, $size);\n  @include typeset($size);\n}\n\n// mixin to get font-size\n@mixin font-style($font-style-small: 'body--l', $font-style-large: null) {\n  // if both arguments are added\n  @if ($font-style-large != null) {\n    // make sure $font-style-small & $font-style-large are not equal\n    @if ($font-style-small != $font-style-large) {\n      @include type-size($font-style-small);\n\n      @include viewport--l {\n        @include type-size($font-style-large);\n      }\n    } @else {\n      @include type-size($font-style-small);\n    }\n  } @else {\n    @include type-size($font-style-small);\n    // default font style mappings\n    @if ($font-style-small == 'title--l') {\n      @include viewport--l {\n        @include type-size('title--xxl');\n      }\n    } @else if ($font-style-small == 'title--m') {\n      @include viewport--l {\n        @include type-size('title--xl');\n      }\n    } @else if ($font-style-small == 'title--s') {\n      @include viewport--l {\n        @include type-size('title--m');\n      }\n    }\n  }\n}\n","// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 14  | body s     | 14  | body s     | 14 |                 |\n// | body xs    | 12  | body xs    | 12  | body xs    | 12 |                 |\n\n// font family\n$font-family-theme: Graphik, Tahoma, 'sans-serif';\n\n// font mappings - font-size / line-height / letter-spacing\n$types: (\n  12: (\n    font-size: 12px,\n    line-height: 15px,\n    letter-spacing: 0\n  ),\n  14: (\n    font-size: 14px,\n    line-height: 25px,\n    letter-spacing: 0\n  ),\n  16: (\n    font-size: 16px,\n    line-height: 25px,\n    letter-spacing: 0\n  ),\n  18: (\n    font-size: 18px,\n    line-height: 30px,\n    letter-spacing: 0\n  ),\n  20: (\n    font-size: 20px,\n    line-height: 30px,\n    letter-spacing: 0\n  ),\n  26: (\n    font-size: 26px,\n    line-height: 30px,\n    letter-spacing: -1px\n  ),\n  32: (\n    font-size: 32px,\n    line-height: 40px,\n    letter-spacing: -1px\n  ),\n  40: (\n    font-size: 40px,\n    line-height: 45px,\n    letter-spacing: -2px\n  ),\n  60: (\n    font-size: 60px,\n    line-height: 60px,\n    letter-spacing: -3px\n  ),\n  80: (\n    font-size: 80px,\n    line-height: 80px,\n    letter-spacing: -4px\n  )\n);\n\n// type-sizes - links the type-size to correct font mapping\n$type-sizes: (\n  title--xxl: 80,\n  title--xl: 60,\n  title--l: 40,\n  title--m: 32,\n  title--s: 26,\n  title--xs: 20,\n  title--xxs: 18,\n  body--l: 18,\n  body--m: 16,\n  body--s: 14,\n  body--xs: 12\n);\n","@mixin color-dark-shade-main {\n  color: returnColorCSSVar('brand-secondary-tint-60');\n  fill: returnColorCSSVar('brand-secondary-tint-60');\n}\n\n@mixin color-dark-shade-alternative {\n  color: returnColorCSSVar('brand-secondary-tint-80');\n  fill: returnColorCSSVar('brand-secondary-tint-80');\n}\n\n","$color-brand--one: #2175d9;\n$color-brand--two: #0f1941;\n$color-brand--three: #6ba5b4;\n$color-brand--four: #f7f5f0;\n$color-brand--five: #e74536;\n$color-brand--six: #ffb511;\n$color-brand--white: #fff;\n\n// user interface colors\n//\n// additional colors, such as surface, background and error colors, typically don't\n// represent the brand but can be applied sparingly to accent select parts of your UI.\n//\n\n$color--one-7: #ecf3fc;\n$color--one-80: #4d91e1;\n$color--one-130: #175197;\n\n$color--two-50: #878ca0;\n$color--two-60: #6c738d;\n$color--two-80: #3c4464;\n$color--two-180: #03050d;\n\n$color--grey: #d7d7d7;\n$color--grey-10: #f7f7f7;\n\n$color--white: #fff;\n\n$color--four-80: #f9f7f3;\n$color--four-110: #dedcd8;\n\n$color--negative: #e00f0f;\n$color--negative-5: #fdf3f3;\n\n$color--positive: #257f56;\n$color--positive-5: #f4f8f6;\n\n$color--warning: #e9a204;\n$color--warning-10: #fcf5e5;\n\n// user interface opacities\n//\n// opacity colors are only used on modal backgrounds. HEX colors would not be\n// used due to the colors' alpha layers.\n//\n\n$color-alpha--one-10: rgba(33, 117, 217, 0.1);\n$color-alpha--one-30: rgba(33, 117, 217, 0.3);\n\n$color-alpha--two-10: rgba(15, 25, 65, 0.1);\n$color-alpha--two-30: rgba(15, 25, 65, 0.3);\n$color-alpha--two-70: rgba(15, 25, 65, 0.7);\n$color-alpha--two-80: rgba(15, 25, 65, 0.8);\n\n// ! This needs to be changed to the new white colors in story (DF909-751)\n$color-alpha--four-30: rgba(247, 245, 240, 0.3);\n$color-alpha--four-50: rgba(247, 245, 240, 0.5);\n\n// set color values\n$color--disabled: $color--two-60;\n$color--text: $color-brand--two;\n$color--one-light: $color--one-7;\n\n// degree brand colors\n// used in the charts as extra color scheme\n\n$color-brand--one-65: #7aace8;\n$color-brand--one-45: #a6c8f0;\n$color-brand--one-25: #bbd4f1;\n$color-brand--two-65: #636983;\n$color-brand--two-45: #999aa8;\n$color-brand--two-25: #8a8caf;\n$color-brand--three-65: #020202;\n$color-brand--three-45: #c4dbe1;\n$color-brand--five-65: #f18f86;\n$color-brand--five-45: #f5b5af;\n$color-brand--five-25: #f7beb9;\n$color-brand--six-65: #ffd370;\n$color-brand--six-45: #ffe1a0;\n$color-brand--six-25: #fce8b5;\n \n\n// notice colors\n$color-notice--warning: #fff2f2;\n","// @viewport--x($reversed)\n\n// viewport s\n@mixin viewport--s($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width:0) and (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--s}) {\n      @content;\n    }\n  }\n}\n\n// viewport m\n@mixin viewport--m($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--m - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--m) and (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--m}) {\n      @content;\n    }\n  }\n}\n\n// viewport l\n@mixin viewport--l($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--l) and (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--l}) {\n      @content;\n    }\n  }\n}\n\n// viewport xl\n@mixin viewport--xl($type: null) {\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--xl) and (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xl}) {\n      @content;\n    }\n  }\n}\n\n// viewport xxl\n@mixin viewport--xxl($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xxl}) {\n      @content;\n    }\n  }\n}\n\n// viewport range\n@mixin viewport--range($viewport1, $viewport2) {\n  @media (min-width: #{($viewport1)}) and (max-width: #{($viewport2 - 1)}) {\n    @content;\n  }\n}\n\n// Internet Explorer 10 + 11\n@mixin internet-explorer-10-11 {\n  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n    @content;\n  }\n}\n","// icons\n$icon-size: $baseline * 2;\n$icon-size--xs: $baseline * 0.8;\n$icon-size--s: $baseline * 1.6;\n$icon-size--l: $baseline * 3;\n$icon-size--xl: $baseline * 4;\n$icon-size--xxl: $baseline * 6;\n$icon-size--xxxl: $baseline * 12;\n","// @grid-columns($columns, $columns-total, $grid-gutter)\n\n// grid for viewport S & M:\n// 6 columns / 28 units\n//\n//  |   |   |   |   |   |   |   |   |   |   |   |\n//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |\n//  |   |   |   |   |   |   |   |   |   |   |   |\n//\n//\n// grid for vieport L:\n// 12 columns / 58 units\n//\n//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |\n//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |\n//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |\n\n@function grid-columns($columns, $columns-total, $grid-gutter: null) {\n  $column-gutter-diff: ($grid-column-units - $grid-gutter-units);\n\n  $column-units: ($columns * $grid-column-units) + (($columns - $column-gutter-diff) * $grid-gutter-units);\n  $columns-total: ($columns-total * $grid-column-units) + (($columns-total - $column-gutter-diff) * $grid-gutter-units);\n\n  // if grid gutter is provided use it in calculation\n  @if ($grid-gutter) {\n    @return calc(((#{$column-units} + (#{$grid-gutter} * #{$grid-gutter-units})) /#{$columns-total}) * 100%);\n  }\n  // if grid-gutter is not provided return default calculation\n  @else {\n    @return calc((#{$column-units}/#{$columns-total}) * 100%);\n  }\n}\n","@mixin cards-general-background-mapping {\n  .bg-variant-brand-tertiary {\n    .cards__item {\n      background: returnColorCSSVar('white');\n    }\n    .cards__link {\n      color: returnColorCSSVar('brand-primary');\n      &:hover {\n        color: returnColorCSSVar('brand-primary');\n      }\n    }\n  }\n\n  .cards__item--disabled {\n    @include bg-variants(\n      $isChained: true,\n      $supportedBackgrounds: (\n        'white',\n        'brand-tertiary'\n      )\n    ) {\n      .cards__link {\n        color: variant-property('bodySecondary');\n      }\n    }\n  }\n\n  .cards__item--more {\n    @include bg-variants(\n      $isChained: true,\n      $supportedBackgrounds: (\n        'brand-primary'\n      )\n    ) {\n      .button {\n        @include button-bg-map;\n      }\n    }\n  }\n\n  // hover state for all cards except 'more' and 'disabled'\n  .cards__item:not(.cards__item--more):not(.cards__item--disabled):hover {\n    border-color: returnColorCSSVar('brand-primary');\n  }\n\n  // active state (set by JS) for all cards except 'more', 'disabled' and 'backside active'\n  .cards__item--active:not(.cards__item--more):not(.cards__item--backside-active):not(.cards__item--disabled) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: returnColorCSSVar('brand-primary-tint-7');\n      border-color: returnColorCSSVar('brand-primary');\n    }\n  }\n\n  // icons front of card\n\n  .cards__item {\n    @include bg-variants(\n      $isChained: true,\n      $supportedBackgrounds: (\n        'brand-tertiary'\n      )\n    ) {\n      .cards__meta-item .icon,\n      .cards__time-info,\n      .cards__info-button .icon {\n        @include color-dark-shade-alternative;\n      }\n      .cards__link {\n        color: variant-property('linkIdle');\n      }\n    }\n  }\n\n  .cards__item {\n    @include bg-variants(\n      $isChained: true,\n      $supportedBackgrounds: (\n        'white'\n      )\n    ) {\n      .cards__meta-item .icon,\n      .cards__time-info,\n      .cards__info-button .icon {\n        @include color-dark-shade-main;\n      }\n    }\n  }\n\n  // info icon\n  .cards__info-wrapper:hover svg {\n    color: returnColorCSSVar('brand-secondary');\n  }\n\n  // heart icon\n  .icon__toggler {\n    .icon + .icon {\n      color: returnColorCSSVar('brand-quinary');\n    }\n\n    &:hover svg {\n      fill: returnColorCSSVar('brand-quinary');\n    }\n  }\n\n  // back of card\n\n  .cards__item.cards__item--backside-active {\n    background: returnColorCSSVar('brand-primary');\n\n    .cards__backside-description,\n    .cards__backside-footer--job-link {\n      color: returnColorCSSVar('white');\n    }\n\n    .cards__backside-description::before {\n      background: linear-gradient(\n        to bottom,\n        returnColorCSSVar('brand-primary-alpha-10'),\n        80%,\n        returnColorCSSVar('brand-primary')\n      );\n    }\n\n    .cards__backside-footer .icon {\n      color: inherit;\n    }\n\n    .cards__backside-footer--close-backside {\n      color: returnColorCSSVar('white-alpha-50');\n\n      &:hover {\n        color: returnColorCSSVar('white');\n      }\n    }\n  }\n\n  // ! deprecation warning old bg mapping.\n  .bg-brand--off-white .cards__item {\n    background: $color-brand--four;\n  }\n\n  .cards__item {\n    &.cards__item--backside-active {\n      background: $color-brand--one;\n    }\n\n    &.cards__item--more {\n      background: $color-brand--one;\n    }\n  }\n\n  .cards__item--animate {\n    .cards__backside-card,\n    & {\n      animation: blueToWhite 300ms;\n    }\n  }\n  .cards__info-button .icon,\n  .cards .icon__toggler .icon,\n  .cards__meta-item.cards__meta-item .icon {\n    color: $color--two-60;\n  }\n\n  .icon__toggler .icon + .icon {\n    color: $color-brand--five;\n  }\n\n  //keyframes animation\n  @keyframes blueToOffWhite {\n    from {\n      background-color: returnColorCSSVar('brand-primary');\n    }\n    to {\n      background-color: returnColorCSSVar('brand-tertiary');\n    }\n  }\n\n  @keyframes blueToWhite {\n    from {\n      background-color: returnColorCSSVar('brand-primary');\n    }\n    to {\n      background-color: returnColorCSSVar('white');\n    }\n  }\n}\n","@import '../00_settings/background-variants-color-map';\n// Creates the .bg-variant-#{$variant} classes with the right background-color property from the background-variants-color-map\n// Use only once to set up the utilities\n// e.g.\n//\n// @include bg-variant-classes();\n@mixin bg-variant-classes($backgroundmap: $backgrounds) {\n  @each $variant, $value in $backgroundmap {\n    $backgroundColor: map-get($value, 'background');\n    $defaultTextColor: map-get($value, 'bodyPrimary');\n\n    .bg-variant-#{$variant} {\n      background-color: returnColorCSSVar($backgroundColor);\n      color: returnColorCSSVar($defaultTextColor);\n    }\n  }\n}\n\n// Iterates over all backgrounds mapped in background-variants-color-map and outputs whatever is wrapped inside it with a .bg-variant-#{$variant} class selector before it\n// .bg-variant-#{$variant} &\n// Use together with varient-property function\n// Pass the $supportedBackgrounds as a list, if you only want to create classes for certain backgrounds\n// Set the $isChained to true, if you need to have a class that is chained to the parent e.g. .block.bg-variant-brand-primary\n// e.g.\n//\n// .divider {\n//   @include bg-variants(\n//     $supportedBackgrounds: (\n//       'brand-primary',\n//       'brand-senary'\n//     )\n//   ) {\n//     color: variant-property('divider');\n//   }\n// }\n//\n// .divider {\n//   @include bg-variants() {\n//     border-color: variant-property('divider');\n//   }\n// }\n@mixin bg-variants(\n  $backgroundmap: $backgrounds,\n  $supportedBackgrounds: null,\n  $isChained: false\n) {\n  @if ($supportedBackgrounds != null) {\n    @each $variant in $supportedBackgrounds {\n      $className: if(\n        $isChained==true,\n        '.bg-variant-#{$variant}#{&}',\n        '.bg-variant-#{$variant} &'\n      );\n\n      @at-root #{$className} {\n        $variant-map: () !global;\n\n        $supportedMap: if(\n          map-has-key($backgroundmap, $variant),\n          map-get($backgroundmap, $variant),\n          null\n        );\n\n        @each $key, $value in $supportedMap {\n          $variant-map: map-merge(\n            $variant-map,\n            (\n              $key: returnColorCSSVar($value)\n            )\n          ) !global;\n        }\n\n        @content;\n        $variant-map: null !global;\n      }\n    }\n  } @else {\n    @each $variant, $map in $backgroundmap {\n      $className: if(\n        $isChained==true,\n        '.bg-variant-#{$variant}#{&}',\n        '.bg-variant-#{$variant} &'\n      );\n\n      @at-root #{$className} {\n        // Makes a global map that can be accessed by the variant-property function\n        $variant-map: () !global;\n\n        @each $key, $submap in $map {\n          $value: map-get(map-get($backgroundmap, $variant), '#{$key}');\n          $variant-map: map-merge(\n            $variant-map,\n            (\n              $key: returnColorCSSVar($value)\n            )\n          ) !global;\n        }\n\n        @content;\n        $variant-map: null !global;\n      }\n    }\n  }\n}\n\n// function to use inside the wrapped content and access the\n// Use together with bg-varients mixin\n// e.g.\n//\n// .divider {\n//   @include bg-variants() {\n//     border-color: variant-property('divider');\n//   }\n// }\n@function variant-property($key) {\n  $value: map-get($variant-map, $key);\n\n  @if ($value != null) {\n    @return map-get($variant-map, $key);\n  } @else {\n    @return null;\n  }\n}\n","@mixin button-bg-map {\n  border-color: variant-property('ghostBorderIdle');\n  color: variant-property('ghostTextIdle');\n\n  .icon svg {\n    fill: variant-property('ghostTextIdle');\n  }\n\n  &:hover,\n  &:focus {\n    background-color: variant-property('ghostBackgroundHover');\n    color: variant-property('ghostTextHover');\n\n    .icon svg {\n      fill: variant-property('ghostTextHover');\n    }\n  }\n\n  &:active {\n    background-color: variant-property('ghostBackgroundPressed');\n    color: variant-property('ghostTextPressed');\n    border-color: variant-property('ghostBackgroundPressed');\n\n    .icon svg {\n      fill: variant-property('ghostTextPressed');\n    }\n  }\n}\n",".notice-in-page {\n  border: 1px solid;\n  border-radius: $border-radius;\n  display: flex;\n  padding: $spacing--s;\n\n  @include viewport--l {\n    max-width: $baseline * 49;\n  }\n\n  .icon {\n    margin-right: $baseline * 1.5;\n    min-width: $baseline * 2;\n    padding-top: $baseline * 0.2;\n  }\n\n  &__body-copy {\n    @include font-style('body--m');\n  }\n\n  @include notice-in-page-bg-map;\n}\n","@mixin notice-in-page-bg-map {\n\n  &__body-copy {\n    color: returnColorCSSVar('brand-secondary');\n\n    a,\n    a:hover,\n    a:focus {\n      color: returnColorCSSVar('brand-secondary');\n    }\n  }\n\n  &--negative {\n    background: returnColorCSSVar('ui-negative-5');\n    border-color: returnColorCSSVar('ui-negative');\n\n    .icon {\n      color: returnColorCSSVar('ui-negative');\n    }\n  }\n\n  &--positive {\n    background: returnColorCSSVar('ui-positive-5');\n    border-color: returnColorCSSVar('ui-positive');\n\n    .icon {\n      color: returnColorCSSVar('ui-positive');\n    }\n  }\n\n  &--informative {\n    background: returnColorCSSVar('brand-primary-tint-7');\n    border-color: returnColorCSSVar('brand-primary');\n\n    .icon {\n      color: returnColorCSSVar('brand-primary');\n    }\n  }\n\n  &--warning {\n    background: returnColorCSSVar('ui-warning-10');\n    border-color: returnColorCSSVar('ui-warning');\n\n    .icon {\n      color: returnColorCSSVar('ui-warning');\n    }\n  }\n\n  &--subtle {\n    border-color: returnColorCSSVar('gray-20');\n\n    @include bg-variants() {\n      border-color: variant-property('divider');\n\n      .notice-in-page__body-copy {\n        color: variant-property('bodyPrimary');\n      }\n    }\n  }\n}\n\n"]}