Icontem

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: Adjusted the border-radius of the stops
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 */