// @import './components/header-dropdown.less'; // @import './components/table/pro-table.less'; @import '../src/theme/default/variables.less'; body::-webkit-scrollbar { width: 0 !important; } body { width: 100% !important; -ms-overflow-style: none; overflow: -moz-scrollbars-none; } #app { height: 100%; } .slide-fadein-up-enter-active, .slide-fadein-up-leave-active { transition: opacity 0.3s, transform 0.4s; } .slide-fadein-up-enter-from { transform: translateY(20px); opacity: 0; } .slide-fadein-up-leave-to { transform: translateY(-20px); opacity: 0; } .slide-fadein-right-enter-active, .slide-fadein-right-leave-active { transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; } .slide-fadein-right-enter-from { transform: translateX(-20px); opacity: 0; } .slide-fadein-right-leave-to { transform: translateX(20px); opacity: 0; } .zoom-fadein-enter-active, .zoom-fadein-leave-active { transition: transform 0.3s, opacity 0.3s ease-in-out; } .zoom-fadein-enter-from { transform: scale(0.99); opacity: 0; } .zoom-fadein-leave-to { transform: scale(1.01); opacity: 0; } .fadein-enter-active, .fadein-leave-active { transition: opacity 0.3s ease-in-out !important; } .fadein-enter-from, .fadein-leave-to { opacity: 0 !important; } @media (max-width: 480px) { .pro-components-header-dropdown-index-container { width: 100% !important; } .ant-table { width: 100%; overflow-x: auto; } .ant-table-tbody > tr > td, .ant-table-tbody > tr > th, .ant-table-thead > tr > td, .ant-table-thead > tr > th { white-space: pre; } .ant-table-tbody > tr > td > span, .ant-table-tbody > tr > th > span, .ant-table-thead > tr > td > span, .ant-table-thead > tr > th > span { display: block; } } .pb10 { padding-bottom: 10px; } [data-pro-theme='antdv-pro-theme-dark'] { &, * { color-scheme: dark !important; } } // 隐藏树的连接线 .ant-tree-indent { .ant-tree-indent-unit::before { display: none; } } // 账号设置页面专属tabs-left布局 .setPage { .ant-tabs.ant-tabs-left { & > .ant-tabs-nav { // height: 120px !important; .ant-tabs-tab { margin: 0 !important; padding: 0 34px !important; padding-bottom: 0; line-height: 40px; } .ant-tabs-tab-active { background: #1890ff; border-left: 0 solid #eee; .ant-tabs-tab-btn { color: #fff; } } } } } // table操作列更多按钮字体颜色样式 .surely-table-cell-inner .surely-table-cell-content .ant-space .ant-space-item .ant-btn-text { color: #1890ff; } .surely-table-cell-text-ellipsis, .surely-table-cell-ellipsis, .ant-select-item-option-content span, .ant-select-selection-item, .crami-hbtree-tree-title-text { white-space: pre !important; } // 修改InputNumber宽度 .ant-input-number { width: 100% !important; } //树列表菜单按钮背景色 #h-context-menu .ant-menu-light .ant-menu-item-active { background: #e8f0fd !important; color: #3979f9 !important; } .cron-div .ant-input-number { width: 58px !important; } .cron-div .ant-tabs-nav { margin: 0 !important; } .cron-div .ant-tabs-tab { border-radius: 0 !important; background: #fafafa !important; } // .file-application .ant-input-affix-wrapper{ // height: 40px; // } .cron-div .ant-tabs-nav .ant-tabs-tab-active { background: none !important; color: #1890ff !important; } .cron-div .fas-icon-list-checked { background: #3979f9 !important; } .app-custom-edit-form-header { height: 36px; padding: 0 20px; color: #333; font-weight: bold; font-size: 14px; line-height: 36px; background-color: #f5f6f7; } .app-custom-edit-form-operation { text-align: right; .ant-form-item { width: 100% !important; } } .app-custom-edit-form-body { // padding: 0 5px 0 20px; .ant-form-item { width: 90%; margin: 10px 0; } & > .ant-row { padding: 0 5px 0 20px; } & > .ant-row:nth-of-type(2n) { background: #f9f9f9; } & > .ant-row:nth-last-child(1) { width: 100% !important; padding-right: 15px; background: transparent; } } .ant-pagination { .ant-pagination-item, .ant-pagination-item > a, .ant-pagination-item-active, .ant-pagination-item:hover { overflow: hidden; border-radius: 4px !important; } .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link { border-radius: 4px !important; } } .workflow_content { height: calc(100vh - 159px) !important; } //选中项得菜单导航背景色 .ant-menu-vertical .ant-menu-submenu-selected, .ant-menu-vertical-left .ant-menu-submenu-selected, .ant-menu-vertical-right .ant-menu-submenu-selected { background: @menu-item-active-bg; } //菜单收起时2级菜单隐藏滚动条 .ant-menu-vertical.ant-menu-sub::-webkit-scrollbar { width: 0; } // 查看样式 .platform-b-description-form { // 此处修改不更新HT-TCL,只用于平台 .ant-form-item-label.ant-col-12 { // width: 100% !important; flex: inherit; } .hoteam-b-form-col-item { overflow: hidden; } .crami-form-item-body { margin-right: 0 !important; margin-left: 0 !important; padding-bottom: 10px; } .hoteam-b-form-col-item-divider { padding: 0 !important; border: none !important; .hoteam-b-form-divider { margin: 0 !important; padding-right: 0 !important; padding-left: 0 !important; background: transparent !important; } &:nth-of-type(n + 2) { margin-top: 24px; } } .ant-form-item-label { .hoteam-b-form-item-label-break { font-weight: 600; } } .ant-form-item-control .ant-form-item-control-input-content { white-space: nowrap; } .ant-form-item-control .ant-form-item-control-input-content .hoteam-b-form-item-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } //工作流-设计器样式 右侧选项栏更改 .process-design-wrapper { .process-design-options { .process-panel__container.process-panel { .process-panel__container-button { .process-panel__container-form { .ant-tabs-content.ant-tabs-content-top { padding: 1px 20px; overflow-y: auto; } } } } } } .h-color-picker-div { width: 32px; height: 32px; } // rule 红色提示语样式 .ant-form-item-with-help .ant-form-item-explain { min-height: 18px; line-height: 18px; font-size: 12px; margin-bottom: 6px; } //布局调整相关class //页面最外层的padding .main-content-padding { padding: @main-content-padding; } //所有页面统一得class .main-content { } //盒子间的margin(统一使用margin-right 和 margin-bottom) .margin-left { margin-left: @margin-left; } .margin-right { margin-right: @margin-right; } .margin-top { margin-top: @margin-top; } .margin-bottom { margin-bottom: @margin-bottom; } .margin-all { margin: @margin-all; } //flex布局(页面排列方式横向时用,例如左树右表结构) .flex-content { display: flex; height: 100%; } //固定宽度(一般用于左侧树) .width-fixed { width: @width-fixed; } //右侧计算宽度(一般用于右侧表格) .width-computed { width: calc(100% - @margin-right - @width-fixed); } //无card-header时的card-body(左侧是树组件或其他时用) .no-card-head { .ant-card-body { height: 100%; } } //有card-header时的card-body(左侧是树组件或其他时用) .has-card-head { .ant-card-body { height: calc(100% - 65px); } } //根据组件模块划分得class(加载包裹组件的card上) //页面 //查询表单 .list-query-form { //修改查询表单的padding-bottom: .ant-card-body { // padding-bottom: 0; padding: 12px 24px 0; //修改标题得样式 .hoteam-b-form { .hoteam-b-form-title { //颜色#333 color: @heading-color; //字重600 font-weight: 600; //字号16 font-size: 16px; //行高22 line-height: 34px; } //分割线样式 .ant-row .ant-divider-horizontal { margin: 0; margin-bottom: 12px; } //输入框label与属于框得间距 .hoteam-b-form-col-item { .hoteam-b-form-item-break { // margin-bottom: 24px; .ant-form-item-label { padding: 0 0 4px; } } } } } } //树 .list-tree { } //表格 .list-table { > .ant-card-body { padding: 0 24px; } //统一修改list-table的标题 .hoteam-b-table-list-toolbar-container { height: auto; padding-top: 12px; padding-bottom: 12px; line-height: 32px; } .hoteam-b-table-list-toolbar-title { color: rgba(0, 0, 0, 0.85); font-weight: 600; font-size: 16px; } } .list-table-not-hb { > .ant-card-body { padding: 15px 24px 0 24px; } } //tab页(纯table) .list-tab-box { .ant-card-body { padding: 0 24px 0 46px; .ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav { margin: 0; } .ant-tabs-tab { padding: 16px 0; color: #999; font-size: 16px; line-height: 24px; } .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { color: rgba(0, 0, 0, 0.85); font-weight: 500; } .ant-tabs-tab + .ant-tabs-tab { margin: 0 0 0 28px; } .ant-space-item span { font-size: 16px; } } } //tab页(内有其他内容) .list-tab-box-has-content { > .ant-card-body { padding: 0 24px 0; .ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav { margin: 0; } .ant-tabs-tab { padding: 16px 0; color: #999; font-size: 16px; line-height: 24px; } .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { color: rgba(0, 0, 0, 0.85); font-weight: 500; } .ant-tabs-tab + .ant-tabs-tab { margin: 0 0 0 24px; } .ant-space-item span { font-size: 16px; } } } //switch开关样式重写 .list-switch, .ant-switch { width: 45px; height: 18px; border: none; box-shadow: none; .ant-switch-handle { top: -3px; width: 24px; height: 24px; border: none; border-radius: 24px; } .ant-switch-handle::before { right: 3px; left: -3px; border: 1px solid #e1e2e6; border-radius: 24px; } } //项目上发现新的通用组件的时可以加在这里; //增加一个class主要给租户页面和工作流中卡片类型的页面 该类的card-body的上下间距是一致的,如果有标题,标题的间距 .list-card-form { .ant-card-head { //间距20 padding: 0 20px; //增加下边框 .ant-card-head-wrapper { //标题样式 .ant-card-head-title { color: #000; font-weight: 600; font-size: 18px; line-height: 25px; } //额外按钮样式 .ant-card-extra { //padding0 padding: 0; } } } .ant-card-body { padding: 16px 24px; } } //重置包裹组件得card得边框为0 .list-query-form.ant-card-bordered, .list-tree.ant-card-bordered, .list-table.ant-card-bordered, .list-tab-box.ant-card-bordered, .list-table-has-card-head.ant-card, .list-form-has-card-head.ant-card, .list-form-has-card-head-normal.ant-card, .list-card-form.ant-card, .list-tab-box-has-content.ant-card, .list-table-no-bottom.ant-card, .list-descriptions.ant-card { border: 0; } //统一修改card组件包裹时的圆角 .list-query-form.ant-card, .list-tree.ant-card, .list-table.ant-card, .list-tab-box.ant-card, .list-table-has-card-head.ant-card, .list-form-has-card-head.ant-card, .list-form-has-card-head-normal.ant-card, .list-card-form.ant-card, .list-tab-box-has-content.ant-card, .list-table-no-bottom.ant-card, .list-descriptions.ant-card { border-radius: 8px; } //统一修改list-tree的样式 //带标题的 .has-card-head.list-tree { .ant-card-head { //间距20 padding: 0 20px; //下边框0 border-bottom: 0; //增加下边框 .ant-card-head-wrapper { border-bottom: 1px dashed #e9e9e9; //标题样式 .ant-card-head-title { color: #000; font-weight: 600; font-size: 16px; line-height: 22px; } //额外按钮样式 .ant-card-extra { //padding0 padding: 0; } } } .ant-card-body { padding: 15px 20px 24px; } } //不带标题的 .no-card-head.list-tree { .ant-card-body { padding: 16px 20px 24px; } } //统一修改list-table-has-card-head得样式 .list-table-has-card-head, .list-table-no-bottom { .ant-card-head { //下边框0 border-bottom: 0; //增加下边框 .ant-card-head-wrapper { border-bottom: 1px dashed #e9e9e9; //标题样式 .ant-card-head-title { color: #333; font-weight: 600; font-size: 16px; line-height: 22px; } //额外按钮样式 .ant-card-extra { //padding0 padding: 0; } } } } .list-table-has-card-head { > .ant-card-body { padding: 15px 24px 24px; } } .list-table-no-bottom { > .ant-card-body { padding: 15px 24px 0 24px; } } //统一修改list-form-has-card-head,.list-form-has-card-head-normal(此class与list-form-has-card-head的区别为card-padding 不同) 得样式 .list-form-has-card-head, .list-form-has-card-head-normal { .ant-card-head { //下边框0 border-bottom: 0; //增加下边框 .ant-card-head-wrapper { border-bottom: 1px dashed #e9e9e9; //标题样式 .ant-card-head-title { color: #333; font-weight: 600; font-size: 16px; line-height: 22px; } //额外按钮样式 .ant-card-extra { //padding0 padding: 0; } } } } .list-form-has-card-head-normal { .ant-card-body { padding: 16px 24px; } } .list-form-has-card-head { .ant-card-body { padding: 15px 24px 0; } } //弹框下的card的边框,间距都为0 .ant-modal-body { > .ant-card.ant-card-bordered { margin: 0; padding: 0; border: 0; } } //解决HBTable自定义展开icon换行问题 .hoteam-b-table { .surely-table-append-node { display: contents; } } // 调整工作流自定义表单浏览模式下样式 .formbuilder-view-workspace { padding: 20px 0; } // TODO: 去掉行内按钮的padding .surely-table-cell-inner .surely-table-cell-content .ant-space.ant-space-horizontal.ant-space-align-center .ant-space-item .ant-btn { padding: 0 }