summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-menu.scss30
-rw-r--r--src/objects/_heading.scss23
-rw-r--r--src/objects/_menu.scss92
3 files changed, 112 insertions, 33 deletions
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 2c922f8..ff88774 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -43,8 +43,6 @@
43 ), 'colors'); 43 ), 'colors');
44 44
45 @include iro.bem-object(iro.props-namespace()) { 45 @include iro.bem-object(iro.props-namespace()) {
46 @include iro.bem-composed-of('action-button' 'object');
47
48 position: absolute; 46 position: absolute;
49 z-index: 10000; 47 z-index: 10000;
50 top: fn.dim(--y); 48 top: fn.dim(--y);
@@ -72,12 +70,6 @@
72 transform: translate(-100%, 0); 70 transform: translate(-100%, 0);
73 } 71 }
74 72
75 @include iro.bem-elem('separator') {
76 height: 1px;
77 margin: fn.dim(--separator) 0;
78 background-color: fn.color(--separator);
79 }
80
81 @include iro.bem-elem('item') { 73 @include iro.bem-elem('item') {
82 display: block; 74 display: block;
83 box-sizing: border-box; 75 box-sizing: border-box;
@@ -91,18 +83,10 @@
91 &:enabled { 83 &:enabled {
92 color: currentColor; 84 color: currentColor;
93 85
94 @include iro.bem-elem('icon') {
95 color: fn.color(--icon);
96 }
97
98 &:hover, 86 &:hover,
99 &:active { 87 &:active {
100 background-color: fn.color(--item --hover --bg); 88 background-color: fn.color(--item --hover --bg);
101 color: fn.color(--item --hover --label); 89 color: fn.color(--item --hover --label);
102
103 @include iro.bem-elem('icon') {
104 color: currentColor;
105 }
106 } 90 }
107 91
108 @include iro.bem-at-theme('keyboard') { 92 @include iro.bem-at-theme('keyboard') {
@@ -112,15 +96,17 @@
112 background-color: fn.color(--item --key-focus --bg); 96 background-color: fn.color(--item --key-focus --bg);
113 box-shadow: fn.color(--item --key-focus --shadow); 97 box-shadow: fn.color(--item --key-focus --shadow);
114 color: fn.color(--item --key-focus --label); 98 color: fn.color(--item --key-focus --label);
115
116 @include iro.bem-elem('icon') {
117 color: currentColor;
118 }
119 } 99 }
120 } 100 }
121 } 101 }
122 } 102 }
123 103
104 @include iro.bem-elem('separator') {
105 height: 1px;
106 margin: fn.dim(--separator) 0;
107 background-color: fn.color(--separator);
108 }
109
124 @include iro.bem-elem('slot') { 110 @include iro.bem-elem('slot') {
125 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); 111 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
126 } 112 }
@@ -130,9 +116,5 @@
130 justify-content: center; 116 justify-content: center;
131 width: 1em; 117 width: 1em;
132 } 118 }
133
134 @include iro.bem-elem('icon') {
135 color: fn.color(--item --disabled --label);
136 }
137 } 119 }
138} 120}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index cd91c61..c1feb5e 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -51,20 +51,25 @@
51 } 51 }
52 52
53 @include iro.bem-modifier('sm') { 53 @include iro.bem-modifier('sm') {
54 @include fn.set-font(--standard, (--line-height: null)); 54 @include fn.set-font(--standard, (
55 --line-height: null,
56 --size: fn.global-dim(--font-size --md),
57 --weight: 500
58 ));
55 59
56 color: fn.color(--strong); 60 color: fn.color(--strong);
57 font-size: fn.global-dim(--font-size --md);
58 font-weight: 500;
59 } 61 }
60 62
61 @include iro.bem-modifier('xs') { 63 @include iro.bem-modifier('xs') {
62 @include fn.set-font(--standard, (--line-height: null)); 64 @include fn.set-font(--standard, (
65 --line-height: null,
66 --size: fn.global-dim(--font-size --xs),
67 --weight: 500,
68 --transform: uppercase,
69 --spacing: .5px
70 ));
63 71
64 color: fn.color(--light); 72 color: fn.color(--light);
65 font-size: fn.global-dim(--font-size --xs);
66 font-weight: 500;
67 text-transform: uppercase;
68 } 73 }
69 } 74 }
70} 75}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
new file mode 100644
index 0000000..91ef0a5
--- /dev/null
+++ b/src/objects/_menu.scss
@@ -0,0 +1,92 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('menu') {
5 @include iro.props-store((
6 --dims: (
7 --separator: .6rem,
8 --item: (
9 --pad-x: .8rem,
10 --pad-y: .4rem,
11 ),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --header: (
18 --label: fn.global-color(--fg-hi2),
19 ),
20 --item: (
21 --hover: (
22 --bg: fn.global-color(--obj-hi),
23 --label: fn.global-color(--fg-lo),
24 ),
25 --disabled: (
26 --label: fn.global-color(--fg-hi3),
27 ),
28 --key-focus: (
29 --bg: fn.global-color(--obj-hi),
30 --label: fn.global-color(--fg-lo),
31 --border: fn.global-color(--focus --fill),
32 --shadow: fn.global-color(--focus --shadow),
33 ),
34 ),
35 ),
36 ), 'colors');
37
38 @include iro.bem-object(iro.props-namespace()) {
39 @include iro.bem-elem('header') {
40 padding:
41 calc(1.5 * fn.dim(--item --pad-y))
42 fn.dim(--item --pad-x)
43 calc(.5 * fn.dim(--item --pad-y));
44 color: fn.color(--header --label);
45 font-size: fn.global-dim(--font-size --xs);
46 font-weight: 500;
47 letter-spacing: .5px;
48 text-transform: uppercase;
49 }
50
51 @include iro.bem-elem('item') {
52 display: block;
53 box-sizing: border-box;
54 width: 100%;
55 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
56 border: 2px solid transparent;
57 color: fn.color(--item --disabled --label);
58
59 &:link,
60 &:visited,
61 &:enabled {
62 color: currentColor;
63
64 &:hover,
65 &:active {
66 background-color: fn.color(--item --hover --bg);
67 color: fn.color(--item --hover --label);
68 }
69
70 @include iro.bem-at-theme('keyboard') {
71 &:focus {
72 border-radius: 2px;
73 border-color: fn.color(--item --key-focus --border);
74 background-color: fn.color(--item --key-focus --bg);
75 box-shadow: fn.color(--item --key-focus --shadow);
76 color: fn.color(--item --key-focus --label);
77 }
78 }
79 }
80 }
81
82 @include iro.bem-elem('separator') {
83 height: fn.dim(--separator);
84 }
85
86 @include iro.bem-elem('icon-slot') {
87 display: flex;
88 justify-content: center;
89 width: 1em;
90 }
91 }
92}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 18:48:06 +0000