diff options
author | Volpeon <git@volpeon.ink> | 2024-06-26 16:53:07 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-26 16:53:07 +0200 |
commit | dd1ade8acc17d74a45240d255cb862009129b0ec (patch) | |
tree | 47fdc87cdcda8e8597c9d192d07ca5a97d375072 /src/objects/_action-menu.scss | |
parent | Add static themes to action button (diff) | |
download | iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.gz iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.bz2 iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.zip |
Update
Diffstat (limited to 'src/objects/_action-menu.scss')
-rw-r--r-- | src/objects/_action-menu.scss | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss new file mode 100644 index 0000000..2a74834 --- /dev/null +++ b/src/objects/_action-menu.scss | |||
@@ -0,0 +1,111 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('action-menu') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --pad-i: 0, | ||
8 | --pad-b: fn.global-dim(--size --85), | ||
9 | --separator: fn.global-dim(--size --85), | ||
10 | --rounding: fn.global-dim(--rounding), | ||
11 | --border: fn.global-dim(--border --thin), | ||
12 | --item: ( | ||
13 | --pad-i: fn.global-dim(--size --150), | ||
14 | --pad-b: fn.global-dim(--size --85), | ||
15 | ), | ||
16 | ), | ||
17 | --colors: ( | ||
18 | --bg: fn.global-color(--bg-l2), | ||
19 | --text: fn.global-color(--text), | ||
20 | --shadow: 0 .2em .5em rgba(#000, .1), | ||
21 | --border: fn.global-color(--border), | ||
22 | --separator: fn.global-color(--border), | ||
23 | --icon: fn.global-color(--text-mute), | ||
24 | --item: ( | ||
25 | --hover: ( | ||
26 | --bg: fn.global-color(--border-mute), | ||
27 | --label: fn.global-color(--heading), | ||
28 | ), | ||
29 | --disabled: ( | ||
30 | --label: fn.global-color(--text-disabled), | ||
31 | ), | ||
32 | --key-focus: ( | ||
33 | --border: fn.global-color(--focus --border), | ||
34 | --outline: fn.global-color(--focus --outline), | ||
35 | ), | ||
36 | ), | ||
37 | ), | ||
38 | )); | ||
39 | |||
40 | @include iro.bem-object(iro.props-namespace()) { | ||
41 | position: absolute; | ||
42 | z-index: 10000; | ||
43 | inset-block-start: 0; | ||
44 | inset-inline-start: 0; | ||
45 | padding-block: fn.dim(--pad-b); | ||
46 | padding-inline: fn.dim(--pad-i); | ||
47 | transform: translate(var(--x), var(--y)); | ||
48 | border: fn.dim(--border) solid fn.color(--border); | ||
49 | border-radius: fn.dim(--rounding); | ||
50 | background-clip: padding-box; | ||
51 | background-color: fn.color(--bg); | ||
52 | box-shadow: fn.color(--shadow); | ||
53 | color: fn.color(--text); | ||
54 | |||
55 | @include iro.bem-modifier('up-left') { | ||
56 | transform: translate(var(--x), calc(var(--y) - 100%)); | ||
57 | } | ||
58 | |||
59 | @include iro.bem-modifier('up-right') { | ||
60 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); | ||
61 | } | ||
62 | |||
63 | @include iro.bem-modifier('down-right') { | ||
64 | transform: translate(calc(var(--x) - 100%), var(--y)); | ||
65 | } | ||
66 | |||
67 | @include iro.bem-elem('item') { | ||
68 | display: block; | ||
69 | box-sizing: border-box; | ||
70 | inline-size: 100%; | ||
71 | padding-block: calc(fn.dim(--item --pad-b) - 2px); | ||
72 | padding-inline: calc(fn.dim(--item --pad-i) - 2px); | ||
73 | border: 2px solid transparent; | ||
74 | color: fn.color(--item --disabled --label); | ||
75 | |||
76 | &:link, | ||
77 | &:visited, | ||
78 | &:enabled { | ||
79 | color: currentColor; | ||
80 | |||
81 | &:hover, | ||
82 | &:active, | ||
83 | &:focus-visible { | ||
84 | background-color: fn.color(--item --hover --bg); | ||
85 | color: fn.color(--item --hover --label); | ||
86 | } | ||
87 | |||
88 | &:focus-visible { | ||
89 | border-color: fn.color(--item --key-focus --border); | ||
90 | } | ||
91 | } | ||
92 | } | ||
93 | |||
94 | @include iro.bem-elem('separator') { | ||
95 | block-size: 1px; | ||
96 | margin-block: fn.dim(--separator); | ||
97 | background-color: fn.color(--separator); | ||
98 | } | ||
99 | |||
100 | @include iro.bem-elem('slot') { | ||
101 | padding-block: fn.dim(--item --pad-b); | ||
102 | padding-inline: fn.dim(--item --pad-i); | ||
103 | } | ||
104 | |||
105 | @include iro.bem-elem('icon-slot') { | ||
106 | display: flex; | ||
107 | justify-content: center; | ||
108 | inline-size: fn.foreign-dim(--icon, --size); | ||
109 | } | ||
110 | } | ||
111 | } | ||