@import './flex.less';
|
|
// input 自动填充样式 通过CSS3动画解决浏览器自带样式
|
input:-webkit-autofill,
|
input:-webkit-autofill:hover,
|
input:-webkit-autofill:focus,
|
input:-webkit-autofill:active {
|
-webkit-transition-delay: 111111s;
|
-webkit-transition: color 111111s ease-out, background-color 111111s ease-out;
|
}
|
|
// 抽屉表单 操作按钮栏 样式
|
.drawer-bottom-button {
|
position: absolute;
|
bottom: -8px;
|
width: 100%;
|
border-top: 1px solid @border-color-base;
|
padding: 10px 16px;
|
text-align: right;
|
left: 0;
|
background: @component-background;
|
border-radius: 0 0 2px 2px;
|
}
|
|
body,
|
.ant-drawer-content {
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
|
// 滚动条
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
// 滚动条轨道
|
::-webkit-scrollbar-track {
|
// background: transparent;
|
background-color: @body-background;
|
}
|
|
// 滚动条内部方块
|
::-webkit-scrollbar-thumb {
|
background-color: rgba(144, 147, 153, 0.3);
|
border-radius: 2px;
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background-color: @box-shadow-base;
|
}
|
|
// 数据列表 样式
|
.table-alert {
|
margin-bottom: 16px;
|
}
|
|
// 数据列表 操作
|
.table-operator {
|
margin-bottom: 18px;
|
display: flex;
|
justify-content: flex-end;
|
button {
|
margin-right: 8px;
|
}
|
}
|
|
// 数据列表 搜索条件
|
.table-page-search-wrapper {
|
.ant-form-inline {
|
.ant-form-item {
|
display: flex;
|
margin-bottom: 24px;
|
margin-right: 0;
|
|
.ant-form-item-control-wrapper {
|
flex: 1 1;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
|
> .ant-form-item-label {
|
line-height: 32px;
|
padding-right: 8px;
|
width: auto;
|
}
|
.ant-form-item-control {
|
height: 32px;
|
line-height: 32px;
|
}
|
}
|
}
|
|
.table-page-search-submit-buttons {
|
display: block;
|
margin-bottom: 24px;
|
white-space: nowrap;
|
}
|
}
|
|
// 可编辑表格样式
|
.input-table {
|
border-color: @border-color-base !important;
|
|
.thead {
|
overflow-y: scroll;
|
overflow-x: hidden;
|
border-color: @border-color-base !important;
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
|
.scroll-view {
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
|
.tbody {
|
.tr {
|
border-color: @border-color-base !important;
|
}
|
|
.td {
|
background: @component-background;
|
|
input {
|
background-color: @component-background !important;
|
border-color: @border-color-base !important;
|
color: @text-color !important;
|
}
|
}
|
|
.tr-expand {
|
background: @component-background;
|
}
|
}
|
}
|
|
// 侧边菜单隐藏选中边线
|
.ant-menu-item::after {
|
border-right: none !important;
|
}
|
// 顶部菜单隐藏选中边线
|
.ant-menu-item,
|
.ant-menu-submenu {
|
border: none !important;
|
}
|
|
// 通知提醒框 渐变背景
|
.cube-notification {
|
&-info {
|
background: linear-gradient(to right bottom, @notification-info-color-gradient, @notification-info-color);
|
box-shadow: 0px 5px 9px 0px rgba(79, 147, 255, 0.4);
|
}
|
&-success {
|
background: linear-gradient(to right bottom, @notification-success-color-gradient, @notification-success-color);
|
box-shadow: 0px 5px 9px 0px rgba(78, 207, 136, 0.4);
|
}
|
&-warning {
|
background: linear-gradient(to right bottom, @notification-warning-color-gradient, @notification-warning-color);
|
box-shadow: 0px 5px 9px 0px rgba(244, 198, 92, 0.4);
|
}
|
&-error {
|
background: linear-gradient(to right bottom, @notification-error-color-gradient, @notification-error-color);
|
box-shadow: 0px 5px 9px 0px rgba(255, 123, 123, 0.4);
|
}
|
.ant-notification-notice-message,
|
.ant-notification-notice-description,
|
.ant-notification-notice-close {
|
color: @white;
|
}
|
}
|
|
// drawer modal 的 header
|
.ant-drawer-header,
|
.ant-modal-header {
|
padding: 18px 24px;
|
}
|
|
// 下拉菜单边框
|
.ant-dropdown-bordered {
|
border: 1px solid @ant-dropdown-border-color;
|
border-radius: @border-radius-base;
|
overflow: hidden;
|
}
|
|
// 下拉选择框
|
.ant-select-dropdown-menu-item-selected {
|
color: @primary-color;
|
}
|
|
// 日历时间选择器
|
.ant-calendar-selected-day .ant-calendar-date {
|
color: @text-color-inverse;
|
}
|
.ant-calendar-time-picker-select li:focus,
|
.ant-calendar-time-picker-select-option-selected {
|
color: @text-color-inverse;
|
}
|
|
// 开关
|
.ant-switch {
|
min-width: 40px;
|
}
|
|
// 树形控件
|
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
color: @text-color-inverse;
|
}
|
|
// 禁用样式
|
.cube-disabled {
|
color: @disabled-color;
|
background-color: @disabled-bg;
|
border-color: @border-color-base;
|
text-shadow: none;
|
box-shadow: none;
|
cursor: not-allowed;
|
}
|
