summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-29 17:53:38 +0200
committerVolpeon <git@volpeon.ink>2021-04-29 17:53:38 +0200
commit518c7337572c0b7ba01b595aeb94fd36f8e59fdf (patch)
treea711f51b5459da68aa52fe79d53f21b7e2aafcdd /assets/css/components
parentUpdate (diff)
downloadvolpeon.ink-518c7337572c0b7ba01b595aeb94fd36f8e59fdf.tar.gz
volpeon.ink-518c7337572c0b7ba01b595aeb94fd36f8e59fdf.tar.bz2
volpeon.ink-518c7337572c0b7ba01b595aeb94fd36f8e59fdf.zip
Update
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_outer-button.scss23
1 files changed, 19 insertions, 4 deletions
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 00c4ccb..d1da93c 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -1,8 +1,9 @@
1@include namespace('outer-button') { 1@include namespace('outer-button') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --bg-hi, $global: true), 4 --fg: prop(--colors --bg-hi, $global: true),
5 --bg: prop(--colors --fg-lo, $global: true), 5 --bg: prop(--colors --fg-lo, $global: true),
6 --border: rgba(#000, .1),
6 --hover: ( 7 --hover: (
7 --bg: prop(--colors --accent --color, $global: true), 8 --bg: prop(--colors --accent --color, $global: true),
8 --fg: prop(--colors --bg-hi, $global: true), 9 --fg: prop(--colors --bg-hi, $global: true),
@@ -23,6 +24,7 @@
23 transition: background-color .2s, color .2s; 24 transition: background-color .2s, color .2s;
24 background-color: prop(--colors --bg); 25 background-color: prop(--colors --bg);
25 color: prop(--colors --fg); 26 color: prop(--colors --fg);
27 font-family: $font-fam--large;
26 font-size: 1rem; 28 font-size: 1rem;
27 font-weight: 500; 29 font-weight: 500;
28 text-decoration: none; 30 text-decoration: none;
@@ -40,18 +42,25 @@
40 justify-content: center; 42 justify-content: center;
41 width: prop(--dims --outer, $global: true); 43 width: prop(--dims --outer, $global: true);
42 height: 100%; 44 height: 100%;
45
46 @include next-element('content') {
47 margin-left: -1px;
48 border-left: 1px solid prop(--colors --border);
49 }
43 } 50 }
44 51
45 @include element('icon-symbol') { 52 @include element('icon-symbol') {
46 display: block; 53 display: block;
47 width: 1.5em; 54 width: 1.35em;
48 height: 1.5em; 55 height: 1.35em;
49 } 56 }
50 57
51 @include element('content') { 58 @include element('content') {
52 height: 100%; 59 height: 100%;
53 padding-right: prop(--dims --pad-x); 60 padding-right: prop(--dims --pad-x);
54 padding-left: prop(--dims --pad-x); 61 padding-left: prop(--dims --pad-x);
62 transition: border-color .2s;
63 font-size: 1 / 16 * 15em;
55 line-height: prop(--dims --outer, $global: true); 64 line-height: prop(--dims --outer, $global: true);
56 white-space: nowrap; 65 white-space: nowrap;
57 } 66 }
@@ -61,6 +70,12 @@
61 &:hover { 70 &:hover {
62 background-color: prop(--colors --hover --bg); 71 background-color: prop(--colors --hover --bg);
63 color: prop(--colors --hover --fg); 72 color: prop(--colors --hover --fg);
73
74 @include element('icon') {
75 @include next-element('content') {
76 border-left-color: transparent;
77 }
78 }
64 } 79 }
65 } 80 }
66 } 81 }