196 lines
3.8 KiB
Stylus
196 lines
3.8 KiB
Stylus
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
|
// Links
|
|
|
|
//
|
|
// Configuration
|
|
//
|
|
|
|
// Link style (default: underline).
|
|
//
|
|
// Values:
|
|
// - underline - text-decoration:underline.
|
|
// - border - border-bottom:1px solid.
|
|
// - gradient - Uses CSS gradients to position line under text (cannot change line color on hover).
|
|
link_style ?= "underline"
|
|
|
|
// Link color (default: #1978c8).
|
|
link_color ?= #1978c8
|
|
|
|
// Visited link color.
|
|
visited_color ?= link_color
|
|
|
|
// Hovered link color.
|
|
hover_color ?= link_color
|
|
|
|
// Link underline color.
|
|
link_underline_color ?= rgba(link_color,.4)
|
|
|
|
// Visited link underline color.
|
|
visited_underline_color ?= rgba(visited_color,.4)
|
|
|
|
// Hovered link underline color.
|
|
hover_underline_color ?= rgba(hover_color,.4)
|
|
|
|
// Link underline position (only when link_style == gradient, default: 80%)
|
|
link_underline_position ?= 80%
|
|
link_underline_position = 76.5% if link_style == "underline"
|
|
|
|
// Pressable links (shifts down by 1px, default: false).
|
|
link_pressable ?= false
|
|
|
|
|
|
//
|
|
// Mixins
|
|
//
|
|
|
|
// Adds link underline (adds nothing for "underline" and "border" types)
|
|
link-underline(color)
|
|
if link_style == "gradient"
|
|
background-image: linear-gradient(to right, color, color)
|
|
|
|
// Adds fake link underline (adds nothing for "underline" type)
|
|
link-fake-underline(color)
|
|
if link_style != "border"
|
|
background-image: linear-gradient(to right, color, color 50%, transparent 50%)
|
|
|
|
// :hover, :active and :focus states of the link.
|
|
//
|
|
// Example:
|
|
// +link-hovers()
|
|
// color: #bada55
|
|
link-hovers() {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
{block}
|
|
}
|
|
}
|
|
|
|
// All states of the link.
|
|
//
|
|
// Example:
|
|
// +link-all-states()
|
|
// color: @color
|
|
link-all-states() {
|
|
&,
|
|
&:link,
|
|
&:visited,
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
{block}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Classes
|
|
//
|
|
|
|
// Pressable element: pointer cursor + disable text selection.
|
|
.pressable-inset
|
|
no-select()
|
|
cursor: pointer
|
|
|
|
// Pressable element: shifts down by 1px on click.
|
|
.pressable
|
|
@extend .pressable-inset
|
|
&:active
|
|
position: relative if link_pressable
|
|
top: 1px if link_pressable
|
|
|
|
// Non-pressable element: cancels .pressable.
|
|
.no-pressable
|
|
&,
|
|
&:hover,
|
|
&:active
|
|
cursor: default
|
|
&:active
|
|
position: static if link_pressable
|
|
|
|
// Remove underline.
|
|
.no-underline
|
|
&,
|
|
&:link,
|
|
&:visited,
|
|
&:hover,
|
|
&:active,
|
|
&:focus
|
|
text-decoration: none
|
|
border-bottom: 0
|
|
background-image: none
|
|
|
|
// Link.
|
|
//
|
|
// .link_fake - Pseudo link with dashed underline.
|
|
// .link_quoted - Link in quotes (quotes should be colored but not underlined). Example: a.link.link_quoted>u.
|
|
.link
|
|
&,
|
|
& u
|
|
@extend .pressable
|
|
transition: border .1s ease-in-out, color .2s ease-in-out, background .2s ease-in-out
|
|
cursor: pointer
|
|
if link_style == "underline"
|
|
text-decoration: underline
|
|
else
|
|
text-decoration: none
|
|
if link_style == "border"
|
|
border-bottom-width: 1px
|
|
border-bottom-style: solid
|
|
if link_style == "gradient"
|
|
background-position: 0 link_underline_position
|
|
background-size: 5px 1px
|
|
background-repeat: repeat-x
|
|
|
|
&,
|
|
&:link,
|
|
& u,
|
|
&:link u
|
|
link-underline(link_underline_color)
|
|
color: link_color
|
|
|
|
&:visited,
|
|
&:visited u
|
|
link-underline(visited_underline_color)
|
|
color: visited_color
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:hover u,
|
|
&:active u,
|
|
&:focus u
|
|
link-underline(hover_underline_color)
|
|
color: hover_color
|
|
|
|
&_fake
|
|
if link_style == "border"
|
|
border-bottom-style: dotted
|
|
if link_style != "gradient"
|
|
text-decoration: none
|
|
background-position: 0 link_underline_position
|
|
background-size: 5px 1px
|
|
background-repeat: repeat-x
|
|
|
|
&,
|
|
&:link,
|
|
&:visited
|
|
link-fake-underline(link_underline_color)
|
|
color: link_color
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus
|
|
link-fake-underline(link_underline_color)
|
|
color: hover_color
|
|
|
|
&_quoted
|
|
@extend .no-underline
|
|
|
|
.no-cssgradients
|
|
.link
|
|
text-decoration: underline
|
|
.link_fake
|
|
text-decoration: none
|
|
border-bottom: 1px dotted
|