haxeui/haxeui-core

/************************************************************************
** SCROLL
*************************************************************************/
.scroll {
    background-color: none;
    padding: 0px;
    background-color: $scrollbar-background-color;
}

.scroll .button {
    width: 7px;
    height: 7px;
    background-color: $scrollbar-button-color;
    border-radius: 0;
    border: none;
    filter: none;
    opacity: 0.6;
}

.scroll .button:hover {
    opacity: 1;
}

.scroll:disabled .button {
    opacity: .3;
}

.vertical-scroll {
    width: 8px;
    padding-left: 1px;
    border-left: 1px solid $normal-border-color;
}

.horizontal-scroll {
    height: 8px;
    padding-top: 1px;
    border-top: 1px solid $normal-border-color;
}

/************************************************************************
** BORDERLESS VARIANTS
*************************************************************************/
.scrollview.borderless > .scroll .button, .textarea.borderless > .scroll .button {
    width: 8px;
    height: 8px;
}

.scrollview.borderless > .vertical-scroll, .textarea.borderless > .vertical-scroll {
    padding-left: 0px;
    border-left: none;
}

.scrollview.borderless > .horizontal-scroll, .textarea.borderless > .horizontal-scroll {
    padding-top: 0px;
    border-top: none;
}

/************************************************************************
** CLASSIC VARIANTS
*************************************************************************/
.classic-scrolls .scroll,
.scroll.classic-scrolls {
    background-color: #E9E9E9;
    border:none;
    padding: 0;
}

.classic-scrolls .scroll .button,
.scroll.classic-scrolls .button{
    border-radius: 0;
    border: none;
    background-color: #E9E9E9;
    padding: 0;
    filter: none;
    hidden: false;
    width: 17px;
    height: 17px;
    opacity: 1;
}

.classic-scrolls .scroll .button:hover,
.scroll.classic-scrolls .button:hover {
    background-color: #D7D7D7;
}

.classic-scrolls .scroll .button:down,
.scroll.classic-scrolls .button:down {
    background-color: #525252;
    filter: none;
}

.classic-scrolls .scroll .thumb,
.scroll.classic-scrolls .thumb {
    background-color: #C6C6C6;
}

.classic-scrolls .scroll .thumb:hover,
.scroll.classic-scrolls .thumb:hover {
    background-color: #AAAAAA;
}

.classic-scrolls .scroll .thumb:down,
.scroll.classic-scrolls .thumb:down {
    background-color: #525252;
}

.classic-scrolls .scroll .thumb:disabled,
.scroll.classic-scrolls .thumb:disabled {
    background-color: #DDDDDD;
}

.classic-scrolls .vertical-scroll,
.vertical-scroll.classic-scrolls {
    width: 17px;
}

.classic-scrolls .vertical-scroll .deinc,
.vertical-scroll.classic-scrolls .deinc {
    icon: "haxeui-core/styles/shared/up-arrow-dark.png";
}

.classic-scrolls .vertical-scroll .deinc:down,
.vertical-scroll.classic-scrolls .deinc:down {
    icon: "haxeui-core/styles/shared/up-arrow-bright.png";
}

.classic-scrolls .vertical-scroll .inc,
.vertical-scroll.classic-scrolls .inc {
    icon: "haxeui-core/styles/shared/down-arrow-dark.png";
}

.classic-scrolls .vertical-scroll .inc:down,
.vertical-scroll.classic-scrolls .inc:down {
    icon: "haxeui-core/styles/shared/down-arrow-bright.png";
}

.classic-scrolls .horizontal-scroll,
.horizontal-scroll.classic-scrolls {
    height: 17px;
}

.classic-scrolls .horizontal-scroll .deinc,
.horizontal-scroll.classic-scrolls .deinc {
    icon: "haxeui-core/styles/shared/left-arrow-dark.png";
}

.classic-scrolls .horizontal-scroll .deinc:down,
.horizontal-scroll.classic-scrolls .deinc:down {
    icon: "haxeui-core/styles/shared/left-arrow-bright.png";
}

.classic-scrolls .horizontal-scroll .inc,
.horizontal-scroll.classic-scrolls .inc {
    icon: "haxeui-core/styles/shared/right-arrow-dark.png";
}

.classic-scrolls .horizontal-scroll .inc:down,
.horizontal-scroll.classic-scrolls .inc:down {
    icon: "haxeui-core/styles/shared/right-arrow-bright.png";
}

/************************************************************************
** MOBILE VARIANTS
*************************************************************************/
.scroll:mobile .inc, .scroll:mobile .deinc {
    hidden: true;
}

.horizontal-scroll:mobile {
    opacity: .5;
    height: 8px;
    padding: 2px;
    background-color: none;
    border: none;
}

.horizontal-scroll:mobile .thumb {
    height: 4px;
    border-radius: 4px;
}

.vertical-scroll:mobile {
    opacity: .5;
    width: 8px;
    padding: 2px;
    background-color: none;
    border: none;
}

.vertical-scroll:mobile .thumb {
    width: 4px;
    border-radius: 4px;
}