Skip to content

Commit ea27946

Browse files
author
Aleh Yablonski
committed
fix(Select): add correct paddings to avoid cutting off content
1 parent 6caddab commit ea27946

File tree

1 file changed

+12
-4
lines changed

1 file changed

+12
-4
lines changed

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,25 @@ $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
1515
}
1616
@if $size == 'm' {
1717
--_--text-right-padding: #{select-css-variables.$m-hor-padding};
1818
--_--border-radius: var(--g-border-radius-m);
1919
height: #{variables.$m-height};
20-
padding: 6px calc(var(--_--text-right-padding) + 1px); // plus border-width
20+
padding-inline: calc(var(--_--text-right-padding) + 1px); // plus border-width
2121
}
2222
@if $size == 'l' {
2323
--_--text-right-padding: #{select-css-variables.$l-hor-padding};
2424
--_--border-radius: var(--g-border-radius-l);
2525
height: #{variables.$l-height};
26-
padding: 10px calc(var(--_--text-right-padding) + 1px); // plus border-width
26+
padding-inline: calc(var(--_--text-right-padding) + 1px); // plus border-width
2727
}
2828
@if $size == 'xl' {
2929
--_--text-right-padding: #{select-css-variables.$xl-hor-padding};
3030
--_--border-radius: var(--g-border-radius-xl);
3131
height: #{variables.$xl-height};
32-
padding: 12px calc(var(--_--text-right-padding) + 1px); // plus border-width
32+
padding-inline: calc(var(--_--text-right-padding) + 1px); // plus border-width
3333
}
3434
}
3535

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

145145
&_size_s {
146146
@include block_button_style(s);
147+
148+
padding-block: 4px;
147149
}
148150

149151
&_size_m {
150152
@include block_button_style(m);
153+
154+
padding-block: 6px;
151155
}
152156

153157
&_size_l {
154158
@include block_button_style(l);
159+
160+
padding-block: 10px;
155161
}
156162

157163
&_size_xl {
158164
@include block_button_style(xl);
165+
166+
padding-block: 12px;
159167
}
160168

161169
&_error::before {

0 commit comments

Comments
 (0)