Browse Source

style: add some Sass variables to Button, Input, Modal, Select, ScrollList and TreeSelect components(#570)

carlos 3 years ago
parent
commit
c33c463ed9

+ 6 - 0
packages/semi-foundation/button/button.scss

@@ -112,21 +112,27 @@ $module: #{$prefix}-button;
     }
     &-borderless {
         background-color: transparent;
+        border: $width-button_borderless-border $color-button_borderless-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
+            border: $width-button_borderless-border $color-button_borderless-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_borderless-bg-active;
+            border: $width-button_borderless-border $color-button_borderless-border-active solid;
         }
     }
 
     &-light {
         background-color: $color-button_light-bg-default;
+        border: $width-button_light-border $color-button_light-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
+            border: $width-button_light-border $color-button_light-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_light-bg-active;
+            border: $width-button_light-border $color-button_light-border-active solid;
         }
     }
     &-size-small {

+ 9 - 1
packages/semi-foundation/button/variables.scss

@@ -76,11 +76,19 @@ $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
 $color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
 $color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
+$color-button_light-border-default: transparent; // 浅色按钮描边颜色 
+$color-button_light-border-hover: $color-button_light-border-default; // 浅色按钮描边颜色 - 悬浮
+$color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
+$width-button_light-border: 0;  // 浅色按钮描边宽度
 
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
 $color-button_borderless-bg-active: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下
+$color-button_borderless-border-default: transparent; // 无背景按钮描边颜色
+$color-button_borderless-border-hover: $color-button_borderless-border-default; // 无背景按钮描边颜色 - 悬浮
+$color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
+$width-button_borderless-border: 0; // 无背景按钮描边宽度
 
 // buttongroup
 
@@ -125,4 +133,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
-$radius-button_group: $radius-button; // 按钮组圆角大小
+$radius-button_group: $radius-button; // 按钮组圆角大小

+ 4 - 1
packages/semi-foundation/input/textarea.scss

@@ -136,12 +136,15 @@ $module: #{$prefix}-input;
     background-color: transparent;
     border: $width-textarea-border solid $color-textarea-border-default;
     vertical-align: bottom;
-
     width: 100%;
     outline: none;
     cursor: text;
     box-sizing: border-box;
     color: $color-input_default-text-default;
+    
+    &:hover {
+        border-color: $color-textarea-border-hover;
+    }
 
     &::placeholder {
         color: $color-input_placeholder-text-default;

+ 1 - 0
packages/semi-foundation/input/variables.scss

@@ -100,6 +100,7 @@ $spacing-textarea_counter-paddingLeft: 12px; // 多行文本字数统计左侧
 $width-textarea-border: $border-thickness; // 多行文本描边宽度
 $height-textarea_counter: 24px; // 多行文本字数统计最小高度
 $color-textarea-border-default: transparent; // 多行文本描边颜色
+$color-textarea-border-hover: $color-textarea-border-default; // 多行文本描边颜色 - 悬浮
 
 $color-textarea-icon-default: var(--semi-color-text-2); // 多行文本 clear 图标颜色
 $color-textarea-icon-hover: var(--semi-color-primary-hover); // 多行文本 clear 图标颜色 - 悬浮

+ 2 - 0
packages/semi-foundation/modal/modal.scss

@@ -84,6 +84,7 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_header-paddingY $spacing-modal_header-paddingX;
         font-size: $font-modal_header-fontSize;
         font-weight: $font-modal_header-fontWeight;
+        background-color: $color-modal_header-bg;
         color: $color-modal_main-text;
         border-bottom: $width-modal_header-border solid $color-modal_header-border;
     }
@@ -112,6 +113,7 @@ $module: #{$prefix}-modal;
         text-align: right;
         border-radius: $radius-modal_footer;
         border-top: $width-modal_footer-border solid $color-modal_footer-border;
+        background-color: $color-modal_footer-bg;
         
         .#{$prefix}-button {
             margin-left: $spacing-modal_footer_button-marginLeft;

+ 7 - 4
packages/semi-foundation/modal/variables.scss

@@ -8,6 +8,8 @@ $color-modal_success-icon: var(--semi-color-success); // 模态框成功图标
 $color-modal_danger-icon: var(--semi-color-danger); // 模态框危险图标颜色
 $color-modal_warning-icon: var(--semi-color-warning); // 模态框警告图标颜色
 $color-modal_content-border: var(--semi-color-border); // 模态框描边颜色
+$color-modal_header-bg: transparent;  // 模态框 header 背景填充色
+$color-modal_footer-bg: transparent;  // 模态框 footer 背景填充色
 
 // Spacing
 $spacing-modal-marginY: 80px; // 模态框距容器顶部外边距
@@ -62,8 +64,9 @@ $font-modal_header-fontSize: $font-size-regular; // 模态框 title 字号
 $font-modal_header-fontWeight: $font-weight-bold; // 模态框 title 字重
 
 //border
-$color-modal_header-border:transparent;
-$width-modal_header-border:0;
-$color-modal_footer-border:transparent;
-$width-modal_footer-border:0;
+$color-modal_header-border:transparent;  // 模态框 header 底部描边颜色
+$width-modal_header-border:0; // 模态框 header 底部描边宽度
+$color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
+$width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
+
 

+ 1 - 0
packages/semi-foundation/scrollList/scrollList.scss

@@ -24,6 +24,7 @@ $module: #{$prefix}-scrolllist;
         &-title {
             padding: $spacing-scrollList_header_title-paddingY $spacing-scrollList_header_title-paddingX;
             font-weight: $font-scrollList_header_title-fontWeight;
+            color: $color-scrollList_header-title;
 
             @include font-size-regular;
         }

+ 13 - 12
packages/semi-foundation/scrollList/variables.scss

@@ -1,18 +1,19 @@
 // Color
-$color-scrollList-bg: var(--semi-color-bg-3);
-$color-scrollList-border: var(--semi-color-border);
-$color-scrollList_item-bg: transparent;
-$color-scrollList_item-text: var(--semi-color-text-0);
-$color-scrollList_disabled_item-text: var(--semi-color-disabled-text);
-$color-scrollList_item-text-hover: var(--semi-color-fill-1);
-$color-scrollList_item-bg-active: var(--semi-color-fill-2);
-$color-scrollList_selected_item-bg: var(--semi-color-primary-light-default);
-$color-scrollList_selected_item-text: var(--semi-color-text-0);
-$color-scrollList_selected_item-icon: var(--semi-color-text-2);
-$color-scrollList_footer-border: var(--semi-color-border);
+$color-scrollList-bg: var(--semi-color-bg-3); // 滚动列表背景色
+$color-scrollList-border: var(--semi-color-border); // 滚动列表描边颜色
+$color-scrollList_header-title: var(--semi-color-text-0); // 滚动列表标题颜色
+$color-scrollList_item-bg: transparent; // 滚动列表选项背景色
+$color-scrollList_item-text: var(--semi-color-text-0); // 滚动列表选项文字颜色
+$color-scrollList_disabled_item-text: var(--semi-color-disabled-text); // 滚动列表选项背景色 - 禁用
+$color-scrollList_item-text-hover: var(--semi-color-fill-1); // 滚动列表选项文字颜色 - 悬浮
+$color-scrollList_item-bg-active: var(--semi-color-fill-2); // 滚动列表选项文字颜色 - 选中
+$color-scrollList_selected_item-bg: var(--semi-color-primary-light-default); // 滚动列表选中选项背景颜色
+$color-scrollList_selected_item-text: var(--semi-color-text-0); // 滚动列表选中选项文字颜色
+$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;

+ 1 - 0
packages/semi-foundation/select/option.scss

@@ -13,6 +13,7 @@ $multiple: #{$module}-multiple;
     padding-top: $spacing-select_option-paddingTop;
     padding-bottom: $spacing-select_option-paddingBottom;
     color: $color-select_option_main-text;
+    border-radius: $radius-select_option;
     position: relative;
     display: flex;
     flex-wrap: nowrap;

+ 4 - 2
packages/semi-foundation/select/select.scss

@@ -24,14 +24,16 @@ $multiple: #{$module}-multiple;
 
     &:hover {
         background-color: $color-select-bg-hover;
+        border: $width-select-border-hover solid $color-select-border-hover;
     }
 
     &:active {
         background-color: $color-select-bg-active;
+        border: $width-select-border-active solid $color-select-border-active;
     }
 
     &:focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select-border-focus;
         outline: 0;
     }
 
