File tree Expand file tree Collapse file tree 2 files changed +30
-8
lines changed
source/_patterns/01-elements/link Expand file tree Collapse file tree 2 files changed +30
-8
lines changed Original file line number Diff line number Diff line change 1
1
@import " link.variables" ;
2
2
@import " ../link" ;
3
+
4
+ // Define the available icons
5
+ .elm-link {
6
+ & [rel = " configuration" ] {
7
+ @include icon (glyph (settings ), 24 , " outline" , $partial : $partial );
8
+ }
9
+ & [rel = " messages" ] {
10
+ @include icon (glyph (chat ), 24 , " outline" , $partial : $partial );
11
+ }
12
+ & [rel = " account" ] {
13
+ @include icon (glyph (account ), 24 , " outline" , $partial : $partial );
14
+ }
15
+ & [rel = " configuration" ],
16
+ & [rel = " messages" ],
17
+ & [rel = " account" ] {
18
+ & ::before {
19
+ // preventing an underlined icon on click
20
+ display : inline-block ;
21
+ }
22
+ }
23
+ }
Original file line number Diff line number Diff line change 2
2
@import " link.variables" ;
3
3
4
4
.elm-link {
5
+ color : #282d37 ;
5
6
display : inline-block ;
6
7
border-radius : to-rem ($pxValue : 6 );
7
8
13
14
text-underline-position : auto ;
14
15
}
15
16
16
- & :active {
17
- font-size : to-em ($pxValue : 14 );
18
- }
19
-
20
17
// "disabled" links
21
18
& [aria-disabled = " true" ] {
22
19
opacity : $link--disabled-opacity ;
36
33
37
34
& [data-variant = " internal" ],
38
35
& [data-variant = " external" ] {
39
- color : #282d37 ;
40
36
& ::after {
41
37
margin-top : -3px ;
42
38
--icon-margin-before : #{to-rem ($pxValue : 4 )} ;
51
47
& :not (.is-icon-text-replace ) {
52
48
font-size : to-em ($pxValue : 12 );
53
49
}
54
- & :active {
55
- font-size : to-em ($pxValue : 10 );
56
- }
57
50
}
58
51
59
52
& [data-size = " small" ] {
53
+ // TODO: replace with color when it becomes available via core
60
54
color : #42464f ;
61
55
@extend %size-Small ;
62
56
& ::after {
63
57
--icon-font-size : #{to-rem ($pxValue : 16 )} ;
64
58
}
59
+ & [rel ],
60
+ & [data-icon ],
61
+ & [data-icon-before ] {
62
+ @include iconMeta (20 );
63
+ // TODO: remove when icons are availabe in the correct size
64
+ font-size : 16px ;
65
+ }
65
66
}
66
67
}
You can’t perform that action at this time.
0 commit comments