Skip to content

Commit

Permalink
fix: use correct font-size through component styles (#1036)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje authored Oct 4, 2023
1 parent 2693269 commit 44d7160
Show file tree
Hide file tree
Showing 7 changed files with 18 additions and 25 deletions.
7 changes: 2 additions & 5 deletions src/components/Button/Button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ $iconWidth: 16px;
--yc-button-icon-position: calc(
var(--yc-button-padding) - (var(--yc-button-height) - var(--yc-button-icon-size)) / 2
);
--yc-button-font-size: var(--g-text-body-1-font-size);

@include mixins.button-reset();
display: inline-block;
Expand Down Expand Up @@ -99,7 +100,6 @@ $iconWidth: 16px;
--yc-button-padding: 6px;
--yc-button-icon-size: 12px;
--yc-button-icon-offset: 4px;
--yc-button-font-size: 13px;
}

&_s {
Expand All @@ -108,7 +108,6 @@ $iconWidth: 16px;
--yc-button-padding: 8px;
--yc-button-icon-size: 16px;
--yc-button-icon-offset: 4px;
--yc-button-font-size: 13px;
}

&_m {
Expand All @@ -117,7 +116,6 @@ $iconWidth: 16px;
--yc-button-padding: 12px;
--yc-button-icon-size: 16px;
--yc-button-icon-offset: 8px;
--yc-button-font-size: 13px;
}

&_l {
Expand All @@ -126,7 +124,6 @@ $iconWidth: 16px;
--yc-button-padding: 16px;
--yc-button-icon-size: 16px;
--yc-button-icon-offset: 8px;
--yc-button-font-size: 13px;
}

&_xl {
Expand All @@ -135,7 +132,7 @@ $iconWidth: 16px;
--yc-button-padding: 24px;
--yc-button-icon-size: 20px;
--yc-button-icon-offset: 12px;
--yc-button-font-size: 15px;
--yc-button-font-size: var(--g-text-body-2-font-size);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/ControlLabel/ControlLabel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ $block: '.#{variables.$ns}control-label';
}

&_size_m {
font-size: 13px;
font-size: var(--g-text-body-1-font-size);
line-height: 15px;
}

&_size_l {
font-size: 15px;
font-size: var(--g-text-body-2-font-size);
line-height: 18px;
}

Expand Down
1 change: 1 addition & 0 deletions src/components/Label/Label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ $transitionTimingFunction: ease-in-out;
display: flex;
align-items: baseline;
width: 100%;
font-size: var(--g-text-body-1-font-size);
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
Expand Down
6 changes: 2 additions & 4 deletions src/components/Menu/Menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $block: '.#{variables.$ns}menu';
list-style: none;
overflow-x: hidden;
overflow-y: auto;
font-size: var(--g-text-body-1-font-size);
color: var(--g-color-text-primary);
background-color: var(--g-color-base-float);
user-select: none;
Expand Down Expand Up @@ -91,7 +92,6 @@ $block: '.#{variables.$ns}menu';

