diff options
author | Volpeon <git@volpeon.ink> | 2021-04-18 15:44:32 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-18 15:44:32 +0200 |
commit | 8c83a2ef92be845c5ffecb1434028d0c68915936 (patch) | |
tree | a18faff703a1deadb041dcc977208a4d6565dd85 /assets/css/components/_outer-button.scss | |
parent | Fetch pages of sections (diff) | |
download | volpeon.ink-8c83a2ef92be845c5ffecb1434028d0c68915936.tar.gz volpeon.ink-8c83a2ef92be845c5ffecb1434028d0c68915936.tar.bz2 volpeon.ink-8c83a2ef92be845c5ffecb1434028d0c68915936.zip |
Update
Diffstat (limited to 'assets/css/components/_outer-button.scss')
-rw-r--r-- | assets/css/components/_outer-button.scss | 31 |
1 files changed, 16 insertions, 15 deletions
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index b92dd9e..774281d 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss | |||
@@ -7,13 +7,9 @@ | |||
7 | --bg: prop(--colors --accent --color, $global: true), | 7 | --bg: prop(--colors --accent --color, $global: true), |
8 | --fg: prop(--colors --bg-hi, $global: true), | 8 | --fg: prop(--colors --bg-hi, $global: true), |
9 | ), | 9 | ), |
10 | --icon: ( | 10 | --inverted: ( |
11 | --fg: prop(--colors --fg-lo, $global: true), | 11 | --fg: prop(--colors --fg-lo, $global: true), |
12 | --bg: prop(--colors --bg-hi, $global: true), | 12 | --bg: prop(--colors --bg-hi, $global: true), |
13 | --hover: ( | ||
14 | --fg: prop(--colors --bg-hi, $global: true), | ||
15 | --bg: prop(--colors --accent --color, $global: true), | ||
16 | ) | ||
17 | ) | 13 | ) |
18 | ) | 14 | ) |
19 | )); | 15 | )); |
@@ -24,9 +20,17 @@ | |||
24 | transition: background-color .2s, color .2s; | 20 | transition: background-color .2s, color .2s; |
25 | background-color: prop(--colors --bg); | 21 | background-color: prop(--colors --bg); |
26 | color: prop(--colors --fg); | 22 | color: prop(--colors --fg); |
23 | font-size: 1rem; | ||
27 | font-weight: 450; | 24 | font-weight: 450; |
28 | text-decoration: none; | 25 | text-decoration: none; |
29 | 26 | ||
27 | @include modifier('scroll-top') { | ||
28 | position: fixed; | ||
29 | z-index: 9000; | ||
30 | right: 0; | ||
31 | bottom: 0; | ||
32 | } | ||
33 | |||
30 | @include element('icon') { | 34 | @include element('icon') { |
31 | display: flex; | 35 | display: flex; |
32 | position: relative; | 36 | position: relative; |
@@ -36,19 +40,16 @@ | |||
36 | width: prop(--dims --outer, $global: true); | 40 | width: prop(--dims --outer, $global: true); |
37 | height: 100%; | 41 | height: 100%; |
38 | transition: background-color .2s, color .2s; | 42 | transition: background-color .2s, color .2s; |
39 | background-color: prop(--colors --icon --bg); | ||
40 | color: prop(--colors --icon --fg); | ||
41 | } | 43 | } |
42 | 44 | ||
43 | @include modifier('icon-only') { | 45 | @include modifier('inverted') { |
44 | @include element('icon') { | 46 | background-color: prop(--colors --inverted --bg); |
45 | background-color: prop(--colors --bg); | 47 | color: prop(--colors --inverted --fg); |
46 | color: prop(--colors --fg); | ||
47 | } | ||
48 | } | 48 | } |
49 | 49 | ||
50 | &:hover { | 50 | &:link, |
51 | @include multi('&', 'element' 'icon') { | 51 | &:visited { |
52 | &:hover { | ||
52 | background-color: prop(--colors --hover --bg); | 53 | background-color: prop(--colors --hover --bg); |
53 | color: prop(--colors --hover --fg); | 54 | color: prop(--colors --hover --fg); |
54 | } | 55 | } |