summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-11-12 15:48:28 +0100
committerVolpeon <git@volpeon.ink>2024-11-12 15:48:28 +0100
commitb3d15e0a176fe28dca866f43e68432dea79eb889 (patch)
treef45bddbdd2996b84bb0d0121ac83f9caf20d1e78 /src
parentButton padding (diff)
downloadiro-design-b3d15e0a176fe28dca866f43e68432dea79eb889.tar.gz
iro-design-b3d15e0a176fe28dca866f43e68432dea79eb889.tar.bz2
iro-design-b3d15e0a176fe28dca866f43e68432dea79eb889.zip
Consistent button paddings
Diffstat (limited to 'src')
-rw-r--r--src/objects/_action-button.scss12
-rw-r--r--src/objects/_action-button.vars.scss34
-rw-r--r--src/objects/_button.vars.scss2
3 files changed, 30 insertions, 18 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index ca047bc..dcabb57 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -137,6 +137,10 @@
137 } 137 }
138 } 138 }
139 139
140 @include bem.elem('label') {
141 margin-inline: props.get(vars.$pad-i-label);
142 }
143
140 @include -apply-theme(vars.$default-theme); 144 @include -apply-theme(vars.$default-theme);
141 145
142 @each $theme in map.keys(props.get(vars.$themes)) { 146 @each $theme in map.keys(props.get(vars.$themes)) {
@@ -154,12 +158,16 @@
154 } 158 }
155 } 159 }
156 160
157 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 161 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
158 @include bem.modifier($mod) { 162 @include bem.modifier($mod) {
159 padding-block: props.get($pad-b); 163 padding-block: props.get($pad-b);
160 padding-inline: props.get($pad-i); 164 padding-inline: props.get($pad-i);
161 font-size: props.get($font-size); 165 font-size: props.get($font-size);
162 166
167 @include bem.elem('label') {
168 margin-inline: props.get($pad-i-label);
169 }
170
163 @include bem.modifier('pill') { 171 @include bem.modifier('pill') {
164 padding-inline: props.get($pad-i-pill); 172 padding-inline: props.get($pad-i-pill);
165 } 173 }
@@ -170,7 +178,7 @@
170 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 178 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
171 padding-inline: 0; 179 padding-inline: 0;
172 180
173 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 181 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
174 @include bem.modifier($mod) { 182 @include bem.modifier($mod) {
175 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); 183 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
176 padding-inline: 0; 184 padding-inline: 0;
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 9afd5d7..421ccb2 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -5,35 +5,39 @@
5 5
6$line-height: props.def(--o-action-button--line-height, 1.4) !default; 6$line-height: props.def(--o-action-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default; 7$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
8$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default; 9$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
9$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; 10$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
10$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; 11$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
11$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; 12$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
12$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; 13$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
13 14
14$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; 15$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
15$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; 16$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; 17$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
17$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; 18$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
19$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 20
19$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; 21$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
20$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default; 22$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default;
21$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; 23$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default;
22$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; 24$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
25$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
23 26
24$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; 27$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
25$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; 28$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default;
26$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; 29$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
27$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; 30$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
31$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
28 32
29$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 33$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 34$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 35$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32 36
33$fixed-sizes: ( 37$fixed-sizes: (
34 'sm' $pad-i--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, 38 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
35 'lg' $pad-i--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, 39 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
36 'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, 40 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 41) !default;
38 42
39$themes: props.def(--o-action-button, (), 'color'); 43$themes: props.def(--o-action-button, (), 'color');
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 65993ad..36400a2 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -11,7 +11,7 @@ $border-width: props.def(--o-button--border-width, props.get(core.$border-width-
11$rounding: props.def(--o-button--rounding, 10em) !default; 11$rounding: props.def(--o-button--rounding, 10em) !default;
12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; 12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13 13
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--125)) !default; 14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; 15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; 16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; 17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;