// ignore start // Default using variable as entry to support site variable version // This will be replaced in webpack bundle // @root-entry-name: variable; // @import './default.less'; // @import './variable.less'; @import './@{root-entry-name}.less'; // css 类名前缀 @ant-prefix: bonree; // ignore end /* 主色调 */ // @primary-1叠加后的颜色 // ignore @double-primary-1: ~'var(--@{ant-prefix}-primary-1-double)'; // 普通色,用于分割线滚动跳 @normal-color: ~'var(--@{ant-prefix}-normal-color)'; // 文字颜色（selected、hover） @primary-text-color: ~'var(--@{ant-prefix}-primary-color)'; // 主色2 // ignore @primary-2: ~'var(--@{ant-prefix}-primary-color)'; // 文字颜色（链接）// ignore @link-color: @primary-text-color; // 文字颜色（页面、按钮） @text-color: ~'var(--@{ant-prefix}-text-color)'; // 图标色 @text-color-secondary: ~'var(--@{ant-prefix}-text-color-secondary)'; // 图标色 // ignore @icon-color: ~'var(--@{ant-prefix}-text-color-secondary)'; // 文字颜色（标题） @heading-color: ~'var(--@{ant-prefix}-heading-color)'; // 背景色（页面） @background-color-base: ~'var(--@{ant-prefix}-background-color-base)'; // 禁用文字颜色（placeholder文字颜色、图标颜色） @disabled-color: ~'var(--@{ant-prefix}-disabled-color)'; // 组件内分割线 // ignore @border-color-split: @normal-color; // 高亮色 @highlight-color: @error-color; // 背景颜色（回显标签） @selection-item-bg: ~'var(--@{ant-prefix}-selection-item-bg)'; // 行高 // ignore @line-height-base: 1.5; // 复制内容时背景色 @text-selection-bg: ~'var(--@{ant-prefix}-primary-color-f-24)'; // 非浮层里hover背景色 @item-hover-bg: ~'var(--@{ant-prefix}-item-hover-bg)'; // Background color for `` @body-background: ~'var(--@{ant-prefix}-body-bg)'; // Base background color for most components @component-background: ~'var(--@{ant-prefix}-card-bg)'; // dropdown浮层背景色 @dropdown-background: ~'var(--@{ant-prefix}-dropdown-bg)'; // drodow描边色 @dropdown-border-color: ~'var(--@{ant-prefix}-dropdown-border-color)'; // 阴影色 @shadow-color: ~'var(--@{ant-prefix}-shadow-color)'; // modal/drawer内容区背景色 @modal-drawer-content-bg: ~'var(--@{ant-prefix}-modal-drawer-content-bg)'; /* 字体 */ // 字体 @font-family: 'Helvetica Neue', Arial, 'Microsoft Yahei', 'PingFang', sans-serif; // 字体大小 @font-size-base: 12px; // 最大字体 // ignore @br-font-size-largest: 16px; // 字体加粗 // ignore // 使用text-shadow替换font-weight，直接使用font-weight会造成页面抖动 // ignore @font-weight-bold: 0.6px 0 0 currentColor; // 首字母大写 @br-text-transform: capitalize; /* 圆角 */ // 圆角（选择器标签） @border-radius-sm: 2px; // 圆角（按钮、选择器、输入框、穿梭框） @border-radius-base: 3px; // 圆角（页面卡片） @br-border-radius-lg: 5px; /* border描边 */ // 颜色 @border-color-base: @normal-color; // 用于浮层、下拉框、页面容器卡片的描边 @br-dropdown-border: 1px solid @dropdown-border-color; @br-dropdown-outline: inset 0 0 0 1px @dropdown-border-color; /* border圆角 */ @border-radius-12: ~'var(--@{ant-prefix}-border-radius-12)'; /* 阴影 */ // 扩散半径 @outline-width: 3px; // 阴影透明度 @outline-fade: 8%; // br-基础阴影 // ignore @br-box-shadow-base: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline; // br-小阴影，主要用于卡片、内容区顶部投影 // ignore @br-box-shadow-sm: @input-outline-offset 4px 0 @shadow-color; // br-大阴影，主要用于选择器下拉浮层、气泡提示、图标浮层 // ignore @br-box-shadow-lg: @input-outline-offset 8px 0 @shadow-color; // 固定列阴影，用于table固定列阴影、tabs头部导航阴影 @br-fixed-column-shadow-color: ~'var(--@{ant-prefix}-shadow-color-f-75)'; // -------- Bonree-box-shadow ----------- // ignore @box-shadow-base: @br-box-shadow-lg; // br-大尺寸boder宽度 // ignore @br-border-width-lg: 3px; // Motion // ignore @wave-animation-width: 4px; // ignore start // -------- Bonree-scrollbar ----------- @scrollWidth: 6px; @scrollbarRightGap: 2px; .customScrollbar(@background:@normal-color) { // 兼容火狐 scrollbar-color: @background transparent; scrollbar-width: thin; &::-webkit-scrollbar { width: @scrollWidth; height: @scrollWidth; } &::-webkit-scrollbar-track { // background: @background-color-base; border-radius: 10px; } // &::-webkit-scrollbar-track-piece { // width: 6px; // } &::-webkit-scrollbar-corner { background: transparent; } &::-webkit-scrollbar-thumb { background: @background; border-radius: 10px; } } .hiddenScrollbar() { &::-webkit-scrollbar { display: none; } scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ } // ignore end /* 按钮 */ // 最小宽度 @br-btn-min-width-sm: 56px; @br-btn-min-width: 72px; @br-btn-hover-bg: ~'var(--@{ant-prefix}-primary-color-hover-bg)'; // 主按钮颜色（hover、active、focus） @btn-primary-bg: @primary-color-hover; // 普通按钮阴影 // ignore @btn-shadow: @br-box-shadow-base; // 主按钮阴影 // ignore @btn-primary-shadow: none; // 文本按钮阴影 // ignore @btn-text-shadow: none; // 按钮水平边距 @btn-padding-horizontal-base: 12px; // ignore start /* 面包屑 */ // 面包屑hover颜色 @breadcrumb-link-color-hover: @primary-color-hover; // 面包屑分割符颜色 @breadcrumb-separator-color: @normal-color; // ignore end // ignore start /* 标签页*/ // tabs文字大小 @tabs-title-font-size: @font-size-lg; // tabs激活文字颜色 @tabs-highlight-color: @heading-color; // ignore end // ignore start /* 单选框 */ // 单选框尺寸 @radio-size: 14px; // radio禁用状态中间小圆点颜色 @radio-dot-disabled-color: @disabled-color; // Radio buttons @radio-button-hover-color: @primary-color-hover; @radio-button-active-color: @primary-color-active; @radio-solid-checked-color: #ffffff; // ignore end /* 复选 */ // 复选框大小 @checkbox-size: 14px; @checkbox-check-bg: @component-background; // ignore start /* 输入 */ // input 左右内边距 @input-padding-horizontal: @padding-xs; // hover状态boder-color @input-hover-border-color: @primary-color-hover; // placeholder文字颜色 @input-placeholder-color: @disabled-color; // input 上下边距 @input-padding-vertical-base: max( ceil(((@input-height-base - @font-size-base * @line-height-base) / 2) - @border-width-base), 3px ); // input 小尺寸上下边距 @input-padding-vertical-sm: max( ceil(((@input-height-sm - @font-size-base * @line-height-base) / 2) - @border-width-base), 0 ); // 文本域最小高度 @br-input-textarea-height-base: 120px; // 图标按钮尺寸 @btn-square-size: @height-sm; // 图标按钮图标大小 @btn-square-only-icon-size: @br-font-size-largest; // 前置标签背景色 @input-addon-bg: @background-color-base; // ignore end /* 步骤条 */ // 步骤条大小 @steps-icon-size: 24px; // 步骤条标题行高 // ignore @steps-title-line-height: @steps-icon-size; /* 开关 */ // 宽度 @switch-min-width: 32px; // 高度 @switch-height: 18px; // 透明度（禁用、loading） @switch-disabled-opacity: 0.5; // 圆圈背景色 @switch-bg: #ffffff; // 聚焦阴影颜色 @br-switch-focus-shadow: ~'var(--@{ant-prefix}-disabled-color-f-10)'; /* 对话框 */ // 最大宽度 @br-modal-max-width: 1056px; // 最小宽度 @br-modal-min-width: 320px; // 最大高度 @br-modal-max-height: 80vh; // 头部水平方向padding @modal-header-padding-horizontal: @padding-md; // 底部垂直方向panding @modal-footer-padding-vertical: @padding-md; // 底部水平方向panding @modal-footer-padding-horizontal: @padding-md; // 关闭图标尺寸 // ignore @modal-header-close-size: @height-sm; // 关闭图标位置 // ignore @br-modal-header-close-pos: @padding-md; // 蒙层 // ignore @modal-mask-bg: fade(@black, 60%); // 高于notification // ignore @zindex-modal: 1011; // 高于notification // ignore @zindex-modal-mask: @zindex-modal; // 内容区背景色 @modal-content-bg: @modal-drawer-content-bg; // ignore start /* 抽屉 */ // 抽屉头部padding @drawer-header-padding: 10px @padding-md 11px; // 抽屉内容区padding @drawer-body-padding: @padding-md; // 低于notification @zindex-drawer: 1000; // 内容区背景色 @drawer-bg: @modal-drawer-content-bg; // ignore end // ignore start /* 气泡卡片 */ // Popover body background color @popover-bg: @dropdown-background; // popover水平padding @popover-padding-horizontal: @padding-xs; // Popover 箭头 width @popover-arrow-width: 8px; // Popover distance with trigger @popover-distance: 6px; // ignore end /* 全局提示 */ // 最小宽度 @br-message-min-width: 128px; // padding // ignore @message-notice-content-padding: 7px 16px; // ignore start /* 卡片 */ // 左右边距 @card-padding-base: 16px; // card头部字体颜色 @card-head-color: @text-color; // card圆角 @card-radius: @br-border-radius-lg; // ignore end /* 加载 */ // 大小（小） @spin-dot-size-sm: 16px; // 大小（中） @spin-dot-size: 24px; // 大小（大） @spin-dot-size-lg: 32px; // 大小（最大） @spin-dot-size-largest: 48px; /* 表单 */ // 向下间隔 @form-item-margin-bottom: 16px; // label右边距 @form-item-label-colon-margin-right: 16px; /* 表格 */ // 最小高度 @br-table-min-height: 240px; // 头部高度 @br-table-header-height: 40px; // 多选框列宽 // ignore @table-selection-column-width: 40px; // 表头颜色 // ignore @table-header-bg: ~'var(--@{ant-prefix}-table-header-color-bg)'; @table-header-sort-bg: @table-header-bg; // 表头文字颜色 // ignore @table-header-color: @text-color; // 垂直方向内边距 @table-padding-vertical: 10px; // 行hover状态背景色 // ignore @table-row-hover-bg: @item-hover-bg; // 可操作表头hover状态背景色 @table-header-sort-active-bg: transparent; // 表头图标颜色 // ignore @table-header-icon-color: @icon-color; // 选中行hover背景色 @table-selected-row-hover-bg: @double-primary-1; // Sticky @table-sticky-scroll-bar-bg: @normal-color; // Sticky层级 @table-sticky-zindex: 103; // 头部图标hover @table-header-icon-color-hover: ~'var(--@{ant-prefix}-text-color-secondary-d-10)'; // 选中行背景色 @table-selected-row-bg: if((@root-entry-name = variable), @item-hover-bg, @primary-1); /* 选择器 */ // 下拉框选中项文字颜色 // ignore @select-item-selected-color: @primary-text-color; // 下拉框hover背景色 // ignore @select-item-active-bg: @primary-1; // 选择器回显标签背景色 // ignore @select-selection-item-bg: @selection-item-bg; // 下拉框背景色 @select-dropdown-bg: @dropdown-background; /* 穿梭框 */ // 穿梭框选项hover背景 // ignore @transfer-item-hover-bg: @item-hover-bg; // 穿梭框列表高度 @transfer-list-height: 240px; /* 文字提示 */ // 背景色 // ignore @tooltip-bg: ~'var(--@{ant-prefix}-tooltip-bg)'; // 箭头宽度 @tooltip-arrow-width: 8.2px; // Tooltip distance with trigger @tooltip-distance: 6px; /* 时间控件下拉面板 */ // 列高度 @picker-time-panel-column-height: 172px; // 列宽度 @picker-time-panel-column-width: 48px; // 行高 @picker-time-panel-cell-height: 32px; // 单元格宽度 @picker-panel-cell-width: 31px; // 头部文字行高 @picker-text-height: 16px; @picker-basic-cell-hover-color: @primary-1; @picker-basic-cell-hover-with-range-color: @primary-1; @picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; @picker-date-hover-range-border-color: @primary-color; @picker-basic-cell-disabled-bg: @background-color-base; @picker-panel-without-time-cell-height: 48px; @picker-basic-cell-active-with-range-color: @br-btn-hover-bg; // 骨架屏 // ignore @skeleton-color:if ((@root-entry-name = variable), @background-color-base, rgba(190, 190, 190, 0.2)); @skeleton-to-color: ~'var(--@{ant-prefix}-background-color-base-s-5)'; // 树形组件 // ignore @tree-title-height: 32px; @br-tree-icon-height: 24px; @br-tree-unit-width: 16px; // 标签 // ignore @tag-default-bg: @selection-item-bg; @tag-line-height: 18px; // 通知框 // ignore @notification-padding-vertical: 12px; @notification-padding-horizontal: 16px; // BackTop // --- @back-top-bg: @dropdown-background; @back-top-hover-bg: @primary-1; // Progress @processing-color: #3377ff; // Image // --- @image-bg: @background-color-base; // Noticfication @notification-bg: @dropdown-background; // Dropdown @dropdown-menu-bg: @dropdown-background; // Divider @divider-color: @normal-color; // Layout @layout-body-background: @body-background; // Calendar @calendar-bg: @dropdown-background; // Menu @menu-item-active-bg: @br-btn-hover-bg; // Collapse @collapse-header-bg: @background-color-base;