summaryrefslogtreecommitdiffstats
path: root/src/.old/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-26 21:47:55 +0200
committerVolpeon <git@volpeon.ink>2024-06-26 21:47:55 +0200
commit03bb4268367dcd3b2d327d3834e2047a56687a86 (patch)
tree83f6f6837fc909dd8cc5f8166c3c1b4ae78c85d9 /src/.old/objects
parentUpdate (diff)
downloadiro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.gz
iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.bz2
iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.zip
Menus
Diffstat (limited to 'src/.old/objects')
-rw-r--r--src/.old/objects/_menu.scss124
1 files changed, 0 insertions, 124 deletions
diff --git a/src/.old/objects/_menu.scss b/src/.old/objects/_menu.scss
deleted file mode 100644
index 7db4896..0000000
--- a/src/.old/objects/_menu.scss
+++ /dev/null
@@ -1,124 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use './icon';
5
6@include iro.props-namespace('menu') {
7 @include iro.props-store((
8 --dims: (
9 --spacing: fn.global-dim(--size --50),
10 --header: (
11 --font-size: fn.global-dim(--font-size --50),
12 ),
13 --separator: fn.global-dim(--size --200),
14 --item: (
15 --pad-x: fn.global-dim(--size --150),
16 --pad-y: fn.global-dim(--size --100),
17 --rounding: 3px,
18 ),
19 ),
20 ), 'dims');
21
22 @include iro.props-store((
23 --colors: (
24 --header: (
25 --label: fn.global-color(--fg-hi),
26 ),
27 --item: (
28 --hover: (
29 --bg: fn.global-color(--obj-hi),
30 --label: fn.global-color(--fg-lo),
31 ),
32 --disabled: (
33 --label: fn.global-color(--fg-hi3),
34 ),
35 --key-focus: (
36 --border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 --badge: (
40 --bg: fn.global-color(--bg),
41 --label: fn.global-color(--fg-lo),
42 )
43 ),
44 ),
45 ), 'colors');
46
47 @include iro.bem-object(iro.props-namespace()) {
48 display: flex;
49 flex-direction: column;
50 gap: fn.dim(--spacing);
51
52 @include iro.bem-elem('header') {
53 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
54 color: fn.color(--header --label);
55 font-size: fn.dim(--header --font-size);
56 font-weight: 500;
57 letter-spacing: .5px;
58 text-transform: uppercase;
59
60 @include iro.bem-next-twin-elem {
61 margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
62 }
63 }
64
65 @include iro.bem-elem('item') {
66 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
67 border: 2px solid transparent;
68 border-radius: fn.dim(--item --rounding);
69 color: fn.color(--item --disabled --label);
70
71 &:link,
72 &:visited,
73 &:enabled {
74 color: currentColor;
75
76 @include iro.bem-multi('&:hover, &:active', 'is' 'selected') {
77 background-color: fn.color(--item --hover --bg);
78 color: fn.color(--item --hover --label);
79
80 @include iro.bem-elem('badge') {
81 background-color: fn.color(--item --badge --bg);
82 color: fn.color(--item --badge --label);
83 }
84 }
85
86 @include iro.bem-at-theme('keyboard') {
87 &:focus {
88 border-radius: calc(fn.dim(--item --rounding) - 1px);
89 border-color: fn.color(--item --key-focus --border);
90 background-color: fn.color(--item --hover --bg);
91 box-shadow: fn.color(--item --key-focus --shadow);
92 color: fn.color(--item --hover --label);
93 }
94 }
95 }
96
97 @include iro.bem-next-elem('header') {
98 margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
99 }
100 }
101
102 @include iro.bem-elem('header') {
103 &:link,
104 &:visited,
105 &:enabled {
106 color: fn.color(--header --label);
107 }
108 }
109
110 @include iro.bem-elem('separator') {
111 height: fn.dim(--separator);
112 }
113
114 @include iro.bem-elem('icon-slot') {
115 display: flex;
116 justify-content: center;
117 width: fn.foreign-dim(--icon, --size);
118 }
119
120 @include iro.bem-modifier('pull') {
121 margin: calc(-1 * fn.dim(--item --pad-x));
122 }
123 }
124}