private-dreamnet/dreamtime

View on GitHub
src/assets/css/reset/_scrollbar.scss

Summary

Maintainability
Test Coverage
/*
 * DreamTime.
 * Copyright (C) DreamNet. All rights reserved.
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License 3.0 as published by
 * the Free Software Foundation. See <https://www.gnu.org/licenses/gpl-3.0.html>
 * 
 * Written by Ivan Bravo Bravo <ivan@opendreamnet.com>, 2019.
 */


// the entire scrollbar
*::-webkit-scrollbar {
  @apply bg-dark-900;
  width: 10px;
}

// the buttons on the scrollbar (arrows pointing upwards and downwards).
*::-webkit-scrollbar-button {
  @apply hidden;
}

// the draggable scrolling handle.
*::-webkit-scrollbar-thumb {
  @apply bg-dark-300;

  &:hover {
    @apply bg-primary-dark;
  }
}

// he track (progress bar) of the scrollbar.
*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  @apply bg-dark-800;
}

// the part of the track (progress bar) not covered by the handle.
*::-webkit-scrollbar-track-piece {
  @apply bg-dark-800;
}

//  the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
*::-webkit-scrollbar-corner {
  @apply bg-dark-800;
}