summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-04-23 17:51:49 +0200
committerVolpeon <git@volpeon.ink>2024-04-23 17:51:49 +0200
commit0855207eda7258f84aebd8b6b35adc7ec7365192 (patch)
treedabbdf91dfe9708e87eaa3df8927792b4ea18abe /src
parentUpdate (diff)
downloadiro-design-0855207eda7258f84aebd8b6b35adc7ec7365192.tar.gz
iro-design-0855207eda7258f84aebd8b6b35adc7ec7365192.tar.bz2
iro-design-0855207eda7258f84aebd8b6b35adc7ec7365192.zip
Button fixes to handle icons without margin adjustments
Diffstat (limited to 'src')
-rw-r--r--src/objects/_action-button.scss14
-rw-r--r--src/objects/_button.scss16
-rw-r--r--src/objects/_icon.scss4
3 files changed, 18 insertions, 16 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index cfd859c..48ac2a6 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -4,9 +4,10 @@
4@include iro.props-namespace('action-button') { 4@include iro.props-namespace('action-button') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --125), 7 --line-height: 1.4,
8 --pad-y: fn.global-dim(--size --125), 8 --pad-x: fn.global-dim(--size --100),
9 --rounding: 3px, 9 --pad-y: fn.global-dim(--size --85),
10 --rounding: 3px,
10 ), 11 ),
11 ), 'dims'); 12 ), 'dims');
12 13
@@ -80,7 +81,7 @@
80 border-radius: fn.dim(--rounding); 81 border-radius: fn.dim(--rounding);
81 background-color: fn.color(--disabled --bg); 82 background-color: fn.color(--disabled --bg);
82 color: fn.color(--disabled --label); 83 color: fn.color(--disabled --label);
83 line-height: 1; 84 line-height: fn.dim(--line-height);
84 text-align: center; 85 text-align: center;
85 text-decoration: none; 86 text-decoration: none;
86 text-overflow: ellipsis; 87 text-overflow: ellipsis;
@@ -212,8 +213,9 @@
212 } 213 }
213 214
214 @include iro.bem-modifier('round') { 215 @include iro.bem-modifier('round') {
215 padding-right: fn.dim(--pad-y); 216 width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
216 padding-left: fn.dim(--pad-y); 217 padding-right: 0;
218 padding-left: 0;
217 border-radius: 100em; 219 border-radius: 100em;
218 } 220 }
219 } 221 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index b830475..7cc24fa 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -43,13 +43,14 @@
43@include iro.props-namespace('button') { 43@include iro.props-namespace('button') {
44 @include iro.props-store(( 44 @include iro.props-store((
45 --dims: ( 45 --dims: (
46 --pad-x: fn.global-dim(--size --225), 46 --line-height: 1.4,
47 --pad-y: fn.global-dim(--size --100), 47 --pad-x: fn.global-dim(--size --225),
48 --rounding: 10em, 48 --pad-y: fn.global-dim(--size --65),
49 --rounding: 10em,
49 50
50 --lg: ( 51 --lg: (
51 --pad-x: fn.global-dim(--size --300), 52 --pad-x: fn.global-dim(--size --300),
52 --pad-y: fn.global-dim(--size --150), 53 --pad-y: fn.global-dim(--size --100),
53 ), 54 ),
54 ), 55 ),
55 ), 'dims'); 56 ), 'dims');
@@ -133,7 +134,7 @@
133 box-shadow: fn.color(--any --disabled --shadow); 134 box-shadow: fn.color(--any --disabled --shadow);
134 color: fn.color(--any --disabled --label); 135 color: fn.color(--any --disabled --label);
135 font-weight: 500; 136 font-weight: 500;
136 line-height: 1; 137 line-height: fn.dim(--line-height);
137 text-align: center; 138 text-align: center;
138 text-decoration: none; 139 text-decoration: none;
139 vertical-align: top; 140 vertical-align: top;
@@ -169,8 +170,9 @@
169 } 170 }
170 171
171 @include iro.bem-modifier('round') { 172 @include iro.bem-modifier('round') {
172 padding-right: fn.dim(--pad-y); 173 width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
173 padding-left: fn.dim(--pad-y); 174 padding-right: 0;
175 padding-left: 0;
174 border-radius: 100em; 176 border-radius: 100em;
175 } 177 }
176 } 178 }
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 0522d4b..5c4bfab 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -6,8 +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 --margin: calc((1em - fn.dim(--size, null)) * .5), 9 --valign: -.2em,
10 --valign: -.14em,
11 ) 10 )
12 ), 'dims'); 11 ), 'dims');
13 12
@@ -15,7 +14,6 @@
15 display: inline; 14 display: inline;
16 width: fn.dim(--size); 15 width: fn.dim(--size);
17 height: fn.dim(--size); 16 height: fn.dim(--size);
18 margin: fn.dim(--margin);
19 stroke-width: fn.dim(--stroke); 17 stroke-width: fn.dim(--stroke);
20 stroke-linecap: round; 18 stroke-linecap: round;
21 stroke-linejoin: round; 19 stroke-linejoin: round;