@import './colors.scss';
@import './mixin/index.scss';
// 一些通用的css（不是特别多地方用但又几个地方用的放这）
.pages {
	padding: 24px 20px;
	&-title {
		height: 22px;
		font-size: 16px;
		font-weight: 500;
		color: rgba(48, 49, 51, 1);
		line-height: 22px;
	}
}

.el-table__empty-block {
	min-height: 200px;
}

.table-search-head {
	background: #f2f3f7;
	padding: 9px 20px;
}
.prefix-amount {
	.el-input {
		position: relative;
		&::before {
			position: absolute;
			left: 0;
			top: 0;
			left: 11px;
			text-align: right;
			content: '￥';
			display: block;
			z-index: 100;
		}
		input {
			padding-left: 35px !important;
		}
	}
}


// 颜色选择器
.color-picker-custom {
  border-radius:2px;
  overflow: hidden;
	border:1px solid rgba(196,198,207,1);
	width: 100px;
  height: 32px;
  line-height: 30px;
	padding: 0px 3px 0 9px;
  .el-color-picker {
    height: auto;
  }
  .el-color-picker__trigger {
    border: none;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 9px;
    margin-top: 3px;
  }
	span.color {
		display: inline-block;
		width: 51px;
		overflow: visible;
		font-size: 12px;
		color: #303133;
  }
}
// 颜色选择器去掉取色器
.hide-picker {
  width: 275px !important;
  .el-color-dropdown__main-wrapper{
    display: none !important;
  }
  .el-color-dropdown__btns .el-color-dropdown__value + button {
    display: none !important;
  }
}

// 仅去掉清空按钮
.hide-clean {
  .el-color-dropdown__btns .el-color-dropdown__value + button {
    display: none !important;
  }
}

pre, textarea {
	font-family: inherit;
}


// 修改门店选择器和商品选择器的样式
body .damo-goods-selector{
	width: 874px !important;
	.group-list {
		padding: 26px 32px;
	}
}



// 上下结构
.main-content {
  background: $gray-background !important;
  &-head {
    background: white;
    margin-bottom: 16px;
  }
  &-bodys {
    padding: 15px 20px 20px 20px;
    background: white;
    min-height: calc(100vh - 314px);
  }
}

.el-input-number__decrease {
  bottom: 2px !important;
}


// 仿表格
.imitation-table {
  text-align: left;
  th, td {
    min-height: 48px;
  }
  thead tr {
    background: #ebecf0;
    color: #303133;
    font-size: 14px;
  }
  thead th {
    padding: 0 10px;
    height: 48px;
    line-height: 48px;
  }
  tbody {
    td {
      border-bottom: 1px solid #e4e7ed;
      padding: 12px 10px;
      vertical-align: middle;
      color: #606266;
    }
    .count {
      text-align: center;
      border-left: 1px solid #e4e7ed;
    }
  }
  .el-button + .el-button {
    margin-left: 16px
  }
  // div的仿表格
  .thead {
    background: $gray-disable;
    color: #303133;
    font-size: 14px;
    .el-col {
      font-weight: 500;
      line-height: 23px;
      padding: 12px 10px;
    }
  }
  .tbody {
    .td {
      border-bottom: 1px solid $gray-separator;
      padding: 12px 0px;
      vertical-align: middle;
      color: #606266;
      transition: background-color .25s ease;
      &.active, &:hover {
        background: #F5F7FA;
      }
      .el-row {
        display: flex;
        align-items: center;
      }
      .el-col {
				flex-shrink: 0;
        padding: 0 10px;
        line-height: 23px;
      }
    }
  }
}

// div仿表格 -- 可拖拽
.drag-table {
  .thead, .td {
    padding-left: 30px !important;
    font-weight: 500;
  }
  .td {
    // -webkit-transition: all 0.3s ease;
    // transition: all 0.3s ease;
    position: relative;
    &.active .icon-paixu {
      opacity: 1;
    }
    // overflow: hidden;
    // &.active {
    //   padding-left: 30px;
    //   .icon-paixu {
    //     margin-left: 20px;
    //   }
    // }
    // .icon-paixu {
    //   position: absolute;
    //   left: -15px;
    //   top: 50%;
    //   -webkit-transform: translateY(-50%);
    //           transform: translateY(-50%);
    //   cursor: all-scroll;
    //   -webkit-transition: all 0.3s ease;
    //   transition: all 0.3s ease;
    // }
    .icon-paixu {
      opacity: 0;
      position: absolute;
      left: 12px;
      top: 35%;
      cursor: all-scroll;
      color: #C4C6CF;
    }
		.td {
      border-bottom: 1px solid #e4e7ed;
      padding: 12px 0px;
      vertical-align: middle;
      color: #606266;
      .el-row {
        display: flex;
        align-items: center;
      }
      .el-col {
				flex-shrink: 0;
        padding: 0 10px;
        line-height: 23px;
      }
    }
  }
  .ghost {
    opacity: 0.8;
    background: #f5f7fa;
  }
}


// 楼层的样式
.floor {
  position: fixed;
  right: 56px;
  top: 180px;
  background: rgba(255, 255, 255, 0.5);
  z-index: 999;
  li {
    // width:150px;
    padding-right: 10px;
    height:24px;
    line-height:24px;
    border-left: 2px solid #E4E7ED;
    color: #606266;
    cursor: pointer;
    span {
      font-size: 12px;
      color: inherit;
      margin-left: 16px;
    }
    &.active {
      color: $blue;
      border-color: $blue;
    }
  }
}

