File: css/LESS/advanced-progress-tracker.less

Recommend this page to a friend!
  Classes of David Whitworth   Advanced jQuery Scroll Progress Tracker   css/LESS/advanced-progress-tracker.less   Download  
File: css/LESS/advanced-progress-tracker.less
Role: Auxiliary data
Content type: text/plain
Description: LESS stylesheet
Class: Advanced jQuery Scroll Progress Tracker
Show side bar with the page scroll progress
Author: By
Last change: Update of css/LESS/advanced-progress-tracker.less
Date: 2 years ago
Size: 11,930 bytes
 

Contents

Class file image Download
/* //------------------------------------------------------------------------------------- // Scroll Progress Tracker Stylesheet //------------------------------------------------------------------------------------- // Created 2016-08-10 // Changed 2016-08-17 // Authors David Whitworth | David@Whitworth.de //------------------------------------------------------------------------------------- // Version 1.0 //------------------------------------------------------------------------------------- // 2016-08-10 Created // 2016-08-12 DW styled the trackers' final stops // 2016-08-13 DW added the class for the mobile only option; // added styles for too long headlines on mobile devices // 2016-08-15 DW changed various style-data; // added styling for sourcecode blocks // 2016-08-16 DW adjusted styling to better fit the new options horTracker // and verTracker; // added styling for the options horPosition and verPosition; // added the hack font to sourcecode blocks; // included the "smallDevice" class to bind the responsive webdesign // to the plugin's "mobileThreshold" setting; // moved the titles of the vertical tracker closer to the bullets, // then spaced with padding (this creates seamless links); // added the "smaller" and "larger" classes to style smaller and // larger text // 2016-08-17 DW added styles for .bold, .italic and .pullUp //------------------------------------------------------------------------------------- // Version 1.1 //------------------------------------------------------------------------------------- // 2016-08-17 DW added the "spt-fixed" class to the horizontal tracker (for use with // the option horInHeader: false); // added the "historyVersion" class; // increased the font-size of h1-headlines // 2016-08-19 DW Added the "fill" class to the trackers and styled them accordingly; // adjusted the dimensions of .finalStopCircle to make it symmetrical // 2016-08-20 DW Adjusted the max-width of .centerAll to prevent collisions with the // vertical tracker; // adjusted the position of the stopd for the horizontal tracker with // the "fill" style // 2016-08-22 DW changed the names of all classes and ids to prevent possible // conflicts with other plugins; // removed all plugin unrelated styles from the stylesheet //------------------------------------------------------------------------------------- // Version 1.2 //------------------------------------------------------------------------------------- // 2016-08-23 DW removed the styling of the body tag from the stylesheet; // adjusted the positioning of the vertical tracker in relataion to // the mobileThreshold and the viewport width; // made some necessary adjustments for the trackViewportOnly option; // added the four default color-settings for horColor/verColor // 2016-09-05 DW fixed the border-radius for the stops //------------------------------------------------------------------------------------- // Copyright (c) 2016 //------------------------------------------------------------------------------------- */ @import '_spt-settings.less'; /* GENERAL */ .spt-centerAll { margin: 0 auto; max-width: 900px; } .spt-trackThis { hr { margin-top: 0px; border-top: 1px solid fade(@color-foreground, 7%); border-bottom: none; } } .bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .spt-mobileOnly { display: none !important; } /* GENERAL end */ /* HORIZONTAL SCROLL PROGRESS TRACKER */ .spt-horizontalScrollProgress { padding-top: 29px; height: 31px; &.spt-fixed { position: fixed; top: 0; left: 0; right: 0; .spt-gradient2Stops (top, to bottom, 0, 0%, 100%, @color-background, fade(@color-background, 0%)); } &.spt-bottom { top: auto; bottom: 0; .spt-gradient2Stops (top, to bottom, 0, 0%, 100%, fade(@color-background, 0%), @color-background); } .spt-scrollProgress { display: block; border: none; width: 100%; height: 2px; color: @color-highlight; background-color: fade(@color-foreground, 30%); -webkit-appearance: none; -moz-appearance: none; appearance: none; &::-webkit-progress-bar { background-color: fade(@color-foreground, 30%); } &::-webkit-progress-value { .spt-gradient3Stops (left, to right, 1, 0%, calc(~'100% - 10px'), 100%, darken(@color-highlight, 20%), @color-highlight, @color-foreground); } &::-moz-progress-bar { .spt-gradient3Stops (left, to right, 1, 0%, calc(~'100% - 10px'), 100%, darken(@color-highlight, 20%), @color-highlight, @color-foreground); } } .spt-scrollProgressContainer { display: block; position: relative; width: 100%; height: 2px; color: @color-highlight; background-color: fade(@color-foreground, 30%); overflow: hidden; .spt-scrollProgressBar { display: block; position: absolute; width: 0%; height: inherit; .spt-gradient3Stops (left, to right, 1, 0%, calc(~'100% - 10px'), 100%, darken(@color-highlight, 20%), @color-highlight, @color-foreground); } } } /* HORIZONTAL SCROLL PROGRESS TRACKER end */ /* VERTICAL SCROLL PROGRESS TRACKER */ .spt-verticalScrollProgress { display: block; position: fixed; top: 50px; left: 20px; bottom: 50px; width: 180px; &.spt-verRight { right: 20px; left: auto; } &.spt-untitled { width: 20px; } .spt-verticalScrollProgressContainer { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background-color: fade(@color-foreground, 30%); overflow: hidden; .spt-verticalScrollProgressBar { position: inherit; width: inherit; height: 0; border-bottom: 3px solid @color-foreground; .spt-gradient2Stops (top, to bottom, 0, 0%, 100%, darken(@color-highlight, 20%), @color-highlight); } } } /* VERTICAL SCROLL PROGRESS TRACKER end */ /* SCROLL STOPS */ .spt-scrollStopContainer, .spt-vertScrollStopContainer { position: relative; .spt-stopCircle, .spt-finalStopCircle { position: absolute; border: 2px solid fade(@color-foreground, 50%); border-radius: 50%; width: 16px; height: 16px; text-align: center; text-decoration: none; line-height: 16px; color: fade(@color-foreground, 50%); background-color: @color-background; cursor: pointer; &.spt-reached, &.spt-hover { color: @color-foreground; border-color: @color-highlight; } } .spt-finalStopCircle { border-width: 3px; width: 18px; height: 18px; line-height: 18px; } } .spt-scrollStopContainer { .spt-stopCircle { top: -11px; } .spt-finalStopCircle { top: -13px; right: 0; } } .spt-vertScrollStopContainer { position: absolute; top: 0; bottom: 0; .spt-stopCircle { left: -9px; } .spt-finalStopCircle { left: -11px; bottom: -3px; } } .spt-styleFill { .spt-vertScrollStopContainer { top: 2px; bottom: 20px; .spt-stopCircle, .spt-finalStopCircle { background-color: darken(@color-lightgray, 20%); &.spt-reached, &.spt-hover { background-color: @color-background; } } } } /* SCROLL STOPS end */ /* SCROLL STOP TITLES */ .spt-scrollStopTitles, .spt-vertScrollStopTitles { display: block; position: absolute; .spt-stopTitle, .spt-finalStopTitle { position: absolute; color: fade(@color-foreground, 50%); cursor: pointer; &.spt-reached, &.spt-hover { color: @color-foreground; } &.spt-ellipsis { max-width: calc(~'100%'); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } } .spt-scrollStopTitles { top: 0; right: 0; left: 0; .spt-stopTitle, .spt-finalStopTitle { &.invisible { display: none; } } .spt-finalStopTitle { right: 0; } } .spt-vertScrollStopTitles { top: 0; right: 0; bottom: 0; width: 170px; .spt-stopTitle, .spt-finalStopTitle { line-height: 14px; margin-top: 2px; padding-left: 10px; } .spt-finalStopTitle { bottom: 2px; } } .spt-styleFill { .spt-vertScrollStopTitles { top: 2px; bottom: 20px; } } /* SCROLL STOP TITLES end */ /* HORIZONTAL STYLES --> */ .spt-horizontalScrollProgress { &.spt-styleFill { height: 30px; padding: 0; .spt-scrollProgress, .spt-scrollProgressContainer { height: 30px; } .spt-scrollProgress { &::-webkit-progress-value { .spt-gradient2Stops (left, to right, 1, 0%, 100%, darken(@color-highlight, 20%), @color-highlight); } &::-moz-progress-bar { .spt-gradient2Stops (left, to right, 1, 0%, 100%, darken(@color-highlight, 20%), @color-highlight); } } .spt-scrollProgressContainer { .spt-scrollProgressBar { .spt-gradient2Stops (left, to right, 1, 0%, 100%, darken(@color-highlight, 20%), @color-highlight); } } .spt-scrollStopContainer { width: calc(~'100% - 38px'); .spt-stopCircle { top: -8px; } .spt-finalStopCircle { top: -10px; } } .spt-scrollStopTitles { .spt-onlyActive { line-height: 28px; color: @color-background; } } } } /* <-- HORIZONTAL STYLES */ /* VERTICAL STYLES --> */ .spt-verticalScrollProgress { &.spt-styleFill { .spt-verticalScrollProgressContainer { border: 2px solid fade(@color-foreground, 50%); border-radius: 6px; left: -13px; width: 25px; overflow: hidden; .spt-verticalScrollProgressBar { } } .spt-vertScrollStopContainer { .spt-finalStopCircle { bottom: -18px; } } .spt-vertScrollStopTitles { .spt-finalStopTitle { bottom: -13px; } } } } /* <-- VERTICAL STYLES */ /* FAKE RESPONSIVE WEB DESIGN --> */ &.spt-smallDevice { &.spt-horizontalScrollProgress { background-color: fade(@color-background, 95%); } &.spt-desktopOnly { display: none !important; } &.spt-mobileOnly { display: block !important; } &.spt-scrollProgress, &.spt-scrollProgressContainer, &.spt-scrollStopContainer, &.spt-scrollStopTitles { width: calc(~'100% - 32px'); } &.spt-scrollStopContainer { .spt-finalStopCircle { right: -6px; } } } /* <-- FAKE RESPONSIVE WEB DESIGN */