mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:58:05 +08:00
6738e9b0da
* docs: 剔除多余注释 * fix: 右键菜单支持多主题配置 * style: 将tabs的toolbar改成默认右侧展示 * style: 修正select的placeholder的color色值 * feat: custom组件新增renderChild,用于自定义扩展容器区域 * doc: 增加了点注释 * fix: 修正一个错别字 * docs: 代码prettier一下 * fix(custom 组件): 完善renderChild,以便用户可以直接使用amis中的dom参数对象 * fix(custom组件): 补充销毁子节点的逻辑 * fix(custom): 调整下参数命名 * feat: TooltipWrapper新增onVisibleChange,用于外层识别当前显示和隐藏状态 * style: 右键菜单面板css变量改为默认值 * docs: update
172 lines
5.2 KiB
SCSS
172 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;
|
|
|
|
@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';
|
|
|
|
--lineHeightBase: 1.57;
|
|
|
|
--borderColor: #d9d9d9;
|
|
--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;
|
|
|
|
--Page-header-bg: #fff;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--Nav-item-onActive-borderLeft: 0;
|
|
|
|
--Modal-header-bg: #fff;
|
|
--Modal-title-fontWeight: 500;
|
|
|
|
--Form-item-fontSize: var(--fontSizeBase);
|
|
--Form-item-fontColor: var(--body-color);
|
|
--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%);
|
|
|
|
--Page-aside-bg: #ffffff;
|
|
|
|
--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;
|
|
}
|