// 包裹图片
.img-wrap {
  display: inline-block;
  background: $gray-disable;
  padding: 8px;
  border-radius:2px;
  border:1px dashed $gray-border;
}

// el-input 次
.ci {
	@include input-append('次');
}
.percent {
	@include input-append('%');
}
.sec {
	@include input-append('秒');
}

// 隐藏精确到时间的dateTimerPicker的此刻
.el-date-picker.hide-right-now {
  .el-picker-panel__footer button:first-child {
    display: none;
  }
}



// 覆盖部分
.damolish {
  // overflow-y: auto !important;
	.dm-input__counter {
		bottom: 2px !important;
  }
  // .layout .main {
  //   z-index: 0;
  //   position: relative;
  // }
}


.card-popover {
  padding: 0px !important;
  width: 80px !important;
  min-width: 80px !important;
  // margin-top: 0 !important;
  > div {
    // position: absolute;
    // background: #FFF;
    // min-width: 150px;
    // border: 1px solid #EBEEF5;
    // padding: 12px;
    // z-index: 2000;
    // color: #606266;
    // line-height: 1.4;
    // text-align: justify;
    // font-size: 14px;
    // -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    //         box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    // word-break: break-all;
  }
  .option-dropdown {
    padding: 7px 1px;
    min-width: auto;
    li {
      padding: 0;
      height: 34px;
      line-height: 34px;
    }
  }
}

// 福利选择后反显样式
.wf-btn {
  // display: inline-block;
  max-width: 100%;
  cursor: pointer;
  &.delete:hover > div {
    border-color: rgba(196, 198, 207, 1);
  }
  &.readOnly {
    cursor: no-drop;
    i.del {
      display: none !important;
    }
    &:hover > div {
      border-color:rgba(196, 198, 207, 1);
    }
  }
  &:hover {
    > div {
      border-color: $blue;
    }
    i.del {
      opacity: 1;
    }
  }
  .unuse_flag {
    font-size: 12px;
    margin-left: 10px;
    color: $gray03;
    transform: scale(0.9);
    &.d {
      color: #f56c6c;
    }
  }
  > div {
    position: relative;
    padding: 0 10px 0 10px;
    display: flex;
    height: 32px;
    background: white;
    border-radius: 2px;
    border: 1px dashed rgba(196, 198, 207, 1);
    position: relative;
    align-items: center;
    i.del {
      opacity: 0;
      position: absolute;
      right: -20px;
      color: $gray03;
      &:hover {
        color: $red-error;
      }
    }
  }
  .name {
    max-width: 255px;
    padding-right: 5px;
    font-size: 14px;
    font-weight: 400;
    color: $gray01;
    line-height: 20px;
    display: inline-block;
    @include ellipsis(100%);
  }
  &:hover {
    .del {
      opacity: 1;
    }
  }
  .stock {
    height:20px;
    font-size:14px;
    font-weight:400;
    color:$gray02;
    // margin-left: auto;
    line-height: 20px;;
  }
  .tag {
    text-align: center;
    height: 22px;
    line-height: 21px;
    font-size: 12px;
    background: rgba(240, 245, 255, 1);
    border-radius: 2px;
    border: 1px solid rgba(173, 198, 255, 1);
    color: #2f54eb;
    padding: 0px 8px 0px;
    margin-right: 10px;
  }
}

// 设置空main  layout cover
.big-main {
  padding: 0 !important;
  height: calc(100vh - 55px) !important;
  background: transparent !important;
  width: 100% !important;
  .dm-page {
    background: transparent !important;
    min-height: calc(100vh - 55px) !important;
  }
}

p.cell-time {
  line-height: 18px;
}


// 仿btn
.hover-btn {
  cursor: pointer;
  color: $gray03 !important;
  &.deep {
    color: $gray02 !important;
  }
  &:hover {
    color: $blue !important;
  }
}
.unuse-icon {
  cursor: pointer;
  color: #f56c6c;
  margin-left: 3px;
  display: inline-block;
  position: relative;
  top: 2px;
}

.mk-view {
  .select-area{
    display: none;
  }
  .reveal-content {
    padding-top: 0px !important;
  }
}

.gic-upload__img.disabled .el-icon-delete {
  display: none;
}

// 履约管理
.performance-order-info { // 履约单信息样式
  div {
    display: flex;
  }
  span:first-of-type {
    flex-shrink: 0;
  }
}

.goods-info { // 商品信息
  height: 100%;
  display: flex;
  img {
    width: 62px;
    height: 62px;
    border: 1px solid rgba(241, 243, 247, 1);
    border-radius: 5px;
  }
  .goods-text {
    margin-left: 18px;
    font-size: 13px;
    color: #303133;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .goods-text-info {
    color: #909399;
    font-size: 12px;
  }
  .goods-text-name {
    margin-bottom: 5px;
    line-height: 16px;
  }
}

// 通用title
.common-title {
  border-bottom: 1px solid #E4E7ED;
  padding-bottom: 9px;
  line-height: 1;
  padding-left: 11px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  &::before {
    content: '';
    width: 3px;
    height: 14px;
    background: #2F54EB;
    left: 0;
    top: 0;
    display: block;
    position: absolute;
  }
}

// 固定底部的按钮
.dm-aside-menu + .layout-content-area {
  .fixed-bottom {
    width: calc(100% - 200px);
  }
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  box-shadow: 0px -2px 8px 0px rgba(220, 223, 230, 0.6);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}