summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_declare-vars.scss3
-rw-r--r--src/objects/_action-button.scss3
-rw-r--r--src/objects/_avatar.scss10
-rw-r--r--src/objects/_overflow-button.scss29
4 files changed, 29 insertions, 16 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index ce91b5c..593c7e4 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -27,11 +27,14 @@
27 --275: iro.fn-px-to-rem(22px), 27 --275: iro.fn-px-to-rem(22px),
28 --300: iro.fn-px-to-rem(24px), 28 --300: iro.fn-px-to-rem(24px),
29 --325: iro.fn-px-to-rem(26px), 29 --325: iro.fn-px-to-rem(26px),
30 --350: iro.fn-px-to-rem(28px),
31 --375: iro.fn-px-to-rem(30px),
30 --400: iro.fn-px-to-rem(32px), 32 --400: iro.fn-px-to-rem(32px),
31 --450: iro.fn-px-to-rem(36px), 33 --450: iro.fn-px-to-rem(36px),
32 --500: iro.fn-px-to-rem(40px), 34 --500: iro.fn-px-to-rem(40px),
33 --550: iro.fn-px-to-rem(44px), 35 --550: iro.fn-px-to-rem(44px),
34 --600: iro.fn-px-to-rem(48px), 36 --600: iro.fn-px-to-rem(48px),
37 --650: iro.fn-px-to-rem(52px),
35 --700: iro.fn-px-to-rem(56px), 38 --700: iro.fn-px-to-rem(56px),
36 --800: iro.fn-px-to-rem(64px), 39 --800: iro.fn-px-to-rem(64px),
37 --900: iro.fn-px-to-rem(72px), 40 --900: iro.fn-px-to-rem(72px),
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 1cce94f..edb9200 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -61,6 +61,7 @@
61 --label: fn.global-color(--fg), 61 --label: fn.global-color(--fg),
62 62
63 --hover: ( 63 --hover: (
64 --bg: fn.global-color(--obj),
64 --label: fn.global-color(--fg-lo), 65 --label: fn.global-color(--fg-lo),
65 ), 66 ),
66 ), 67 ),
@@ -187,7 +188,7 @@
187 &:hover, 188 &:hover,
188 &:active { 189 &:active {
189 border-color: transparent; 190 border-color: transparent;
190 background-color: fn.color(--quiet --selected --bg); 191 background-color: fn.color(--quiet --selected --hover --bg);
191 box-shadow: none; 192 box-shadow: none;
192 color: fn.color(--quiet --selected --hover --label); 193 color: fn.color(--quiet --selected --hover --label);
193 } 194 }
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index da7fdbd..51b144a 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -22,22 +22,22 @@
22 @include iro.props-store(( 22 @include iro.props-store((
23 --dims: ( 23 --dims: (
24 --150: ( 24 --150: (
25 --size: fn.global-dim(--size --600), 25 --size: fn.global-dim(--size --650),
26 --font-size: fn.global-dim(--font-size --150), 26 --font-size: fn.global-dim(--font-size --200),
27 --indicator-size: fn.global-dim(--size --175), 27 --indicator-size: fn.global-dim(--size --175),
28 ), 28 ),
29 --100: ( 29 --100: (
30 --size: fn.global-dim(--size --450), 30 --size: fn.global-dim(--size --500),
31 --font-size: fn.global-dim(--font-size --100), 31 --font-size: fn.global-dim(--font-size --100),
32 --indicator-size: fn.global-dim(--size --125), 32 --indicator-size: fn.global-dim(--size --125),
33 ), 33 ),
34 --75: ( 34 --75: (
35 --size: fn.global-dim(--size --325), 35 --size: fn.global-dim(--size --375),
36 --font-size: fn.global-dim(--font-size --75), 36 --font-size: fn.global-dim(--font-size --75),
37 --indicator-size: fn.global-dim(--size --100), 37 --indicator-size: fn.global-dim(--size --100),
38 ), 38 ),
39 --50: ( 39 --50: (
40 --size: fn.global-dim(--size --225), 40 --size: fn.global-dim(--size --250),
41 --font-size: fn.global-dim(--font-size --50), 41 --font-size: fn.global-dim(--font-size --50),
42 --indicator-size: fn.global-dim(--size --85), 42 --indicator-size: fn.global-dim(--size --85),
43 ), 43 ),
diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
index 4a794a7..b15ea1f 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/objects/_overflow-button.scss
@@ -27,6 +27,7 @@
27 --label: fn.global-color(--fg), 27 --label: fn.global-color(--fg),
28 28
29 --hover: ( 29 --hover: (
30 --bg: fn.global-color(--obj),
30 --label: fn.global-color(--fg-lo), 31 --label: fn.global-color(--fg-lo),
31 ), 32 ),
32 ), 33 ),
@@ -47,11 +48,13 @@
47 --bg: fn.global-color(--red --quiet --obj), 48 --bg: fn.global-color(--red --quiet --obj),
48 --label: fn.global-color(--red --quiet --fg-lo), 49 --label: fn.global-color(--red --quiet --fg-lo),
49 ), 50 ),
51
50 --selected: ( 52 --selected: (
51 --bg: fn.global-color(--red --quiet --bg), 53 --bg: fn.global-color(--red --quiet --bg),
52 --label: fn.global-color(--red --quiet --fg), 54 --label: fn.global-color(--red --quiet --fg),
53 55
54 --hover: ( 56 --hover: (
57 --bg: fn.global-color(--red --quiet --obj),
55 --label: fn.global-color(--red --quiet --fg-lo), 58 --label: fn.global-color(--red --quiet --fg-lo),
56 ), 59 ),
57 ), 60 ),
@@ -66,11 +69,13 @@
66 --bg: fn.global-color(--blue --quiet --obj), 69 --bg: fn.global-color(--blue --quiet --obj),
67 --label: fn.global-color(--blue --quiet --fg-lo), 70 --label: fn.global-color(--blue --quiet --fg-lo),
68 ), 71 ),
72
69 --selected: ( 73 --selected: (
70 --bg: fn.global-color(--blue --quiet --bg), 74 --bg: fn.global-color(--blue --quiet --bg),
71 --label: fn.global-color(--blue --quiet --fg), 75 --label: fn.global-color(--blue --quiet --fg),
72 76
73 --hover: ( 77 --hover: (
78 --bg: fn.global-color(--blue --quiet --obj),
74 --label: fn.global-color(--blue --quiet --fg-lo), 79 --label: fn.global-color(--blue --quiet --fg-lo),
75 ), 80 ),
76 ), 81 ),
@@ -85,11 +90,13 @@
85 --bg: fn.global-color(--green --quiet --obj), 90 --bg: fn.global-color(--green --quiet --obj),
86 --label: fn.global-color(--green --quiet --fg-lo), 91 --label: fn.global-color(--green --quiet --fg-lo),
87 ), 92 ),
93
88 --selected: ( 94 --selected: (
89 --bg: fn.global-color(--green --quiet --bg), 95 --bg: fn.global-color(--green --quiet --bg),
90 --label: fn.global-color(--green --quiet --fg), 96 --label: fn.global-color(--green --quiet --fg),
91 97
92 --hover: ( 98 --hover: (
99 --bg: fn.global-color(--green --quiet --obj),
93 --label: fn.global-color(--green --quiet --fg-lo), 100 --label: fn.global-color(--green --quiet --fg-lo),
94 ), 101 ),
95 ), 102 ),
@@ -154,18 +161,20 @@
154 161
155 @include iro.bem-is('selected') { 162 @include iro.bem-is('selected') {
156 @include iro.bem-elem('inside') { 163 @include iro.bem-elem('inside') {
157 border-color: fn.color(--selected --bg); 164 background-color: fn.color(--selected --bg);
158 color: fn.color(--selected --label);
159 } 165 }
160 166
161 &:link, 167 &:link,
162 &:visited, 168 &:visited,
163 &:enabled { 169 &:enabled {
170 @include iro.bem-elem('inside') {
171 color: fn.color(--selected --label);
172 }
173
164 &:hover, 174 &:hover,
165 &:active { 175 &:active {
166 @include iro.bem-elem('inside') { 176 @include iro.bem-elem('inside') {
167 border-color: transparent; 177 background-color: fn.color(--selected --hover --bg);
168 background-color: fn.color(--selected --bg);
169 color: fn.color(--selected --hover --label); 178 color: fn.color(--selected --hover --label);
170 } 179 }
171 } 180 }
@@ -202,18 +211,18 @@
202 } 211 }
203 212
204 @include iro.bem-is('selected') { 213 @include iro.bem-is('selected') {
205 @include iro.bem-elem('inside') {
206 border-color: fn.color(--#{$color} --selected --bg);
207 color: fn.color(--#{$color} --selected --label);
208 }
209
210 &:link, 214 &:link,
211 &:visited, 215 &:visited,
212 &:enabled { 216 &:enabled {
217 @include iro.bem-elem('inside') {
218 background-color: fn.color(--#{$color} --selected --bg);
219 color: fn.color(--#{$color} --selected --label);
220 }
221
213 &:hover, 222 &:hover,
214 &:active { 223 &:active {
215 @include iro.bem-elem('inside') { 224 @include iro.bem-elem('inside') {
216 background-color: fn.color(--#{$color} --selected --bg); 225 background-color: fn.color(--#{$color} --selected --hover --bg);
217 color: fn.color(--#{$color} --selected --hover --label); 226 color: fn.color(--#{$color} --selected --hover --label);
218 } 227 }
219 } 228 }