vue-ant-patterns
Version:
vue-ant-patterns
307 lines (305 loc) • 7.05 kB
CSS
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/*
命名规则, 三部分 className
.flex-侧轴
.flex-主轴
.flex-侧轴-主轴
*/
.depot-search-helper {
/*小弹框下高度不固定，flex撑不开*/
/*
&-container {
display: flex;
// display: inline-block;
width: 100%;
position: relative;
line-height: 1;
// height: 32px;
&-inner {
width: 100%;
}
.search-btn-icon {
// margin-left: -32px;
position: absolute;
right: 0;
top: 50%;
margin-top: -16px;
}
.ant-select-selection__rendered {
padding-right: 20px;
}
.ant-select-arrow {
// 影响 select 箭头 先注释掉
// margin-top: -16px;
}
&.ant-select-open .ant-select-arrow-icon svg {
transform: rotate(0deg);
}
.search-btn-icon {
opacity: 0.6;
&:hover,
&:focus {
opacity: 1;
}
}
.ant-select-selection--multiple {
max-height: 32px;
overflow: auto;
}
.ant-select-selection__clear {
right: 32px;
}
::-webkit-scrollbar {
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;
height: 0;
}
}
*/
}
.depot-search-helper-container {
position: relative;
width: 100%;
}
.depot-search-helper-container-inner {
position: relative;
line-height: 1;
width: 100%;
}
.depot-search-helper-container .search-btn-icon {
position: absolute;
right: 0;
top: 50%;
margin-top: -16px;
color: rgba(0, 0, 0, 0.25);
}
.depot-search-helper-container .ant-select-selection__rendered {
padding-right: 32px;
}
.depot-search-helper-container .ant-select-selection__clear {
right: 32px;
}
.depot-search-helper .ant-collapse-borderless {
height: 100px;
background-color: rgba(0, 91, 172, 0.04);
border-top: 1px solid #fafafa;
}
.depot-search-helper .ant-collapse-borderless .ant-collapse-header {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
font-weight: 500;
}
.depot-search-helper .ant-collapse-borderless > .ant-collapse-item {
border-bottom: 0;
}
.depot-search-helper .ant-modal-body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: 0px;
flex-basis: 0px;
padding: 0;
margin: 16px 16px 0;
overflow: hidden;
height: auto;
}
.depot-search-helper .ant-modal-footer {
background: rgba(73, 89, 119, 0.02);
}
.depot-search-helper .ant-modal-close-x {
height: 48px;
width: 48px;
line-height: 48px;
}
.depot-search-helper .ant-modal-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.depot-search-helper .depot-sider-layout-content {
display: -webkit-box ;
display: -ms-flexbox ;
display: flex ;
-webkit-box-orient: vertical ;
-webkit-box-direction: normal ;
-ms-flex-direction: column ;
flex-direction: column ;
}
.depot-search-helper .selected-wrapper {
border: 1px solid #e8e8e8;
width: 100%;
max-height: 56px;
min-height: 32px;
overflow: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 2px 12px 2px;
cursor: text;
border-radius: 4px;
background-color: #fff;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.depot-search-helper .selected-wrapper:hover {
border-color: #677080;
}
.depot-search-helper .selected-wrapper .ant-tag {
margin-top: 2px;
margin-bottom: 2px;
}
.depot-search-helper .selected-wrapper .no-text {
display: inline-block;
line-height: 26px;
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
}
.depot-search-helper .dynamic-com-wrapper {
height: 100%;
overflow: auto;
}
.depot-search-helper .dynamic-com-wrapper .m-loading-wrapper {
text-align: center;
}
.depot-search-helper .dynamic-com-wrapper .ant-spin {
text-align: center;
}
.depot-search-helper.small-dialog .ant-modal-body {
min-height: 540px;
}
/*
//弹框样式
.search-modal-wrapper {
.ant-modal-close-x {
height: 48px;
width: 48px;
line-height: 48px;
}
.modal-multiple-content {
height: calc(100% - 92px - 9px);
.tree-list-container {
height: 100%;
}
}
.modal-single-content {
height: 100%;
.flex;
.tree-list-container {
height: 100%;
.flex;
}
}
.ant-modal-header {
padding-top: 13px;
padding-bottom: 13px;
}
.ant-modal-footer {
padding-top: 8px;
padding-bottom: 8px;
}
.ant-modal-body {
//max-height: 640px;
height: 544px;
overflow: auto;
padding: 0;
.tree-modal-wrapper {
padding: 8px 8px 8px 16px;
height: 100%;
.modal-tree-container {
height: 100%;
}
}
}
.tree-list-container {
display: flex;
flex-grow: 1 !important;
.modal-tree-container {
width: 216px;
padding-left: 12px;
flex-shrink: 1;
flex-grow: 0;
flex-basis: auto;
}
.modal-table-container {
flex: 1;
.ant-collapse-borderless > .ant-collapse-item {
border-bottom: 0;
}
}
}
.ant-collapse-borderless {
height: 100px;
background-color: #fff;
border-top: 1px solid #fafafa;
.ant-collapse-header {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
font-weight: 500;
}
}
.ant-collapse-borderless > .ant-collapse-item {
border-bottom: 0;
}
.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
padding-bottom: 4px;
}
//选中项的样式
.selected-wrapper {
border: 1px solid #e8e8e8;
width: 100%;
max-height: 56px;
overflow: auto;
display: flex;
justify-content: space-between;
padding: 3px 12px 0;
cursor: text;
border-radius: 4px;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
border-color: #677080;
}
.ant-tag {
margin-bottom: 4px;
}
.no-text {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
}
}
//动态加载组件
.dynamic-com-wrapper {
height: 100%;
overflow: auto;
.m-loading-wrapper {
text-align: center;
}
.ant-spin {
text-align: center;
}
}
}
*/