summaryrefslogtreecommitdiffstats
path: root/src/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/objects
parentUpdate (diff)
downloadiro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.gz
iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.bz2
iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.zip
Menus
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-menu.scss111
-rw-r--r--src/objects/_menu.scss127
-rw-r--r--src/objects/_popover.scss46
-rw-r--r--src/objects/_side-nav.scss122
4 files changed, 295 insertions, 111 deletions
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
deleted file mode 100644
index 2a74834..0000000
--- a/src/objects/_action-menu.scss
+++ /dev/null
@@ -1,111 +0,0 @@
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}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
new file mode 100644
index 0000000..091098d
--- /dev/null
+++ b/src/objects/_menu.scss
@@ -0,0 +1,127 @@
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: 0em,
10 --header: (
11 --font-size: fn.global-dim(--font-size --50),
12 ),
13 --separator: fn.global-dim(--size --85),
14 --item: (
15 --pad-i: fn.global-dim(--size --150),
16 --pad-b: fn.global-dim(--size --100),
17 --rounding: 0em,
18 ),
19
20 --key-focus: (
21 --border: fn.global-dim(--key-focus --border),
22 --border-offset: fn.global-dim(--key-focus --border-offset),
23 --outline: fn.global-dim(--key-focus --outline),
24 ),
25 ),
26 --colors: (
27 --separator: fn.global-color(--border),
28 --header: (
29 --label: fn.global-color(--heading),
30 ),
31 --item: (
32 --hover: (
33 --bg: fn.global-color(--border-mute),
34 --label: fn.global-color(--heading),
35 ),
36 --active: (
37 --bg: fn.global-color(--border),
38 --label: fn.global-color(--heading),
39 ),
40 --disabled: (
41 --label: fn.global-color(--text-disabled),
42 ),
43 --key-focus: (
44 --border: fn.global-color(--focus --border),
45 --outline: fn.global-color(--focus --outline),
46 ),
47 ),
48 ),
49 ));
50
51 @include iro.bem-object(iro.props-namespace()) {
52 display: flex;
53 flex-direction: column;
54 gap: fn.dim(--spacing);
55
56 @include iro.bem-elem('header') {
57 padding-block: fn.dim(--item --pad-b);
58 padding-inline: fn.dim(--item --pad-i);
59 color: fn.color(--header --label);
60 font-size: fn.dim(--header --font-size);
61 font-weight: 500;
62 letter-spacing: .5px;
63 text-transform: uppercase;
64
65 @include iro.bem-next-twin-elem {
66 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
67 }
68 }
69
70 @include iro.bem-elem('item') {
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 border-radius: fn.dim(--item --rounding);
75 color: fn.color(--item --disabled --label);
76
77 &:link,
78 &:visited,
79 &:enabled {
80 color: currentColor;
81
82 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
83 background-color: fn.color(--item --hover --bg);
84 color: fn.color(--item --hover --label);
85 }
86
87 &:active {
88 background-color: fn.color(--item --active --bg);
89 color: fn.color(--item --active --label);
90 }
91 }
92
93 @include iro.bem-next-elem('header') {
94 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
95 }
96 }
97
98 @include iro.bem-elem('header') {
99 &:link,
100 &:visited,
101 &:enabled {
102 color: fn.color(--header --label);
103 }
104 }
105
106 @include iro.bem-elem('separator') {
107 block-size: 1px;
108 margin-block: fn.dim(--separator);
109 background-color: fn.color(--separator);
110 }
111
112 @include iro.bem-elem('slot') {
113 padding-block: fn.dim(--item --pad-b);
114 padding-inline: fn.dim(--item --pad-i);
115 }
116
117 @include iro.bem-elem('icon-slot') {
118 display: flex;
119 justify-content: center;
120 inline-size: fn.foreign-dim(--icon, --size);
121 }
122
123 @include iro.bem-modifier('pull') {
124 margin: calc(-1 * fn.dim(--item --pad-i));
125 }
126 }
127}
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
new file mode 100644
index 0000000..9d4b1c7
--- /dev/null
+++ b/src/objects/_popover.scss
@@ -0,0 +1,46 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('popover') {
5 @include iro.props-store((
6 --dims: (
7 --z-index: 10000,
8 --pad-i: 0,
9 --pad-b: fn.global-dim(--size --85),
10 --separator: fn.global-dim(--size --85),
11 --rounding: fn.global-dim(--rounding),
12 --border: fn.global-dim(--border --thin),
13 ),
14 --colors: (
15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--border),
17 --shadow: 0 .2em .5em rgba(#000, .1),
18 ),
19 ));
20
21 @include iro.bem-object(iro.props-namespace()) {
22 position: absolute;
23 z-index: fn.dim(--z-index);
24 inset-block-start: 0;
25 inset-inline-start: 0;
26 padding-block: fn.dim(--pad-b);
27 padding-inline: fn.dim(--pad-i);
28 transform: translate(var(--x), var(--y));
29 border: fn.dim(--border) solid fn.color(--border);
30 border-radius: fn.dim(--rounding);
31 background-color: fn.color(--bg);
32 box-shadow: fn.color(--shadow);
33
34 @include iro.bem-modifier('up-left') {
35 transform: translate(var(--x), calc(var(--y) - 100%));
36 }
37
38 @include iro.bem-modifier('up-right') {
39 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
40 }
41
42 @include iro.bem-modifier('down-right') {
43 transform: translate(calc(var(--x) - 100%), var(--y));
44 }
45 }
46}
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
new file mode 100644
index 0000000..8e4e131
--- /dev/null
+++ b/src/objects/_side-nav.scss
@@ -0,0 +1,122 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use './icon';
5
6@include iro.props-namespace('side-nav') {
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-i: fn.global-dim(--size --150),
16 --pad-b: fn.global-dim(--size --100),
17 --rounding: fn.global-dim(--rounding),
18
19 --key-focus: (
20 --border: fn.global-dim(--key-focus --border),
21 --border-offset: fn.global-dim(--key-focus --border-offset),
22 --outline: fn.global-dim(--key-focus --outline),
23 ),
24 ),
25 ),
26 --colors: (
27 --header: (
28 --label: fn.global-color(--text-mute-more),
29 ),
30 --item: (
31 --hover: (
32 --bg: fn.global-color(--border-mute),
33 --label: fn.global-color(--heading),
34 ),
35 --active: (
36 --bg: fn.global-color(--border),
37 --label: fn.global-color(--heading),
38 ),
39 --disabled: (
40 --label: fn.global-color(--text-disabled),
41 ),
42 --key-focus: (
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ),
48 ));
49
50 @include iro.bem-object(iro.props-namespace()) {
51 display: flex;
52 flex-direction: column;
53 gap: fn.dim(--spacing);
54
55 @include iro.bem-elem('header') {
56 padding-block: fn.dim(--item --pad-b);
57 padding-inline: fn.dim(--item --pad-i);
58 color: fn.color(--header --label);
59 font-size: fn.dim(--header --font-size);
60 font-weight: 500;
61 letter-spacing: .5px;
62 text-transform: uppercase;
63
64 @include iro.bem-next-twin-elem {
65 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
66 }
67 }
68
69 @include iro.bem-elem('item') {
70 padding-block: fn.dim(--item --pad-b);
71 padding-inline: fn.dim(--item --pad-i);
72 margin: calc(-1 * fn.dim(--item --key-focus --border-offset));
73 border: fn.dim(--item --key-focus --border-offset) solid transparent;
74 border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset));
75 color: fn.color(--item --disabled --label);
76 background-clip: padding-box;
77
78 &:link,
79 &:visited,
80 &:enabled {
81 color: currentColor;
82
83 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
84 background-color: fn.color(--item --hover --bg);
85 color: fn.color(--item --hover --label);
86 }
87
88 &:active {
89 background-color: fn.color(--item --active --bg);
90 color: fn.color(--item --active --label);
91 }
92
93 &:focus-visible {
94 outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
95 box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
96 }
97 }
98
99 @include iro.bem-next-elem('header') {
100 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
101 }
102 }
103
104 @include iro.bem-elem('header') {
105 &:link,
106 &:visited,
107 &:enabled {
108 color: fn.color(--header --label);
109 }
110 }
111
112 @include iro.bem-elem('separator') {
113 block-size: fn.dim(--separator);
114 }
115
116 @include iro.bem-elem('icon-slot') {
117 display: flex;
118 justify-content: center;
119 inline-size: fn.foreign-dim(--icon, --size);
120 }
121 }
122}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 10:23:44 +0000