summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-18 20:40:38 +0200
committerVolpeon <git@volpeon.ink>2021-04-18 20:40:38 +0200
commit09637502e8374ba5a1f408a9a231a0ec1eb96ee4 (patch)
tree2b13421e1b8781ec7b9b2b364a679e0e387b6ecb /assets/css/components
parentUpdate (diff)
downloadvolpeon.ink-09637502e8374ba5a1f408a9a231a0ec1eb96ee4.tar.gz
volpeon.ink-09637502e8374ba5a1f408a9a231a0ec1eb96ee4.tar.bz2
volpeon.ink-09637502e8374ba5a1f408a9a231a0ec1eb96ee4.zip
Update
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_footer.scss4
-rw-r--r--assets/css/components/_outer-button.scss34
2 files changed, 20 insertions, 18 deletions
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 225cd29..fcea457 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -18,8 +18,8 @@
18 width: 100%; 18 width: 100%;
19 height: 100%; 19 height: 100%;
20 margin-top: -1px; 20 margin-top: -1px;
21 margin-right: prop(--dims --outer-spacing, $global: true); 21 margin-right: prop(--container --dims --pad-x, $global: true);
22 margin-left: prop(--dims --outer-spacing, $global: true); 22 margin-left: prop(--container --dims --pad-x, $global: true);
23 border-top: 1px solid prop(--colors --border); 23 border-top: 1px solid prop(--colors --border);
24 color: prop(--colors --fg); 24 color: prop(--colors --fg);
25 line-height: prop(--dims --outer, $global: true); 25 line-height: prop(--dims --outer, $global: true);
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 774281d..d636f7d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -11,6 +11,9 @@
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 ) 13 )
14 ),
15 --dims: (
16 --pad-x: 1.7rem,
14 ) 17 )
15 )); 18 ));
16 19
@@ -31,6 +34,11 @@
31 bottom: 0; 34 bottom: 0;
32 } 35 }
33 36
37 @include modifier('inverted') {
38 background-color: prop(--colors --inverted --bg);
39 color: prop(--colors --inverted --fg);
40 }
41
34 @include element('icon') { 42 @include element('icon') {
35 display: flex; 43 display: flex;
36 position: relative; 44 position: relative;
@@ -39,20 +47,6 @@
39 justify-content: center; 47 justify-content: center;
40 width: prop(--dims --outer, $global: true); 48 width: prop(--dims --outer, $global: true);
41 height: 100%; 49 height: 100%;
42 transition: background-color .2s, color .2s;
43 }
44
45 @include modifier('inverted') {
46 background-color: prop(--colors --inverted --bg);
47 color: prop(--colors --inverted --fg);
48 }
49
50 &:link,
51 &:visited {
52 &:hover {
53 background-color: prop(--colors --hover --bg);
54 color: prop(--colors --hover --fg);
55 }
56 } 50 }
57 51
58 @include element('icon-symbol') { 52 @include element('icon-symbol') {
@@ -63,10 +57,18 @@
63 57
64 @include element('content') { 58 @include element('content') {
65 height: 100%; 59 height: 100%;
66 padding-right: prop(--dims --outer-spacing, $global: true); 60 padding-right: prop(--dims --pad-x);
67 padding-left: prop(--dims --outer-spacing, $global: true); 61 padding-left: prop(--dims --pad-x);
68 line-height: prop(--dims --outer, $global: true); 62 line-height: prop(--dims --outer, $global: true);
69 white-space: nowrap; 63 white-space: nowrap;
70 } 64 }
65
66 &:link,
67 &:visited {
68 &:hover {
69 background-color: prop(--colors --hover --bg);
70 color: prop(--colors --hover --fg);
71 }
72 }
71 } 73 }
72} 74}