&_size {
&_s {
font-size: 13px;
line-height: 24px;
padding: 3px 0;

Expand All @@ -113,7 +113,6 @@ $block: '.#{variables.$ns}menu';
}

&_m {
font-size: 13px;
line-height: 24px;
padding: 4px 0;

Expand All @@ -135,7 +134,6 @@ $block: '.#{variables.$ns}menu';
}

&_l {
font-size: 13px;
line-height: 28px;
padding: 5px 0;

Expand All @@ -157,7 +155,7 @@ $block: '.#{variables.$ns}menu';
}

&_xl {
font-size: 15px;
font-size: var(--g-text-body-2-font-size);
line-height: 36px;
padding: 6px 0;

Expand Down
6 changes: 2 additions & 4 deletions src/components/RadioButton/RadioButton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ $block: '.#{variables.$ns}radio-button';
&__option {
flex: 1 1 auto;
user-select: none;
font-size: var(--g-text-body-1-font-size);
text-align: center;
border-radius: var(--yc-radio-button-inner-border-radius);
cursor: pointer;
Expand Down Expand Up @@ -126,7 +127,6 @@ $block: '.#{variables.$ns}radio-button';
#{$block}__option {
height: 24px;
line-height: 24px;
font-size: 13px;

&-text {
margin: 0 10px;
Expand All @@ -140,7 +140,6 @@ $block: '.#{variables.$ns}radio-button';
#{$block}__option {
height: 28px;
line-height: 28px;
font-size: 13px;

&-text {
margin: 0 13px;
Expand All @@ -154,7 +153,6 @@ $block: '.#{variables.$ns}radio-button';
#{$block}__option {
height: 36px;
line-height: 36px;
font-size: 13px;

&-text {
margin: 0 18px;
Expand All @@ -168,7 +166,7 @@ $block: '.#{variables.$ns}radio-button';
#{$block}__option {
height: 44px;
line-height: 44px;
font-size: 15px;
font-size: var(--g-text-body-2-font-size);

&-text {
margin: 0 25px;
Expand Down
11 changes: 7 additions & 4 deletions src/components/Select/components/SelectList/SelectList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ $xl-right-padding: '12px';
}

&__group-label {
font-size: var(--g-text-body-1-font-size);

#{$block}_size_s &:not(#{&}_empty) {
height: #{variables.$s-height};
padding: 8px #{select-css-variables.$s-hor-padding} 4px;
Expand All @@ -53,13 +55,13 @@ $xl-right-padding: '12px';
#{$block}_size_xl &:not(#{&}_empty) {
height: #{variables.$xl-height};
padding: 12px #{select-css-variables.$xl-hor-padding} 8px;
font-size: 15px;
font-size: var(--g-text-body-2-font-size);
}

#{$block}_mobile &:not(#{&}_empty) {
height: #{variables.$l-height};
padding: 12px #{select-css-variables.$l-hor-padding} 8px;
font-size: 15px;
font-size: var(--g-text-body-2-font-size);
}

#{$block}__item:not(:first-child) & {
Expand Down Expand Up @@ -145,7 +147,7 @@ $xl-right-padding: '12px';
& #{$block}__option-default-label {
height: #{variables.$xl-height};
line-height: #{variables.$xl-height};
font-size: 15px;
font-size: var(--g-text-body-2-font-size);
}

--_--select-tick-icon-padding-right: calc(#{select-css-variables.$xl-hor-padding} / 2);
Expand All @@ -157,7 +159,7 @@ $xl-right-padding: '12px';
& #{$block}__option-default-label {
height: #{variables.$l-height};
line-height: #{variables.$l-height};
font-size: 15px;
font-size: var(--g-text-body-2-font-size);
}

& #{$block}__tick-icon {
Expand All @@ -176,6 +178,7 @@ $xl-right-padding: '12px';

&__option-default-label {
@include mixins.overflow-ellipsis();
font-size: var(--g-text-body-1-font-size);

&_disabled {
color: var(--g-color-text-secondary);
Expand Down
8 changes: 2 additions & 6 deletions src/components/Toaster/Toast/Toast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ $block: '.#{variables.$ns}toast';
width: inherit;
margin-bottom: var(--yc-toaster-margin);
padding: var(--yc-toaster-padding);
font-size: 13px;
font-size: var(--g-text-body-2-font-size);
border-radius: 8px;
box-shadow: 0px 0px 15px var(--g-color-sfx-shadow);
background-color: var(--g-color-base-background);
Expand Down Expand Up @@ -81,7 +81,7 @@ $block: '.#{variables.$ns}toast';
row-gap: 8px;
width: 100%;
height: 100%;
min-height: var(--g-text-body-1-line-height);
min-height: var(--g-text-body-2-line-height);

&:before {
content: '';
Expand All @@ -107,10 +107,6 @@ $block: '.#{variables.$ns}toast';
padding-right: $closeButtonTitleSpacing + $closeButtonSize;
}

&__title {
line-height: 24px;
}

&__content_without-title {
padding-right: $closeButtonTitleSpacing + $closeButtonSize;
}
Expand Down

0 comments on commit 44d7160

Please sign in to comment.