diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-menu.scss | 30 | ||||
-rw-r--r-- | src/objects/_heading.scss | 23 | ||||
-rw-r--r-- | src/objects/_menu.scss | 92 |
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 | } | ||