Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
246 lines (211 sloc) 6.02 KB
/*! 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();