Skip to content

Commit

Permalink
fix: scss optimize, add unit in scss (DouyinFE#749)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaiQiangReal
DaiQiangReal authored Apr 15, 2022
1 parent 44ff9e0 commit 1e9d1b5
Show file tree
Hide file tree
Showing 8 changed files with 42 additions and 43 deletions.
4 changes: 2 additions & 2 deletions packages/semi-foundation/datePicker/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ $spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 foot
$spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
$spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
$spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
$spacing-datepicker_month-padding: $spacing-base;
$spacing-datepicker_month-padding: $spacing-base;
$spacing-datepicker_switch_datetime-paddingTop: $spacing-base; // 日期时间切换顶部内边距
$spacing-datepicker_switch_datetime-paddingBottom: $spacing-base; // 日期时间切换底部内边距
$spacing-datepicker_switch_text-paddingLeft: $spacing-tight; // 日期时间切换左侧内边距
Expand Down Expand Up @@ -176,7 +176,7 @@ $fontSize-datepicker_insetInput_compact-fontSize: 12px;
$spacing-datepicker_switch_compact-padding: 6px;
$spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
$spacing-datepicker_weeks_compact-padding: 10px;
$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2;
$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2px;
$spacing-datepicker_weekday_compact-paddingLeft: 10px;
$spacing-datepicker_weekday_compact-paddingRight: 10px;
$spacing-datepicker_weekday_compact-paddingBottom: $spacing-tight;
Expand Down
32 changes: 16 additions & 16 deletions packages/semi-foundation/form/variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
$spacing-form_label-paddingTop: ($height-control-default - 20) / 2; // 水平布局表单标题顶部内边距
$spacing-form_label_small-paddingTop: ($height-control-default - 24) / 2; // 水平布局 小尺寸表单标题顶部内边距
$spacing-form_label-paddingTop: ($height-control-default - 20px) / 2; // 水平布局表单标题顶部内边距
$spacing-form_label_small-paddingTop: ($height-control-default - 24px) / 2; // 水平布局 小尺寸表单标题顶部内边距

$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单标题右侧内边距
$spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距
$spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距

$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单顶部内边距
$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单底部内边距

$spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距
$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距

$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距
$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距
$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距
$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距
$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距
$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距
$spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距
$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距

$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距
$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距
$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距
$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距
$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距
$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距
$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 垂直布局表单标题顶部内边距
$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 垂直布局表单标题底部内边距
$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 居中
Expand All @@ -41,4 +41,4 @@ $color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告表单
$color-form_message_error-text-default: var(--semi-color-danger); // 错误表单项图标颜色
$color-form_section-text-default: var(--semi-color-text-0); // 表单分组标题文字颜色
$color-form_section-border-default: var(--semi-color-border); // 表单分组描边颜色
$width-form_section-border: $border-thickness-control; // 表单分组描边宽度
$width-form_section-border: $border-thickness-control; // 表单分组描边宽度
8 changes: 4 additions & 4 deletions packages/semi-foundation/input/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ $color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文

$color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色

$height-input_large: $height-control-large - 2; // 输入框高度 & 行高 - 大尺寸
$height-input_small: $height-control-small - 2; // 输入框高度 & 行高 - 小尺寸
$height-input_default: $height-control-default - 2; // 输入框高度 & 行高 - 默认尺寸
$height-input_large: $height-control-large - 2px; // 输入框高度 & 行高 - 大尺寸
$height-input_small: $height-control-small - 2px; // 输入框高度 & 行高 - 小尺寸
$height-input_default: $height-control-default - 2px; // 输入框高度 & 行高 - 默认尺寸
$height-input_wrapper_large: $height-control-large;
$height-input_wrapper_small: $height-control-small;
$height-input_wrapper_default: $height-control-default;
Expand All @@ -72,7 +72,7 @@ $motion-scale_size-inactive: 1;

$width-input_append-border: $border-thickness-control; // 后置标签描边宽度
$width-input_prepend-border: $border-thickness-control; // 前置标签描边宽度
$width-input_group_pseudo-border: $border-thickness-control;
$width-input_group_pseudo-border: $border-thickness-control;
$width-input_wrapper-border: $border-thickness-control-focus; // 输入框描边宽度
$width-input_wrapper_focus-border: $border-thickness-control-focus; // 输入框描边宽度 - 选中态

Expand Down
12 changes: 5 additions & 7 deletions packages/semi-foundation/popover/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,23 @@ $color-popover-bg-default: var(--semi-color-bg-3); // 默认背景色
$color-popover-border-default: var(--semi-color-border); // 默认描边颜色

// Width/Height
$width-popover_arrow: 24px; // 水平箭头宽度
$width-popover_arrow: 24px; // 水平箭头宽度 ignore-semi-css-trans
$height-popover_arrow: 8px; // 水平箭头高度
$height-popover_arrow_vertical: 24px; // 垂直箭头高度
$width-popover_arrow_vertical: 8px; // 垂直箭头宽度
$height-tooltip_arrow: $height-popover_arrow;
$width-tooltip_arrow: $width-popover_arrow;
$width-tooltip_arrow: $width-popover_arrow; //ignore-semi-css-trans
$width-tooltip_arrow_vertical: $width-popover_arrow_vertical;
$height-tooltip_arrow_vertical: $height-popover_arrow_vertical;
$width-popover_title-border: 1px;
$width-popover_title-border: 1px;


// Spacing
$spacing-popover_title-padding: 8px; // 气泡卡片标题内边距
$spacing-popover_withArrow-padding: 12px; // 带箭头的气泡卡片标题内边距
$spacing-popover_arrow_adjusted_offset-y: 6; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
$spacing-popover_arrow_adjusted_offset-y: 6px; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
$spacing-tooltip_arrow_adjusted_offset-y: $spacing-popover_arrow_adjusted_offset-y; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
$spacing-tooltip_arrow_adjusted_offset-x: round(
$horizontal-rate * $width-tooltip_arrow
); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题
$spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-tooltip_arrow); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题 ignore-semi-css-trans

