mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 12:29:24 +08:00
styles: 下拉框、日期、时间组件主题样式 (#6184)
* 单测范围修改 (#6133) * 单测范围修改 * 单测范围修改 * feat:下拉框&时间/日期选择器主题适配 (#6134) * feat: select支持主题变量配置 * feat:下拉框&时间/日期选择器主题适配 * fix:更新测试用例 * fix:代码扫描修复 * fix:代码扫描修复 --------- Co-authored-by: hongyang03 <hongyang03@baidu.com> * feat:下拉框主题样式优化 (#6142) * feat:下拉框主题样式优化 * fix:测试用例修复 --------- Co-authored-by: hongyang03 <hongyang03@baidu.com> * fix: 下拉框&日期测试修复 (#6183) Co-authored-by: hongyang03 <hongyang03@baidu.com> * fix:恢复测试用例 (#6189) Co-authored-by: hongyang03 <hongyang03@baidu.com> * fix:恢复测试用例 (#6191) Co-authored-by: hongyang03 <hongyang03@baidu.com> --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com> Co-authored-by: hongyang03 <hongyang03@baidu.com>
This commit is contained in:
qkiroc
GitHub
parent
413d4a55d0
commit
d841acf5d7
8
.github/workflows/codeql-analysis.yml
vendored
8
.github/workflows/codeql-analysis.yml
vendored
@ -9,14 +9,14 @@
|
||||
# the `language` matrix defined below to confirm you have the correct set of
|
||||
# supported CodeQL languages.
|
||||
#
|
||||
name: "CodeQL"
|
||||
name: 'CodeQL'
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ master ]
|
||||
branches: [master]
|
||||
pull_request:
|
||||
# The branches below must be a subset of the branches above
|
||||
branches: [ master ]
|
||||
branches: ['**']
|
||||
schedule:
|
||||
- cron: '21 7 * * 2'
|
||||
|
||||
@ -28,7 +28,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
language: [ 'javascript' ]
|
||||
language: ['javascript']
|
||||
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
|
||||
# Learn more:
|
||||
# https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
|
||||
|
||||
4
.github/workflows/gh-pages.yml
vendored
4
.github/workflows/gh-pages.yml
vendored
@ -2,7 +2,7 @@ name: gh-pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
branches: ['**']
|
||||
|
||||
jobs:
|
||||
build:
|
||||
@ -40,7 +40,7 @@ jobs:
|
||||
SINGLE_COMMIT: true
|
||||
- name: Generate coverage report
|
||||
env:
|
||||
NODE_OPTIONS: "--max-old-space-size=8192"
|
||||
NODE_OPTIONS: '--max-old-space-size=8192'
|
||||
run: |
|
||||
npm run coverage
|
||||
- uses: codecov/codecov-action@v2
|
||||
|
||||
2
.github/workflows/pr-test.yml
vendored
2
.github/workflows/pr-test.yml
vendored
@ -2,7 +2,7 @@ name: PR test
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches: [master]
|
||||
branches: ['**']
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
@ -832,7 +832,7 @@
|
||||
--transfer-group-font-color: var(--colors-neutral-text-5);
|
||||
--transfer-group-fontWeight: var(--fonts-weight-6);
|
||||
--transfer-group-lineHeight: var(--fonts-lineHeight-2);
|
||||
--transfer-table-last-paddingRight: var(--sizes-size-10);
|
||||
--transfer-table-last-paddingRight: var(--sizes-base-9);
|
||||
--transfer-table-header-marginTop: var(--sizes-size-1);
|
||||
--transfer-table-header-marginLeft: var(--sizes-size-1);
|
||||
--transfer-table-header-paddingTop: var(--sizes-size-5);
|
||||
@ -1128,13 +1128,13 @@
|
||||
--inputNumber-base-default-unit-paddingTop: calc(
|
||||
(
|
||||
var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
|
||||
var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2
|
||||
var(--Form-input-fontSize) - var(--Form-input-borderWidth) * 2
|
||||
) / 2
|
||||
);
|
||||
--inputNumber-base-default-unit-paddingBottom: calc(
|
||||
(
|
||||
var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
|
||||
var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2
|
||||
var(--Form-input-fontSize) - var(--Form-input-borderWidth) * 2
|
||||
) / 2
|
||||
);
|
||||
--inputNumber-base-default-unit-paddingLeft: var(--sizes-size-6);
|
||||
@ -1468,7 +1468,7 @@
|
||||
--Checkbox--sm-inner-size: var(--sizes-size-5);
|
||||
--Checkbox--sm-size: var(--sizes-size-8);
|
||||
--Checkbox-borderRadius: #{px2rem(2px)};
|
||||
--Checkbox-color: var(--Form-input-borderColor);
|
||||
--Checkbox-color: var(--borderColor);
|
||||
--Checkbox-gap: var(--gap-xs);
|
||||
--Checkbox-gb: #fff;
|
||||
--Checkbox-inner-size: var(--sizes-size-5);
|
||||
@ -2576,4 +2576,461 @@
|
||||
--ImageControl-addBtn-onHover-color: var(--inputImage-base-hover-color);
|
||||
--ImageControl-addBtn-upload-color: var(--inputImage-base-default-color);
|
||||
--ImageControl-progress-borderRadius: var(--borders-radius-2);
|
||||
|
||||
--select-base-default-top-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-default-top-border-width: var(--borders-width-2);
|
||||
--select-base-default-top-border-style: var(--borders-style-2);
|
||||
--select-base-default-right-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-default-right-border-width: var(--borders-width-2);
|
||||
--select-base-default-right-border-style: var(--borders-style-2);
|
||||
--select-base-default-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-default-bottom-border-width: var(--borders-width-2);
|
||||
--select-base-default-bottom-border-style: var(--borders-style-2);
|
||||
--select-base-default-left-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-default-left-border-width: var(--borders-width-2);
|
||||
--select-base-default-left-border-style: var(--borders-style-2);
|
||||
--select-base-default-top-right-border-radius: var(--borders-radius-3);
|
||||
--select-base-default-top-left-border-radius: var(--borders-radius-3);
|
||||
--select-base-default-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--select-base-default-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--select-base-default-paddingTop: var(--sizes-size-3);
|
||||
--select-base-default-paddingBottom: var(--sizes-size-3);
|
||||
--select-base-default-paddingLeft: var(--sizes-size-6);
|
||||
--select-base-default-paddingRight: var(--sizes-size-6);
|
||||
--select-base-default-color: var(--colors-neutral-text-2);
|
||||
--select-base-default-fontSize: var(--fonts-size-7);
|
||||
--select-base-default-fontWeight: var(--fonts-weight-6);
|
||||
--select-base-default-bg-color: transparent;
|
||||
--select-base-default-option-paddingTop: var(--sizes-size-0);
|
||||
--select-base-default-option-paddingBottom: var(--sizes-size-0);
|
||||
--select-base-default-option-paddingLeft: var(--sizes-size-6);
|
||||
--select-base-default-option-paddingRight: var(--sizes-size-6);
|
||||
--select-base-default-option-color: var(--colors-neutral-text-2);
|
||||
--select-base-default-option-fontSize: var(--fonts-size-7);
|
||||
--select-base-default-option-fontWeight: var(--fonts-weight-6);
|
||||
--select-base-default-option-bg-color: transparent;
|
||||
--select-base-default-option-line-height: var(--sizes-base-16);
|
||||
--select-base-hover-top-border-color: var(--colors-brand-5);
|
||||
--select-base-hover-top-border-width: var(--borders-width-2);
|
||||
--select-base-hover-top-border-style: var(--borders-style-2);
|
||||
--select-base-hover-right-border-color: var(--colors-brand-5);
|
||||
--select-base-hover-right-border-width: var(--borders-width-2);
|
||||
--select-base-hover-right-border-style: var(--borders-style-2);
|
||||
--select-base-hover-bottom-border-color: var(--colors-brand-5);
|
||||
--select-base-hover-bottom-border-width: var(--borders-width-2);
|
||||
--select-base-hover-bottom-border-style: var(--borders-style-2);
|
||||
--select-base-hover-left-border-color: var(--colors-brand-5);
|
||||
--select-base-hover-left-border-width: var(--borders-width-2);
|
||||
--select-base-hover-left-border-style: var(--borders-style-2);
|
||||
--select-base-hover-bg-color: transparent;
|
||||
--select-base-hover-option-color: var(--colors-neutral-text-2);
|
||||
--select-base-hover-option-bg-color: var(--colors-brand-10);
|
||||
--select-base-active-top-border-color: var(--colors-brand-5);
|
||||
--select-base-active-top-border-width: var(--borders-width-2);
|
||||
--select-base-active-top-border-style: var(--borders-style-2);
|
||||
--select-base-active-right-border-color: var(--colors-brand-5);
|
||||
--select-base-active-right-border-width: var(--borders-width-2);
|
||||
--select-base-active-right-border-style: var(--borders-style-2);
|
||||
--select-base-active-bottom-border-color: var(--colors-brand-5);
|
||||
--select-base-active-bottom-border-width: var(--borders-width-2);
|
||||
--select-base-active-bottom-border-style: var(--borders-style-2);
|
||||
--select-base-active-left-border-color: var(--colors-brand-5);
|
||||
--select-base-active-left-border-width: var(--borders-width-2);
|
||||
--select-base-active-left-border-style: var(--borders-style-2);
|
||||
--select-base-active-shadow: var(--shadows-shadow-none);
|
||||
--select-base-active-bg-color: transparent;
|
||||
--select-base-active-option-color: var(--colors-brand-5);
|
||||
--select-base-active-option-bg-color: transparent;
|
||||
--select-base-disabled-top-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-disabled-top-border-width: var(--borders-width-2);
|
||||
--select-base-disabled-top-border-style: var(--borders-style-2);
|
||||
--select-base-disabled-right-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-disabled-right-border-width: var(--borders-width-2);
|
||||
--select-base-disabled-right-border-style: var(--borders-style-2);
|
||||
--select-base-disabled-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-disabled-bottom-border-width: var(--borders-width-2);
|
||||
--select-base-disabled-bottom-border-style: var(--borders-style-2);
|
||||
--select-base-disabled-left-border-color: var(--colors-neutral-line-8);
|
||||
--select-base-disabled-left-border-width: var(--borders-width-2);
|
||||
--select-base-disabled-left-border-style: var(--borders-style-2);
|
||||
--select-base-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
--select-base-disabled-option-color: var(--colors-neutral-text-6);
|
||||
--select-base-disabled-option-bg-color: transparent;
|
||||
--select-multiple-top-right-border-radius: var(--borders-radius-2);
|
||||
--select-multiple-top-left-border-radius: var(--borders-radius-2);
|
||||
--select-multiple-bottom-right-border-radius: var(--borders-radius-2);
|
||||
--select-multiple-bottom-left-border-radius: var(--borders-radius-2);
|
||||
--select-multiple-paddingTop: var(--sizes-size-0);
|
||||
--select-multiple-paddingBottom: var(--sizes-size-0);
|
||||
--select-multiple-paddingLeft: var(--sizes-size-3);
|
||||
--select-multiple-paddingRight: var(--sizes-size-3);
|
||||
--select-multiple-marginTop: var(--sizes-size-0);
|
||||
--select-multiple-marginBottom: var(--sizes-size-2);
|
||||
--select-multiple-marginLeft: var(--sizes-size-0);
|
||||
--select-multiple-marginRight: var(--sizes-size-3);
|
||||
--select-multiple-color: var(--colors-neutral-text-2);
|
||||
--select-multiple-fontSize: var(--fonts-size-8);
|
||||
--select-multiple-fontWeight: var(--fonts-weight-6);
|
||||
--select-multiple-bg-color: var(--colors-neutral-fill-10);
|
||||
--select-multiple-hover-bg-color: var(--colors-brand-10);
|
||||
--select-multiple-icon-color: var(--colors-neutral-text-6);
|
||||
--select-multiple-icon-hover-color: var(--colors-neutral-text-2);
|
||||
--select-group-color: var(--colors-neutral-text-5);
|
||||
--select-group-fontSize: var(--fonts-size-7);
|
||||
--select-group-fontWeight: var(--fonts-weight-6);
|
||||
--select-group-lineHeight: var(--fonts-lineHeight-2);
|
||||
--select-group-paddingTop: var(--sizes-size-3);
|
||||
--select-group-paddingBottom: var(--sizes-size-3);
|
||||
--select-group-paddingLeft: var(--sizes-size-7);
|
||||
--select-group-paddingRight: var(--sizes-size-7);
|
||||
--select-table-header-paddingTop: var(--sizes-size-5);
|
||||
--select-table-header-paddingBottom: var(--sizes-size-5);
|
||||
--select-table-header-paddingLeft: var(--sizes-size-7);
|
||||
--select-table-header-paddingRight: var(--sizes-base-9);
|
||||
--select-table-option-paddingTop: var(--sizes-size-4);
|
||||
--select-table-option-paddingBottom: var(--sizes-size-5);
|
||||
--select-table-option-paddingLeft: var(--sizes-size-7);
|
||||
--select-table-option-paddingRight: var(--sizes-base-9);
|
||||
--select-table-color: var(--colors-neutral-text-2);
|
||||
--select-table-fontSize: var(--fonts-size-8);
|
||||
--select-tree-color: var(--colors-neutral-text-2);
|
||||
--select-tree-fontSize: var(--fonts-size-7);
|
||||
--select-tree-hover-bg-color: var(--colors-neutral-fill-10);
|
||||
--select-tree-active-bg-color: var(--colors-brand-10);
|
||||
|
||||
--Form-select-bg: var(--select-base-default-bg-color);
|
||||
--Form-select-height: var(--Form-select-outer-top);
|
||||
--Form-select-borderColor: var(--select-base-default-top-border-color)
|
||||
var(--select-base-default-right-border-color)
|
||||
var(--select-base-default-bottom-border-color)
|
||||
var(--select-base-default-left-border-color);
|
||||
--Form-select-borderRadius: var(--select-base-default-top-left-border-radius)
|
||||
var(--select-base-default-top-right-border-radius)
|
||||
var(--select-base-default-bottom-right-border-radius)
|
||||
var(--select-base-default-bottom-left-border-radius);
|
||||
--Form-select-borderWidth: var(--select-base-default-top-border-width)
|
||||
var(--select-base-default-right-border-width)
|
||||
var(--select-base-default-bottom-border-width)
|
||||
var(--select-base-default-left-border-width);
|
||||
--Form-select-caret-iconColor: var(--colors-neutral-text-5);
|
||||
--Form-select-caret-onHover-iconColor: var(--colors-neutral-text-5);
|
||||
--Form-select-caret-fontSize: var(--fonts-size-8);
|
||||
--Form-select-checkall-bottomBorder: #eceff8;
|
||||
--Form-select-color: var(--select-base-default-color);
|
||||
--Form-select-input-fontSize: var(--fontSizeSm);
|
||||
--Form-select-menu-bg: var(--colors-neutral-fill-11);
|
||||
--Form-select-menu-color: var(--colors-neutral-text-2);
|
||||
--Form-select-menu-height: var(--sizes-base-12);
|
||||
--Form-select-menu-onActive-bg: var(--select-base-active-option-bg-color);
|
||||
--Form-select-menu-onActive-color: var(--select-base-active-option-color);
|
||||
--Form-select-menu-onDisabled-bg: var(--select-base-disabled-option-bg-color);
|
||||
--Form-select-menu-onDisabled-color: var(--select-base-disabled-option-color);
|
||||
--Form-select-menu-onHover-bg: var(--select-base-hover-option-bg-color);
|
||||
--Form-select-menu-onHover-color: var(--select-base-hover-option-color);
|
||||
--Form-select-group-color: var(--Form-select-caret-iconColor);
|
||||
--Form-select-onError-borderColor: var(--Form-input-onError-borderColor);
|
||||
--Form-select-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
|
||||
--Form-select-onFocused-color: var(--Form-select-color);
|
||||
--Form-select-onHover-bg: var(--select-base-hover-bg-color);
|
||||
--Form-select-onHover-borderColor: var(--colors-brand-5);
|
||||
--Form-select-outer-borderWidth: var(--borders-width-1);
|
||||
--Form-select-outer-top: var(--sizes-base-16);
|
||||
--Form-select-outer-boxShadow: var(--shadows-shadow-normal);
|
||||
--Form-select-paddingX: var(--Form-input-paddingX);
|
||||
--Form-select-placeholderColor: var(--Form-input-placeholderColor);
|
||||
--Form-select-popoverGap: var(--borders-radius-3);
|
||||
--Form-select-icon-rigin: var(--sizes-size-9);
|
||||
--Form-select-search-height: var(--sizes-base-15);
|
||||
--Form-select-value-bgColor: var(--select-multiple-bg-color);
|
||||
--Form-select-value-bgColor--dark: var(--colors-neutral-fill-4);
|
||||
--Form-select-value-borderColor: var(--colors-neutral-line-9);
|
||||
--Form-select-valueIcon-color: var(--select-multiple-icon-color);
|
||||
--Form-select-valueIcon-color--dark: var(--colors-neutral-text-8);
|
||||
--Form-select-valueIcon-onHover-color: var(
|
||||
--select-multiple-icon-hover-color
|
||||
);
|
||||
--Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
|
||||
--Form-selectOption-height: var(--Form-select-height);
|
||||
--Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
|
||||
--Form-selectValue-onHover-bgColor: var(--select-multiple-hover-bg-color);
|
||||
--Form-selectValue-borderColor: var(--colors-brand-7);
|
||||
--Form-selectValue-color: var(--colors-brand-5);
|
||||
--Form-selectValue-fontSize: var(--select-multiple-fontSize);
|
||||
--Form-selectValue-onDisable-bg: #{lighten(
|
||||
saturate(lighten($info, 40%), 2.5%),
|
||||
5%
|
||||
)};
|
||||
--Form-selectValue-onHover-bg: #{darken(
|
||||
saturate(lighten($info, 40%), 2.5%),
|
||||
5%
|
||||
)};
|
||||
--Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
|
||||
--Form-selectValue-onInvalid-color: var(--danger);
|
||||
--Form-valueLabel-maxWidth: #{px2rem(120px)};
|
||||
--Form-select-onFocus-boxShadow: none;
|
||||
--ResultBox-tag-height: #{px2rem(24px)};
|
||||
--ResultBox-tag-marginBottom: var(--select-multiple-marginBottom);
|
||||
--ResultBox-icon--onDisabled-color: #ebebeb;
|
||||
--ResultBox-icon--onHover-color: var(--select-multiple-icon-hover-color);
|
||||
--ResultBox-icon-color: var(--select-multiple-icon-color);
|
||||
--ResultBox-value--onDisabled-color: #cccccc;
|
||||
--ResultBox-value--onHover-bg: var(--select-multiple-hover-bg-color);
|
||||
--ResultBox-value--onHover-bg--dark: #b8babf;
|
||||
--ResultBox-value-bg: var(--select-multiple-bg-color);
|
||||
--ResultBox-value-color: var(--select-multiple-color);
|
||||
--ResultBox-value-clear-bg: var(--colors-neutral-fill-8);
|
||||
--ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9);
|
||||
--Tree-indent: var(--gap-md);
|
||||
--Tree-icon-gap: var(--sizes-size-5);
|
||||
--Tree-icon-margin-right: #{px2rem(8px)};
|
||||
--Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
|
||||
--Tree-item-onHover-bg: var(--colors-neutral-fill-10);
|
||||
--Tree-item-onHover-bg-pure: var(--select-tree-hover-bg-color);
|
||||
--Tree-itemArrowWidth: #{px2rem(16px)};
|
||||
--Tree-itemHeight: var(--sizes-base-12);
|
||||
--Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
|
||||
--TreeSelect-popover-bg: var(--colors-neutral-fill-11);
|
||||
--Tree-item-text-max-height: #{px2rem(250px)};
|
||||
--Tree-item-text-top: #{px2rem(4px)};
|
||||
--Tree-item-arrow-padding-left: #{px2rem(4px)};
|
||||
--Tree-item-arrow-color: #84868c;
|
||||
--Tree-item-onChekced-bg: var(--select-tree-active-bg-color);
|
||||
--Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2);
|
||||
|
||||
--inputDate-default-top-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-default-top-border-width: var(--borders-width-2);
|
||||
--inputDate-default-top-border-style: var(--borders-style-2);
|
||||
--inputDate-default-right-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-default-right-border-width: var(--borders-width-2);
|
||||
--inputDate-default-right-border-style: var(--borders-style-2);
|
||||
--inputDate-default-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-default-bottom-border-width: var(--borders-width-2);
|
||||
--inputDate-default-bottom-border-style: var(--borders-style-2);
|
||||
--inputDate-default-left-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-default-left-border-width: var(--borders-width-2);
|
||||
--inputDate-default-left-border-style: var(--borders-style-2);
|
||||
--inputDate-default-top-right-border-radius: var(--borders-radius-3);
|
||||
--inputDate-default-top-left-border-radius: var(--borders-radius-3);
|
||||
--inputDate-default-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--inputDate-default-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--inputDate-default-paddingTop: var(--sizes-size-3);
|
||||
--inputDate-default-paddingBottom: var(--sizes-size-3);
|
||||
--inputDate-default-paddingLeft: var(--sizes-size-6);
|
||||
--inputDate-default-paddingRight: var(--sizes-base-6);
|
||||
--inputDate-default-fontSize: var(--fonts-size-7);
|
||||
--inputDate-default-fontWeight: var(--fonts-weight-6);
|
||||
--inputDate-default-height: var(--sizes-base-16);
|
||||
--inputDate-default-color: var(--colors-neutral-text-2);
|
||||
--inputDate-default-bg-color: var(--colors-neutral-fill-11);
|
||||
--inputDate-default-icon: '<svg viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1.338385, -2.000000)"><rect x="0" y="0" width="16" height="16"></rect><path d="M6,2 L6,3 L10,3 L10,2 L11,2 L11,3 L14,3 L14,14 L2,14 L2,3 L5,3 L5,2 L6,2 Z M13,7 L3,7 L3,13 L13,13 L13,7 Z M5,4 L3,4 L3,6 L13,6 L13,4 L11,4 L11,5 L10,5 L10,4 L6,4 L6,5 L5,5 L5,4 Z" fill="currentColor"></path></g></g></svg>';
|
||||
--inputDate-default-icon-color: var(--colors-brand-5);
|
||||
--inputDate-default-icon-size: var(--sizes-base-7);
|
||||
--inputDate-default-title-color: var(--colors-neutral-text-2);
|
||||
--inputDate-default-title-arrow-color: var(--colors-neutral-text-5);
|
||||
--inputDate-default-option-color: var(--colors-neutral-text-2);
|
||||
--inputDate-default-option-bg-color: var(--colors-neutral-fill-11);
|
||||
--inputDate-default-option-today-border-color: var(--colors-brand-5);
|
||||
--inputDate-default-option-top-right-border-radius: var(--borders-radius-2);
|
||||
--inputDate-default-option-top-left-border-radius: var(--borders-radius-2);
|
||||
--inputDate-default-option-bottom-right-border-radius: var(
|
||||
--borders-radius-2
|
||||
);
|
||||
--inputDate-default-option-bottom-left-border-radius: var(--borders-radius-2);
|
||||
--inputDate-hover-top-border-color: var(--colors-brand-5);
|
||||
--inputDate-hover-top-border-width: var(--borders-width-2);
|
||||
--inputDate-hover-top-border-style: var(--borders-style-2);
|
||||
--inputDate-hover-right-border-color: var(--colors-brand-5);
|
||||
--inputDate-hover-right-border-width: var(--borders-width-2);
|
||||
--inputDate-hover-right-border-style: var(--borders-style-2);
|
||||
--inputDate-hover-bottom-border-color: var(--colors-brand-5);
|
||||
--inputDate-hover-bottom-border-width: var(--borders-width-2);
|
||||
--inputDate-hover-bottom-border-style: var(--borders-style-2);
|
||||
--inputDate-hover-left-border-color: var(--colors-brand-5);
|
||||
--inputDate-hover-left-border-width: var(--borders-width-2);
|
||||
--inputDate-hover-left-border-style: var(--borders-style-2);
|
||||
--inputDate-hover-color: var(--colors-neutral-text-2);
|
||||
--inputDate-hover-bg-color: var(--colors-neutral-fill-11);
|
||||
--inputDate-hover-title-color: var(--colors-brand-6);
|
||||
--inputDate-hover-title-arrow-color: var(--colors-neutral-text-2);
|
||||
--inputDate-hover-option-color: var(--colors-neutral-text-2);
|
||||
--inputDate-hover-option-bg-color: var(--colors-neutral-fill-10);
|
||||
--inputDate-active-top-border-color: var(--colors-brand-5);
|
||||
--inputDate-active-top-border-width: var(--borders-width-2);
|
||||
--inputDate-active-top-border-style: var(--borders-style-2);
|
||||
--inputDate-active-right-border-color: var(--colors-brand-5);
|
||||
--inputDate-active-right-border-width: var(--borders-width-2);
|
||||
--inputDate-active-right-border-style: var(--borders-style-2);
|
||||
--inputDate-active-bottom-border-color: var(--colors-brand-5);
|
||||
--inputDate-active-bottom-border-width: var(--borders-width-2);
|
||||
--inputDate-active-bottom-border-style: var(--borders-style-2);
|
||||
--inputDate-active-left-border-color: var(--colors-brand-5);
|
||||
--inputDate-active-left-border-width: var(--borders-width-2);
|
||||
--inputDate-active-left-border-style: var(--borders-style-2);
|
||||
--inputDate-active-shadow: var(--shadows-shadow-none);
|
||||
--inputDate-active-color: var(--colors-neutral-text-2);
|
||||
--inputDate-active-bg-color: var(--colors-neutral-fill-11);
|
||||
--inputDate-active-option-color: var(--colors-neutral-text-11);
|
||||
--inputDate-active-option-bg-color: var(--colors-brand-5);
|
||||
--inputDate-disabled-top-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-disabled-top-border-width: var(--borders-width-2);
|
||||
--inputDate-disabled-top-border-style: var(--borders-style-2);
|
||||
--inputDate-disabled-right-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-disabled-right-border-width: var(--borders-width-2);
|
||||
--inputDate-disabled-right-border-style: var(--borders-style-2);
|
||||
--inputDate-disabled-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-disabled-bottom-border-width: var(--borders-width-2);
|
||||
--inputDate-disabled-bottom-border-style: var(--borders-style-2);
|
||||
--inputDate-disabled-left-border-color: var(--colors-neutral-line-8);
|
||||
--inputDate-disabled-left-border-width: var(--borders-width-2);
|
||||
--inputDate-disabled-left-border-style: var(--borders-style-2);
|
||||
--inputDate-disabled-color: var(--colors-neutral-text-2);
|
||||
--inputDate-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
--inputDate-disabled-option-color: var(--colors-neutral-text-6);
|
||||
--inputDate-disabled-option-bg-color: transparent;
|
||||
--inputDate-other-color: var(--colors-neutral-text-2);
|
||||
--inputDate-other-bg-color: transparent;
|
||||
--inputDate-other-top-right-border-radius: var(--borders-radius-2);
|
||||
--inputDate-other-top-left-border-radius: var(--borders-radius-2);
|
||||
--inputDate-other-bottom-right-border-radius: var(--borders-radius-2);
|
||||
--inputDate-other-bottom-left-border-radius: var(--borders-radius-2);
|
||||
--inputDate-other-hover-color: var(--colors-neutral-text-2);
|
||||
--inputDate-other-hover-bg-color: var(--colors-neutral-fill-10);
|
||||
--inputDate-other-active-color: var(--colors-neutral-text-11);
|
||||
--inputDate-other-active-bg-color: var(--colors-brand-5);
|
||||
--inputDate-other-disabled-color: var(--colors-neutral-text-6);
|
||||
--inputDate-other-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
--inputDate-range-line-height: var(--borders-width-3);
|
||||
--inputDate-range-line-color: var(--colors-brand-4);
|
||||
--inputDate-range-separator-width: var(--sizes-size-5);
|
||||
--inputDate-range-separator-margin: var(--sizes-size-5);
|
||||
--inputDate-range-separator-color: var(--colors-neutral-fill-6);
|
||||
--inputDate-range-between-color: var(--colors-brand-10);
|
||||
|
||||
--DatePicker-bg: var(--inputDate-default-bg-color);
|
||||
--DatePicker-borderColor: var(--inputDate-default-top-border-color)
|
||||
var(--inputDate-default-right-border-color)
|
||||
var(--inputDate-default-bottom-border-color)
|
||||
var(--inputDate-default-left-border-color);
|
||||
--DatePicker-borderStyle: var(--inputDate-default-top-border-style)
|
||||
var(--inputDate-default-right-border-style)
|
||||
var(--inputDate-default-bottom-border-style)
|
||||
var(--inputDate-default-left-border-style);
|
||||
--DatePicker-borderWidth: var(--inputDate-default-top-border-width)
|
||||
var(--inputDate-default-right-border-width)
|
||||
var(--inputDate-default-bottom-border-width)
|
||||
var(--inputDate-default-left-border-width);
|
||||
--DatePicker-borderRadius: var(--inputDate-default-top-left-border-radius)
|
||||
var(--inputDate-default-top-right-border-radius)
|
||||
var(--inputDate-default-bottom-right-border-radius)
|
||||
var(--inputDate-default-bottom-left-border-radius);
|
||||
--DatePicker-color: var(--inputDate-default-color);
|
||||
--DatePicker-header-onHover-color: var(--inputDate-hover-title-color);
|
||||
--DatePicker-arrow-color: var(--inputDate-default-title-arrow-color);
|
||||
--DatePicker-fontSize: var(--inputDate-default-fontSize);
|
||||
--DatePicker-header-select-borderColor: #fff;
|
||||
--DatePicker-height: var(--inputDate-default-height);
|
||||
--DatePicker-iconColor: var(--icon-color);
|
||||
--DatePicker-lineHeight: var(--Form-input-lineHeight);
|
||||
--DatePicker-onFocused-borderColor: var(--inputDate-active-top-border-color)
|
||||
var(--inputDate-active-right-border-color)
|
||||
var(--inputDate-active-bottom-border-color)
|
||||
var(--inputDate-active-left-border-color);
|
||||
--DatePicker-onHover-bg: var(--inputDate-hover-bg-color);
|
||||
--DatePicker-onHover-borderColor: var(--inputDate-hover-top-border-color)
|
||||
var(--inputDate-hover-right-border-color)
|
||||
var(--inputDate-hover-bottom-border-color)
|
||||
var(--inputDate-hover-left-border-color);
|
||||
--DatePicker-onDisabled-bg: var(--colors-neutral-text-9);
|
||||
--DatePicker-onDisabled-color: var(--colors-neutral-text-6);
|
||||
--DatePicker-onHover-iconColor: var(--colors-brand-5);
|
||||
--DatePicker-paddingX: #{px2rem(12px)};
|
||||
--DatePicker-paddingY: var(--sizes-size-3);
|
||||
--DatePicker-placeholderColor: var(--colors-neutral-text-6);
|
||||
--DatePicker-minWidth: calc(
|
||||
var(--fontSizeLg) * 5 + var(--DatePicker-paddingX) * 2 +
|
||||
var(--Form-input-clearBtn-size) * 2
|
||||
);
|
||||
--DateRangePicker-minWidth: calc(
|
||||
var(--fontSizeLg) * 8 + var(--DatePicker-paddingX) * 2 +
|
||||
var(--Form-input-clearBtn-size) * 2
|
||||
);
|
||||
--DateRangePicker-activeCursor-color: var(--inputDate-range-line-color);
|
||||
--DateRangePicker-activeCursor-height: var(--inputDate-range-line-height);
|
||||
--Calendar-btn-bg: var(--info);
|
||||
--Calendar-btn-border: var(--Calendar-btn-bg);
|
||||
--Calendar-btn-borderRadius: var(--Button-borderRadius);
|
||||
--Calendar-btn-color: var(--colors-neutral-fill-11);
|
||||
--Calendar-btn-fontSize: var(--fontSizeSm);
|
||||
--Calendar-btn-height: #{px2rem(30px)};
|
||||
--Calendar-btn-lineHeight: var(--lineHeightBase);
|
||||
--Calendar-btn-onActive-bg: var(--colors-brand-4);
|
||||
--Calendar-btn-onActive-border: var(--colors-brand-3);
|
||||
--Calendar-btn-onActive-color: var(--Calendar-btn-color);
|
||||
--Calendar-btn-onHover-bg: var(--colors-brand-4);
|
||||
--Calendar-btn-onHover-border: var(--colors-brand-3);
|
||||
--Calendar-btn-onHover-color: var(--Calendar-btn-color);
|
||||
--Calendar-btn-paddingX: #{px2rem(10px)};
|
||||
--Calendar-btn-paddingY: calc(
|
||||
(
|
||||
var(--Calendar-btn-height) - var(--Calendar-btn-lineHeight) *
|
||||
var(--Calendar-btn-fontSize)
|
||||
) / 2
|
||||
);
|
||||
--Calendar-btnCancel-bg: var(--light);
|
||||
--Calendar-btnCancel-border: var(--colors-neutral-line-7);
|
||||
--Calendar-btnCancel-borderRadius: var(--borders-radius-3);
|
||||
--Calendar-btnCancel-color: var(--text-color);
|
||||
--Calendar-btnCancel-onActive-bg: var(--colors-neutral-fill-11);
|
||||
--Calendar-btnCancel-onActive-border: var(--colors-brand-4);
|
||||
--Calendar-btnCancel-onActive-color: var(--colors-brand-4);
|
||||
--Calendar-btnCancel-onHover-bg: var(--colors-neutral-fill-11);
|
||||
--Calendar-btnCancel-onHover-border: var(--colors-brand-6);
|
||||
--Calendar-btnCancel-onHover-color: var(--colors-brand-6);
|
||||
--Calendar-cell-bg: var(--inputDate-default-option-bg-color);
|
||||
--Calendar-cell-onActive-bg: var(--inputDate-active-option-bg-color);
|
||||
--Calendar-cell-onBetween-bg: var(--inputDate-range-between-color);
|
||||
--Calendar-cell-onDisabled-bg: var(--inputDate-other-disabled-bg-color);
|
||||
--Calendar-cell-onHover-bg: var(--inputDate-hover-option-bg-color);
|
||||
--Calendar-color: var(--inputDate-default-option-color);
|
||||
--Calendar-fontSize: var(--fontSizeSm);
|
||||
--Calendar-input-borderColor: var(--borderColor);
|
||||
--Calendar-input-borderRadius: var(--borders-radius-3);
|
||||
--Calendar-input-color: var(--info);
|
||||
--Calendar-input-fontSize: var(--fontSizeBase);
|
||||
--Calendar-input-height: #{px2rem(40px)};
|
||||
--Calendar-input-lineHeight: var(--lineHeightBase);
|
||||
--Calendar-input-onFocused-borderColor: var(--info);
|
||||
--Calendar-input-paddingX: #{px2rem(10px)};
|
||||
--Calendar-input-paddingY: calc(
|
||||
(
|
||||
var(--Calendar-input-height) - var(--Calendar-input-lineHeight) *
|
||||
var(--Calendar-input-fontSize)
|
||||
) / 2
|
||||
);
|
||||
--Calendar-shortcut-color: #151b26;
|
||||
--Calendar-shortcut-decoration: none;
|
||||
--Calendar-shortcut-onHover-color: var(--colors-brand-6);
|
||||
--Calendar-shortcut-onHover-decoration: none;
|
||||
--Calendar-shortcuts-bg: var(--colors-neutral-text-9);
|
||||
--Calendar-shortcuts-height: var(--sizes-size-9);
|
||||
--Calendar-wLabel-color: var(--colors-neutral-text-6);
|
||||
--Calendar-icon-bottom: #{px2rem(-4px)};
|
||||
--Calendar-icon-width: var(--sizes-size-6);
|
||||
--Calendar-icon-height: var(--sizes-size-6);
|
||||
--Calendar-borderWidth: var(--borders-width-2);
|
||||
--Calendar-borderColor: var(--inputDate-default-option-today-border-color);
|
||||
--Calendar-rdt-day: var(--sizes-base-49);
|
||||
--Calendar-schedule-content-padding: 0 var(--sizes-size-3);
|
||||
--Calendar-schedule-content-height: var(--sizes-base-10);
|
||||
--Calendar-schedule-content-color: var(--colors-neutral-text-11);
|
||||
|
||||
--inputTime-default-icon: '<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="currentColor" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="currentColor" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>';
|
||||
--inputTime-default-fontSize: var(--fonts-size-8);
|
||||
--inputTime-default-fontWeight: var(--fonts-weight-6);
|
||||
--inputTime-default-color: var(--colors-neutral-text-2);
|
||||
--inputTime-default-bg-color: var(--colors-neutral-text-11);
|
||||
--inputTime-hover-color: var(--colors-neutral-text-2);
|
||||
--inputTime-hover-bg-color: var(--colors-neutral-fill-10);
|
||||
--inputTime-active-color: var(--colors-neutral-text-2);
|
||||
--inputTime-active-bg-color: var(--colors-brand-10);
|
||||
}
|
||||
|
||||
@ -210,75 +210,6 @@ $remFactor: 16px;
|
||||
);
|
||||
--Breadcrumb-item-disabled-color: var(--colors-neutral-text-6);
|
||||
|
||||
--Calendar-btn-bg: var(--info);
|
||||
--Calendar-btn-border: var(--Calendar-btn-bg);
|
||||
--Calendar-btn-borderRadius: var(--Button-borderRadius);
|
||||
--Calendar-btn-color: var(--colors-neutral-fill-11);
|
||||
--Calendar-btn-fontSize: var(--fontSizeSm);
|
||||
--Calendar-btn-height: #{px2rem(30px)};
|
||||
--Calendar-btn-lineHeight: var(--lineHeightBase);
|
||||
--Calendar-btn-onActive-bg: var(--colors-brand-4);
|
||||
--Calendar-btn-onActive-border: var(--colors-brand-3);
|
||||
--Calendar-btn-onActive-color: var(--Calendar-btn-color);
|
||||
--Calendar-btn-onHover-bg: var(--colors-brand-4);
|
||||
--Calendar-btn-onHover-border: var(--colors-brand-3);
|
||||
--Calendar-btn-onHover-color: var(--Calendar-btn-color);
|
||||
--Calendar-btn-paddingX: #{px2rem(10px)};
|
||||
--Calendar-btn-paddingY: calc(
|
||||
(
|
||||
var(--Calendar-btn-height) - var(--Calendar-btn-lineHeight) *
|
||||
var(--Calendar-btn-fontSize)
|
||||
) / 2
|
||||
);
|
||||
--Calendar-btnCancel-bg: var(--light);
|
||||
--Calendar-btnCancel-border: var(--colors-neutral-line-7);
|
||||
--Calendar-btnCancel-borderRadius: var(--borders-radius-3);
|
||||
--Calendar-btnCancel-color: var(--text-color);
|
||||
--Calendar-btnCancel-onActive-bg: var(--colors-neutral-fill-11);
|
||||
--Calendar-btnCancel-onActive-border: var(--colors-brand-4);
|
||||
--Calendar-btnCancel-onActive-color: var(--colors-brand-4);
|
||||
--Calendar-btnCancel-onHover-bg: var(--colors-neutral-fill-11);
|
||||
--Calendar-btnCancel-onHover-border: var(--colors-brand-6);
|
||||
--Calendar-btnCancel-onHover-color: var(--colors-brand-6);
|
||||
--Calendar-cell-bg: var(--colors-neutral-fill-11);
|
||||
--Calendar-cell-onActive-bg: var(--info);
|
||||
--Calendar-cell-onBetween-bg: #{rgba($info, 0.1)};
|
||||
--Calendar-cell-onDisabled-bg: #f7f7f9;
|
||||
--Calendar-cell-onHover-bg: #f7f7f9;
|
||||
--Calendar-color: #151b26;
|
||||
--Calendar-fontSize: var(--fontSizeSm);
|
||||
--Calendar-input-borderColor: var(--borderColor);
|
||||
--Calendar-input-borderRadius: var(--borders-radius-3);
|
||||
--Calendar-input-color: var(--info);
|
||||
--Calendar-input-fontSize: var(--fontSizeBase);
|
||||
--Calendar-input-height: #{px2rem(40px)};
|
||||
--Calendar-input-lineHeight: var(--lineHeightBase);
|
||||
--Calendar-input-onFocused-borderColor: var(--info);
|
||||
--Calendar-input-paddingX: #{px2rem(10px)};
|
||||
--Calendar-input-paddingY: calc(
|
||||
(
|
||||
var(--Calendar-input-height) - var(--Calendar-input-lineHeight) *
|
||||
var(--Calendar-input-fontSize)
|
||||
) / 2
|
||||
);
|
||||
--Calendar-shortcut-color: #151b26;
|
||||
--Calendar-shortcut-decoration: none;
|
||||
--Calendar-shortcut-onHover-color: var(--colors-brand-6);
|
||||
--Calendar-shortcut-onHover-decoration: none;
|
||||
--Calendar-shortcuts-bg: var(--colors-neutral-text-9);
|
||||
--Calendar-shortcuts-height: var(--sizes-size-9);
|
||||
--Calendar-wLabel-color: var(--colors-neutral-text-6);
|
||||
|
||||
--Calendar-icon-bottom: #{px2rem(-4px)};
|
||||
--Calendar-icon-width: var(--sizes-size-6);
|
||||
--Calendar-icon-height: var(--sizes-size-6);
|
||||
--Calendar-borderWidth: var(--borders-width-2);
|
||||
--Calendar-borderColor: var(--colors-brand-5);
|
||||
--Calendar-rdt-day: var(--sizes-base-49);
|
||||
--Calendar-schedule-content-padding: 0 var(--sizes-size-3);
|
||||
--Calendar-schedule-content-height: var(--sizes-base-10);
|
||||
--Calendar-schedule-content-color: var(--colors-neutral-text-11);
|
||||
|
||||
--Card-actions-borderColor: var(--colors-neutral-line-10);
|
||||
--Card-actions-fontSize: var(--fonts-size-8);
|
||||
--Card-actions-onChecked-onHover-bg: var(--colors-neutral-fill-11);
|
||||
@ -393,43 +324,6 @@ $remFactor: 16px;
|
||||
--Crud-toolbar-height: #{px2rem(30px)};
|
||||
--Crud-toolbar-lineHeight: var(--lineHeightBase);
|
||||
|
||||
--DatePicker-bg: var(--colors-neutral-fill-11);
|
||||
--DatePicker-borderColor: var(--Form-input-borderColor);
|
||||
--DatePicker-borderRadius: var(--borders-radius-3);
|
||||
--DatePicker-borderWidth: var(--borders-width-2);
|
||||
--DatePicker-color: var(--colors-neutral-text-2);
|
||||
--DatePicker-header-onHover-color: var(--colors-brand-6);
|
||||
--DatePicker-arrow-color: #84868c;
|
||||
--DatePicker-fontSize: var(--fontSizeSm);
|
||||
--DatePicker-header-select-borderColor: #fff;
|
||||
--DatePicker-height: var(--Form-input-height);
|
||||
--DatePicker-iconColor: var(--icon-color);
|
||||
--DatePicker-lineHeight: var(--Form-input-lineHeight);
|
||||
--DatePicker-onFocused-borderColor: var(--colors-brand-4);
|
||||
--DatePicker-onHover-bg: var(--colors-neutral-fill-11);
|
||||
--DatePicker-onHover-borderColor: var(--colors-brand-5);
|
||||
--DatePicker-onDisabled-bg: var(--colors-neutral-text-9);
|
||||
--DatePicker-onDisabled-color: var(--colors-neutral-text-6);
|
||||
--DatePicker-onHover-iconColor: var(--colors-brand-5);
|
||||
--DatePicker-paddingX: #{px2rem(12px)};
|
||||
--DatePicker-paddingY: calc(
|
||||
(
|
||||
var(--DatePicker-height) - var(--DatePicker-lineHeight) *
|
||||
var(--DatePicker-fontSize)
|
||||
) / 2 - var(--DatePicker-borderWidth)
|
||||
);
|
||||
--DatePicker-placeholderColor: var(--colors-neutral-text-6);
|
||||
--DatePicker-minWidth: calc(
|
||||
var(--fontSizeLg) * 5 + var(--DatePicker-paddingX) * 2 +
|
||||
var(--Form-input-clearBtn-size) * 2
|
||||
);
|
||||
--DateRangePicker-minWidth: calc(
|
||||
var(--fontSizeLg) * 8 + var(--DatePicker-paddingX) * 2 +
|
||||
var(--Form-input-clearBtn-size) * 2
|
||||
);
|
||||
--DateRangePicker-activeCursor-color: var(--colors-brand-4);
|
||||
--DateRangePicker-activeCursor-height: 2px;
|
||||
|
||||
--LocationPicker-borderRadius: var(--borders-radius-3);
|
||||
|
||||
--Drawer-bg: var(--background);
|
||||
@ -555,66 +449,6 @@ $remFactor: 16px;
|
||||
);
|
||||
--Form-row-gutterWidth: #{px2rem(10px)};
|
||||
|
||||
--Form-select-bg: var(--colors-neutral-fill-11);
|
||||
--Form-select-height: var(--Form-select-outer-top);
|
||||
--Form-select-borderColor: var(--Form-input-borderColor);
|
||||
--Form-select-borderRadius: var(--borders-radius-3);
|
||||
--Form-select-borderWidth: var(--borders-width-2);
|
||||
--Form-select-caret-iconColor: var(--colors-neutral-text-5);
|
||||
--Form-select-caret-onHover-iconColor: var(--colors-neutral-text-5);
|
||||
--Form-select-caret-fontSize: var(--fonts-size-8);
|
||||
--Form-select-checkall-bottomBorder: #eceff8;
|
||||
--Form-select-color: var(--colors-neutral-text-2);
|
||||
--Form-select-input-fontSize: var(--fontSizeSm);
|
||||
--Form-select-menu-bg: var(--colors-neutral-fill-11);
|
||||
--Form-select-menu-color: var(--colors-neutral-text-2);
|
||||
--Form-select-menu-height: var(--sizes-base-12);
|
||||
--Form-select-menu-onActive-bg: transparent;
|
||||
--Form-select-menu-onActive-color: var(--colors-brand-5);
|
||||
--Form-select-menu-onDisabled-bg: transparent;
|
||||
--Form-select-menu-onDisabled-color: var(--text--muted-color);
|
||||
--Form-select-menu-onHover-bg: var(--colors-brand-10);
|
||||
--Form-select-menu-onHover-color: var(--colors-neutral-text-2);
|
||||
--Form-select-group-color: var(--Form-select-caret-iconColor);
|
||||
--Form-select-onError-borderColor: var(--Form-input-onError-borderColor);
|
||||
--Form-select-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
|
||||
--Form-select-onFocused-color: var(--Form-select-color);
|
||||
--Form-select-onHover-bg: var(--colors-neutral-fill-11);
|
||||
--Form-select-onHover-borderColor: var(--colors-brand-5);
|
||||
--Form-select-outer-borderWidth: var(--borders-width-1);
|
||||
--Form-select-outer-top: var(--sizes-base-16);
|
||||
--Form-select-outer-boxShadow: var(--shadows-shadow-normal);
|
||||
--Form-select-paddingX: var(--Form-input-paddingX);
|
||||
--Form-select-placeholderColor: var(--Form-input-placeholderColor);
|
||||
--Form-select-popoverGap: var(--borders-radius-3);
|
||||
--Form-select-icon-rigin: var(--sizes-size-9);
|
||||
--Form-select-search-height: var(--sizes-base-15);
|
||||
--Form-select-value-bgColor: var(--Form-input-onDisabled-bg);
|
||||
--Form-select-value-bgColor--dark: var(--colors-neutral-fill-4);
|
||||
--Form-select-value-borderColor: var(--colors-neutral-line-9);
|
||||
--Form-select-valueIcon-color: var(--colors-neutral-text-4);
|
||||
--Form-select-valueIcon-color--dark: var(--colors-neutral-text-8);
|
||||
--Form-select-valueIcon-onHover-color: var(--Form-select-color);
|
||||
--Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
|
||||
--Form-selectOption-height: var(--Form-select-height);
|
||||
--Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
|
||||
--Form-selectValue-onHover-bgColor: var(--Form-select-borderColor);
|
||||
--Form-selectValue-borderColor: var(--colors-brand-7);
|
||||
--Form-selectValue-color: var(--colors-brand-5);
|
||||
--Form-selectValue-fontSize: var(--fontSizeSm);
|
||||
--Form-selectValue-onDisable-bg: #{lighten(
|
||||
saturate(lighten($info, 40%), 2.5%),
|
||||
5%
|
||||
)};
|
||||
--Form-selectValue-onHover-bg: #{darken(
|
||||
saturate(lighten($info, 40%), 2.5%),
|
||||
5%
|
||||
)};
|
||||
--Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
|
||||
--Form-selectValue-onInvalid-color: var(--danger);
|
||||
--Form-valueLabel-maxWidth: #{px2rem(120px)};
|
||||
--Form-select-onFocus-boxShadow: none;
|
||||
|
||||
--IconPicker-content-maxHeight: #{px2rem(350px)};
|
||||
--IconPicker-padding: var(--gap-xs);
|
||||
--IconPicker-selectedIcon-marginRight: var(--gap-xs);
|
||||
@ -647,10 +481,10 @@ $remFactor: 16px;
|
||||
);
|
||||
--InputGroup-select-arrowColor: var(--colors-neutral-text-5);
|
||||
--InputGroup-select-bg: var(--colors-neutral-fill-11);
|
||||
--InputGroup-select-borderColor: var(--Form-select-borderColor);
|
||||
--InputGroup-select-borderRadius: var(--Form-select-borderRadius);
|
||||
--InputGroup-select-borderColor: var(--borderColor);
|
||||
--InputGroup-select-borderRadius: var(--borders-radius-3);
|
||||
--InputGroup-select-borderWidth: var(--borders-width-2);
|
||||
--InputGroup-select-color: var(--Form-select-color);
|
||||
--InputGroup-select-color: var(--colors-neutral-text-2);
|
||||
--InputGroup-select-onFocused-arrowColor: var(--colors-brand-5);
|
||||
--InputGroup-select-onFocused-bg: var(--colors-brand-10);
|
||||
--InputGroup-select-onFocused-color: var(--colors-brand-5);
|
||||
@ -945,19 +779,6 @@ $remFactor: 16px;
|
||||
--Remark-onHover-iconColor: var(--colors-neutral-text-11);
|
||||
--Remark-width: var(--sizes-size-9);
|
||||
|
||||
--ResultBox-tag-height: #{px2rem(24px)};
|
||||
--ResultBox-tag-marginBottom: #{px2rem(2px)};
|
||||
--ResultBox-icon--onDisabled-color: #ebebeb;
|
||||
--ResultBox-icon--onHover-color: #666666;
|
||||
--ResultBox-icon-color: var(--colors-neutral-text-6);
|
||||
--ResultBox-value--onDisabled-color: #cccccc;
|
||||
--ResultBox-value--onHover-bg: rgba(0, 145, 255, 0.1);
|
||||
--ResultBox-value--onHover-bg--dark: #b8babf;
|
||||
--ResultBox-value-bg: var(--colors-neutral-fill-10);
|
||||
--ResultBox-value-color: #000;
|
||||
--ResultBox-value-clear-bg: var(--colors-neutral-fill-8);
|
||||
--ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9);
|
||||
|
||||
--Satus-icon-width: var(--sizes-size-8);
|
||||
--Satus-icon-height: var(--Satus-icon-width);
|
||||
|
||||
@ -1184,23 +1005,6 @@ $remFactor: 16px;
|
||||
--TabsTransfer-title-bg: #f7f7f9;
|
||||
--TabsTransfer-border-color: #e8e9eb;
|
||||
|
||||
--Tree-indent: var(--gap-md);
|
||||
--Tree-icon-gap: var(--sizes-size-5);
|
||||
--Tree-icon-margin-right: #{px2rem(8px)};
|
||||
--Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
|
||||
--Tree-item-onHover-bg: var(--colors-neutral-fill-10);
|
||||
--Tree-item-onHover-bg-pure: var(--colors-neutral-fill-10);
|
||||
--Tree-itemArrowWidth: #{px2rem(16px)};
|
||||
--Tree-itemHeight: var(--sizes-base-12);
|
||||
--Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
|
||||
--TreeSelect-popover-bg: var(--colors-neutral-fill-11);
|
||||
--Tree-item-text-max-height: #{px2rem(250px)};
|
||||
--Tree-item-text-top: #{px2rem(4px)};
|
||||
--Tree-item-arrow-padding-left: #{px2rem(4px)};
|
||||
--Tree-item-arrow-color: #84868c;
|
||||
--Tree-item-onChekced-bg: var(--colors-brand-10);
|
||||
--Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2);
|
||||
|
||||
--Wizard-badge-bg: var(--colors-neutral-fill-11);
|
||||
--Wizard-badge-border: var(--borders-width-2) var(--borders-style-2)
|
||||
var(--colors-neutral-fill-6);
|
||||
|
||||
@ -7,6 +7,22 @@
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
color: var(--Form-select-color);
|
||||
font-size: var(--select-base-default-fontSize);
|
||||
font-weight: var(--select-base-default-fontWeight);
|
||||
border-width: var(--Form-select-borderWidth);
|
||||
border-style: var(--select-base-default-top-border-style)
|
||||
var(--select-base-default-right-border-style)
|
||||
var(--select-base-default-bottom-border-style)
|
||||
var(--select-base-default-left-border-style);
|
||||
border-color: var(--Form-select-borderColor);
|
||||
background: var(--Form-select-bg);
|
||||
border-radius: var(--Form-select-borderRadius);
|
||||
min-height: var(--Form-selectOption-height);
|
||||
padding: var(--select-base-default-paddingTop)
|
||||
var(--select-base-default-paddingRight)
|
||||
var(--select-base-default-paddingBottom)
|
||||
var(--select-base-default-paddingLeft);
|
||||
|
||||
&.is-error {
|
||||
border-color: var(--Form-input-onError-borderColor);
|
||||
@ -14,21 +30,58 @@
|
||||
}
|
||||
|
||||
&.is-focused,
|
||||
&.is-active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--Form-input-onFocused-borderColor);
|
||||
box-shadow: var(--Form-input-boxShadow);
|
||||
background: var(--Form-input-onFocused-bg);
|
||||
background: var(--Form-select-onHover-bg);
|
||||
border-width: var(--select-base-hover-top-border-width)
|
||||
var(--select-base-hover-right-border-width)
|
||||
var(--select-base-hover-bottom-border-width)
|
||||
var(--select-base-hover-left-border-width);
|
||||
border-style: var(--select-base-hover-top-border-style)
|
||||
var(--select-base-hover-right-border-style)
|
||||
var(--select-base-hover-bottom-border-style)
|
||||
var(--select-base-hover-left-border-style);
|
||||
border-color: var(--select-base-hover-top-border-color)
|
||||
var(--select-base-hover-right-border-color)
|
||||
var(--select-base-hover-bottom-border-color)
|
||||
var(--select-base-hover-left-border-color);
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-opened {
|
||||
border-width: var(--select-base-active-top-border-width)
|
||||
var(--select-base-active-right-border-width)
|
||||
var(--select-base-active-bottom-border-width)
|
||||
var(--select-base-active-left-border-width);
|
||||
border-style: var(--select-base-active-top-border-style)
|
||||
var(--select-base-active-right-border-style)
|
||||
var(--select-base-active-bottom-border-style)
|
||||
var(--select-base-active-left-border-style);
|
||||
border-color: var(--select-base-active-top-border-color)
|
||||
var(--select-base-active-right-border-color)
|
||||
var(--select-base-active-bottom-border-color)
|
||||
var(--select-base-active-left-border-color);
|
||||
box-shadow: var(--select-base-active-shadow);
|
||||
background: var(--select-base-active-bg-color);
|
||||
}
|
||||
|
||||
&.is-clickable:not(.is-disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--Form-input-onFocused-borderColor);
|
||||
box-shadow: var(--Form-input-boxShadow);
|
||||
background: var(--Form-input-onFocused-bg);
|
||||
background: var(--Form-select-onHover-bg);
|
||||
border-width: var(--select-base-hover-top-border-width)
|
||||
var(--select-base-hover-right-border-width)
|
||||
var(--select-base-hover-bottom-border-width)
|
||||
var(--select-base-hover-left-border-width);
|
||||
border-style: var(--select-base-hover-top-border-style)
|
||||
var(--select-base-hover-right-border-style)
|
||||
var(--select-base-hover-bottom-border-style)
|
||||
var(--select-base-hover-left-border-style);
|
||||
border-color: var(--select-base-hover-top-border-color)
|
||||
var(--select-base-hover-right-border-color)
|
||||
var(--select-base-hover-bottom-border-color)
|
||||
var(--select-base-hover-left-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,10 +91,20 @@
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--text--muted-color);
|
||||
background: var(--Form-input-onDisabled-bg);
|
||||
border-color: var(--Form-input-onDisabled-borderColor);
|
||||
pointer-events: none;
|
||||
background: var(--TabsTransfer-title-bg);
|
||||
border-width: var(--select-base-disabled-top-border-width)
|
||||
var(--select-base-disabled-right-border-width)
|
||||
var(--select-base-disabled-bottom-border-width)
|
||||
var(--select-base-disabled-left-border-width);
|
||||
border-style: var(--select-base-disabled-top-border-style)
|
||||
var(--select-base-disabled-right-border-style)
|
||||
var(--select-base-disabled-bottom-border-style)
|
||||
var(--select-base-disabled-left-border-style);
|
||||
border-color: var(--select-base-disabled-top-border-color)
|
||||
var(--select-base-disabled-right-border-color)
|
||||
var(--select-base-disabled-bottom-border-color)
|
||||
var(--select-base-disabled-left-border-color);
|
||||
background: var(--select-base-disabled-bg-color);
|
||||
|
||||
div.#{$ns}ResultBox-value {
|
||||
background: var(--TabsTransfer-border-color);
|
||||
@ -137,16 +200,21 @@
|
||||
&-value {
|
||||
background: var(--ResultBox-value-bg);
|
||||
color: var(--ResultBox-value-color);
|
||||
font-size: var(--Form-input-fontSize);
|
||||
padding: 0 var(--gap-xs);
|
||||
font-size: var(--select-multiple-fontSize);
|
||||
min-height: var(--ResultBox-tag-height);
|
||||
flex-wrap: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: var(--gap-xs);
|
||||
margin-bottom: var(--ResultBox-tag-marginBottom);
|
||||
padding: var(--select-multiple-paddingTop)
|
||||
var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
|
||||
var(--select-multiple-paddingLeft);
|
||||
margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight)
|
||||
var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft);
|
||||
user-select: none;
|
||||
border-radius: #{px2rem(2px)};
|
||||
border-radius: var(--select-multiple-top-left-border-radius)
|
||||
var(--select-multiple-top-right-border-radius)
|
||||
var(--select-multiple-bottom-right-border-radius)
|
||||
var(--select-multiple-bottom-left-border-radius);
|
||||
|
||||
> a {
|
||||
cursor: pointer;
|
||||
@ -197,8 +265,6 @@
|
||||
}
|
||||
|
||||
&.#{$ns}TransferDropDown {
|
||||
padding: 0 var(--gap-base);
|
||||
|
||||
&.is-group {
|
||||
> .#{$ns}TransferDropDown-icon {
|
||||
margin-right: var(--gap-sm);
|
||||
|
||||
@ -2,9 +2,12 @@
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
|
||||
border-width: var(--DatePicker-borderWidth);
|
||||
border-style: var(--DatePicker-borderStyle);
|
||||
border-color: var(--DatePicker-borderColor);
|
||||
font-size: var(--DatePicker-fontSize);
|
||||
padding: 0 var(--DatePicker-paddingX);
|
||||
padding: 0 var(--inputDate-default-paddingRight) 0
|
||||
var(--inputDate-default-paddingLeft);
|
||||
height: var(--DatePicker-height);
|
||||
outline: none;
|
||||
border-radius: var(--DatePicker-borderRadius);
|
||||
@ -20,6 +23,18 @@
|
||||
&:hover {
|
||||
background: var(--DatePicker-onHover-bg);
|
||||
border-color: var(--DatePicker-onHover-borderColor);
|
||||
border-style: var(--inputDate-hover-top-border-style)
|
||||
var(--inputDate-hover-right-border-style)
|
||||
var(--inputDate-hover-bottom-border-style)
|
||||
var(--inputDate-hover-left-border-style);
|
||||
border-width: var(--inputDate-hover-top-border-width)
|
||||
var(--inputDate-hover-right-border-width)
|
||||
var(--inputDate-hover-bottom-border-width)
|
||||
var(--inputDate-hover-left-border-width);
|
||||
|
||||
.#{$ns}DateRangePicker-input {
|
||||
color: var(--inputDate-hover-color);
|
||||
}
|
||||
|
||||
.#{$ns}DateRangePicker-clear {
|
||||
display: flex;
|
||||
@ -31,21 +46,36 @@
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
background: var(--inputDate-active-bg-color);
|
||||
border-color: var(--DatePicker-onFocused-borderColor);
|
||||
box-shadow: var(--Form-input-boxShadow);
|
||||
box-shadow: var(--inputDate-active-shadow);
|
||||
border-style: var(--inputDate-active-top-border-style)
|
||||
var(--inputDate-active-right-border-style)
|
||||
var(--inputDate-active-bottom-border-style)
|
||||
var(--inputDate-active-left-border-style);
|
||||
border-width: var(--inputDate-active-top-border-width)
|
||||
var(--inputDate-active-right-border-width)
|
||||
var(--inputDate-active-bottom-border-width)
|
||||
var(--inputDate-active-left-border-width);
|
||||
|
||||
.#{$ns}DateRangePicker-input {
|
||||
color: var(--inputDate-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}DateRangePicker-input {
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-bottom: var(--DateRangePicker-activeCursor-height) solid transparent;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
background: 0;
|
||||
flex: 1;
|
||||
width: 50%;
|
||||
line-height: px2rem(30px);
|
||||
font-size: var(--fonts-size-7);
|
||||
font-size: var(--DatePicker-fontSize);
|
||||
font-weight: var(--inputDate-default-fontWeight);
|
||||
color: var(--inputDate-default-color);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--colors-neutral-text-6);
|
||||
@ -58,22 +88,34 @@
|
||||
}
|
||||
|
||||
.#{$ns}DateRangePicker-input-separator {
|
||||
margin: 0 var(--gap-sm);
|
||||
margin: 0 var(--inputDate-range-separator-margin);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-line {
|
||||
width: var(--gap-sm);
|
||||
width: var(--inputDate-range-separator-width);
|
||||
height: 1px;
|
||||
background: #b8babf;
|
||||
background: var(--inputDate-range-separator-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background: $gray200;
|
||||
background: var(--inputDate-disabled-bg-color);
|
||||
border-width: var(--inputDate-disabled-top-border-width)
|
||||
var(--inputDate-disabled-right-border-width)
|
||||
var(--inputDate-disabled-bottom-border-width)
|
||||
var(--inputDate-disabled-left-border-width);
|
||||
border-style: var(--inputDate-disabled-top-border-style)
|
||||
var(--inputDate-disabled-right-border-style)
|
||||
var(--inputDate-disabled-bottom-border-style)
|
||||
var(--inputDate-disabled-left-border-style);
|
||||
border-color: var(--inputDate-disabled-top-border-color)
|
||||
var(--inputDate-disabled-right-border-color)
|
||||
var(--inputDate-disabled-bottom-border-color)
|
||||
var(--inputDate-disabled-left-border-color);
|
||||
|
||||
> .#{$ns}DateRangePicker-input {
|
||||
color: var(--text--muted-color);
|
||||
color: var(--inputDate-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,11 +136,29 @@
|
||||
&-toggler {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
|
||||
svg {
|
||||
color: var(--inputDate-default-icon-color);
|
||||
width: var(--inputDate-default-icon-size);
|
||||
height: var(--inputDate-default-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.DatePicker-toggler-clock {
|
||||
content: var(--inputTime-default-icon);
|
||||
}
|
||||
|
||||
.DatePicker-toggler-date {
|
||||
content: var(--inputDate-default-icon);
|
||||
}
|
||||
|
||||
&-clear {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
svg {
|
||||
width: var(--inputDate-default-icon-size);
|
||||
height: var(--inputDate-default-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
&-activeCursor {
|
||||
@ -203,7 +263,9 @@
|
||||
|
||||
.#{$ns}DateRangeCalendar {
|
||||
display: inline-block;
|
||||
border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
|
||||
border-width: var(--DatePicker-borderWidth);
|
||||
border-style: var(--DatePicker-borderStyle);
|
||||
border-color: var(--DatePicker-borderColor);
|
||||
background: var(--DatePicker-bg);
|
||||
border-radius: var(--DatePicker-borderRadius);
|
||||
}
|
||||
|
||||
@ -2,9 +2,13 @@
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
|
||||
border-width: var(--DatePicker-borderWidth);
|
||||
border-style: var(--DatePicker-borderStyle);
|
||||
border-color: var(--DatePicker-borderColor);
|
||||
font-size: var(--DatePicker-fontSize);
|
||||
padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
|
||||
padding: var(--inputDate-default-paddingTop)
|
||||
var(--inputDate-default-paddingRight) var(--inputDate-default-paddingBottom)
|
||||
var(--inputDate-default-paddingLeft);
|
||||
height: var(--DatePicker-height);
|
||||
outline: none;
|
||||
white-space: nowrap;
|
||||
@ -19,6 +23,9 @@
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: var(--DatePicker-fontSize);
|
||||
font-weight: var(--inputDate-default-fontWeight);
|
||||
color: var(--inputDate-default-color);
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -41,6 +48,18 @@
|
||||
&:hover {
|
||||
background: var(--DatePicker-onHover-bg);
|
||||
border-color: var(--DatePicker-onHover-borderColor);
|
||||
border-style: var(--inputDate-hover-top-border-style)
|
||||
var(--inputDate-hover-right-border-style)
|
||||
var(--inputDate-hover-bottom-border-style)
|
||||
var(--inputDate-hover-left-border-style);
|
||||
border-width: var(--inputDate-hover-top-border-width)
|
||||
var(--inputDate-hover-right-border-width)
|
||||
var(--inputDate-hover-bottom-border-width)
|
||||
var(--inputDate-hover-left-border-width);
|
||||
|
||||
.#{$ns}DatePicker-input {
|
||||
color: var(--inputDate-hover-color);
|
||||
}
|
||||
|
||||
.#{$ns}DatePicker-clear {
|
||||
display: flex;
|
||||
@ -52,20 +71,40 @@
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
background: var(--inputDate-active-bg-color);
|
||||
border-color: var(--DatePicker-onFocused-borderColor);
|
||||
box-shadow: var(--Form-input-boxShadow);
|
||||
}
|
||||
}
|
||||
|
||||
box-shadow: var(--inputDate-active-shadow);
|
||||
border-style: var(--inputDate-active-top-border-style)
|
||||
var(--inputDate-active-right-border-style)
|
||||
var(--inputDate-active-bottom-border-style)
|
||||
var(--inputDate-active-left-border-style);
|
||||
border-width: var(--inputDate-active-top-border-width)
|
||||
var(--inputDate-active-right-border-width)
|
||||
var(--inputDate-active-bottom-border-width)
|
||||
var(--inputDate-active-left-border-width);
|
||||
.#{$ns}DatePicker-input {
|
||||
font-size: var(--fonts-size-7);
|
||||
color: var(--inputDate-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background: $gray200;
|
||||
background: var(--inputDate-disabled-bg-color);
|
||||
border-width: var(--inputDate-disabled-top-border-width)
|
||||
var(--inputDate-disabled-right-border-width)
|
||||
var(--inputDate-disabled-bottom-border-width)
|
||||
var(--inputDate-disabled-left-border-width);
|
||||
border-style: var(--inputDate-disabled-top-border-style)
|
||||
var(--inputDate-disabled-right-border-style)
|
||||
var(--inputDate-disabled-bottom-border-style)
|
||||
var(--inputDate-disabled-left-border-style);
|
||||
border-color: var(--inputDate-disabled-top-border-color)
|
||||
var(--inputDate-disabled-right-border-color)
|
||||
var(--inputDate-disabled-bottom-border-color)
|
||||
var(--inputDate-disabled-left-border-color);
|
||||
|
||||
> .#{$ns}DatePicker-input {
|
||||
color: var(--text--muted-color);
|
||||
color: var(--inputDate-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,11 +126,28 @@
|
||||
&-toggler {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
svg {
|
||||
color: var(--inputDate-default-icon-color);
|
||||
width: var(--inputDate-default-icon-size);
|
||||
height: var(--inputDate-default-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.DatePicker-toggler-clock {
|
||||
content: var(--inputTime-default-icon);
|
||||
}
|
||||
|
||||
.DatePicker-toggler-date {
|
||||
content: var(--inputDate-default-icon);
|
||||
}
|
||||
|
||||
&-clear {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
svg {
|
||||
width: var(--inputDate-default-icon-size);
|
||||
height: var(--inputDate-default-icon-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -261,6 +317,7 @@
|
||||
background: var(--Calendar-cell-bg);
|
||||
|
||||
&:hover span {
|
||||
color: var(--inputDate-hover-option-color);
|
||||
background: var(--Calendar-cell-onHover-bg);
|
||||
}
|
||||
}
|
||||
@ -297,6 +354,7 @@
|
||||
td.rdtActive,
|
||||
td.rdtActive:hover {
|
||||
> span {
|
||||
color: var(--inputDate-active-option-color);
|
||||
background: var(--Calendar-cell-onActive-bg);
|
||||
}
|
||||
}
|
||||
@ -365,8 +423,8 @@
|
||||
overflow: auto;
|
||||
.#{$ns}CalendarInput-sugs {
|
||||
list-style: none;
|
||||
background: var(--Form-select-menu-bg);
|
||||
color: var(--Form-select-menu-color);
|
||||
background: var(--inputTime-default-bg-color);
|
||||
color: var(--inputTime-default-color);
|
||||
left: px2rem(-1px);
|
||||
right: px2rem(-1px);
|
||||
top: 100%;
|
||||
@ -382,15 +440,17 @@
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: var(--inputTime-default-fontSize);
|
||||
font-weight: var(--inputTime-default-fontWeight);
|
||||
cursor: pointer;
|
||||
|
||||
&.is-highlight {
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: var(--Form-select-menu-onHover-bg);
|
||||
color: var(--inputTime-active-color);
|
||||
background: var(--inputTime-active-bg-color);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: #f7f7f9;
|
||||
color: var(--inputTime-hover-color);
|
||||
background: var(--inputTime-hover-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -573,7 +633,7 @@
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--DatePicker-color);
|
||||
color: var(--inputDate-hover-title-arrow-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -585,7 +645,7 @@
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
color: var(--DatePicker-color);
|
||||
color: var(--inputDate-default-title-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--DatePicker-header-onHover-color);
|
||||
@ -639,6 +699,12 @@ td.rdtYear,
|
||||
td.rdtQuarter {
|
||||
> span {
|
||||
display: inline-block;
|
||||
color: var(--inputDate-other-color);
|
||||
background: var(--inputDate-other-bg-color);
|
||||
border-radius: var(--inputDate-other-top-left-border-radius)
|
||||
var(--inputDate-other-top-right-border-radius)
|
||||
var(--inputDate-other-bottom-right-border-radius)
|
||||
var(--inputDate-other-bottom-left-border-radius);
|
||||
}
|
||||
|
||||
&.rdtBetween {
|
||||
@ -649,8 +715,8 @@ td.rdtQuarter {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: #f7f7f9;
|
||||
color: var(--inputDate-other-hover-color);
|
||||
background: var(--inputDate-other-hover-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -659,15 +725,19 @@ td.rdtQuarter {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
background: var(--info) !important;
|
||||
color: var(--white);
|
||||
background: var(--inputDate-other-active-bg-color) !important;
|
||||
color: var(--inputDate-other-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.rdtDisabled,
|
||||
&.rdtDisabled:hover {
|
||||
background: var(--Calendar-cell-onDisabled-bg);
|
||||
color: #b8babf;
|
||||
background: var(--inputDate-other-disabled-bg-color);
|
||||
|
||||
> span {
|
||||
background: var(--inputDate-other-disabled-bg-color);
|
||||
color: var(--inputDate-other-disabled-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,32 +2,32 @@
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
|
||||
font-size: var(--DatePicker-fontSize);
|
||||
padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
|
||||
height: var(--DatePicker-height);
|
||||
border: var(--borders-width-2) solid var(--colors-neutral-line-8);
|
||||
font-size: var(--fonts-size-7);
|
||||
padding: var(--sizes-size-4) var(--sizes-size-7);
|
||||
height: var(--sizes-base-16);
|
||||
outline: none;
|
||||
white-space: nowrap;
|
||||
color: var(--DatePicker-color);
|
||||
background: var(--DatePicker-bg);
|
||||
color: var(--colors-neutral-text-2);
|
||||
background: var(--colors-neutral-fill-11);
|
||||
border-radius: var(--LocationPicker-borderRadius);
|
||||
|
||||
&:not(.is-disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--DatePicker-onHover-bg);
|
||||
border-color: var(--DatePicker-onHover-borderColor);
|
||||
background: var(--colors-neutral-fill-11);
|
||||
border-color: var(--colors-brand-5);
|
||||
|
||||
.#{$ns}DatePicker-toggler:before {
|
||||
color: var(--DatePicker-onHover-iconColor);
|
||||
color: var(--colors-brand-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focused,
|
||||
&.is-active {
|
||||
border-color: var(--DatePicker-onFocused-borderColor);
|
||||
border-color: var(--colors-brand-5);
|
||||
box-shadow: var(--Form-input-boxShadow);
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
color: var(--DatePicker-placeholderColor);
|
||||
color: var(--colors-neutral-text-6);
|
||||
user-select: none;
|
||||
margin-right: var(--gap-base);
|
||||
flex-basis: 0;
|
||||
@ -55,10 +55,10 @@
|
||||
|
||||
&-toggler {
|
||||
cursor: pointer;
|
||||
color: var(--DatePicker-iconColor);
|
||||
color: var(--colors-neutral-text-5);
|
||||
|
||||
&:hover {
|
||||
color: var(--DatePicker-onHover-iconColor);
|
||||
color: var(--colors-brand-5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -62,10 +62,14 @@
|
||||
.#{$ns}NestedSelect-option {
|
||||
position: relative;
|
||||
padding-left: var(--gap-md);
|
||||
min-height: var(--Form-input-height);
|
||||
line-height: var(--Form-input-height);
|
||||
min-height: var(--select-base-default-option-line-height);
|
||||
line-height: var(--select-base-default-option-line-height);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: var(--select-base-default-option-fontSize);
|
||||
font-weight: var(--select-base-default-option-fontWeight);
|
||||
color: var(--select-base-default-option-color);
|
||||
background: var(--select-base-default-option-bg-color);
|
||||
|
||||
> .#{$ns}NestedSelect-optionLabel {
|
||||
flex: 1;
|
||||
|
||||
@ -15,11 +15,20 @@
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: var(--Form-selectValue-fontSize);
|
||||
font-weight: var(--select-multiple-fontWeight);
|
||||
color: var(--select-multiple-color);
|
||||
background: var(--Form-select-value-bgColor);
|
||||
border: px2rem(1px) solid var(--Form-select-value-borderColor);
|
||||
border-radius: px2rem(2px);
|
||||
margin-right: var(--gap-xs);
|
||||
margin-bottom: var(--gap-xs);
|
||||
border-radius: var(--select-multiple-top-left-border-radius)
|
||||
var(--select-multiple-top-right-border-radius)
|
||||
var(--select-multiple-bottom-right-border-radius)
|
||||
var(--select-multiple-bottom-left-border-radius);
|
||||
padding: var(--select-multiple-paddingTop)
|
||||
var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
|
||||
var(--select-multiple-paddingLeft);
|
||||
margin: var(--select-multiple-marginTop)
|
||||
var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom)
|
||||
var(--select-multiple-marginLeft);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--Form-selectValue-onHover-bgColor);
|
||||
@ -29,7 +38,6 @@
|
||||
.#{$ns}Select-valueLabel {
|
||||
display: inline-block;
|
||||
max-width: var(--Form-valueLabel-maxWidth);
|
||||
padding: 0 var(--gap-xs);
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
text-overflow: ellipsis;
|
||||
@ -45,24 +53,38 @@
|
||||
align-items: center;
|
||||
outline: none;
|
||||
position: relative;
|
||||
font-size: var(--Form-input-fontSize);
|
||||
border: var(--Form-select-borderWidth) solid var(--Form-select-borderColor);
|
||||
font-size: var(--select-base-default-fontSize);
|
||||
font-weight: var(--select-base-default-fontWeight);
|
||||
border-width: var(--Form-select-borderWidth);
|
||||
border-style: var(--select-base-default-top-border-style)
|
||||
var(--select-base-default-right-border-style)
|
||||
var(--select-base-default-bottom-border-style)
|
||||
var(--select-base-default-left-border-style);
|
||||
border-color: var(--Form-select-borderColor);
|
||||
background: var(--Form-select-bg);
|
||||
border-radius: var(--Form-select-borderRadius);
|
||||
min-height: var(--Form-selectOption-height);
|
||||
$paddingY: calc(
|
||||
(
|
||||
var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
|
||||
var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2
|
||||
) / 2
|
||||
);
|
||||
padding: $paddingY 0 $paddingY var(--Form-select-paddingX);
|
||||
padding: var(--select-base-default-paddingTop)
|
||||
var(--select-base-default-paddingRight)
|
||||
var(--select-base-default-paddingBottom)
|
||||
var(--select-base-default-paddingLeft);
|
||||
cursor: pointer;
|
||||
color: var(--Form-select-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--Form-select-onHover-bg);
|
||||
border-color: var(--Form-input-onHover-borderColor);
|
||||
border-width: var(--select-base-hover-top-border-width)
|
||||
var(--select-base-hover-right-border-width)
|
||||
var(--select-base-hover-bottom-border-width)
|
||||
var(--select-base-hover-left-border-width);
|
||||
border-style: var(--select-base-hover-top-border-style)
|
||||
var(--select-base-hover-right-border-style)
|
||||
var(--select-base-hover-bottom-border-style)
|
||||
var(--select-base-hover-left-border-style);
|
||||
border-color: var(--select-base-hover-top-border-color)
|
||||
var(--select-base-hover-right-border-color)
|
||||
var(--select-base-hover-bottom-border-color)
|
||||
var(--select-base-hover-left-border-color);
|
||||
|
||||
.#{$ns}Select-arrow:before {
|
||||
color: var(--Form-select-caret-onHover-iconColor);
|
||||
@ -70,13 +92,55 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--Button--default-onActive-border);
|
||||
border-width: var(--select-base-active-top-border-width)
|
||||
var(--select-base-active-right-border-width)
|
||||
var(--select-base-active-bottom-border-width)
|
||||
var(--select-base-active-left-border-width);
|
||||
border-style: var(--select-base-active-top-border-style)
|
||||
var(--select-base-active-right-border-style)
|
||||
var(--select-base-active-bottom-border-style)
|
||||
var(--select-base-active-left-border-style);
|
||||
border-color: var(--select-base-active-top-border-color)
|
||||
var(--select-base-active-right-border-color)
|
||||
var(--select-base-active-bottom-border-color)
|
||||
var(--select-base-active-left-border-color);
|
||||
box-shadow: var(--select-base-active-shadow);
|
||||
background: var(--select-base-active-bg-color);
|
||||
}
|
||||
|
||||
&.is-focused:not(.is-mobile),
|
||||
&.is-opened:not(.is-mobile) {
|
||||
border-width: var(--select-base-active-top-border-width)
|
||||
var(--select-base-active-right-border-width)
|
||||
var(--select-base-active-bottom-border-width)
|
||||
var(--select-base-active-left-border-width);
|
||||
border-style: var(--select-base-active-top-border-style)
|
||||
var(--select-base-active-right-border-style)
|
||||
var(--select-base-active-bottom-border-style)
|
||||
var(--select-base-active-left-border-style);
|
||||
border-color: var(--select-base-active-top-border-color)
|
||||
var(--select-base-active-right-border-color)
|
||||
var(--select-base-active-bottom-border-color)
|
||||
var(--select-base-active-left-border-color);
|
||||
box-shadow: var(--select-base-active-shadow);
|
||||
background: var(--select-base-active-bg-color);
|
||||
color: var(--Form-select-onFocused-color);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--text--muted-color);
|
||||
background: var(--Form-input-onDisabled-bg);
|
||||
border-color: var(--Form-input-onDisabled-borderColor);
|
||||
border-width: var(--select-base-disabled-top-border-width)
|
||||
var(--select-base-disabled-right-border-width)
|
||||
var(--select-base-disabled-bottom-border-width)
|
||||
var(--select-base-disabled-left-border-width);
|
||||
border-style: var(--select-base-disabled-top-border-style)
|
||||
var(--select-base-disabled-right-border-style)
|
||||
var(--select-base-disabled-bottom-border-style)
|
||||
var(--select-base-disabled-left-border-style);
|
||||
border-color: var(--select-base-disabled-top-border-color)
|
||||
var(--select-base-disabled-right-border-color)
|
||||
var(--select-base-disabled-bottom-border-color)
|
||||
var(--select-base-disabled-left-border-color);
|
||||
background: var(--select-base-disabled-bg-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -87,12 +151,10 @@
|
||||
margin-top: px2rem(4px);
|
||||
.#{$ns}Select-menu {
|
||||
.#{$ns}Select-option {
|
||||
height: px2rem(32px);
|
||||
line-height: px2rem(32px);
|
||||
line-height: var(--select-base-default-option-line-height);
|
||||
}
|
||||
.#{$ns}Select-addBtn {
|
||||
height: px2rem(32px);
|
||||
line-height: px2rem(30px);
|
||||
line-height: var(--select-base-default-option-line-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -123,9 +185,6 @@
|
||||
}
|
||||
|
||||
&-value {
|
||||
line-height: calc(
|
||||
var(--Form-input-lineHeight) * var(--Form-input-fontSize)
|
||||
);
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@ -142,7 +201,10 @@
|
||||
&--multi {
|
||||
height: auto;
|
||||
min-height: var(--Form-selectOption-height);
|
||||
padding: var(--gap-xs) 0 var(--gap-xs) var(--gap-xs);
|
||||
padding: var(--select-base-default-paddingTop)
|
||||
var(--select-base-default-paddingRight)
|
||||
var(--select-base-default-paddingBottom)
|
||||
var(--select-base-default-paddingLeft);
|
||||
|
||||
.#{$ns}Select-valueWrap {
|
||||
> input {
|
||||
@ -163,7 +225,7 @@
|
||||
}
|
||||
&-valueIcon {
|
||||
cursor: pointer;
|
||||
padding: 1px 5px;
|
||||
margin-left: px2rem(10px);
|
||||
color: var(--Form-select-valueIcon-color);
|
||||
|
||||
&:hover {
|
||||
@ -184,9 +246,6 @@
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
margin-right: px2rem(12px);
|
||||
// margin-right: var(--gap-xs);
|
||||
// margin-left: var(--gap-xs);
|
||||
width: var(--gap-md);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@ -285,14 +344,16 @@
|
||||
&-option {
|
||||
cursor: pointer;
|
||||
// min-width: px2rem(120px);
|
||||
padding: calc(
|
||||
(
|
||||
var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
|
||||
var(--Form-input-fontSize)
|
||||
) / 2
|
||||
)
|
||||
var(--Form-select-paddingX);
|
||||
padding: var(--select-base-default-option-paddingTop)
|
||||
var(--select-base-default-option-paddingRight)
|
||||
var(--select-base-default-option-paddingBottom)
|
||||
var(--select-base-default-option-paddingLeft);
|
||||
display: flex;
|
||||
color: var(--select-base-default-option-color);
|
||||
font-size: var(--select-base-default-option-fontSize);
|
||||
font-weight: var(--select-base-default-option-fontWeight);
|
||||
background: var(--select-base-default-option-bg-color);
|
||||
line-height: var(--select-base-default-option-line-height);
|
||||
|
||||
&-checkbox {
|
||||
width: 100%;
|
||||
@ -318,6 +379,9 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
font-size: var(--select-base-default-option-fontSize);
|
||||
font-weight: var(--select-base-default-option-fontWeight);
|
||||
color: var(--select-base-default-option-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -325,16 +389,28 @@
|
||||
&.is-active {
|
||||
color: var(--Form-select-menu-onActive-color);
|
||||
background: var(--Form-select-menu-onActive-bg);
|
||||
|
||||
.#{$ns}Select-option-checkbox > label > span {
|
||||
color: var(--Form-select-menu-onActive-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-highlight {
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: var(--Form-select-menu-onHover-bg);
|
||||
|
||||
.#{$ns}Select-option-checkbox > label > span {
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--Form-select-menu-onDisabled-color);
|
||||
background: var(--Form-select-menu-onDisabled-bg);
|
||||
|
||||
.#{$ns}Select-option-checkbox > label > span {
|
||||
color: var(--Form-select-menu-onDisabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
> label {
|
||||
@ -383,13 +459,10 @@
|
||||
&-addBtn {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: calc(
|
||||
(
|
||||
var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
|
||||
var(--Form-input-fontSize)
|
||||
) / 2
|
||||
)
|
||||
var(--Form-select-paddingX);
|
||||
padding: var(--select-base-default-option-paddingTop)
|
||||
var(--select-base-default-option-paddingRight)
|
||||
var(--select-base-default-option-paddingBottom)
|
||||
var(--select-base-default-option-paddingLeft);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@ -402,12 +475,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focused:not(.is-mobile),
|
||||
&.is-opened:not(.is-mobile) {
|
||||
border-color: var(--Form-input-onFocused-borderColor);
|
||||
color: var(--Form-select-onFocused-color);
|
||||
}
|
||||
|
||||
&-spinner {
|
||||
line-height: calc(
|
||||
var(--Form-input-lineHeight) * var(--Form-input-fontSize)
|
||||
@ -523,13 +590,13 @@
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
.#{$ns}Tree-itemText {
|
||||
background: var(--Transfer-title-bg);
|
||||
background: var(--select-tree-hover-bg-color);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
.#{$ns}Tree-itemText {
|
||||
background: var(--Tree-item-onChekced-bg);
|
||||
background: var(--select-tree-active-bg-color);
|
||||
}
|
||||
}
|
||||
&.is-checked {
|
||||
|
||||
@ -48,23 +48,25 @@
|
||||
padding: var(--gap-xs) 0;
|
||||
|
||||
&-group > &-itemLabel {
|
||||
height: px2rem(32px);
|
||||
padding: var(--gap-xs) var(--gap-base);
|
||||
color: var(--FileControl-icon-color);
|
||||
padding: var(--select-group-paddingTop) var(--select-group-paddingRight)
|
||||
var(--select-group-paddingBottom) var(--select-group-paddingLeft);
|
||||
color: var(--select-group-color);
|
||||
font-size: var(--select-group-fontSize);
|
||||
font-weight: var(--select-group-fontWeight);
|
||||
line-height: var(--select-group-lineHeight);
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
// height: var(--Form-input-height);
|
||||
line-height: var(--Form-input-lineHeight);
|
||||
font-size: var(--Form-input-fontSize);
|
||||
padding: calc(
|
||||
(
|
||||
var(--Form-input-height) - var(--Form-input-lineHeight) *
|
||||
var(--Form-input-fontSize)
|
||||
) / 2
|
||||
)
|
||||
var(--gap-sm);
|
||||
color: var(--select-base-default-option-color);
|
||||
background: var(--select-base-default-option-bg-color);
|
||||
line-height: var(--select-base-default-option-line-height);
|
||||
font-size: var(--select-base-default-option-fontSize);
|
||||
font-weight: var(--select-base-default-option-fontWeight);
|
||||
padding: var(--select-base-default-option-paddingTop)
|
||||
var(--select-base-default-option-paddingRight)
|
||||
var(--select-base-default-option-paddingBottom)
|
||||
var(--select-base-default-option-paddingLeft);
|
||||
flex-direction: row;
|
||||
|
||||
> .#{$ns}Checkbox {
|
||||
@ -73,21 +75,26 @@
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.is-active {
|
||||
background: var(--Form-select-menu-onActive-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--Tree-item-onHover-bg);
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: var(--Form-select-menu-onHover-bg);
|
||||
|
||||
i {
|
||||
border: 1px solid var(--menu-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&.is-opened {
|
||||
color: var(--Form-select-menu-onActive-color);
|
||||
background: var(--Form-select-menu-onActive-bg);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
color: var(--text--muted-color);
|
||||
color: var(--Form-select-menu-onDisabled-color);
|
||||
background: var(--Form-select-menu-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -142,30 +149,43 @@
|
||||
|
||||
.#{$ns}Table-table > thead > tr > th,
|
||||
.#{$ns}Table-table > tbody > tr > td {
|
||||
font-size: var(--fontSizeSm);
|
||||
padding-top: var(--gap-xs);
|
||||
padding-bottom: px2rem(6px);
|
||||
color: var(--select-table-color);
|
||||
font-size: var(--select-table-fontSize);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.#{$ns}Table-table > thead > tr > th {
|
||||
padding-top: px2rem(6px);
|
||||
padding: var(--select-table-header-paddingTop)
|
||||
var(--select-table-header-paddingLeft)
|
||||
var(--select-table-header-paddingBottom)
|
||||
var(--select-table-header-paddingLeft);
|
||||
}
|
||||
|
||||
.#{$ns}Table-table > thead > tr > th:first-child,
|
||||
.#{$ns}Table-table > tbody > tr > td:first-child {
|
||||
padding-left: px2rem(10px);
|
||||
.#{$ns}Table-table > tbody > tr > td {
|
||||
padding: var(--select-table-option-paddingTop)
|
||||
var(--select-table-option-paddingLeft)
|
||||
var(--select-table-option-paddingBottom)
|
||||
var(--select-table-option-paddingLeft);
|
||||
}
|
||||
|
||||
.#{$ns}Table-table > thead > tr > th:last-child {
|
||||
padding-right: var(--select-table-header-paddingRight);
|
||||
}
|
||||
|
||||
.#{$ns}Table-table > thead > tr > th:last-child,
|
||||
.#{$ns}Table-table > tbody > tr > td:last-child {
|
||||
padding-right: var(--gap-md);
|
||||
padding-right: var(--select-table-option-paddingRight);
|
||||
}
|
||||
|
||||
.#{$ns}Table-table > tbody > tr.is-active {
|
||||
.#{$ns}Table-table > tbody > tr.is-active > td {
|
||||
color: var(--Form-select-menu-onActive-color);
|
||||
background: var(--Form-select-menu-onActive-bg);
|
||||
}
|
||||
|
||||
.#{$ns}Table-table > tbody > tr:hover > td,
|
||||
.#{$ns}Table-table > tbody > tr.is-hovered > td {
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: var(--Form-select-menu-onHover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}TreeSelection {
|
||||
@ -270,15 +290,15 @@
|
||||
&-item {
|
||||
display: flex;
|
||||
// height: var(--Form-input-height);
|
||||
line-height: var(--Form-input-lineHeight);
|
||||
font-size: var(--Form-input-fontSize);
|
||||
padding: calc(
|
||||
(
|
||||
var(--Form-input-height) - var(--Form-input-lineHeight) *
|
||||
var(--Form-input-fontSize)
|
||||
) / 2
|
||||
)
|
||||
var(--gap-sm);
|
||||
font-size: var(--select-base-default-option-fontSize);
|
||||
font-weight: var(--select-base-default-option-fontWeight);
|
||||
color: var(--select-base-default-option-color);
|
||||
background: var(--select-base-default-option-bg-color);
|
||||
line-height: var(--select-base-default-option-line-height);
|
||||
padding: var(--select-base-default-option-paddingTop)
|
||||
var(--select-base-default-option-paddingRight)
|
||||
var(--select-base-default-option-paddingBottom)
|
||||
var(--select-base-default-option-paddingLeft);
|
||||
flex-direction: row;
|
||||
|
||||
> .#{$ns}Checkbox {
|
||||
@ -293,12 +313,14 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--Tree-item-onHover-bg);
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: var(--Form-select-menu-onHover-bg);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
color: var(--text--muted-color);
|
||||
color: var(--Form-select-menu-onDisabled-color);
|
||||
background: var(--Form-select-menu-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
.#{$ns}TextControl-clear svg {
|
||||
font-size: var(--input-clearable-icon-size);
|
||||
fill: var(--input-clearable-default-color);
|
||||
color: var(--input-clearable-default-color);
|
||||
width: var(--input-clearable-icon-size);
|
||||
height: var(--input-clearable-icon-size);
|
||||
&:hover {
|
||||
|
||||
@ -303,7 +303,8 @@
|
||||
cursor: pointer;
|
||||
flex: 1 auto;
|
||||
display: inline-block;
|
||||
color: var(--Form-input-color);
|
||||
color: var(--select-tree-color);
|
||||
font-size: var(--select-tree-fontSize);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -62,7 +62,10 @@
|
||||
cursor: pointer;
|
||||
> span {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--inputDate-default-option-top-left-border-radius)
|
||||
var(--inputDate-default-option-top-right-border-radius)
|
||||
var(--inputDate-default-option-bottom-right-border-radius)
|
||||
var(--inputDate-default-option-bottom-left-border-radius);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
@ -77,7 +80,10 @@
|
||||
}
|
||||
.rdtPicker td.rdtOld,
|
||||
.rdtPicker td.rdtNew {
|
||||
color: #b8babf;
|
||||
color: var(--inputDate-disabled-option-color);
|
||||
span {
|
||||
background: var(--inputDate-disabled-option-bg-color);
|
||||
}
|
||||
}
|
||||
.rdtPicker td.rdtToday {
|
||||
position: relative;
|
||||
|
||||
@ -818,6 +818,11 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||
<Icon
|
||||
icon={viewMode === 'time' ? 'clock' : 'date'}
|
||||
className="icon"
|
||||
iconContent={
|
||||
viewMode === 'time'
|
||||
? 'DatePicker-toggler-clock'
|
||||
: 'DatePicker-toggler-date'
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
|
||||
|
||||
@ -1655,10 +1655,15 @@ export class DateRangePicker extends React.Component<
|
||||
</a>
|
||||
) : null}
|
||||
|
||||
<a className={`${ns}DateRangePicker-toggler`}>
|
||||
<a className={cx(`DateRangePicker-toggler`)}>
|
||||
<Icon
|
||||
icon={viewMode === 'time' ? 'clock' : 'date'}
|
||||
className="icon"
|
||||
iconContent={
|
||||
viewMode === 'time'
|
||||
? 'DatePicker-toggler-clock'
|
||||
: 'DatePicker-toggler-date'
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
|
||||
|
||||
@ -74,6 +74,10 @@ exports[`Renderer:date 1`] = `
|
||||
<a
|
||||
class="cxd-DatePicker-toggler"
|
||||
>
|
||||
<div
|
||||
class=" DatePicker-toggler-date"
|
||||
style="display: none;"
|
||||
/>
|
||||
<icon-mock
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
|
||||
@ -74,6 +74,10 @@ exports[`Renderer:inputDate 1`] = `
|
||||
<a
|
||||
class="cxd-DatePicker-toggler"
|
||||
>
|
||||
<div
|
||||
class=" DatePicker-toggler-date"
|
||||
style="display: none;"
|
||||
/>
|
||||
<icon-mock
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
@ -209,6 +213,10 @@ exports[`Renderer:inputDate with clearable: clearable false 1`] = `
|
||||
<a
|
||||
class="cxd-DatePicker-toggler"
|
||||
>
|
||||
<div
|
||||
class=" DatePicker-toggler-date"
|
||||
style="display: none;"
|
||||
/>
|
||||
<icon-mock
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
@ -365,6 +373,10 @@ exports[`Renderer:inputDate with clearable: clearable true 1`] = `
|
||||
<a
|
||||
class="cxd-DatePicker-toggler"
|
||||
>
|
||||
<div
|
||||
class=" DatePicker-toggler-date"
|
||||
style="display: none;"
|
||||
/>
|
||||
<icon-mock
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
@ -560,6 +572,10 @@ exports[`Renderer:inputDate with format & inputFormat 1`] = `
|
||||
<a
|
||||
class="cxd-DatePicker-toggler"
|
||||
>
|
||||
<div
|
||||
class=" DatePicker-toggler-date"
|
||||
style="display: none;"
|
||||
/>
|
||||
<icon-mock
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user