smart-webcomponents-react/source/styles/default/smart.scrollbar.css

[](https://jqwidgets.com/license/)

/* smart-scroll-bar */
smart-scroll-bar {
  display: block;
  touch-action: none;
  width: var(--smart-scroll-bar-default-width);
  height: var(--smart-scroll-bar-default-height);
}
smart-scroll-bar .smart-thumb {
  position: absolute;
  width: 40px;
  background-clip: content-box;
  padding: var(--smart-scroll-bar-thumb-padding) 0 var(--smart-scroll-bar-thumb-padding) 0;
  height: var(--smart-scroll-bar-thumb-size);
  cursor: default;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--smart-scroll-bar-thumb-border);
  background-color: var(--smart-scroll-bar-thumb-background);
  border-top-left-radius: var(--smart-scroll-bar-thumb-border-top-left-radius);
  border-top-right-radius: var(--smart-scroll-bar-thumb-border-top-right-radius);
  border-bottom-left-radius: var(--smart-scroll-bar-thumb-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-scroll-bar-thumb-border-bottom-right-radius);
}
smart-scroll-bar .smart-thumb:hover {
  border-color: var(--smart-scroll-bar-thumb-border-hover);
  background-color: var(--smart-scroll-bar-thumb-background-hover);
}
smart-scroll-bar .smart-thumb:active {
  border-color: var(--smart-scroll-bar-thumb-border-active);
  background-color: var(--smart-scroll-bar-thumb-background-active);
}
smart-scroll-bar .smart-track {
  position: relative;
  float: left;
  height: 100%;
  background-color: var(--smart-scroll-bar-track-background);
  width: 100%;
}
smart-scroll-bar .smart-scroll-button {
  display: none;
  float: left;
  width: var(--smart-scroll-button-size);
  height: 100%;
  cursor: default;
  background-color: var(--smart-scroll-bar-button-background);
  color: var(--smart-scroll-bar-button-color);
  border: 1px solid var(--smart-scroll-bar-button-border);
  min-height: 0;
  padding: 0;
  border-radius: 0px;
}
smart-scroll-bar .smart-scroll-button:hover {
  background-color: var(--smart-scroll-bar-button-background-hover);
  color: var(--smart-scroll-bar-button-color-hover);
  border-color: var(--smart-scroll-bar-button-border-hover);
}
smart-scroll-bar .smart-scroll-button:active {
  background-color: var(--smart-scroll-bar-button-background-active);
  color: var(--smart-scroll-bar-button-color-active);
  border-color: var(--smart-scroll-bar-button-border-active);
}
smart-scroll-bar[show-buttons] .smart-track {
  width: calc(100% - var(--smart-scroll-button-size) * 2);
}
smart-scroll-bar[show-buttons] .smart-scroll-button {
  display: block;
}
smart-scroll-bar[spinner][show-buttons] .smart-track {
  display: none;
}
smart-scroll-bar[spinner][show-buttons] .smart-scroll-button {
  width: 50%;
}
smart-scroll-bar[discrete] {
  --smart-scroll-button-size: 0px;
  --smart-scroll-bar-size: 15px;
  --smart-scroll-bar-thumb-border-top-right-radius: 6px;
  --smart-scroll-bar-thumb-border-top-left-radius: 6px;
  --smart-scroll-bar-thumb-border-bottom-left-radius: 6px;
  --smart-scroll-bar-thumb-border-bottom-right-radius: 6px;
  --smart-scroll-bar-thumb-size: 100%;
  --smart-scroll-bar-thumb-padding: 3px;
  --smart-scroll-bar-default-width: var(--smart-editor-width);
  --smart-scroll-bar-default-height: var(--smart-scroll-bar-size);
  --smart-scroll-bar-background: #fafafa;
  --smart-scroll-bar-track-background: var(--smart-scroll-bar-background);
  --smart-scroll-bar-border: #F1F1F1;
  --smart-scroll-bar-thumb-background: #C1C1C1;
  --smart-scroll-bar-thumb-border: transparent;
}
smart-scroll-bar[orientation=vertical] {
  height: var(--smart-scroll-bar-default-width);
  width: var(--smart-scroll-bar-default-height);
}
smart-scroll-bar[orientation=vertical] .smart-thumb {
  width: var(--smart-scroll-bar-thumb-size);
  padding: 0 var(--smart-scroll-bar-thumb-padding) 0 var(--smart-scroll-bar-thumb-padding);
  height: 40px;
  top: 0;
}
smart-scroll-bar[orientation=vertical] .smart-track {
  float: none;
  width: 100%;
  height: 100%;
}
smart-scroll-bar[orientation=vertical] .smart-scroll-button {
  float: none;
  height: var(--smart-scroll-button-size);
  width: 100%;
}
smart-scroll-bar[orientation=vertical][show-buttons] .smart-track {
  height: calc(100% - var(--smart-scroll-button-size) * 2);
}
smart-scroll-bar[orientation=vertical][spinner] .smart-scroll-button {
  height: 50%;
  width: 100%;
  float: none;
}