@randstad-design/orbit-multitheme
Version:
multitheme Front-end code based on Randstad Human Forward components
1 lines • 3.58 kB
Source Map (JSON)
{"version":3,"sources":["../scss/04_organisms/link-lists/_featured.scss","00_helpers/mixins/_media-queries.scss","00_helpers/variables/_icons.scss"],"names":[],"mappings":"AAAA;EAEI,mBAAmB,EAAA;;AAFvB;EAMI,SAAoB,EAAA;EANxB;IAUM,mBAAmB,EAAA;;ACoDrB;ED7CF;IAEI,mBAAmB,EAAA;EAFvB;IAMI,YEnBsB;IFoBtB,SAAoB;IACpB,WErBsB,EAAA,EFsBvB","file":"featured.css","sourcesContent":[".link-list--featured {\n .link-list__link {\n padding-right: 40px;\n }\n\n .icon {\n top: $baseline * 1.7;\n\n &,\n &:hover {\n color: currentColor;\n }\n }\n}\n\n// viewport l\n@include viewport--l {\n .link-list--featured {\n .link-list__link {\n padding-right: 50px;\n }\n\n .icon {\n height: $icon-size--l;\n top: $baseline * 2.4;\n width: $icon-size--l;\n }\n }\n}\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"]}