Icontem

File: css/LESS/spt-orange.less

Recommend this page to a friend!
  Classes of David Whitworth  >  Advanced jQuery Scroll Progress Tracker  >  css/LESS/spt-orange.less  >  Download  
File: css/LESS/spt-orange.less
Role: Auxiliary data
Content type: text/plain
Description: Version 1.2.1
Class: Advanced jQuery Scroll Progress Tracker
Show side bar with the page scroll progress
Author: By
Last change:
Date: 3 years ago
Size: 3,015 bytes
 

Contents

Class file image Download
@color-orange: #fc8b00;
.spt-gradient2Stops (@origin: left, @direction: to right, @type: 1, @1stStop: 0%, @2ndStop: 100%, @color1: darken(@color-orange, 20%), @color2: @color-orange) {
    background: @color1; /* Old browsers */
    background: -moz-linear-gradient(@origin, @color1 @1stStop, @color2 @2ndStop); /* FF3.6-15 */
    background: -webkit-linear-gradient(@origin, @color1 @1stStop, @color2 @2ndStop); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(@direction, @color1 @1stStop, @color2 @2ndStop); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=@type ); /* IE6-8 */
}
.spt-gradient3Stops (@origin: left, @direction: to right, @type: 1, @1stStop: 0%, @2ndStop: calc(~'100% - 10px'), @3rdStop: 100%, @color2: darken(@color-orange, 20%), @color1: @color-orange, @color3: #000000) {
    background: @color1; /* Old browsers */
    background: -moz-linear-gradient(@origin, @color2 @1stStop, @color1 @2ndStop, @color3 @3rdStop); /* FF3.6-15 */
    background: -webkit-linear-gradient(@origin, @color2 @1stStop, @color1 @2ndStop, @color3 @3rdStop); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(@direction, @color2 @1stStop, @color1 @2ndStop, @color3 @3rdStop); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color2', endColorstr='@color3',GradientType=@type ); /* IE6-8 */
}

.spt-orange {
    .spt-scrollStopContainer,
    .spt-vertScrollStopContainer {
        .spt-stopCircle,
        .spt-finalStopCircle {
            &.spt-reached,
            &.spt-hover {
                border-color: @color-orange;
            }
        }
    }
}

.spt-horizontalScrollProgress {
    &.spt-orange {
        .spt-scrollProgress {
            color: @color-orange;
            &::-webkit-progress-value {
                .spt-gradient3Stops ();
            }
            &::-moz-progress-bar {
                .spt-gradient3Stops ();
            }
        }
        .spt-scrollProgressContainer {
            color: @color-orange;
            .spt-scrollProgressBar {
                .spt-gradient3Stops ();
            }
        }
    }
}

.spt-verticalScrollProgress {
    &.spt-orange {
        .spt-verticalScrollProgressContainer {
            .spt-verticalScrollProgressBar {
                .spt-gradient2Stops (top, to bottom, 0);
            }
        }
    }
}

.spt-horizontalScrollProgress {
    &.spt-styleFill {
        &.spt-orange {
            .spt-scrollProgress {
                &::-webkit-progress-value {
                    .spt-gradient2Stops ();
                }
                &::-moz-progress-bar {
                    .spt-gradient2Stops ();
                }
            }
            .spt-scrollProgressContainer {
                .spt-scrollProgressBar {
                    .spt-gradient2Stops ();
                }
            }
        }
    }
}