library/perfect-scrollbar/src/css/mixins.scss

   1 @mixin scrollbar-rail-default($theme) {
   2   display: none;
   3   position: absolute; /* please don't change 'position' */
   4   opacity: map_get($theme, rail-default-opacity);
   5   transition: background-color .2s linear, opacity .2s linear;
   6 }
   7
   8 @mixin scrollbar-rail-hover($theme) {
   9   background-color: map_get($theme, rail-hover-bg);
  10   opacity: map_get($theme, rail-hover-opacity);
  11 }
  12
  13 @mixin scrollbar-default($theme) {
  14   position: absolute; /* please don't change 'position' */
  15   background-color: map_get($theme, bar-container-hover-bg);
  16   border-radius: map_get($theme, border-radius);
  17   transition: background-color .2s linear, height .2s linear, width .2s ease-in-out,
  18               border-radius .2s ease-in-out;
  19 }
  20
  21 @mixin scrollbar-hover($theme) {
  22   background-color: map_get($theme, bar-hover-bg);
  23 }
  24
  25 @mixin in-scrolling($theme) {
  26   &.ps-in-scrolling {
  27     &.ps-x > .ps-scrollbar-x-rail {
  28       @include scrollbar-rail-hover($theme);
  29       > .ps-scrollbar-x {
  30         @include scrollbar-hover($theme);
  31         height: map_get($theme, scrollbar-x-hover-height);
  32       }
  33     }
  34     &.ps-y > .ps-scrollbar-y-rail {
  35       @include scrollbar-rail-hover($theme);
  36       > .ps-scrollbar-y {
  37         @include scrollbar-hover($theme);
  38         width: map_get($theme, scrollbar-y-hover-width);
  39       }
  40     }
  41   }
  42 }
  43
  44 // Layout and theme mixin
  45 @mixin ps-container($theme) {
  46   -ms-touch-action: auto;
  47   touch-action: auto;
  48   overflow: hidden !important;
  49   -ms-overflow-style: none;
  50
  51   // Edge
  52   @supports (-ms-overflow-style: none) {
  53     overflow: auto !important;
  54   }
  55   // IE10+
  56   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  57     overflow: auto !important;
  58   }
  59
  60   &.ps-active-x > .ps-scrollbar-x-rail,
  61   &.ps-active-y > .ps-scrollbar-y-rail {
  62     display: block;
  63     background-color: map_get($theme, bar-bg);
  64   }
  65
  66   @include in-scrolling($theme);
  67
  68   > .ps-scrollbar-x-rail {
  69     @include scrollbar-rail-default($theme);
  70     bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */
  71     height: map_get($theme, scrollbar-x-rail-height);
  72
  73     > .ps-scrollbar-x {
  74       @include scrollbar-default($theme);
  75       bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
  76       height: map_get($theme, scrollbar-x-height);
  77     }
  78     &:hover,
  79     &:active {
  80       > .ps-scrollbar-x {
  81         height: map_get($theme, scrollbar-x-hover-height);
  82       }
  83     }
  84   }
  85
  86   > .ps-scrollbar-y-rail {
  87     @include scrollbar-rail-default($theme);
  88     right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */
  89     width: map_get($theme, scrollbar-y-rail-width);
  90
  91     > .ps-scrollbar-y {
  92       @include scrollbar-default($theme);
  93       right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */
  94       width: map_get($theme, scrollbar-y-width);
  95     }
  96     &:hover,
  97     &:active {
  98       > .ps-scrollbar-y {
  99         width: map_get($theme, scrollbar-y-hover-width);
 100       }
 101     }
 102   }
 103
 104   &:hover {
 105     @include in-scrolling($theme);
 106
 107     > .ps-scrollbar-x-rail,
 108     > .ps-scrollbar-y-rail {
 109       opacity: map_get($theme, rail-container-hover-opacity);
 110     }
 111
 112     > .ps-scrollbar-x-rail:hover {
 113       @include scrollbar-rail-hover($theme);
 114
 115       > .ps-scrollbar-x {
 116         @include scrollbar-hover($theme);
 117       }
 118     }
 119
 120     > .ps-scrollbar-y-rail:hover {
 121       @include scrollbar-rail-hover($theme);
 122
 123       > .ps-scrollbar-y {
 124         @include scrollbar-hover($theme);
 125       }
 126     }
 127   }
 128 }