@import "./mixins/functions.scss";

/* Button 按钮
------------------------------- */
// text
.el-button--text {
  color: set-color(primary);
  &:focus,
  &:hover {
    color: set-color(primary-light-3);
  }
}
.el-button--text:active {
  color: set-color(primary-light-3);
}
// default
.el-button--default:hover,
.el-button--default:focus {
  @include Button(primary, primary-light-8, primary-light-6);
}
.el-button--default.is-plain:hover,
.el-button--default.is-plain:focus {
  @include Button(primary, whites, primary-light-1);
}
.el-button--default:active {
  @include Button(primary, whites, primary-light-1);
}
// primary
.el-button--primary {
  @include Button(whites, primary, primary);
  &:hover,
  &:focus {
    @include Button(whites, primary-light-3, primary-light-3);
  }
}
.el-button--primary.is-plain {
  @include Button(primary, primary-light-8, primary-light-6);
  &:hover,
  &:focus {
    @include Button(whites, primary, primary);
  }
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  @include Button(whites, primary-light-7, primary-light-7);
}
.el-button--primary.is-active,
.el-button--primary:active {
  @include Button(whites, primary, primary);
}
// success
.el-button--success {
  @include Button(whites, success, success);
  &:hover,
  &:focus {
    @include Button(whites, success-light-3, success-light-3);
  }
}
.el-button--success.is-plain {
  @include Button(success, success-light-8, success-light-6);
  &:hover,
  &:focus {
    @include Button(whites, success, success);
  }
}
.el-button--success.is-active,
.el-button--success:active {
  @include Button(whites, success, success);
}
// info
.el-button--info {
  @include Button(whites, info, info);
  &:hover,
  &:focus {
    @include Button(whites, info-light-3, info-light-3);
  }
}
.el-button--info.is-plain {
  @include Button(info, info-light-8, info-light-6);
  &:hover,
  &:focus {
    @include Button(whites, info, info);
  }
}
.el-button--info.is-active,
.el-button--info:active {
  @include Button(whites, info, info);
}
// warning
.el-button--warning {
  @include Button(whites, warning, warning);
  &:hover,
  &:focus {
    @include Button(whites, warning-light-3, warning-light-3);
  }
}
.el-button--warning.is-plain {
  @include Button(warning, warning-light-8, warning-light-6);
  &:hover,
  &:focus {
    @include Button(whites, warning, warning);
  }
}
.el-button--warning.is-active,
.el-button--warning:active {
  @include Button(whites, warning, warning);
}
// danger
.el-button--danger {
  @include Button(whites, danger, danger);
  &:hover,
  &:focus {
    @include Button(whites, danger-light-3, danger-light-3);
  }
}
.el-button--danger.is-plain {
  @include Button(danger, danger-light-8, danger-light-6);
  &:hover,
  &:focus {
    @include Button(whites, danger, danger);
  }
}
.el-button--danger.is-active,
.el-button--danger:active {
  @include Button(whites, danger, danger);
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: var(--color-topBarColor);
  font-weight: normal;
  &:hover {
    color: var(--color-primary);
  }
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: set-color(primary);
  background-color: set-color(primary-light-9);
}

.el-scrollbar {
  width: 100%;
}

// 第三方图标字体间距/大小设置
.el-menu-item .iconfont,
.el-submenu .iconfont {
  font-size: 14px !important;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
}

// 菜单默认 hover 时的颜色
.el-menu-item:hover,
.el-submenu__title:hover {
  color: set-color(primary) !important;
  background-color: transparent !important;
  i {
    color: set-color(primary);
  }
}

.el-menu-item,
.el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
  color: var(--bg-menuBarColor);
  transition: none !important;
}

// 默认样式修改
.el-menu {
  border-right: none !important;
}

/* Breadcrumb 面包屑过渡动画
------------------------------- */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.3s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}
.breadcrumb-leave-active {
  position: absolute;
}