diff options
-rw-r--r-- | src/_declare-vars.scss | 3 | ||||
-rw-r--r-- | src/objects/_action-button.scss | 3 | ||||
-rw-r--r-- | src/objects/_avatar.scss | 10 | ||||
-rw-r--r-- | src/objects/_overflow-button.scss | 29 |
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 | } |