// Radius
$radius-popover: var(--semi-border-radius-medium); // 气泡卡片的圆角大小
4 changes: 2 additions & 2 deletions packages/semi-foundation/scrollList/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $color-scrollList_selected_item-icon: var(--semi-color-text-2); // 滚动列表
$color-scrollList_footer-border: var(--semi-color-border); // 滚动列表底部描边颜色

// Width/Height
$height-scrollList: 300px;
$height-scrollList: 300px;
$height-scrollList_item: 36px;
$width-scrollList_item-border: $border-thickness-control;
$width-scrollList_item_sel_svg: 16px;
Expand All @@ -34,7 +34,7 @@ $spacing-scrollList_item_ul-margin: 0;
$spacing-scrollList_item_ul-paddingBottom: ($height-scrollList - $height-scrollList_item) / 2;
$spacing-scrollList_item_sel_svg-marginRight: 12px;
$spacing-scrollList_item_wheel_list_outer-paddingRight: $height-scrollList_item / 2;
$spacing-scrollList_item_wheel_list_shade_pre-marginTop: -($height-scrollList_item / 2 + $border-thickness-control);
$spacing-scrollList_item_wheel_list_shade_pre-marginTop: -1 * ($height-scrollList_item / 2 + $border-thickness-control);
$spacing-scrollList_item_wheel_list_shade_post-marginTop: $height-scrollList_item / 2 + $border-thickness-control;
$spacing-scrollList_footer-padding: 10px;

Expand Down
4 changes: 2 additions & 2 deletions packages/semi-foundation/select/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部
$spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
$spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
$spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
$spacing-select_tag-marginTop: $spacing-super-tight - 1; // 多项选择器标签顶部外边距
$spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
$spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
$spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
$spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
$spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
$spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
Expand Down
8 changes: 4 additions & 4 deletions packages/semi-foundation/tabs/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
$height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
$font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高

