/
links.css
52 lines (49 loc) · 1.46 KB
/
links.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/**
* Create clickable, hoverable, focusable, colored text.
* These classes are often used for actual `<a>` elements with `href` attributes,
* but might prove useful for `<button>`s, as well, depending on semantics.
*
* @section Links
*/
/**
* Style a link. By default, the `link` class turns text blue, and provides dark blue
* hover and active states. Change the color with a `link--{color}` modifier.
* Links are underlined when focused.
*
* @memberof Links
* @example
* <a href='#Links' class='link'>A link</a>
* <a href='#Links' class='link link--red'>A red link</a>
*/
.link {
cursor: pointer;
color: var(--blue);
transition: color var(--transition);
}
/**
* Apply a darker active state to links by adding the `is-active` class.
*
* @memberof Links
* @selectors .link.is-active
* @example
* <a href='#Links' class='link is-active'>Active</a>
* <a href='#Links' class='link link--red is-active'>Red and active</a>
*/
.link:hover,
.link.is-active {
color: var(--blue-dark);
}
/**
* When a form element like `button` includes both the `link` class and the `disabled` attribute, it will be styled accordingly.
* The disabled property has no visual effect on `a` elements.
*
* @memberof Links
* @example
* <button href='#Links' disabled class='link'>A disabled link</button>
* <button href='#Links' disabled class='link link--red'>A disabled red link</button>
*/
.link:disabled {
pointer-events: none;
cursor: default;
color: var(--disabled75);
}