codecombat/app/styles/nanoscroller.scss

//
// nanoScrollerJS (Sass)
// --------------------------------------------------
/** initial setup **/
$nanoClass: "nano";
$paneClass: "nano-pane";
$sliderClass: "nano-slider";
$contentClass: "nano-content";

.#{$nanoClass} {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .#{$contentClass} {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: scroll;
        overflow-x: hidden;

        &:focus {
            outline: thin dotted;
        }

        &::-webkit-scrollbar {
            visibility: hidden;
        }
    }

    > .#{$paneClass} {
        width: 10px;
        background: rgba(0,0,0,.25);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .2s;
           -moz-transition: .2s;
             -o-transition: .2s;
                transition: .2s;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        visibility: hidden\9; // Target only IE7 and IE8 with this hack
        opacity: .01;

        > .#{$sliderClass} {
            background: #444;
            background: rgba(0,0,0,.5);
            position: relative;
            margin: 0 1px;
            -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                    border-radius: 3px;
        }
    }
}

.has-scrollbar > .#{$contentClass}::-webkit-scrollbar {
    visibility: visible;
}

.#{$paneClass} {
    .#{$nanoClass}:hover > &,
    &.active,
    &.flashed {
        visibility: visible\9; // Target only IE7 and IE8 with this hack
        opacity: 0.99;
    }
}

.nano-table {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .nano-table-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: scroll;
        overflow-x: hidden;

        &:focus {
            outline: thin dotted;
        }

        &::-webkit-scrollbar {
            visibility: hidden;
        }
    }

    > .#{$paneClass} {
        width: 10px;
        background: rgba(0,0,0,.25);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .2s;
           -moz-transition: .2s;
             -o-transition: .2s;
                transition: .2s;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        visibility: hidden\9; // Target only IE7 and IE8 with this hack
        opacity: .01;

        > .#{$sliderClass} {
            background: #444;
            background: rgba(0,0,0,.5);
            position: relative;
            margin: 0 1px;
            -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                    border-radius: 3px;
        }
    }
}

.has-scrollbar > .nano-table-content::-webkit-scrollbar {
    visibility: visible;
}

.#{$paneClass} {
    .nano-table:hover > &,
    &.active,
    &.flashed {
        visibility: visible\9; // Target only IE7 and IE8 with this hack
        opacity: 0.99;
    }
}

body {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;

    .nano-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: scroll;
        overflow-x: hidden;

        &:focus {
            outline: thin dotted;
        }

        &::-webkit-scrollbar {
            visibility: hidden;
        }
    }

    > .#{$paneClass} {
        width: 10px;
        background: rgba(0,0,0,.25);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .2s;
           -moz-transition: .2s;
             -o-transition: .2s;
                transition: .2s;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        visibility: hidden\9; // Target only IE7 and IE8 with this hack
        opacity: .01;

        > .#{$sliderClass} {
            background: #444;
            background: rgba(0,0,0,.5);
            position: relative;
            margin: 0 1px;
            -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                    border-radius: 3px;
        }
    }
}

.has-scrollbar > .nano-content::-webkit-scrollbar {
    visibility: visible;
}

.#{$paneClass} {
    body:hover > &,
    &.active,
    &.flashed {
        visibility: visible\9; // Target only IE7 and IE8 with this hack
        opacity: 0.99;
    }
}

.modal{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;

    .modal-dialog {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: scroll;
        overflow-x: hidden;

        &:focus {
            outline: thin dotted;
        }

        &::-webkit-scrollbar {
            visibility: hidden;
        }
    }

    > .#{$paneClass} {
        width: 10px;
        background: rgba(255,255,255,.6);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .2s;
           -moz-transition: .2s;
             -o-transition: .2s;
                transition: .2s;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        visibility: hidden\9; // Target only IE7 and IE8 with this hack
        opacity: .01;

        > .#{$sliderClass} {
            background: #444;
            background: rgba(0,0,0,.5);
            position: relative;
            margin: 0 1px;
            -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                    border-radius: 3px;
        }
    }
}

.has-scrollbar > .modal-dialog::-webkit-scrollbar {
    visibility: visible;
}

.#{$paneClass} {
    .modal:hover > &,
    &.active,
    &.flashed {
        visibility: visible\9; // Target only IE7 and IE8 with this hack
        opacity: 0.99;
    }
}