elementUI样式

2021-08-05  本文已影响0人  小溪流jun
/*el-input */
.input {
  //修改element的input的关闭按钮
  .el-input__suffix {
    height: 40px;
    background-image: url("~@/images/common/ic_close.png");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: left;
    .el-input__suffix-inner {
      border-color: none;
      .el-icon-circle-close:before {
        display: none;
      }
    }
  }
}
.el-input__inner {
  //input和下拉框暗文的边距
  padding: 0 10px;
  border: 1px solid #bebebe;
  border-radius: 4px;
}
input::-webkit-input-placeholder {
  //统一输入框的placeholder字体
  color: #888888 !important;
}
textarea::-webkit-input-placeholder {
  color: #888888 !important;
}
button:focus {
  outline: none;
}
.el-input.is-disabled .el-input__inner {
  background: #f2f2f2;
}

/* el-dialog弹窗关闭按钮 */
.el-dialog__headerbtn {
  height: 16px;
  width: 16px;
  background-image: url("../home/close.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 16px 16px;
}
.el-dialog__headerbtn i {
  display: none;
}

/* 分页器 */
.el-pagination.is-background {
  .btn-prev,
  .btn-next {
    width: 32px;
    height: 32px;
    background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 100%);
    border-radius: 4px;
    border: 1px solid #c6c6c6;
  }
  .el-pager li {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #c6c6c6;
  }
  .btn-quicknext {
    border: none !important;
  }
  .el-pagination__sizes {
    height: 32px !important;
  }
  .el-input__inner {
    height: 32px !important;
  }
  .el-input__suffix {
    height: 30px;
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#ffffff),
      to(#e7e7e7)
    );
    background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 100%);
    border-left: 1px solid #c6c6c6;
    transform: scale(1);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    top: 1px;
    right: 1px;
  }
  .el-pager .active {
    border-color: #1890ff !important;
  }
}

/* toast */
.el-message {
  min-width: 196px !important;
  // border-color: rgba(0,0,0,0.6);
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  display: flex;
  justify-content: center;
  z-index: 900000 !important;
  padding: 15px 50px;
  .el-message__icon {
    display: none;
  }
  .el-message__content {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 20px;
  }
}
/deep/.el-message {
  .el-icon-info:before {
    content: "";
  }
  .el-message__content {
    color: #fff !important;
  }
}

/* element下拉框 */
.el-select {
  //字体图片
  .el-input__suffix {
    .el-input__suffix-inner {
      .el-select__caret::before {
        display: none;
      }
      .el-select__caret {
        height: 40px;
        width: 34px;
        background-image: url("~@/images/common/up.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px 24px;
        position: relative;
        z-index: 99;
      }
      // .is-reverse{
      //   background-image: url('~@/images/common/close2@2x.png') ;
      // }
    }
  }
}
.el-select-dropdown__wrap {
  .el-select-dropdown__list {
    //下拉框
    padding: 0;
    border: 1px solid rgba(170, 170, 170, 1);
    border-radius: 4px;
    overflow: hidden;
    .hover {
      background: #fff;
    }
    .selected {
      background: rgba(237, 237, 237, 1);
      color: #e0121b !important;
      font-weight: 600 !important;
      font-size: 16px !important;
    }
    .el-select-dropdown__item {
      font-size: 16px;
      border-bottom: 1px solid #d8d8d8;
      padding-left: 15px !important ;
      &:last-child {
        border-bottom: 0;
      }
    }
    // /deep/.el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: #ededed;
      color: #e0121b;
      font-weight: 600;
      font-size: 16px;
    }
  }
}

上一篇下一篇

猜你喜欢

热点阅读