diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/objects/_action-button.scss | 14 | ||||
-rw-r--r-- | src/objects/_button.scss | 16 | ||||
-rw-r--r-- | src/objects/_icon.scss | 4 |
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; |