Configurable css module for rendering links.
npm install links.less --save-dev
bower install links.less --save
or use compiled version from CDN
https://unpkg.com/[email protected]/links.css
https://unpkg.com/[email protected]/links.min.css
https://unpkg.com/[email protected]/links.min.css.map
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.
Use .link to apply styles to any tag:
<a class="mytag link" href="#">customized link</span>
<span class="link" tabindex="0">pseudolink</span>
<button class="link">button</button>Links with class .link-novisited never look like :visited. Good for navigation for example.
<nav>
<a class="link-novisited" href="https://www.google.com/">google</a>
<a class="link-novisited" href="https://github.com/">github</a>
<a class="link-novisited" href="http://codepen.io/">codepen</a>
</nav>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.
<footer style="color:#999">
© <a class="link-inherit" href="http//paulradzkov.com">Paul Radzkov</a> 2017.
</footer>Install library with npm install links.less --save-dev and include its main file inside your project less file:
@import (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:
@import (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;
}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
}You can recolor links with .links-color() mixin:
@import (less) "node_modules/links.less/links.less";
.links-settings() {
// your customized parameters
}
.mycustomlink {
.links-color(red);
}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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent