@randstad-design/orbit-multitheme/dist/assets/theme-randstad/components/content-items/side-nav-sticky.css.map

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["../scss/02_atoms/_scroll-elements.scss","00_helpers/variables/_spacing.scss","00_helpers/variables/_colors.scss","00_helpers/mixins/_media-queries.scss","00_helpers/mixins/_scroll-elements.scss","../scss/04_organisms/_side-nav-sticky.scss","../scss/00_tools/cssVartoSass.scss","00_helpers/variables/_sizing.scss"],"names":[],"mappings":"AAAA;EAEI,yFAIY;EAJZ,uFAIY;EACZ,SAAS;EACT,WAAW;EACX,YCKsB;EDJtB,OAAO;EACP,qBAAqB;EACrB,kBAAkB;EAClB,WAAW;EACX,gCAAwB;EAAxB,wBAAwB,EAAA;;AAI5B;EAEI,gCEGiB;EFFjB,SAAS;EACT,WAAW;EACX,WAAW;EACX,WAAW;EACX,qBAAqB;EACrB,kBAAkB;EAClB,YAAY;EACZ,gCAAwB;EAAxB,wBAAwB,EAAA;EGYxB;IHtBJ;MAaM,WAAW,EAAA,EAEd;;AI/BC;EACE,0FAIY;EAJZ,wFAIY,EAAA;;ACPlB;EACE,gBHyBiB;EGxBjB,eAAe;EACf,eAAe;EACf,MAAM;EACN,UAAU;EACV,kBAAkB,EAAA;EFkChB;IExCJ;MASI,eAAe;MACf,eAAe,EAAA,EASlB;EF2CG;IE9DJ;MAcI,SAAS;MACT,UAAU;MACV,SAAS;MACT,wBAAgB;MAAhB,gBAAgB,EAAA,EAEnB;;AAED;EACE,eAAe;EACf,WAAW,EAAA;;AAGb;EACE,yBAAmB;EAAnB,2BAAmB;EAAnB,sBAAmB;EAAnB,mBAAmB;EACnB,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA8B;EAA9B,sCAA8B;EAA9B,sBAA8B;EAA9B,8BAA8B;EAC9B,gBAAyB;EACzB,gCAAwB;EAAxB,wBAAwB;EACxB,UAAU,EAAA;EF8BR;IEpCJ;MASI,gBAAyB;MACzB,oBJxBsB,EAAA,EIqCzB;EAvBD;IAcI,aHxCsB,EAAA;EG0B1B;IAmBI,gCAAwB;IAAxB,wBAAwB;IACxB,WAAW;IACX,UAAU,EAAA;;AAId;EACE,iBAAiB;EACjB,gBAAgB;EAChB,4CAA4C;EAC5C,kBAAkB;EAClB,qBAAqB;EAIrB,UAAU,EAAA;EATZ;IAOI,aAAa,EAAA;EAPjB;IAYI,4BAAqC,EAAA;IFDrC;MEXJ;QAeM,iBAAiB,EAAA,EAEpB;EAjBH;IAqBI,uCAA+B;IAA/B,+BAA+B;IAC/B,WAAW;IACX,UAAU,EAAA;;AAId;EACE,4DC7E2C;ED8E3C,eAAe;EACf,qBAAqB;EACrB,gBAAyB;EACzB,2BAA2B;EAI3B,kBAAkB,EAAA;EFzBhB;IEgBJ;MAOI,0BAA+B,EAAA,EAkDlC;EAzDD;IAYI,mBAAmB;IACnB,mBE1FW,EAAA;IJ6DX;MEgBJ;QAeM,oBAAoB,EAAA,EAEvB;EAjBH;IAoBI,iCChGyC;IDiGzC,4BAA4B;IAC5B,qBAAqB;IACrB,OAAO;IACP,kBAAkB,EAAA;EAxBtB;IA4BI,qBAAqB;IACrB,4BAAoB;IAApB,oBAAoB,EAAA;EA7BxB;IAmCM,mCC/GuC;IDgHvC,4BAAoB;IAApB,oBAAoB,EAAA;EApC1B;IA2CM,mCCvHuC;IDwHvC,4BAAoB;IAApB,oBAAoB,EAAA;EAIxB;IACE,0BAA0B,EAAA;IFjE1B;MEgEF;QAGI,yBAA8B,EAAA,EAKjC;IARA;MAMG,aAAa,EAAA","file":"side-nav-sticky.css","sourcesContent":[".scroll-gradient {\n  &::after {\n    background: linear-gradient(\n      to bottom,\n      rgba(255, 255, 255, 0) 0,\n      rgb(255, 255, 255) 100%\n    ) !important;\n    bottom: 0;\n    content: '';\n    height: $spacing--l;\n    left: 0;\n    opacity: 1 !important;\n    position: absolute;\n    width: 100%;\n    transition: opacity 0.3s;\n  }\n}\n\n.scroll-divider {\n  &:after {\n    border-bottom: 1px solid $color--grey;\n    bottom: 0;\n    content: '';\n    height: 1px;\n    left: -25px;\n    opacity: 1 !important;\n    position: absolute;\n    width: 100vw;\n    transition: opacity 0.3s;\n\n    @include viewport--m {\n      left: -50px;\n    }\n  }\n}\n\n@include scroll-elements-color-map;\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","$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","@mixin scroll-elements-color-map {\n  .scroll-gradient::after {\n    .bg-variant-brand-tertiary & {\n      background: linear-gradient(\n        to bottom,\n        rgba(255, 255, 255, 0) 0,\n        rgb(247, 245, 240) 85%\n      ) !important;\n    }\n  }\n}\n",".side-nav-sticky {\n  background: $color--white;\n  margin: 0 -25px;\n  padding: 0 25px;\n  top: 0;\n  z-index: 1;\n  position: relative;\n\n  @include viewport--m {\n    margin: 0 -50px;\n    padding: 0 50px;\n  }\n\n  @include viewport--l {\n    margin: 0;\n    padding: 0;\n    top: 40px;\n    position: sticky;\n  }\n}\n\n.side-nav-sticky--is-sticky {\n  position: fixed;\n  width: 100%;\n}\n\n.side-nav-sticky__header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  min-height: $baseline * 5;\n  transition: opacity 0.3s;\n  z-index: 1;\n\n  @include viewport--l {\n    min-height: $baseline * 3;\n    padding-bottom: $spacing--s;\n  }\n\n  svg {\n    fill: $color-brand--one;\n  }\n\n  // Animates the divider\n  &:after {\n    transition: opacity 0.3s;\n    content: '';\n    opacity: 0;\n  }\n}\n\n.side-nav-sticky__list {\n  counter-reset: li;\n  list-style: none;\n  -ms-overflow-style: -ms-autohiding-scrollbar; // edge hide scrollbar\n  overflow-y: scroll;\n  scrollbar-width: none; // firefox hide scrollbar\n  &::-webkit-scrollbar {\n    display: none; // chrome, opera, safari hide scrollbar\n  }\n  z-index: 1;\n\n  &[data-rs-collapsible-content='expanded'] {\n    max-height: $baseline * 30 !important;\n\n    @include viewport--l {\n      max-height: unset;\n    }\n  }\n\n  // Animates the gradient\n  &:after {\n    transition: opacity 0.3s linear;\n    content: '';\n    opacity: 0;\n  }\n}\n\n.side-nav-sticky__list-item {\n  border-bottom: 1px solid returnColorCSSVar('brand-tertiary-tint-80');\n  cursor: pointer;\n  counter-increment: li;\n  min-height: $baseline * 4;\n  padding: 15px 5px 15px 23px;\n  @include viewport--l {\n    padding: $baseline 5px 9px 27px;\n  }\n  position: relative;\n\n  &:last-child {\n    border-bottom: none;\n    margin-bottom: $baseline;\n    @include viewport--l {\n      margin-bottom: unset;\n    }\n  }\n\n  &:before {\n    color: returnColorCSSVar('brand-primary');\n    content: counter(li) '.' ' ';\n    display: inline-block;\n    left: 0;\n    position: absolute;\n  }\n\n  a {\n    text-decoration: none;\n    transition: all 0.3s;\n  }\n\n  &:hover {\n    a,\n    &:before {\n      color: returnColorCSSVar('brand-secondary');\n      transition: all 0.3s;\n    }\n  }\n\n  &.is-active {\n    a,\n    &:before {\n      color: returnColorCSSVar('brand-secondary');\n      transition: all 0.3s;\n    }\n  }\n\n  &--unordered {\n    padding: 15px 5px 15px 5px;\n    @include viewport--l {\n      padding: $baseline 5px 9px 3px;\n    }\n    &:before {\n      content: none;\n    }\n  }\n}\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"]}