$spacing-tabs_bar_extra-paddingY: 0; // 附加操作垂直内边距
$spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
$spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
$spacing-tabs_tab_icon-marginRight: $spacing-tight; // 附加操作垂直内边距
$spacing-tabs_tab_icon-top: 3px; // 页签图标顶部位置
Expand All @@ -85,8 +85,8 @@ $spacing-tabs_bar_line_tab_medium-paddingBottom: $spacing-base-tight - $width-ta
$spacing-tabs_bar_line_tab_medium-paddingLeft: $spacing-extra-tight; // 中等尺寸线条式页签左侧内边距

$spacing-tabs_bar_line_tab_left-padding: 12px; // 垂直线条式页签左侧内边距
$spacing-tabs_bar_line_tab_left_small-padding: $spacing-tight - 2; // 小尺寸垂直线条式页签左侧内边距
$spacing-tabs_bar_line_tab_left_medium-padding: $spacing-base-tight - 2; // 中等尺寸垂直线条式页签左侧内边距
$spacing-tabs_bar_line_tab_left_small-padding: $spacing-tight - 2px; // 小尺寸垂直线条式页签左侧内边距
$spacing-tabs_bar_line_tab_left_medium-padding: $spacing-base-tight - 2px; // 中等尺寸垂直线条式页签左侧内边距

$spacing-tabs_content-paddingY: 5px; // 页签内容区垂直方向内边距
$spacing-tabs_content-paddingX: 0; // 页签内容区水平方向内边距
Expand All @@ -96,7 +96,7 @@ $spacing-tabs_content_left-paddingY: 0; // 垂直页签内容区水平方向内

$spacing-tabs_bar_card_tab-marginRight: $spacing-tight; // 卡片式页签右侧外边距
$spacing-tabs_bar_card_tab_active-paddingTop: $spacing-tight; // 卡片式选中页签顶部内边距
$spacing-tabs_bar_card_tab_active-paddingBottom: $spacing-tight - 1; // 卡片式选中页签底部内边距
$spacing-tabs_bar_card_tab_active-paddingBottom: $spacing-tight - 1px; // 卡片式选中页签底部内边距
$spacing-tabs_bar_card_tab_active-paddingLeft: $spacing-base-tight; // 卡片式选中页签左侧内边距
$spacing-tabs_bar_card_tab_active-paddingRight: $spacing-base-tight; // 卡片式选中页签右侧内边距
$spacing-tabs_bar_card_tab_left-marginBottom: $spacing-tight; // 垂直卡片式页签底部外边距
Expand Down
13 changes: 7 additions & 6 deletions packages/semi-foundation/tooltip/variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
$horizontal-rate: 0.24; // 水平方向矫正因子
$vertical-rate: 0; // 垂直方向矫正因子
$horizontal-rate: 0.24; // 水平方向矫正因子 ignore-semi-css-trans
$vertical-rate: 0; // 垂直方向矫正因子 ignore-semi-css-trans

$motion-zoom_scale-from: 0.8; // 初始缩放 - 动画用
$motion-zoom_opacity-from: 0; // 初始透明度 - 动画用
Expand All @@ -24,8 +24,9 @@ $height-tooltip_arrow: 7px; // 工具提示小三角箭头高度 - 水平

$height-tooltip_arrow_vertical: 24px; // 工具提示小三角箭头高度 - 垂直
$width-tooltip_arrow_vertical: 7px; // 工具提示小三角箭头宽度度 - 垂直
$spacing-tooltip_arrow_offset-x: 1; // 水平方向渲染会有缝隙，所以加个偏移量
$spacing-tooltip_arrow_offset-y: 1; // 垂直方向渲染会有缝隙，所以加个偏移量
$spacing-tooltip_arrow_offset-x: 1px; // 水平方向渲染会有缝隙，所以加个偏移量
$spacing-tooltip_arrow_offset-y: 1px; // 垂直方向渲染会有缝隙，所以加个偏移量

$spacing-tooltip_arrow_adjusted_offset-y: 5; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
$spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-tooltip_arrow); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题
$spacing-tooltip_arrow_adjusted_offset-y: 5px; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题

$spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-tooltip_arrow); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题 ignore-semi-css-trans

0 comments on commit 1e9d1b5

Please sign in to comment.