links.less

/*! links.less v0.0.5 | MIT License | github.com/paulradzkov/links.less */

.links-settings() {
    @links-class: link; //you can rename that classname
    @links-text-decoration: underline;
    @links-roundness: 0.125em;   // default = 2px
    @links-focuswidth: 0.1875em; // default = 3px
    //colors
    @links-link:          #0877db;
    @links-hover:         #2b9aff;
    @links-visited:       #9108db;
    @links-visitedhover:  #bc4df8;
    @links-active:        #bc4df8;
    @links-fadeout: 75%;
    //animation
    @links-aniduration: .3s; //fading duration from hover
}

// global coloring mixin
.links-color(@links-link) {
    @fadeout: 75%;

    &,
    &:link,
    &:visited,
    &:hover,
    &:focus,
    &:visited:hover,
    &:visited:focus,
    &:active {
        color: @links-link;
        & when (iscolor(@links-link)) {
            text-decoration-color: fadeout(@links-link, @fadeout);
        }
    }
}

.links-color(@links-link, @links-hover) {
    @fadeout: 75%;

    &,
    &:link,
    &:visited {
        color: @links-link;
        & when (iscolor(@links-link)) {
            text-decoration-color: fadeout(@links-link, @fadeout);
        }
    }

    &:hover,
    &:focus,
    &:visited:hover,
    &:visited:focus,
    &:active {
        color: @links-hover;
        & when (iscolor(@links-hover)) {
            text-decoration-color: fadeout(@links-hover, @fadeout);
        }
    }
}

.links-color(@links-link, @links-hover, @links-visited) {
    @fadeout: 75%;

    &,
    &:link {
        color: @links-link;
        & when (iscolor(@links-link)) {
            text-decoration-color: fadeout(@links-link, @fadeout);
        }
    }

    &:visited,
    &:active {
        color: @links-visited;
        & when (iscolor(@links-visited)) {
            text-decoration-color: fadeout(@links-visited, @fadeout);
        }
    }

    &:hover,
    &:focus,
    &:visited:hover,
    &:visited:focus {
        color: @links-hover;
        & when (iscolor(@links-hover)) {
            text-decoration-color: fadeout(@links-hover, @fadeout);
        }
    }
}

.links-color(@links-link, @links-hover, @links-visited, @links-active) {
    @fadeout: 75%;

    &,
    &:link {
        color: @links-link;
        & when (iscolor(@links-link)) {
            text-decoration-color: fadeout(@links-link, @fadeout);
        }
    }

    &:visited {
        color: @links-visited;
        & when (iscolor(@links-visited)) {
            text-decoration-color: fadeout(@links-visited, @fadeout);
        }
    }

    &:hover,
    &:focus,
    &:visited:hover,
    &:visited:focus {
        color: @links-hover;
        & when (iscolor(@links-hover)) {
            text-decoration-color: fadeout(@links-hover, @fadeout);
        }
    }

    &:active {
        color: @links-active;
        & when (iscolor(@links-active)) {
            text-decoration-color: fadeout(@links-active, @fadeout);
        }
    }
}

.links-color(@links-link, @links-hover, @links-visited,  @links-visitedhover, @links-active, @fadeout: 75%) {

    &,
    &:link {
        color: @links-link;
        & when (iscolor(@links-link)) {
            text-decoration-color: fadeout(@links-link, @fadeout);
        }
    }

    &:visited {
        color: @links-visited;
        & when (iscolor(@links-visited)) {
            text-decoration-color: fadeout(@links-visited, @fadeout);
        }
    }

    &:hover,
    &:focus {
        color: @links-hover;
        & when (iscolor(@links-hover)) {
            text-decoration-color: fadeout(@links-hover, @fadeout);
        }
    }

    &:visited:hover,
    &:visited:focus {
        color: @links-visitedhover;
        & when (iscolor(@links-visitedhover)) {
            text-decoration-color: fadeout(@links-visitedhover, @fadeout);
        }
    }

    &:active {
        color: @links-active;
        & when (iscolor(@links-active)) {
            text-decoration-color: fadeout(@links-active, @fadeout);
        }
    }
}

@links-render: {

    a,
    .@{links-class},
    .@{links-class}-novisited,
    .@{links-class}-inherit {
        text-decoration: @links-text-decoration;
        text-decoration-line: @links-text-decoration;
        text-decoration-style: solid;
        text-decoration-skip: ink;

        img:only-child {
            vertical-align: top;
        }
    }

    a:not([class]),
    .@{links-class} {
        .links-color(@links-link, @links-hover, @links-visited,  @links-visitedhover, @links-active, @links-fadeout);
    }

    .@{links-class}-novisited {
        .links-color(@links-link, @links-hover, @links-link,  @links-hover, @links-active, @links-fadeout);
    }

    .@{links-class}-inherit {
        .links-color(inherit, @links-hover, inherit, @links-visitedhover, @links-active, @links-fadeout);
    }

    // apply animation only for .link* and unstyled links
    .@{links-class},
    .@{links-class}-novisited,
    .@{links-class}-inherit,
    a:not([class]) {

        &,
        &:link,
        &:visited {
            border-radius: @links-roundness;
            transition:
                color                 @links-aniduration ease-out,
                background-color      @links-aniduration ease-out,
                border-color          @links-aniduration ease-out,
                box-shadow            @links-aniduration ease-out,
                text-decoration-color @links-aniduration ease-out;
        }

        &:hover {
            transition:
                color                 0s,
                background-color      0s,
                border-color          0s,
                box-shadow            0s,
                text-decoration-color 0s;
        }

        // apply custom focus for keyboard navigation
        &:focus {
            background: fadeout(@links-hover, 80%);
            box-shadow: 0 0 0 @links-focuswidth fadeout(@links-hover, 80%);
            outline: none;
        }
    }

    .@{links-class}:not(a),
    .@{links-class}-novisited:not(a),
    .@{links-class}-inherit:not(a) {
        cursor: pointer;
        background-color: unset;
        border-style: unset;
        padding: unset;
    }

    .links-settings();
};

@links-render();