summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-02-13 09:14:57 +0100
committerVolpeon <git@volpeon.ink>2023-02-13 09:14:57 +0100
commitcd5a43967188244a3fd04f36a84af80fc138c550 (patch)
treea799e7cfaaeace7660b846dc1157aa93e0ef4b4e
parentFix link color (diff)
downloadiro-design-cd5a43967188244a3fd04f36a84af80fc138c550.tar.gz
iro-design-cd5a43967188244a3fd04f36a84af80fc138c550.tar.bz2
iro-design-cd5a43967188244a3fd04f36a84af80fc138c550.zip
Update
-rw-r--r--src/objects/_emoji.scss6
-rw-r--r--src/objects/_icon.scss3
-rw-r--r--src/objects/_overflow-button.scss31
3 files changed, 19 insertions, 21 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 303430c..ca7a4ca 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -11,10 +11,6 @@
11 --zoom: 3, 11 --zoom: 3,
12 --valign: -.25em, 12 --valign: -.25em,
13 13
14 --icon: (
15 --valign: -.17em,
16 ),
17
18 --150: ( 14 --150: (
19 --size: calc(1 / 14 * 28em), 15 --size: calc(1 / 14 * 28em),
20 --valign: -.65em, 16 --valign: -.65em,
@@ -45,7 +41,7 @@
45 41
46 @include iro.bem-modifier('icon') { 42 @include iro.bem-modifier('icon') {
47 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size))); 43 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
48 vertical-align: fn.dim(--icon --valign); 44 vertical-align: fn.foreign-dim(--icon, --valign);
49 } 45 }
50 46
51 @each $size in '150' '200' { 47 @each $size in '150' '200' {
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 5a543ab..170dca5 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -6,6 +6,7 @@
6 --dims: ( 6 --dims: (
7 --stroke: 1.5px, 7 --stroke: 1.5px,
8 --size: calc(1 / 14 * 16em), 8 --size: calc(1 / 14 * 16em),
9 --valign: -.18em
9 ) 10 )
10 ), 'dims'); 11 ), 'dims');
11 12
@@ -16,7 +17,7 @@
16 stroke-width: fn.dim(--stroke); 17 stroke-width: fn.dim(--stroke);
17 stroke-linecap: round; 18 stroke-linecap: round;
18 stroke-linejoin: round; 19 stroke-linejoin: round;
19 vertical-align: -.18em; 20 vertical-align: fn.dim(--valign);
20 21
21 @include iro.bem-modifier('block') { 22 @include iro.bem-modifier('block') {
22 display: block; 23 display: block;
diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
index d768492..4a794a7 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/objects/_overflow-button.scss
@@ -4,9 +4,9 @@
4@include iro.props-namespace('overflow-button') { 4@include iro.props-namespace('overflow-button') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --125), 7 --pad-x: calc(fn.global-dim(--size --125) - 1px),
8 --pad-y: fn.global-dim(--size --125), 8 --pad-y: calc(fn.global-dim(--size --125) - 1px),
9 --spacing: fn.global-dim(--size --50), 9 --spacing: fn.global-dim(--size --50)
10 ), 10 ),
11 ), 'dims'); 11 ), 'dims');
12 12
@@ -109,7 +109,7 @@
109 @include iro.bem-elem('inside') { 109 @include iro.bem-elem('inside') {
110 display: inline-block; 110 display: inline-block;
111 padding: fn.dim(--pad-y) fn.dim(--pad-x); 111 padding: fn.dim(--pad-y) fn.dim(--pad-x);
112 border: 1px solid transparent; 112 border: 2px solid transparent;
113 border-radius: 100em; 113 border-radius: 100em;
114 line-height: 1; 114 line-height: 1;
115 text-align: center; 115 text-align: center;
@@ -153,17 +153,18 @@
153 } 153 }
154 154
155 @include iro.bem-is('selected') { 155 @include iro.bem-is('selected') {
156 @include iro.bem-elem('inside') {
157 border-color: fn.color(--selected --bg);
158 color: fn.color(--selected --label);
159 }
160
156 &:link, 161 &:link,
157 &:visited, 162 &:visited,
158 &:enabled { 163 &:enabled {
159 @include iro.bem-elem('inside') {
160 background-color: fn.color(--selected --bg);
161 color: fn.color(--selected --label);
162 }
163
164 &:hover, 164 &:hover,
165 &:active { 165 &:active {
166 @include iro.bem-elem('inside') { 166 @include iro.bem-elem('inside') {
167 border-color: transparent;
167 background-color: fn.color(--selected --bg); 168 background-color: fn.color(--selected --bg);
168 color: fn.color(--selected --hover --label); 169 color: fn.color(--selected --hover --label);
169 } 170 }
@@ -201,14 +202,14 @@
201 } 202 }
202 203
203 @include iro.bem-is('selected') { 204 @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
204 &:link, 210 &:link,
205 &:visited, 211 &:visited,
206 &:enabled { 212 &:enabled {
207 @include iro.bem-elem('inside') {
208 background-color: fn.color(--#{$color} --selected --bg);
209 color: fn.color(--#{$color} --selected --label);
210 }
211
212 &:hover, 213 &:hover,
213 &:active { 214 &:active {
214 @include iro.bem-elem('inside') { 215 @include iro.bem-elem('inside') {
@@ -225,7 +226,7 @@
225 &:focus { 226 &:focus {
226 @include iro.bem-elem('inside') { 227 @include iro.bem-elem('inside') {
227 border-color: fn.color(--key-focus --border); 228 border-color: fn.color(--key-focus --border);
228 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); 229 box-shadow: fn.color(--key-focus --shadow);
229 } 230 }
230 } 231 }
231 } 232 }