summaryrefslogtreecommitdiffstats
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
parentLightbox (diff)
downloadiro-design-ac04c0bb55f51dd18daaf6813c47a0db8525180f.tar.gz
iro-design-ac04c0bb55f51dd18daaf6813c47a0db8525180f.tar.bz2
iro-design-ac04c0bb55f51dd18daaf6813c47a0db8525180f.zip
Added overflow button
-rw-r--r--src/_objects.scss1
-rw-r--r--src/objects/_emoji.scss2
-rw-r--r--src/objects/_overflow-button.scss132
-rw-r--r--tpl/index.pug3
-rw-r--r--tpl/objects/action-button.pug4
-rw-r--r--tpl/objects/overflow-button.pug22
-rw-r--r--tpl/views/overflow-button.pug10
7 files changed, 170 insertions, 4 deletions
diff --git a/src/_objects.scss b/src/_objects.scss
index f054c53..faa45bd 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -10,6 +10,7 @@
10@use 'objects/checkbox'; 10@use 'objects/checkbox';
11@use 'objects/switch'; 11@use 'objects/switch';
12@use 'objects/action-button'; 12@use 'objects/action-button';
13@use 'objects/overflow-button';
13@use 'objects/status-indicator'; 14@use 'objects/status-indicator';
14@use 'objects/avatar'; 15@use 'objects/avatar';
15@use 'objects/bubble'; 16@use 'objects/bubble';
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}
diff --git a/tpl/index.pug b/tpl/index.pug
index 1f4f522..15929cf 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -17,6 +17,7 @@ include objects/checkbox.pug
17include objects/switch.pug 17include objects/switch.pug
18include objects/form.pug 18include objects/form.pug
19include objects/action-button.pug 19include objects/action-button.pug
20include objects/overflow-button.pug
20include objects/status-indicator.pug 21include objects/status-indicator.pug
21include objects/avatar.pug 22include objects/avatar.pug
22include objects/action-menu.pug 23include objects/action-menu.pug
@@ -65,6 +66,7 @@ include views/checkbox.pug
65include views/switch.pug 66include views/switch.pug
66include views/form.pug 67include views/form.pug
67include views/action-button.pug 68include views/action-button.pug
69include views/overflow-button.pug
68include views/status-indicator.pug 70include views/status-indicator.pug
69include views/avatar.pug 71include views/avatar.pug
70include views/action-menu.pug 72include views/action-menu.pug
@@ -108,6 +110,7 @@ html
108 +view-switch 110 +view-switch
109 +view-form 111 +view-form
110 +view-action-button 112 +view-action-button
113 +view-overflow-button
111 +view-status-indicator 114 +view-status-indicator
112 +view-avatar 115 +view-avatar
113 +view-action-menu 116 +view-action-menu
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index f99d789..e11e4a5 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -19,6 +19,4 @@ mixin action-button
19 if attributes.icon 19 if attributes.icon
20 +icon(attributes.icon)(block=!block) 20 +icon(attributes.icon)(block=!block)
21 = ' ' 21 = ' '
22 if block 22 block
23 span.o-action-button__label
24 block
diff --git a/tpl/objects/overflow-button.pug b/tpl/objects/overflow-button.pug
new file mode 100644
index 0000000..f52f12b
--- /dev/null
+++ b/tpl/objects/overflow-button.pug
@@ -0,0 +1,22 @@
1include icon.pug
2
3mixin overflow-button
4 -
5 let classes = {
6 'o-overflow-button': true,
7 'u-d-block': attributes.block,
8 'is-selected': attributes.selected
9 }
10 if (attributes.class) {
11 classes[attributes.class] = true;
12 }
13
14 let href = attributes.disabled ? null : '#';
15
16 a(class=classes href=href)
17 .o-overflow-button__inside
18 if attributes.icon
19 +icon(attributes.icon)(block=!block)
20 = ' '
21 .o-overflow-button__outside
22 block
diff --git a/tpl/views/overflow-button.pug b/tpl/views/overflow-button.pug
new file mode 100644
index 0000000..112aaab
--- /dev/null
+++ b/tpl/views/overflow-button.pug
@@ -0,0 +1,10 @@
1mixin view-overflow-button
2 +view('overflow-button', 'Overflow button')
3 .c-box
4 +overflow-button(icon='trash')= '123'
5 = ' '
6 +overflow-button(icon='trash' selected=true)= 'Delete'
7 = ' '
8 +overflow-button(icon='trash' disabled=true)= 'Disabled'
9 = ' '
10 +overflow-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'