scss btn大小的goog例子，状态定义

Posted 2021-05-17

.btn {
  display: inline-block;
  height: 40px;
  box-sizing: border-box;
  font-weight: $btn-font-weight;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  padding: 0 16px;
  border: none;
  border-radius: $btn-border-radius;
  line-height: 38px;
  padding-bottom: 2px;
  font-size: $btn-font-size;
  font-family: 'Exo 2';
  color: $black;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.194378);
  &-md {
    font-size: $btn-font-size + 1;
    height: 48px;
    line-height: 46px;
    padding-bottom: 2px;
  }
  &-lg {
    font-size: $btn-font-size + 4;
    height: 64px;
    line-height: 62px;
    padding-bottom: 2px;
  }
  &-outline  {
    border: 1px solid gray;
    border: 1px solid #D2D2D2;
    background-color: white;
    box-shadow: none;
    &:hover, &:focus {
      border-color: #a3a3a2;
    }
    &:active, .active {
      background-color:#d2d2d2;
    }
    &.disabled, &:disabled {
      color: #a3a3a2;
      cursor: default;
    }
  }
  &-yellow {
    background: linear-gradient(180deg, #FFD600 4.1%, #FFC600 100%);
    border: none;
    &:hover, &:focus {
      background: linear-gradient(180deg, #FFE200 7.44%, #FFCF00 100%);
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.194378), 0px 1px 0px #E2AA01;
    }
    &:active, .active {
      background: linear-gradient(0deg, #FFB300 3.62%, #FFBC00 95.9%);
    }
  }
}