yyuap-ref/src/assets/index.css

cloud os fe ref project which is based on tinper

/* modal { color: #fdafad}
.modal :global(.u-modal-content) {

  border-radius: 3px;
}
.modal :global(.u-modal-content .u-modal-header){
  padding-right: 14px;
} */
/* .modal :global(.u-modal-header .u-close){
  font-size: 24px;
  margin-top:-4px;
  color: #757F8C;
} */
/* .modal :global(.u-modal-title) {
  font-size: 19px;
  font-family: MicrosoftYaHei;
  color: rgba(71, 77, 84, 1);
  line-height: 28px;
} */
/* .modal :global(.u-modal-body) {
  padding: 0;
  padding-top: 16px;
}
.modal :global(.u-button) {
  line-height: 30px;
  padding: 0;
  width: 80px;
  text-align: center;
  height: 32px;
} */
/**diwork
 .u-checkbox input[type='checkbox'] {
  display: inline!important;
} **/
.yyuap-ref .cancelButton {
  background: none;
  border: none;
  outline: none;
  line-height: 32px;
  width: 80px;
  text-align: center;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(71, 77, 84, 1);
  margin-right: 15px;
  border:1px solid #e9e9e9;
  border-radius:3px;
  cursor: pointer;
}
.yyuap-ref .emptyBtn {
  margin: 10px;
  width: auto;
  float:left;
  color: rgb(244,67,54);
  border:0
}
.yyuap-ref .saveButton {
  margin-right: 10px;

}

/*  单独设置区域 */
/* .modal label{
  line-height: 34px;
}
.wrap{

}
.header{
  padding: 10px 15px;
}
.header h5{
  font-size:17px;
  font-family:MicrosoftYaHei;
  color:rgba(74,81,93,1);
  line-height:38px;
  margin-right: 15px;
} */
.yyuap-ref :global(.u-checkbox .u-checkbox-label:after),
.yyuap-ref :global(.u-checkbox .u-checkbox-label:before){
  top:0;
  width:16px;
  height:16px;
}
.yyuap-ref .RefGrid .u-checkbox input[type='checkbox']{
  
}
.yyuap-ref .ref-tree-checkbox{ right: 0;position: absolute;}
.yyuap-ref .RefGrid :global(.u-checkbox .u-checkbox-label:after),
.yyuap-ref .RefGrid :global(.u-checkbox .u-checkbox-label:before){
  top:4px;
  width:16px;
  height:16px;
}
.yyuap-ref.u-modal .u-modal-body{  min-height: 150px; padding:15px 0}

