links.less
Configurable css module for rendering links.
Install
npm install links.less --save-dev
bower install links.less --save
or use compiled version from CDN
https://unpkg.com/links.less@0.0.5/links.css
https://unpkg.com/links.less@0.0.5/links.min.css
https://unpkg.com/links.less@0.0.5/links.min.css.map
Usage in HTML
See demo on Codepen.
Default colors apply to all links and classnames .link
, .link-novisited
, .link-inherit
.
Custom :focus
styles and animation apply only to links that has no class attribute (a:not[class]
) and .link
, .link-novisited
, .link-inherit
.
.link
Use .link
to apply styles to any tag:
customized linkpseudolinkbutton
.link-novisited
Links with class .link-novisited
never look like :visited. Good for navigation for example.
google github codepen
.link-inherit
Links with class .link-inherit
use same color as parent element for :link and :visited states. Good if you want to make links in footer less prominent.
© Paul Radzkov 2017.
Usage in LESS
Install library with npm install links.less --save-dev
and include its main file inside your project less file:
less "node_modules/links.less/links.less";
That is enough to run library with default parameters.
To customize settings add .links-settings()
mixin after import and redefine any parameter:
less "node_modules/links.less/links.less"; .links-settings @links-class: pseudolink; //you can rename that classname @links-text-decoration: none; @links-roundness: 0; @links-focuswidth: 0; @links-aniduration: .5s;
Default settings
All list of settings:
.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%; // amount of transparency added to underline //animation @links-aniduration: .3s; //fading duration from hover
Using mixin for coloring your own links
You can recolor links with .links-color()
mixin:
less "node_modules/links.less/links.less"; .links-settings // your customized parameters .mycustomlink .links-colorred;
You can pass from 1 to 6 arguments to mixin. See the mapping scheme:
.links-color@link-color;.links-color@link-color, @hover-color;.links-color@link-color, @hover-color, @visited-color;.links-color@link-color, @hover-color, @visited-color, @active-color;.links-color@link-color, @hover-color, @visited-color, @visitedhover-color, @active-color;.links-color@link-color, @hover-color, @visited-color, @visitedhover-color, @active-color, @fadeout;
The last one @fadeout
by default has value 75% and refers to amount of transparency added to underline.