amis/scss/themes/_antd-variables.scss
吴多益 54cd658860
tab 仿 chrome 风格样式 (#1453)
* tabs 新增仿 chrome 风格样式

* 去掉多余的样式
2021-01-27 10:21:09 +08:00

170 lines
5.2 KiB
SCSS

@import './antd-colors';
@import '../functions';
$remFactor: 16px;
$ns: 'antd-';
$primary: $blue-6;
$info: $primary;
$success: $green-6;
$warning: $gold-6;
$danger: $red-5;
$light: #d9d9d9;
$white: #fff;
$black: #000;
$info-bg: #eaf6fe;
$success-bg: #f1fdeb;
$warning-bg: #fcf7f1;
$danger-bg: #fff5f5;
// Border color
$border-color-base: #d9d9d9; // base border outline a component
$border-color-split: #5d5d5d; // split border inside a component
$border-color-inverse: $white;
$border-width-base: 1px; // width of the border for a component
$border-style-base: solid; // style of a components border
$text-color: rgba(0, 0, 0, 0.85);
$text--muted-color: #6c6c6c;
$text--loud-color: lighten($text-color, 10%);
$link-color: $info;
$Button-onDisabled-bg: #f5f5f5;
$Button-onDisabled-color: rgba(0, 0, 0, 0.25);
@import '../variables';
@import '../properties';
:root {
--fontFamilyBase: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--fontSizeBase: 14px;
--lineHeightBase: 1.57;
--borderColor: #eceff8;
--text-color: #{$text-color};
--text--muted-color: #999;
--text--loud-color: #333;
--link-onHover-decoration: none;
--icon-color: inherit;
--icon-onHover-color: var(--primary);
--body-bg: #f0f2f5;
--borderRadius: 2px;
--Button-boxShadow: none;
--Button-onActive-boxShadow: none;
--Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
// --Button-textShadow: 0 -1px 0 rgb(0 0 0 / 12%);
--Button--default-border: #d9d9d9;
--Button--default-onHover-border: #{$blue-5};
--Button--default-onHover-bg: #fff;
--Button--default-onHover-color: #{$blue-5};
--Button--default-onActive-bg: #fff;
--Button--default-onActive-border: #{$blue-7};
--Button--default-onActive-color: #{$blue-7};
--Button-onDisabled-borderColor: #d9d9d9;
--Button--primary-onHover-bg: #{$blue-5};
--Button--primary-onHover-border: #{$blue-5};
--Card-onChecked-bg: #{$blue-1};
--Card-onChecked-color: var(--body-color);
--Card-onChecked-fieldLabel-color: var(--text--muted-color);
--Card-onChecked-borderColor: #{$blue-5};
--Calendar-btnCancel-bg: #fff;
--Calendar-btnCancel-border: var(--Button--default-border);
--Checkbox-onDisabled-color: #d9d9d9;
--Checkbox-onDisabled-bg: #f5f5f5;
--Radio-onDisabled-color: #c4c4c4;
--Radio-onDisabled-bg: #f5f5f5;
--Radio-onFocus-boxShadow: 0 0 0 3px rgb(24 144 255 / 8%);
--Rating-onActive-color: #fadb14;
--Divider-borderStyle: solid;
--Panel--default-bg: #fff;
--Layout-aside-bg: #001529;
--Layout-brand-bg: #001529;
--Layout-aside-color: hsla(0, 0%, 100%, 0.65);
--Layout-aside-subList-bg: #000c17;
--Layout-aside-onHover-bg: none;
--Layout-aside-onAcitve-bg: #1890ff;
--ListControl-item-onHover-color: var(--primary);
--ListControl-item-onHover-bg: var(--Button--default-onHover-bg);
--ListControl-item-onHover-borderColor: var(--primary);
--ListItem-onChecked-bg: #{$blue-1};
--ListItem--strip-bg: #fff;
--Modal-header-bg: #fff;
--Modal-title-fontWeight: 500;
--Form-input-onFocused-borderColor: #{$blue-5};
--Form-input-borderColor: #{$border-color-base};
--Form-input-boxShadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
--Form-select-borderWidth: #{px2rem(1px)};
--Form-select-borderRadius: 0;
--Form-select-borderColor: #{$border-color-base};
--Form-select-bg: var(--white);
--Form-select-onHover-bg: var(--white);
--Form-select-onHover-borderColor: #{$blue-5};
--Form-select-placeholderColor: #999;
--Form-select-color: #000;
--Form-select-caret-iconColor: #999;
--Form-select-caret-onHover-iconColor: var(--primary);
--Form-select-caret-fontSize: #{px2rem(12px)};
--Form-select-outer-borderWidth: 0;
--Form-select-outer-top: #{px2rem(32px)};
--Form-select-outer-boxShadow: 0 3px 6px -4px rgb(0 0 0 / 12%),
0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
--Form-select-menu-color: #333;
--Form-select-menu-onHover-color: #000;
--Form-select-menu-onHover-bg: #f5f5f5;
--Form-select-menu-height: #{px2rem(24px)};
--Form-select-popoverGap: #{px2rem(3px)};
--Form-select-search-height: #{px2rem(30px)};
--Form-selectValue-color: var(--primary);
--Form-select-onFocus-boxShadow: 0 0 0 3px rgb(24 144 255 / 8%);
--Pagination-onActive-backgroundColor: #fff;
--Pagination-onActive-color: rgb(24, 144, 255);
--Pagination-onActive-border: #{px2rem(1px)} solid var(--primary);
--Transfer-title-bg: #f0f2f5;
// Tabs
--Tabs-linkFontSize: #{px2rem(14px)};
--Tabs--card-bg: var(--Table-thead-bg);
--Tabs--radio-bg: var(--white);
--Tabs--vertical-onActive-bg: #e7f7ff;
--Tabs--vertical-onActive-borderWidth: 0 3px 0 0;
--Tabs--vertical-onActive-container-bg: #fff;
--Tabs--vertical-onActive-container-borderRight: 1px solid #f0f0f0;
$Table-strip-bg: transparent;
--Table-strip-bg: transparent;
--Table-thead-bg: #fafafa;
--Table-onHover-bg: rgb(250, 250, 250);
--Table-onHover-borderColor: var(--Table-borderColor);
--Table-onChecked-bg: #{$blue-1};
--Table-onChecked-color: var(--Table-color);
--Table-onChecked-borderColor: var(--Table-borderColor);
--Switch-bgColor: #bfbfbf;
}