.yyuap-ref .List-checkbox{
  width: 33%;
    display: inline-block;
    border-right: 1px solid #e9e9e9;
  padding: 5px 0;
}
.yyuap-ref .List-checkbox .u-checkbox {
  margin-left: 20px;
}
.yyuap-ref .List-checkbox:nth-child(3n){
  border-right:0
}
.yyuap-ref .Ref-List{
  border-top: 1px solid #e9e9e9;
  max-height:300px;
  overflow-y: auto;
}
.yyuap-ref .Ref-Search { display: inline-block;width: 40%; margin-bottom: 10px}
.yyuap-ref .Ref-Search .Search-input {display: inline-block; padding:0; text-indent: 12px; }
.yyuap-ref .Ref-Search .u-form-control-search{width: 100%;    position: relative;}
.yyuap-ref .Ref-Search input.u-form-control-search{width: 100%; padding-left: 15px; border: 1px solid #e9e9e9; border-radius: 3px;}
.yyuap-ref .Ref-Search .u-form-control-search .uf-search{position: absolute; right: 10px; top: 15px; color: #999}
.yyuap-ref .Ref-Search{
  position: relative;
}

.yyuap-ref .Ref-Search .u-form-control-search .uf.uf-close-c{
  position: absolute;
  top: 15px;
  right: 5px;
}
.yyuap-ref .Ref-Search .u-form-control-search .uf-close-c:before {
  content: "\E66B";
}
.yyuap-ref .Ref-Search .search-input-que{
  color:#999;
  position: absolute;
  top:7px;
  right:30px;
  cursor:pointer;
  line-height: normal;
}
.yyuap-ref .Ref-Search .uf-close-c {
  position: absolute;
  top:7px;
  right:10px;
  cursor:pointer;
  line-height: normal;
}

.yyuap-ref .Ref-Button{display: inline-block;
  margin-top: 10px;
  text-align: right;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 50px;
  line-height: 45px;
  left: 0;
  background: rgba(255,255,255,.9);}
  .yyuap-ref .Ref-Search  .u-form-control-suffix{position: absolute; top: 0!important; width: 100%;
 }
 .yyuap-ref .Ref-Search  .u-form-control-suffix .uf-close-c{position: absolute;top: 15px; right: 5px;}
 .yyuap-ref .Ref_title { font-size: 20px}




/*
tab标签的样式 ---start
*/

.yyuap-ref .TabWrap{
  margin: 0;
  border-top:1px solid #e9e9e9;
  border-bottom:0;
  background-color:#f6f7f8;
  height:43px;
  width:100%;
}

.yyuap-ref .TabClass .u-tabs-tab-disabled {
  cursor: default;
  color: black;
}
.yyuap-ref .TabClass .u-tabs-nav{
  min-height:42px;
}

.yyuap-ref .TabClass .u-tabs-ink-bar{
  height:0;
}
.yyuap-ref .TabClass.u-tabs-top {
  border-bottom: 0px;
  overflow-x: hidden;
  width: auto;
}

.yyuap-ref .TabClass .u-tabs-tab {
  float: left;
  height: 100%;
  margin-right: 0px;
}
.yyuap-ref .TabClass .u-tabs-tab-active,.u-tabs-tab-active:hover {
  color:black;
  font-weight: 600;
  cursor: default;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.yyuap-ref .TabClass .u-tabs-tab:after{
  content: '';
  display:block;
  background:none;
  width:30px;
  height:5px;
  border-radius: 5px;
  margin :0 auto;
  margin-top:1px;
}
.yyuap-ref .TabClass .u-tabs-tab-active:after{
  background-color:red;
}


.yyuap-ref .TabClass .u-tabs-tab:last-child{
  position:absolute;
  right:0;
}
.yyuap-ref .TabClass .u-tabs-tab:last-child.u-tabs-tab-active{
  font-weight: 400;
}
.yyuap-ref .TabClass .u-tabs-tab:last-child.u-tabs-tab-active:after{
  content:'';
  display:block;
  background:none;
  width:30px;
  height:5px;
  border-radius: 5px;
  margin :0 auto;
  margin-top:1px;
}


.yyuap-ref .TabClass .u-tabs-nav {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 0;
  position:static;
  margin: 0;
  float: left;
  list-style: none;
  display: inline-block;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width:595px;
}

/*
解决tab样式冲突
*/
.yyuap-ref .TabClass .u-tabs-tab a:hover,.TabClass .u-tabs-tab a:focus{
  text-decoration: none;
}
/*
tab标签的样式 ---end
*/


/*
table标签的样式 ---start
*/
.yyuap-ref .tableWrap{
  border:1px solid #e9e9e9;
  width:100%;
}
.yyuap-ref .tableWrap{
 min-width:auto;
  width:100%;
}
.onlyRefTable .tableWrap{border:0;}
.onlyRefTable .tableWrap .u-table .u-checkbox{margin-left:15px;}
.yyuap-ref .Reftitle {
  width: 40%;
  font-size: 16px;
  display: inline-block;
  padding-left:15px;
}
.yyuap-ref .tableWrap .u-table th {
  background: #fff;
  font-weight: 700;
  -webkit-transition: background .3s ease;
  transition: background .3s ease;
  border-bottom: 1px solid #e9e9e9;
  line-height: 15px;
  height: 15px;
}
.yyuap-ref .tableWrap .u-table-header{
  overflow-y: hidden!important;
  margin-bottom: 0;
}
.yyuap-ref .tableWrap .u-table td, .u-table th{
  border-top:0;
  padding:10px 8px;
  white-space: normal;
}
.yyuap-ref .tableWrap .u-table td:first-of-type, .u-table th:first-of-type{
  padding-left:8px;
}
.yyuap-ref .tableWrap .u-table .u-table-tbody{
  font-size: 12px;
  color: #666;
}
.yyuap-ref .tableWrap .u-table .u-table-tbody .u-table-row.selected{
  background: #e3f2fd;
}
.RefTableWrap .u-table-tbody .u-table-row.selected{
  background: rgba(33, 150, 243, 1);;
}


.yyuap-ref .tableWrap .u-table{
  border:0;
}
.yyuap-ref .tableWrap .u-table .td{
  border-top:0;
}

.yyuap-ref .paginationWrap .u-pagination{
  position: relative;
  bottom: 0;
  height: 50px;
  line-height: 45px;
  left: 9px;
  z-index: 1;
}
.yyuap-ref .tableWrap table { width:100%}



/*
Ref-Tree style
*/
@media (max-width:767px){
  .onlyRefTreeModal :global(.u-modal-dialog){
      width:482px;
  }
}
@media (min-width:768px){
  .onlyRefTreeModal :global(.u-modal-dialog){
      width:482px;
  }
}
.onlyRefTreeModal.u-modal .Ref-Search{
  /* left:25%; */
}
.onlyRefTreeModal .u-tree li a.u-tree-node-selected { background-color: inherit;color:#086ebb}
.onlyRefTreeModal .u-tree-node-content-wrapper { width: 90%;}
.yyuap-ref.u-modal .u-modal-header { padding:0;border-bottom:0;    z-index: 99999;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 40px;
}
.yyuap-ref .u-tree{ padding-left:15px;padding-top:15px;}
.onlyRefTreeModal .u-tree{ padding-right:15px;}
.onlyRefTreeModal .u-tree .title-con{position: relative;}
.yyuap-ref  .u-tree li{margin:5px 0}
.yyuap-ref.u-modal .u-modal-header .u-close { margin:15px 10px 0 0}
.treebox{
  display: flex;
  /*border-top: 1px solid #e9e9e9;*/
}
.yyuap-ref .c-tree .scroll{
  
  max-height: 300px;
  min-height: 300px;
  height: 100%;
  width: 100%
}
.yyuap-ref .c-tree{  flex:1;  }
.yyuap-ref .c-tree .TabWrap{  width: auto ;flex:1;  display: grid;height: auto }
.yyuap-ref .c-error{
  max-height: 300px;
  min-height: 300px;
  height: 100%;
  width: 100%;
  text-align: center;
}
.yyuap-ref .c-error.hide{
  display: none;
}
.yyuap-ref .c-checked{
  flex:1;
  border-left: 1px solid #e9e9e9;
}
.c-checked .head{position: relative;background-color:#f6f7f8;height:45px;line-height: 45px;padding-left: 10px;  border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;border-right: 1px solid #e9e9e9;
}
.c-checked .head .clear{position: absolute;right: 10px;cursor: pointer}
.c-checked .list{padding-left: 10px}
.c-checked .list .item{
  position: relative;
  height:30px;line-height: 30px}
.c-checked .list .remove{position: absolute;right: 10px;
  cursor: pointer;}

.u-checkbox{ width: auto}
.yyuap-ref .Ref-nodata { text-align: center; padding-top: 10px; height:300px}
.RefGrid .u-checkbox .u-checkbox-label{word-break: break-all;
  height: 25px;
  overflow: hidden;line-height: 25px;}


/* 下拉框z-index */
.u-select-dropdown.u-select-dropdown--single.u-select-dropdown-placement-bottomLeft{
    z-index:1701;
} 
.yyuap-ref .u-modal.in .u-modal-dialog{
  transform: translate(-50%,-50%)!important;
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}
.onlyRefTreeModal .u-checkbox .u-checkbox-label{padding-left:5px}
.rc-calendar-picker{
  z-index:9999!important
}
.u-tooltip{z-index:2000!important;}