diff options
-rw-r--r-- | src/_objects.scss | 1 | ||||
-rw-r--r-- | src/objects/_emoji.scss | 2 | ||||
-rw-r--r-- | src/objects/_overflow-button.scss | 132 | ||||
-rw-r--r-- | tpl/index.pug | 3 | ||||
-rw-r--r-- | tpl/objects/action-button.pug | 4 | ||||
-rw-r--r-- | tpl/objects/overflow-button.pug | 22 | ||||
-rw-r--r-- | tpl/views/overflow-button.pug | 10 |
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 | |||
17 | include objects/switch.pug | 17 | include objects/switch.pug |
18 | include objects/form.pug | 18 | include objects/form.pug |
19 | include objects/action-button.pug | 19 | include objects/action-button.pug |
20 | include objects/overflow-button.pug | ||
20 | include objects/status-indicator.pug | 21 | include objects/status-indicator.pug |
21 | include objects/avatar.pug | 22 | include objects/avatar.pug |
22 | include objects/action-menu.pug | 23 | include objects/action-menu.pug |
@@ -65,6 +66,7 @@ include views/checkbox.pug | |||
65 | include views/switch.pug | 66 | include views/switch.pug |
66 | include views/form.pug | 67 | include views/form.pug |
67 | include views/action-button.pug | 68 | include views/action-button.pug |
69 | include views/overflow-button.pug | ||
68 | include views/status-indicator.pug | 70 | include views/status-indicator.pug |
69 | include views/avatar.pug | 71 | include views/avatar.pug |
70 | include views/action-menu.pug | 72 | include 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 @@ | |||
1 | include icon.pug | ||
2 | |||
3 | mixin 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 @@ | |||
1 | mixin 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' | ||