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

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["00_helpers/mixins/_media-queries.scss","../scss/02_atoms/_gradient-overlay.scss","00_helpers/mixins/_gradient-overlay.scss"],"names":[],"mappings":"AA8DI;EC3DF;IAEI,WAAW;IACX,YAAY;IACZ,OAAO;IACP,kBAAkB;IAClB,MAAM;IACN,WAAW;IACX,UAAU,EAAA;ECNb;IAEG,yFAAqF;IAArF,qFAAqF,EAAA;EAKxF;IAEG,0FAAoF;IAApF,oFAAoF,EAAA;EAKvF;IAEG,+FAA2F;IAA3F,2FAA2F,EAAA;EAK9F;IAEG,gGAA0F;IAA1F,0FAA0F,EAAA,EAC3F","file":"photo.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","// gradient overlay -- mainly used for readability of text on media items\n\n@include viewport--l {\n  .gradient-overlay {\n    &::before {\n      content: '';\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n      z-index: 1;\n    }\n    @include gradient-overlay;\n  }\n}\n","// @mixin gradient-overlay -- mainly used for readability of text on media items\n/// src\\assets\\scss\\02_atoms\\_gradient-overlay.scss creates the ::before element, styled here\n\n@mixin gradient-overlay {\n  // horizontal dark from left\n  &--dark-from-left {\n    &::before {\n      background: linear-gradient(to right, rgba(15, 25, 65, 0.5), rgba(15, 25, 65, 0) 60%);\n    }\n  }\n\n  // horizontal dark from right\n  &--dark-from-right {\n    &::before {\n      background: linear-gradient(to left, rgba(15, 25, 65, 0.5), rgba(15, 25, 65, 0) 80%);\n    }\n  }\n\n  // horizontal light from left\n  &--light-from-left {\n    &::before {\n      background: linear-gradient(to right, rgba(247, 245, 240, 0.7), rgba(247, 245, 240, 0) 60%);\n    }\n  }\n\n  // horizontal light from right\n  &--light-from-right {\n    &::before {\n      background: linear-gradient(to left, rgba(247, 245, 240, 0.7), rgba(247, 245, 240, 0) 80%);\n    }\n  }\n}\n"]}