overflow-scroller.less

/*Please edit the less file not the CSS file then run a 'lessc' command */


//variables customize as needed
@os-arrow-size-small: 32px;
@os-arrow-size: 46px;
@os-screen-sm: 600px;
@os-gutter-width: 10px; //should be the same as margin or padding on each element 


//styles for overflow scroller
.overflow-scroller {
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  padding-left: @os-gutter-width;
  padding-right: @os-gutter-width;

  &> * {
    display: inline-block;
  }

  .no-hiddenscroll & { //modernizr feature detect. 
    margin-bottom: -17px;
  }  

  &.snap-points {
   -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
  /* older spec implementation */
  -webkit-scroll-snap-destination: 0% 100%;
      -ms-scroll-snap-destination: 0% 100%;
          scroll-snap-destination: 0% 100%;
  -webkit-scroll-snap-points-x: repeat(100%);
      -ms-scroll-snap-points-x: repeat(100%);
          scroll-snap-points-x: repeat(100%);
 }
}

.overflow-scroller-outer {
  position: relative;
  overflow: hidden;    
}

.overflow-scroller-arrow {
  position: absolute;
  width: @os-arrow-size-small;
  height: @os-arrow-size-small;
  top: 50%;
  left: 10px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.6);
  cursor: pointer;
  color: #fff;
  transform: translateY(-50%);
  transition: all .3s ease-out;
  padding: 8px 15px;
  z-index: 100;
  @media (min-width: @os-screen-sm) {
    left: 15px;
    width: @os-arrow-size;
    height: @os-arrow-size;
  }

  &:hover {
    background-color: rgba(0,0,0,.9);
  }

  &.overflow-scroller-arrow-hide {
    opacity: 0;
    transform: translate(((@os-arrow-size + 15) * -1), -50%); 
  }

  &-next {
    right: 15px;
    left: auto;
    transform: rotate(180deg) translate(0, 50%);

    &.overflow-scroller-arrow-hide {
      opacity: 0;
      transform: rotate(180deg) translate(((@os-arrow-size + 15) * -1), 50%); 
    }
  }

  &:before {
    content: '';
    display: block;
    width: @os-arrow-size-small * .3;
    height: @os-arrow-size-small * .3;

    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    position: absolute;
    transform: rotate(-135deg);
    top: 34.5%;
    left: 41%;
    @media (min-width: @os-screen-sm) {
      width: @os-arrow-size * .3;
      height: @os-arrow-size * .3;
    }
  }
}