weaver_trunk_cli/pc4mobx/prj/components/projectBoard/style/board.less

516 lines
16 KiB
Plaintext

/* Board */
.prj_board{
height : 100%;
.wea-search-tab>span{
margin-right: 10px;
}
.wea-select .ant-select-selection {
height: 28px;
}
.prj_board_container{
width: 100%;
padding-top: 20px;
overflow: scroll;
height: e("calc(100% - 48px)");
background-color: #f0f0f0;
.ant-progress-inner {
display: inline-block;
width: 100%;
background-color: #e2e2e2;
border-radius: 100px;
vertical-align: middle;
height: 6px;
}
.addNewStage {
width: 300px;
height: 52px;
line-height: 52px;
border-radius: 8px;
background: rgba(77,77,77,.5);
color: #fff;
font-size: 14px;
cursor: pointer;
margin: 0 10px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}
.addNewStage:not(.Hidden) {
display: inline-block
}
.addNewStage i {
width: 32px;
height: 32px;
line-height: 32px;
display: inline-block;
text-align: center;
vertical-align: top;
margin: 10px 10px 0;
background: transparent;
border-radius: 8px;
font-weight: bold;
}
.addNewStage:hover {
background: rgba(77,77,77,.75)
}
.addNewStage:hover i {
color: #9e9e9e;
background: #fff
}
.kanban-group {
height: e("calc(100% - 20px)");
width: 300px;
display: inline-block;
font-size: 14px;
line-height: 1.5;
color: rgba(0, 0, 0, .65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0px 10px;
padding: 0;
list-style: none;
background: white;
border-radius: 8px;
position: relative;
vertical-align: top;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
&.moving {
box-shadow: 0 6px 100px 0 rgba(0, 0, 0, .35)
}
.kanban-group-head {
background: white;
border-bottom: 1px solid #e8e8e8;
padding: 0 24px;
border-radius: 8px;
zoom: 1;
margin-bottom: -1px;
min-height: 48px;
.kanban-group-head-wrapper {
cursor: pointer;
.kanban-group-head-title {
font-size: 15px;
padding: 16px 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: rgba(0, 0, 0, .85);
font-weight: 500;
display: inline-block;
}
.kanban-group-head-extra {
float: right;
padding: 17.5px 0;
text-align: right;
margin-left: auto;
}
input{
width: 250px;
height: 44px;
margin: -12px 10px -2px 0px;
padding: 0 13px;
border-width: 1px;
border-style: solid;
border-radius: 3px;
font-size: 15px;
color: #333;
line-height: 1.5;
}
}
}
}
}
.board {
position: relative;
margin-left: 1%;
color: rgba(0,0,0,.65);
}
.board-column {
position: absolute;
left: 0;
right: 0;
width: 300px;
margin: 0 10px;
background: #f0f0f0;
border-radius: 8px;
z-index: 1;
will-change: transform;
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.2);
box-shadow: 2px 2px 3px rgba(0,0,0,.2);
.board-column-content-scroll::-webkit-scrollbar {
display: none;
}
.column_footer{
// background-color: #eef0f4;
border-radius: 0 0 7px 7px;
// height: 44px;
border: 15px solid transparent;
border-top: 0px;
border-bottom: 9px;
background: white;
padding: 10px 0px;
.btnBottomNew {
padding: 5px;
font-size: 10px;
cursor: pointer;
:hover{
font-weight: 200;
color: black;
}
}
}
.column_footer_card{
// background-color: #eef0f4;
border-radius: 0 0 7px 7px;
// height: 44px;
border: 15px solid transparent;
border-top: 0px;
border-bottom: 9px;
background: white;
.btnBottomNew {
padding: 5px;
font-size: 10px;
cursor: pointer;
:hover{
font-weight: 200;
color: black;
}
}
.btnBottomSubmit{
float: left;
background-color: #22d7bb;
color: #fff;
line-height: 23px;
// display: inline-block;
height: 23px;
margin: 6px 5px 6px 0px;
padding: 0 18px;
cursor: pointer;
border-radius: 18px;
// box-shadow: 0 1px 2px rgba(0,0,0,.12);
font-size: 12px;
}
.btnBottomSubmit:hover {
box-shadow: 0px 0px 8px 0px rgb(34, 215, 187, 0.5);
transition: box-shadow 0.3s ease-in-out;
}
.btnBottomCancel{
float: left;
line-height: 23px;
// display: inline-block;
height: 23px;
margin: 6px 5px 6px 0px;
padding: 0 18px;
cursor: pointer;
// box-shadow: 0 1px 2px rgba(0,0,0,.12);
font-size: 12px;
}
.btnBottomCancel:hover {
color: black;
}
.footer-card {
padding-top: 10px;
textarea{
border-radius: 3px;
}
.card-content{
// padding : 20px 0 0 0 ;
// height: 100px;
width: 100%;
border-radius: 3px;
border: 1px solid #d9d9d9;
font-size: 11px;
.clearFix{
border-width: 0 0 1px 0;
border-style: solid;
border-color: #d9d9d9;
}
.kanban-group-manager{
.wea-associative-search {
min-height: 30px;
border-width: 1px;
border-style: solid;
border-color: rgb(217, 217, 217);
border-image: initial;
border-radius: 3px;
}
}
.content-landmark {
margin-left: 9px;
span.ant-input{
position: static;
cursor: pointer;
}
.picker-icon + span {
margin-left: 20px;
}
}
}
}
}
}
.board-column.muuri-item-releasing {
z-index: 2;
}
.board-column.muuri-item-dragging {
z-index: 3;
cursor: move;
}
.board-item.muuri-item-releasing {
z-index: 9998;
}
.board-item.muuri-item-dragging {
z-index: 9999;
cursor: move;
}
.board-column-header {
position: relative;
// height: 50px;
// line-height: 50px;
overflow: hidden;
padding: 0 15px;
text-align: center;
background:white;
border-radius: 8px 8px 0 0;
// border-bottom: 1px solid #e8e8e8;
.board-column-header-wrapper{
cursor: pointer;
.kanban-group-head-title {
font-size: 15px;
padding: 14px 0px 5px 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: rgba(0, 0, 0, .85);
font-weight: 500;
float: left;
}
.kanban-group-head-extra {
float: right;
padding: 14px 0px 5px 0px;
text-align: right;
margin-left: auto;
}
input{
width: 250px;
height: 40px;
margin: -12px 10px -2px 0px;
padding: 0 13px;
border-width: 1px;
border-style: solid;
border-radius: 3px;
font-size: 15px;
color: #333;
line-height: 1.5;
}
}
}
@media (max-width: 600px) {
.board-column-header {
text-indent: -1000px;
}
}
.board-column-content {
position: relative;
border: 15px solid transparent;
border-top: 5px;
border-bottom: 0px;
min-height: 105px;
background: white;
}
.board-item:hover{
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
transition: box-shadow 0.3s ease-in-out;
}
.board-item {
position: absolute;
width: 100%;
margin: 5px 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
.board-item-finish {
left: 0;
position: absolute;
width: 4px;
background-color: gray;
height: 100%;
display: inline-block;
margin: auto;
z-index: 1;
.status{
width: 100%;
bottom: 0px;
z-index: 10;
position:absolute;
left: 0;
bottom: 0;
}
}
.muuri-item-releasing {
z-index: 9998;
}
.muuri-item-dragging {
z-index: 9999;
cursor: move;
}
.muuri-item-hidden {
z-index: 0;
}
.board-item-content {
position: relative;
padding: 10px 20px;
background: #fff;
border-radius: 8px;
font-size: 17px;
cursor: pointer;
-webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
height: 115px;
.header{
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
font-size: 13px;
margin-top: 6px;
line-height: 24px;
.title{
width: 67%;
font-size: 16px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
cursor: pointer;
min-height: 24px;
max-height: 48px;
:hover{
font-weight: bold;
}
}
.manager-list{
.item-icon{
width: 24px;
height: 24px;
border-radius: 100%;
/* background-color: #e9e9e9; */
float: right;
// vertical-align: top;
position: relative;
top: -24px;
margin-left: 8px;
font-size: 23px;
color: #e9e9e9;
cursor: pointer;
display: block;
:hover{
color: rgb(161, 161, 161);
}
}
.manager{
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #e9e9e9;
float: right;
vertical-align: top;
position: relative;
top: -24px;
margin-left: 8px;
margin-bottom: 5px;
.manager-img{
width: 24px;
height: 24px;
border-radius: 100%;
}
}
.landmark{
width: 24px;
height: 24px;
border-radius: 100%;
cursor: pointer;
float: right;
vertical-align: top;
margin-left: 8px;
font-size: 24px;
color: #e9e9e9;
position: relative;
top: -24px;
:hover{
color: rgb(161, 161, 161);
}
}
.detail{
width: 24px;
height: 24px;
border-radius: 100%;
cursor: pointer;
float: right;
vertical-align: top;
margin-left: 8px;
font-size: 21px;
color: #e9e9e9;
position: relative;
top: -23px;
:hover{
color: rgb(161, 161, 161);
}
}
}
}
.content{
height: 20px;
font-size: 12px;
white-space: nowrap;
.description1{
margin-right: 8px;
color: rgba(0, 0, 0, .45);
}
.description{
color: rgba(0, 0, 0, .45);
font-size: 12px;
line-height: 22px;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: contents;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-right: 5%;
}
}
}
.wea-error {
width: 100%;
position: relative;
}
}
@media (max-width: 600px) {
.board-item-content {
text-align: center;
}
.board-item-content span {
display: none;
}
}
}