added dark theme option. It ìs selected automagically based on system choiche of...
[theme-danix.xyz.git] / assets / sass / components / _icon.scss
CommitLineData
748286b5 1///\r
2/// Forty by HTML5 UP\r
3/// html5up.net | @ajlkn\r
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
5///\r
6\r
7/* Icon */\r
8\r
9 .icon {\r
10 @include icon;\r
11 border-bottom: none;\r
12 position: relative;\r
13\r
14 > .label {\r
15 display: none;\r
16 }\r
17\r
18 &:before {\r
19 line-height: inherit;\r
20 }\r
21\r
22 &.solid {\r
23 &:before {\r
24 font-weight: 900;\r
25 }\r
26 }\r
27\r
28 &.brands {\r
29 &:before {\r
30 font-family: 'Font Awesome 5 Brands';\r
31 }\r
32 }\r
33\r
34 &.alt {\r
35 &:before {\r
cb4379e1 36 background-color: _palette_light(fg-bold);\r
748286b5 37 border-radius: 100%;\r
cb4379e1 38 color: _palette_light(bg);\r
748286b5 39 display: inline-block;\r
40 height: 2em;\r
41 line-height: 2em;\r
42 text-align: center;\r
43 width: 2em;\r
cb4379e1 44 @media screen and (prefers-color-scheme: dark) {\r
45 background-color: _palette_dark(fg-bold);\r
46 color: _palette_dark(bg);\r
47 }\r
748286b5 48 }\r
49 }\r
50 }\r
51\r
52 a.icon {\r
53 &.alt {\r
54 &:before {\r
55 @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');\r
56 }\r
57\r
58 &:hover {\r
59 &:before {\r
cb4379e1 60 background-color: _palette_light(accent1);\r
61 @media screen and (prefers-color-scheme: dark) {\r
62 background-color: _palette_dark(accent1);\r
63 }\r
748286b5 64 }\r
65 }\r
66\r
67 &:active {\r
68 &:before {\r
cb4379e1 69 background-color: desaturate(darken(_palette_light(accent1), 15), 5);\r
70 @media screen and (prefers-color-scheme: dark) {\r
71 background-color: desaturate(darken(_palette_dark(accent1), 15), 5);\r
72 }\r
748286b5 73 }\r
74 }\r
75 }\r
76 }