Newer
Older
ganzhou-feidu / src / styles / element-ui.scss
wangxitong on 11 Sep 5 KB Default Changelist?
//to reset element-ui default css
.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}
// 解决input 填空区占位符的颜色问题
$placeholder-color:#C0C4CC;
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  color:$placeholder-color !important;
}
input:-moz-placeholder,textarea:-moz-placeholder{
  color:$placeholder-color !important;
}
input::-moz-placeholder,textarea::-moz-placeholder{
  color:$placeholder-color !important;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{
  color:$placeholder-color !important;
}

//element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// 表格行边距
.el-table td{
  padding: 7px 0px
}

//button mini边距
.el-button--mini{
  padding:5px 7px;
}
.el-button+.el-button {
  margin-left:3px;
}
.el-range-separator{
  width: 7% !important;
}
// 悬停弹框设置最大宽度
.el-tooltip__popper{
  max-width: 200px !important;
}
.el-menu-item,.el-submenu__title,.el-submenu .el-menu-item{
  height:48px;
  line-height:48px;
}
$select-color: #03bfd2;
$normal-color: #072047;
$text-color: #9ab1ce;
$border-color: #718cad;
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  color: #ffffff !important;
  background-color: $select-color !important;
  -webkit-box-shadow: -1px 0 0 0 #409EFF;
  box-shadow: -1px 0 0 0 #409EFF;
}

.el-radio-button__inner {
  white-space: nowrap;
  background: $normal-color !important;
  border-color: $border-color !important;
  border: 1px solid #DCDFE6;
  border-left: 0;
  color: $text-color !important;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  position: relative;
  cursor: pointer;
  -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  padding: 12px 20px;
  font-size: 1.2rem !important;
  letter-spacing: 1px;
  border-radius: 0;
}
.el-input__inner {
  -webkit-appearance: none;
  background-color: #0f274b !important;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  border-color: $border-color !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 10px;
  font-size: 18px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
}
.el-input-group__append, .el-input-group__prepend {
  //background-color: $border-color !important;
  background-color: $border-color !important;
  border-color: $border-color !important;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}

.el-input-group__append button.el-button, .el-input-group__append div.el-select .el-input__inner, .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, .el-input-group__prepend div.el-select .el-input__inner, .el-input-group__prepend div.el-select:hover .el-input__inner {
  border-color: $border-color !important;
  background-color: $border-color !important;
  color: white;
  border-top: 0;
  border-bottom: 0;
}

.el-range-editor .el-range-input {
  background-color: #0f274b !important;
  color: white;
  font-size: 18px;
}
.el-date-editor .el-range-separator {
  color: white;
  font-size: 18px;
}
.el-picker-panel {
  color: #606266;
  border: 1px solid #E4E7ED;
  border-color: $border-color !important;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  background: $border-color;
  border-radius: 4px;
  line-height: 30px;
  margin: 5px 0;
}
.el-picker-panel__footer {
  border-top: 1px solid #e4e4e4;
  padding: 4px;
  text-align: right;
  background-color: transparent;
  position: relative;
  font-size: 0;
}
.el-date-table td.end-date div, .el-date-table td.start-date div {
  color: white;
  background-color: #0f274b !important;
  font-weight: bold;
}
.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #0f274b !important;
  color: white;
  font-weight: bold;
}
.el-date-table td  {
  width: 32px;
  padding: 4px 0;
  font-size: 16px;
  color: white;
}
.el-date-table th {
  color: white;
  font-size: 14px;
}
.el-date-range-picker__header {
  color: white;
}
.el-picker-panel__icon-btn {
  color: white;
}
.el-date-editor .el-range__close-icon {
  color: white !important;
}
.el-button--mini, .el-button--small {
  font-size: 14px;
  border-radius: 3px;
  letter-spacing: 2px;
  padding: 6px 10px;
}

.el-button--text {
  color: $normal-color;

}
.el-dialog, .el-pager li {
  background: #00000000 !important;
  font-size: 18px !important;
}
.el-pagination button {
  color: #C0C4CC;
  background-color: #00000000 !important;
}
.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #FFF;
  font-weight: 700;
}

.el-pagination .btn-next, .el-pagination .btn-prev {
  background: center center no-repeat #FFF;
  background-image: initial;
  background-position-x: center;
  background-position-y: center;
  background-size: initial;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(255, 255, 255);
  background-size: 16px;
  cursor: pointer;
  margin: 0;
  color: #FFF;
}

.el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
  color: #FFF;
}