File: css/LESS/spt-blue.less

Recommend this page to a friend!
  Classes of David Whitworth   Advanced jQuery Scroll Progress Tracker   css/LESS/spt-blue.less   Download  
File: css/LESS/spt-blue.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: Version 1.2.1
Date: 2 years ago
Size: 2,991 bytes
 

Contents

Class file image Download
@color-blue: #3399cc; .spt-gradient2Stops (@origin: left, @direction: to right, @type: 1, @1stStop: 0%, @2ndStop: 100%, @color1: darken(@color-blue, 20%), @color2: @color-blue) { 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-blue, 20%), @color1: @color-blue, @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-blue { .spt-scrollStopContainer, .spt-vertScrollStopContainer { .spt-stopCircle, .spt-finalStopCircle { &.spt-reached, &.spt-hover { border-color: @color-blue; } } } } .spt-horizontalScrollProgress { &.spt-blue { .spt-scrollProgress { color: @color-blue; &::-webkit-progress-value { .spt-gradient3Stops (); } &::-moz-progress-bar { .spt-gradient3Stops (); } } .spt-scrollProgressContainer { color: @color-blue; .spt-scrollProgressBar { .spt-gradient3Stops (); } } } } .spt-verticalScrollProgress { &.spt-blue { .spt-verticalScrollProgressContainer { .spt-verticalScrollProgressBar { .spt-gradient2Stops (top, to bottom, 0); } } } } .spt-horizontalScrollProgress { &.spt-styleFill { &.spt-blue { .spt-scrollProgress { &::-webkit-progress-value { .spt-gradient2Stops (); } &::-moz-progress-bar { .spt-gradient2Stops (); } } .spt-scrollProgressContainer { .spt-scrollProgressBar { .spt-gradient2Stops (); } } } } }