Skip to content

Commit 6b0abb0

Browse files
Aleh YablonskiAleh Yablonski
authored andcommitted
fix(Select): add correct paddings to avoid cutting off content
1 parent 3a23ab0 commit 6b0abb0

File tree

1 file changed

+16
-4
lines changed

1 file changed

+16
-4
lines changed

src/components/Select/components/SelectControl/SelectControl.scss

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,29 @@ $blockButton: '.#{variables.$ns}select-control__button';
1111
--_--text-right-padding: #{select-css-variables.$s-hor-padding};
1212
--_--border-radius: var(--g-border-radius-s);
1313
height: #{variables.$s-height};
14-
padding: 4px calc(var(--_--text-right-padding) + 1px); // plus border-width
14+
padding-inline: calc(var(--_--text-right-padding) + 1px); // plus border-width
15+
padding-block: 4px;
1516
}
1617
@if $size == 'm' {
1718
--_--text-right-padding: #{select-css-variables.$m-hor-padding};
1819
--_--border-radius: var(--g-border-radius-m);
1920
height: #{variables.$m-height};
20-
padding: 6px calc(var(--_--text-right-padding) + 1px); // plus border-width
21+
padding-inline: calc(var(--_--text-right-padding) + 1px); // plus border-width
22+
padding-block: 6px;
2123
}
2224
@if $size == 'l' {
2325
--_--text-right-padding: #{select-css-variables.$l-hor-padding};
2426
--_--border-radius: var(--g-border-radius-l);
2527
height: #{variables.$l-height};
26-
padding: 10px calc(var(--_--text-right-padding) + 1px); // plus border-width
28+
padding-inline: calc(var(--_--text-right-padding) + 1px); // plus border-width
29+
padding-block: 10px;
2730
}
2831
@if $size == 'xl' {
2932
--_--text-right-padding: #{select-css-variables.$xl-hor-padding};
3033
--_--border-radius: var(--g-border-radius-xl);
3134
height: #{variables.$xl-height};
32-
padding: 12px calc(var(--_--text-right-padding) + 1px); // plus border-width
35+
padding-inline: calc(var(--_--text-right-padding) + 1px); // plus border-width
36+
padding-block: 12px;
3337
}
3438
}
3539

@@ -144,18 +148,26 @@ $blockButton: '.#{variables.$ns}select-control__button';
144148

145149
&_size_s {
146150
@include block_button_style(s);
151+
152+
padding-block: 4px;
147153
}
148154

149155
&_size_m {
150156
@include block_button_style(m);
157+
158+
padding-block: 6px;
151159
}
152160

153161
&_size_l {
154162
@include block_button_style(l);
163+
164+
padding-block: 10px;
155165
}
156166

157167
&_size_xl {
158168
@include block_button_style(xl);
169+
170+
padding-block: 12px;
159171
}
160172

161173
&_error::before {

0 commit comments

Comments
 (0)