3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
14 @include vendor('appearance', 'none');
15 @include vendor('transition', (
16 'background-color #{_duration(transition)} ease-in-out',
17 'box-shadow #{_duration(transition)} ease-in-out',
18 'color #{_duration(transition)} ease-in-out'
20 background-color: transparent;
23 box-shadow: inset 0 0 0 2px _palette_light(fg-bold);
24 color: _palette_light(fg-bold);
25 @media screen and (prefers-color-scheme: dark) {
26 box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);
27 color: _palette_dark(fg-bold);
30 display: inline-block;
32 font-weight: _font(weight-bold);
34 letter-spacing: _font(letter-spacing-alt);
38 text-decoration: none;
39 text-transform: uppercase;
43 box-shadow: inset 0 0 0 2px _palette_light(highlight);
44 color: _palette_light(highlight);
45 @media screen and (prefers-color-scheme: dark) {
46 box-shadow: inset 0 0 0 2px _palette_dark(highlight);
47 color: _palette_dark(highlight);
52 background-color: transparentize(_palette_light(highlight), 0.9);
53 box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);
54 color: desaturate(darken(_palette_light(highlight), 15), 5);
55 @media screen and (prefers-color-scheme: dark) {
56 background-color: transparentize(_palette_dark(highlight), 0.9);
57 box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);
58 color: desaturate(darken(_palette_dark(highlight), 15), 5);
87 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
88 background-position: center right;
89 background-repeat: no-repeat;
90 background-size: 36px 24px;
97 vertical-align: middle;
102 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
103 @media screen and (prefers-color-scheme: dark) {
104 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
109 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
110 @media screen and (prefers-color-scheme: dark) {
111 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
123 @include breakpoint('<=large') {
129 background-color: _palette_light(fg-bold);
131 color: _palette_light(bg);
132 @media screen and (prefers-color-scheme: dark) {
133 background-color: _palette_dark(fg-bold);
134 color: _palette_dark(bg);
138 background-color: _palette_light(highlight);
139 color: _palette_light(bg) !important;
140 @media screen and (prefers-color-scheme: dark) {
141 background-color: _palette_dark(highlight);
142 color: _palette_dark(bg) !important;
147 background-color: desaturate(darken(_palette_light(highlight), 15), 5);
148 @media screen and (prefers-color-scheme: dark) {
149 background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
156 @include vendor('pointer-events', 'none');