@@ -383,7 +385,7 @@ $multiple: #{$module}-multiple;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
-
+    padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
     &-chosen {
         .#{$module}-option-icon {
             display: flex;

+ 11 - 1
packages/semi-foundation/select/variables.scss

@@ -3,6 +3,9 @@ $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
+$color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
+$color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -56,7 +59,9 @@ $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时(
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
 $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
-
+$width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
+$width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
+$width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
 $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
@@ -86,9 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
+$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
+$radius-select_option: 0; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

+ 2 - 1
packages/semi-foundation/treeSelect/treeSelect.scss

@@ -18,6 +18,7 @@ $module: #{$prefix}-tree-select;
 
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
+        border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
     &-focus {
@@ -329,4 +330,4 @@ $module: #{$prefix}-tree-select;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

+ 3 - 1
packages/semi-foundation/treeSelect/variables.scss

@@ -6,6 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
+$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认
@@ -46,7 +47,8 @@ $radius-treeSelect: var(--semi-border-radius-small); // 树选择器圆角
 $width-treeSelect-border: 1px; // 树选择器描边宽度
 $width-treeSelect_search_wrapper-border: 1px; // 树选择器搜索框描边宽度
 
-$width-treeSelect_focus-border: $border-thickness-control-focus; // 树选择器选择框描边宽度
+$width-treeSelect_hover-border: $border-thickness-control-focus; // 树选择器选择框描边宽度 - 悬浮
+$width-treeSelect_focus-border: $width-treeSelect_hover-border; // 树选择器选择框描边宽度 - 选中
 
 $width-treeSelect_default: 80px; // 树选择器最小宽度
 $height-treeSelect_default: $height-control-default; // 树选择器选择器高度 - 默认