nozzle / nzScrollbar

A featherweight replacement scrollbar directive for angularJS
3 stars 4 forks source link

How do I change the indicator? #7

Open vimcat opened 9 years ago

vimcat commented 9 years ago

screen shot 2015-03-10 at 1 27 11 pm

I was able nzScrollbar-indicator-wrap to look like the attached image but the indicator is not taking the color change and if I force the display to show all the time, it turns the whole wrap black.

tannerlinsley commented 9 years ago

Let's take a peak at your css?

vimcat commented 9 years ago
.scrollContainer {
    overflow: auto;
    margin: auto auto;
    & .nzScrollbar {
        border: 1px solid #E9E9E7;
        .nzScrollbar-indicator-wrap {
            background-color: #ddd;
            opacity: 1;
            width: 10px;
            & .noScroll {
                display: none;
            }
            .nzScrollbar-indicator {
                background-color: blue !important;
                display: block !important;
                height: 20px;
                width: 10px;
            }
        }
    }
    & .noScroll {
        border: 0 none;
    }
}
tannerlinsley commented 9 years ago

This works to override the colors:

 /* This alters the opacity when you hover over the scrollbox */
.nzScrollbar:hover .nzScrollbar-indicator-wrap {
    opacity: 1;
}
/* This is the background color of the bar */
.nzScrollbar .nzScrollbar-indicator-wrap:hover {
    background-color: rgba(0, 0, 0, 0.2);
}
/* this is the background color of the indicator */
.nzScrollbar {
    .nzScrollbar-indicator-wrap {
        .nzScrollbar-indicator {
            background-color: red !important;
        }
    }
}

Here is a link to the plunkr demo with that css inserted at the bottom: http://codepen.io/anon/pen/NPOGpd

vimcat commented 9 years ago

That is almost there. The indicators are different heights. I don't see where that's specified anywhere. Also, how did you get rid of the rounded corners? Thanks!

tannerlinsley commented 9 years ago

I'm not sure what you mean by different heights, but the css defaults to no rounded corners on the dragger. On Fri, Mar 13, 2015 at 10:53 AM Veronica Canterbury < notifications@github.com> wrote:

That is almost there. The indicators are different heights. I don't see where that's specified anywhere. Also, how did you get rid of the rounded corners? Thanks!

— Reply to this email directly or view it on GitHub https://github.com/nozzle/nzScrollbar/issues/7#issuecomment-79127239.