maycur-business
Version:
maycur business react components of web
328 lines (327 loc) • 7.58 kB
CSS
/* base variables */
/* text-color */
/* pin */
/* 字体大小 */
/* tab-bar */
/* 提示颜色 */
/* fee type color 引用自主版本 */
/* table相关 */
/* mix-in class */
#mixin-ios-scroll {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#mixin-pick-bar {
display: flex;
background: #fff;
font-weight: normal;
font-size: 16px;
}
#mixin-pick-bar > div {
flex: 1;
text-align: center;
color: #3296FA;
line-height: 50px;
}
#mktable-filter-dropdown {
border: 1px solid #eee;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 0;
}
.mkbs-manage-select {
width: calc(50vw) ;
max-width: 800px;
}
.mkbs-manage-select .content {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: -5px;
}
.mkbs-manage-select .content .left,
.mkbs-manage-select .content .right {
display: flex;
flex-direction: column;
flex: 0 0 auto;
padding: 0 10px 10px;
height: calc(80vh - 122px) ;
max-height: 460px;
}
.mkbs-manage-select .content .left .ant-list,
.mkbs-manage-select .content .right .ant-list {
flex: 1 1 auto;
overflow: auto;
}
.mkbs-manage-select .content .left .ant-tabs-content,
.mkbs-manage-select .content .right .ant-tabs-content {
height: calc(100% - 46px);
}
.mkbs-manage-select .content .middle {
align-self: center;
}
.mkbs-manage-select .content .left {
width: 49%;
}
.mkbs-manage-select .content .left .search-box {
flex: 0 0 auto;
position: relative;
}
.mkbs-manage-select .content .left .search-box .fm {
border-radius: 3px;
cursor: pointer;
position: absolute;
background-color: #fff;
right: 4px;
top: 4px;
width: 22px;
height: 22px;
font-size: 14px;
line-height: 22px;
text-align: center;
color: #3296FA;
z-index: 2;
}
.mkbs-manage-select .content .left .search-box .fm:hover {
color: #f00000;
background-color: #ffeef7;
}
.mkbs-manage-select .content .left .search-box .ant-input {
border-bottom: none;
}
.mkbs-manage-select .content .left .search-list,
.mkbs-manage-select .content .left .source-list {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: calc(100% - 30px);
}
.mkbs-manage-select .content .left .opt-bar {
margin: 0 0 5px 0;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.mkbs-manage-select .content .left .opt-bar .select-all-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
.mkbs-manage-select .content .right {
width: 49%;
}
.mkbs-manage-select .content .right .status-bar {
flex: 0 0 auto;
border-bottom: 3px solid #ebebeb;
padding: 5px 0 7px;
font-size: 14px;
display: flex;
flex-direction: row;
align-items: flex-start;
color: #555;
}
.mkbs-manage-select .content .right .status-bar > span {
line-height: 18px;
}
.mkbs-manage-select .content .right .status-bar .bar-label {
flex: 0 0 auto;
}
.mkbs-manage-select .content .right .status-bar .dep-count {
flex: 0 1 auto;
margin-right: 2px;
}
.mkbs-manage-select .content .right .status-bar .staff-count {
flex: 0 1 auto;
margin-right: 2px;
}
.mkbs-manage-select .content .right .status-bar .clear-all {
flex: 1 0 auto;
text-align: right;
}
.mkbs-manage-select .content .right .status-bar .clear-all .btn {
display: inline-block;
padding: 3px 5px;
cursor: pointer;
margin-top: -4px;
color: #3296FA;
}
.mkbs-manage-select .content .right .status-bar .clear-all .btn:hover {
color: #f00000;
background-color: #ffeef7;
}
.mkbs-manage-select .content .right .ant-alert {
flex: 0 0 auto;
padding: 6px 10px;
border-radius: 0;
line-height: 17px;
font-size: 12px;
border: none;
margin: 0 -10px;
color: #999;
}
.mkbs-manage-select .content .right .ant-alert + .ant-list {
border-top: none;
}
.mkbs-manage-select .content .right .ant-list {
margin-top: 10px;
}
.mkbs-manage-select .content .ant-tabs {
display: flex;
flex-direction: column;
}
.mkbs-manage-select .content .ant-tabs .ant-tabs-bar {
border-bottom-width: 3px;
margin-bottom: 10px;
box-sizing: content-box;
}
.mkbs-manage-select .content .ant-tabs .ant-tabs-nav-container {
bottom: -3px;
margin-bottom: 0;
padding: 0;
}
.mkbs-manage-select .content .ant-tabs .ant-tabs-nav-container .ant-tabs-nav-wrap {
margin-bottom: 0;
}
.mkbs-manage-select .content .ant-tabs .ant-tabs-ink-bar {
height: 3px;
bottom: 0;
}
.mkbs-manage-select .content .ant-tabs .ant-tabs-tabpane {
display: flex;
flex-direction: column;
}
.mkbs-manage-select .content .ant-tabs .ant-tabs-nav .ant-tabs-tab {
padding-top: 0;
}
.mkbs-manage-select .content .ant-tabs .ant-tabs-nav .ant-tabs-tab-active {
color: #555;
}
.mkbs-manage-select .content .item-name {
flex: 1 1 auto;
color: #191f25;
margin-right: 5px;
}
.mkbs-manage-select .content .item-name .fm {
color: #3296FA;
margin-right: 5px;
}
.mkbs-manage-select .content .fm-check {
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background-color: #fff;
color: #fff;
border-radius: 0;
border: 1px solid #eee;
font-size: 12px;
display: inline-block;
}
.mkbs-manage-select .content .fm-check.selected {
background-color: #3296FA;
border-color: #3296FA;
color: #fff;
}
.mkbs-manage-select .content .strong {
color: #3296FA;
margin: 0 3px;
}
.mkbs-manage-select .content .ant-input-search .ant-input {
height: 30px;
font-size: 12px;
border: 0;
}
.mkbs-manage-select .content .ant-input-search .ant-input:hover,
.mkbs-manage-select .content .ant-input-search .ant-input:focus {
border: 0;
}
.mkbs-manage-select .content .ant-breadcrumb {
font-size: 14px;
margin: 8px 0 0 0;
}
.mkbs-manage-select .content .ant-breadcrumb > span:last-child {
color: #999;
}
.mkbs-manage-select .content .ant-breadcrumb .ant-breadcrumb-link {
color: #191f25;
}
.mkbs-manage-select .content .ant-list-item {
padding: 5px 0 5px 10px;
border-bottom: 0;
}
.mkbs-manage-select .content .ant-list-item .fm-check {
flex: 0 0 auto;
}
.mkbs-manage-select .content .ant-list-item .fm-organization {
flex: 0 0 auto;
width: 22px;
height: 22px;
line-height: 22px;
font-size: 14px;
text-align: center;
color: #3296FA;
border-radius: 3px;
}
.mkbs-manage-select .content .ant-list-item .fm-organization:hover {
background-color: #3296FA;
color: #fff;
}
.mkbs-manage-select .content .ant-list-item .fm-trash {
width: 22px;
height: 22px;
line-height: 22px;
font-size: 14px;
text-align: center;
color: #3296FA;
border-radius: 3px;
cursor: pointer;
}
.mkbs-manage-select .content .ant-list-item .fm-trash:hover {
background-color: #ffeef7;
color: #f00000;
}
.mkbs-manage-select .content .ant-list-item.selected .fm-check {
background-color: #3296FA;
border-color: #3296FA;
}
.mkbs-manage-select .title {
display: flex;
justify-content: space-between;
padding: 0 40px 0 10px;
line-height: 24px;
margin: 0;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
font-size: 15px;
}
.mkbs-manage-select .title .switch {
display: flex;
align-items: center;
}
.mkbs-manage-select .title .ant-switch {
margin-right: 10px;
height: 20px;
}
.mkbs-manage-select .title .ant-switch::after {
width: 16px;
height: 16px;
}
.mkbs-manage-select .title .fm-question {
color: #3296FA;
margin-left: 10px;
cursor: pointer;
}
.mkbs-manage-select .footer {
display: flex;
justify-content: space-between;
padding-left: 10px;
}
.mkbs-manage-select .footer .help {
line-height: 36px;
color: #999;
}
.mkbs-manage-select .ant-modal-footer {
border-top: none;
}
.mkbs-manage-select {
width: 250px;
}