@randstad-design/orbit-multitheme/dist/assets/theme-spherion/bundles/headers.css.map

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["00_helpers/mixins/_media-queries.scss","../scss/03_molecules/_media-block.scss","00_helpers/mixins/grid/_grid-columns.scss","00_helpers/variables/_sizing.scss","00_helpers/mixins/_media-align.scss","00_helpers/variables/_spacing.scss","../scss/04_organisms/headers/_header.scss","00_helpers/mixins/grid/_grid-gutter.scss","00_helpers/mixins/_font-style.scss","00_helpers/variables/_fonts.scss"],"names":[],"mappings":"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","file":"headers.css","sourcesContent":["// @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","// default\n@include viewport--l {\n  .media-block {\n    align-items: center;\n    display: flex;\n    margin-left: auto;\n    position: relative;\n    width: grid-columns(7, 12);\n\n    img {\n      bottom: 0;\n      flex-shrink: 0; // fix image stretch in IE\n      margin: auto;\n      max-height: 100%;\n      max-width: none;\n      position: absolute;\n    }\n  }\n}\n\n// scalable\n.media-block-scalable {\n  position: relative;\n\n  @include viewport--l {\n    width: grid-columns(7, 12);\n  }\n\n  img {\n    height: 100%;\n  }\n}\n\n// boxed\n.media-block--boxed {\n  overflow: hidden;\n  position: relative;\n\n  img {\n    border-radius: $border-radius;\n\n    @include viewport--l {\n      border-radius: $border-radius--l;\n      height: 100%; //new\n      object-fit: cover; //new\n      position: static;\n      width: 100%; //new\n    }\n  }\n}\n\n// boxed large\n.media-block.media-block--boxed-large {\n  overflow: hidden;\n\n  // viewport s - m\n  @include viewport--l('inversed') {\n    @include media-align('right');\n    border-radius: $border-radius;\n    height: $baseline * 20;\n    margin: 0;\n    position: relative;\n\n    img {\n      max-height: 120%;\n    }\n  }\n\n  // viewport l\n  @include viewport--l {\n    @include media-align;\n    border-radius: $border-radius--l;\n    bottom: 0;\n    left: $grid-margin--l;\n    margin: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: calc(100% - (2 * #{$grid-margin--l}));\n  }\n}\n\n// contain\n@include viewport--l {\n  .media-block--contain {\n    align-items: center;\n    display: flex;\n\n    img {\n      max-width: 100%;\n      position: static;\n    }\n  }\n}\n\n// full / half width\n@include viewport--l {\n  .media-block {\n    // half/full width image\n    &--half-width,\n    &--full-width {\n      bottom: 0;\n      margin: 0;\n      overflow: hidden;\n      position: absolute;\n      top: -1px; // small correction to fix browser rounding issues\n      img {\n        min-width: 100%;\n      }\n    }\n    // half width\n    &--half-width {\n      width: 50%;\n    }\n    // full width\n    &--full-width {\n      @include media-align;\n      left: 0;\n      width: 100%;\n    }\n  }\n}\n\n// center\n.media-block--center {\n  // center align image horizontally & vertically\n  @include media-align;\n}\n\n// right\n.media-block--right {\n  // center align image vertically & horizontally to the right\n  @include media-align('right');\n}\n\n.media-block--left {\n  //center align image vertically & horizontally to the left\n  @include media-align('left');\n}\n\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","// 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","// new mixin with alignment options\n@mixin media-align($alignX: 'center', $alignY: 'center') {\n  img {\n    bottom: auto;\n    max-height: none;\n    max-width: none;\n    min-height: 100%;\n    min-width: 100%;\n    position: absolute;\n    top: 50%;\n    // if supported, align image using object-fit\n    @supports (object-fit: cover) {\n      bottom: 0;\n      left: 0;\n      object-fit: cover;\n      height: 100%;\n      right: 0;\n      transform: none;\n      top: 0;\n      width: 100%;\n    }\n    // center align\n    @if ($alignX == 'center') {\n      left: 50%;\n      right: auto;\n      transform: translate(-50%, -50%);\n      // if supported, align image using object-fit\n      @supports (object-fit: cover) {\n        object-position: center center;\n      }\n    }\n    // right align\n    @if ($alignX == 'right') {\n      left: auto;\n      right: 0;\n      transform: translateY(-50%);\n      width: auto;\n      // if supported, align image using object-fit\n      @supports (object-fit: cover) {\n        object-position: center right;\n      }\n    }\n    // left align\n    @if ($alignX == 'left') {\n      left: 0;\n      right: auto;\n      transform: translateY(-50%);\n      width: auto;\n      // if supported, align image using object-fit\n      @supports (object-fit: cover) {\n        object-position: center left;\n      }\n    }\n  }\n}\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",".header {\n  position: relative;\n\n  &__content {\n    padding-bottom: $header-content-spacing-bottom;\n    padding-top: $header-content-spacing-top;\n    // add position and z-index to stack above animation\n    position: relative;\n    z-index: 1;\n  }\n\n  &__text-container {\n    padding-top: 20px;\n    padding-bottom: 50px;\n    display: grid;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    column-gap: grid-gutter('l');\n\n    @include viewport--l {\n      flex: 0 0 grid-columns(7, 12);\n      padding-top: 50px;\n      padding-bottom: 80px;\n    }\n\n    &--large {\n      @include viewport--l {\n        padding-top: 130px;\n        padding-bottom: 130px;\n      }\n    }\n  }\n\n  &__media-container {\n    bottom: 0;\n    display: none;\n    max-width: 600px;\n    position: absolute;\n    right: 100px;\n\n    @include viewport--l {\n      display: block;\n\n      img {\n        position: relative;\n        top: 50px;\n      }\n    }\n  }\n\n  &--alternative {\n    .header__text-container {\n      margin-left: auto;\n    }\n\n    .header__media-container {\n      right: auto;\n    }\n  }\n\n  &.header--split-view {\n    @include viewport--l('inversed') {\n      .header__text-container {\n        padding-top: 30px;\n      }\n      .header__media-container {\n        display: block;\n        position: relative;\n        right: auto;\n        left: auto;\n        margin: 0 auto;\n        padding: 0 85px;\n      }\n    }\n  }\n\n  .content-block__title {\n    &,\n    & h1 {\n      @include font-style('title--m');\n    }\n  }\n\n  .content-block__title--s {\n    &,\n    & h1 {\n      @include font-style('title--s', 'title--l');\n    }\n  }\n\n  // large\n  &--l .content-block__title {\n    &,\n    & h1 {\n      @include font-style('title--l');\n    }\n  }\n\n  &__bottom-text {\n    margin-top: $spacing--s;\n\n    p:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n\n// viewport s - l\n@include viewport--l('inversed') {\n  // hide all media except animation\n  .header__media:not(.media-block--animation) {\n    display: none;\n  }\n}\n\n// viewport l\n@include viewport--l {\n  .header {\n    &__wrapper {\n      display: flex;\n      flex-wrap: wrap;\n\n      .header--s & {\n        padding-bottom: $spacing--m;\n      }\n    }\n\n    &__content {\n      padding-bottom: $header-content-spacing-bottom--l;\n      padding-top: $header-content-spacing-top--l;\n      width: grid-columns(6, 12);\n      z-index: 2;\n\n      + .header__media:not(.media-block--full-width) {\n        width: grid-columns(6, 12);\n      }\n\n      // large - extra large\n      &--l-xl {\n        width: grid-columns(7, 12);\n      }\n\n      &--l-xl + .header__media:not(.media-block--full-width) {\n        width: grid-columns(5, 12);\n      }\n      // extra large\n      &--xl {\n        width: grid-columns(9, 12);\n      }\n      // full width\n      &--full-width {\n        width: 100%;\n      }\n    }\n    // large\n    &--l .header__content {\n      padding-bottom: $spacing--xxl;\n      padding-top: $spacing--xl;\n    }\n\n    .content-block__title {\n      overflow-wrap: normal;\n    }\n\n    .media-block:not(.media-block--full-width) img {\n      left: 0;\n      right: 0;\n    }\n\n    //gradient color overlay for readability nav items\n    .header__media {\n      picture:before {\n        content: ' ';\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: 1;\n      }\n\n      &.light-from-l picture:before {\n        background: linear-gradient(\n          180deg,\n          rgba(15, 25, 65, 0.5) 20%,\n          rgba(15, 25, 65, 0) 60%\n        );\n      }\n\n      &.dark-from-l picture:before {\n        background: linear-gradient(\n          180deg,\n          rgba(247, 245, 240, 0.7) 0%,\n          rgba(247, 245, 240, 0) 60%\n        );\n      }\n    }\n  }\n}\n","@function grid-gutter($viewport: 's') {\n  // viewport s\n  @if ($viewport == 's') {\n    @return calc((#{$grid-gutter-units}/#{$grid-units-total--s}) * 100%);\n  }\n  // viewport l\n  @else if ($viewport == 'l') {\n    @return calc((#{$grid-gutter-units}/#{$grid-units-total--l}) * 100%);\n  }\n}\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-family: (map-get($type, font-family));\n  font-size: (map-get($type, font-size));\n  text-transform: (map-get($type, text-transform));\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     | 12  | body s     | 12  | body s     | 12 |                 |\n\n// font family\n$font-family-theme: Montserrat, arial, sans-serif;\n$font-family-theme-semibold: Montserrat-SemiBold, arial, sans-serif;\n$font-family-theme-extrabold: Montserrat-ExtraBold, arial, sans-serif;\n// assets path to font\n// this path is overwritten in component CSS\n\n// font mappings - font-size / line-height / letter-spacing\n$types: (\n  12: (\n    font-size: 12px,\n    line-height: 15px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  14: (\n    font-size: 14px,\n    line-height: 25px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  16: (\n    font-size: 16px,\n    line-height: 25px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  18: (\n    font-size: 18px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  20: (\n    font-size: 20px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-extrabold\n  ),\n  20s: (\n    font-size: 20px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  26: (\n    font-size: 26px,\n    line-height: 30px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  26s: (\n    font-size: 26px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  32: (\n    font-size: 32px,\n    line-height: 40px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  32s: (\n    font-size: 32px,\n    line-height: 40px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  40: (\n    font-size: 40px,\n    line-height: 45px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  40s: (\n    font-size: 40px,\n    line-height: 45px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  60: (\n    font-size: 60px,\n    line-height: 60px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  80: (\n    font-size: 80px,\n    line-height: 80px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\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--l-slim: 40s,\n  title--m: 32,\n  title--m-slim: 32s,\n  title--s: 26,\n  title--s-slim: 26s,\n  title--xs: 20,\n  title--xs-slim: 20s,\n  title--xxs: 18,\n  body--l: 18,\n  body--m: 16,\n  body--s: 14,\n  body--xs: 12\n);\n"]}