meri-design-dev/custom/theme/MButton.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.m-button
  display: inline-block
  vertical-align: middle
  padding-left: 8px
  padding-right: 8px
  border-radius: 4px
  border-width: 1px
  border-style: solid
  font-size: 0
  text-align: center
  transition: background-color .3s,border .3s

.m-button + .m-button
  margin-left: 12px

.m-button .m-button-content
  width: 100%

.m-button-default
  background-color: $theme
  border-color: $grey-400
  color: $grey-900

.m-button-default:hover
  border-color: $blue-500

.m-button-default:hover .m-button-text
  color: $blue-500

.m-button-default:active
  border-color: $blue-600

.m-button-default:active .m-button-text
  color: $blue-600

.m-button-blue
  background-color: $blue-500
  border-color: $blue-500
  color: $white

.m-button-blue:hover
  background-color: $blue-400
  border-color: $blue-400

.m-button-blue:active
  background-color: $blue-600
  border-color: $blue-600

.m-button-word
  background: none
  border-color: transparent
  color: $grey-900

.m-button-word .m-button-text
  font-weight: 500

.m-button-word:hover .m-button-text
  color: $blue-500

.m-button-word:active .m-button-text
  color: $blue-600

.m-button-large
  max-width: 128px
  min-width: 80px
  height: 40px

.m-button-large .m-button-content
  height: 38px
  line-height: 38px

.m-button-medium
  max-width: 116px
  min-width: 80px
  height: 32px

.m-button-medium .m-button-content
  height: 30px
  line-height: 30px

.m-button-small
  max-width: 108px
  min-width: 60px
  height: 28px

.m-button-small .m-button-content
  height: 26px
  line-height: 26px

.m-button-normal
  cursor: pointer

.m-button.m-button-disabled
  cursor: not-allowed

.m-button.m-button-disabled .m-button-text
  color: $grey-400

.m-button-disabled:not([type='word'])
  background-color: $grey-200
  border-color: $grey-200

.m-button-text
  font-size: 14px
  transition: color .3s