summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-28 09:34:19 +0100
committerVolpeon <git@volpeon.ink>2023-01-28 09:34:19 +0100
commitac04c0bb55f51dd18daaf6813c47a0db8525180f (patch)
tree0905dce4274c39562b630fe73268b5eba8f101ff /src/objects
parentLightbox (diff)
downloadiro-design-ac04c0bb55f51dd18daaf6813c47a0db8525180f.tar.gz
iro-design-ac04c0bb55f51dd18daaf6813c47a0db8525180f.tar.bz2
iro-design-ac04c0bb55f51dd18daaf6813c47a0db8525180f.zip
Added overflow button
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_emoji.scss2
-rw-r--r--src/objects/_overflow-button.scss132
2 files changed, 133 insertions, 1 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 0f878c3..37e1ccc 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -23,7 +23,7 @@
23 height: fn.dim(--size); 23 height: fn.dim(--size);
24 margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad)); 24 margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad));
25 padding: fn.dim(--pad); 25 padding: fn.dim(--pad);
26 vertical-align: .2em; 26 vertical-align: .1em;
27 27
28 @include iro.bem-modifier('zoomable') { 28 @include iro.bem-modifier('zoomable') {
29 transition: transform .2s ease, background-color .2s ease; 29 transition: transform .2s ease, background-color .2s ease;
diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
new file mode 100644
index 0000000..4cea74a
--- /dev/null
+++ b/src/objects/_overflow-button.scss
@@ -0,0 +1,132 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow-button') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --125),
8 --pad-y: fn.global-dim(--size --125),
9 --spacing: fn.global-dim(--size --50),
10 ),
11 ), 'dims');
12
13 @include iro.props-store((
14 --colors: (
15 --label: fn.global-color(--fg),
16
17 --hover: (
18 --bg: fn.global-color(--obj-hi),
19 --label: fn.global-color(--fg-lo),
20 ),
21 --active: (
22 --bg: fn.global-color(--obj),
23 --label: fn.global-color(--fg-lo),
24 ),
25 --selected: (
26 --bg: fn.global-color(--obj-hi),
27 --label: fn.global-color(--fg),
28
29 --hover: (
30 --label: fn.global-color(--fg-lo),
31 ),
32 ),
33 --disabled: (
34 --label: fn.global-color(--fg-hi3),
35 ),
36 --key-focus: (
37 --border: fn.global-color(--focus --fill),
38 --shadow: fn.global-color(--focus --shadow),
39 ),
40 ),
41 ), 'colors');
42
43 @include iro.bem-object(iro.props-namespace()) {
44 display: inline-block;
45 color: fn.color(--disabled --label);
46
47 @include iro.bem-elem('inside') {
48 display: inline-block;
49 padding: fn.dim(--pad-y) fn.dim(--pad-x);
50 border: 1px solid transparent;
51 border-radius: 100em;
52 line-height: 1;
53 text-align: center;
54 text-decoration: none;
55 text-overflow: ellipsis;
56 white-space: nowrap;
57 }
58
59 @include iro.bem-elem('outside') {
60 display: inline-block;
61 margin-left: fn.dim(--spacing);
62 }
63
64 &:link,
65 &:visited,
66 &:enabled {
67 @include iro.bem-elem('inside') {
68 color: fn.color(--label);
69 }
70
71 &:hover {
72 @include iro.bem-elem('inside') {
73 background-color: fn.color(--hover --bg);
74 color: fn.color(--hover --label);
75 }
76 }
77
78 &:active {
79 @include iro.bem-elem('inside') {
80 background-color: fn.color(--active --bg);
81 color: fn.color(--active --label);
82 }
83 }
84
85 @include iro.bem-at-theme('keyboard') {
86 &:focus {
87 @include iro.bem-elem('inside') {
88 background-color: fn.color(--hover --bg);
89 color: fn.color(--hover --label);
90 }
91 }
92 }
93 }
94
95 @include iro.bem-is('selected') {
96 &:link,
97 &:visited,
98 &:enabled {
99 @include iro.bem-elem('inside') {
100 background-color: fn.color(--selected --bg);
101 color: fn.color(--selected --label);
102 }
103
104 &:hover,
105 &:active {
106 @include iro.bem-elem('inside') {
107 background-color: fn.color(--selected --bg);
108 color: fn.color(--selected --hover --label);
109 }
110 }
111
112 @include iro.bem-at-theme('keyboard') {
113 &:focus {
114 @include iro.bem-elem('inside') {
115 background-color: fn.color(--selected --bg);
116 color: fn.color(--selected --hover --label);
117 }
118 }
119 }
120 }
121 }
122
123 @include iro.bem-at-theme('keyboard') {
124 &:focus {
125 @include iro.bem-elem('inside') {
126 border-color: fn.color(--key-focus --border);
127 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
128 }
129 }
130 }
131 }
132}