jimu-mobile/src/styles/jimu-button.less

积木组件库助力移动端开发

.didi_btn {
  display: block;
  padding: 0;
  width: 100%;
  height: @button-big-height;
  line-height: @button-big-height;
  border-radius: @radius-xs;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  background-image: none;
  white-space: nowrap;
  outline: none;
  font-size: @font-size-caption;
  color: @color-text-highlight;
  background: @fill-base;
  border: @border-width-sm solid @border-color-highlight;
  box-sizing: border-box
}
.didi_btn.active,.didi_btn:active,.didi_btn:focus {
  border: @border-width-sm solid @border-color-highlight;
}
.didi_btn.active,.didi_btn:active{
  background: rgba(214, 216, 222, .3);
}
.didi_btn:disabled {
  background: @fill-disabled;
  border: none;
  color: @color-text-base-inverse;
}
.didi_btn_selected {
  border:@border-width-sm solid @border-color-selected;
  color:@color-text-selected;
}
.didi_btn_highlight {
  background: @fill-highlight;
  color: @color-text-base-inverse;
  border: none;
  height: @button-big-height;
}
.didi_btn_highlight:hover,.didi_btn_highlight:visited{border:none;}
.didi_btn_highlight.active,.didi_btn_highlight:active {
  background: @color-text-highlight-focus;border:none;outline: none;
}
.didi_btn_disable,.didi_btn_disable:focus,.didi_btn_disable:active{
  border-color: @border-color-disable;color: @color-text-disabled;background: none;
}
.didi_btn_highlight_disable,.didi_btn_highlight:disabled,.didi_btn_highlight_disable:active,.didi_btn_highlight_disable:focus  {
  background: @fill-highlight-disabled;
  color: @color-text-base-inverse;
  border: none
}
.didi_btn_border {
  outline: none;
  font-size: @font-size-caption-sm;
  height: @button-small-height;
  line-height: @button-small-line-height;
  vertical-align: middle;
  width:auto;
  display: inline;
  padding:.1rem .6rem;
  text-align: center;
}
.jimu-button-size-big{display: inline-block;padding: 0 50px;font-size: @font-size-subhead;}
.jimu-button-size-small{display: inline-block;padding: 0 15px;font-size: @font-size-caption-sm;line-height: @button-middle-height;height: @button-middle-height;}
.jimu-button-type-float,.jimu-button-type-float:active,.jimu-button-type-float:focus{background: @fill-base;
box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
border-radius: @radius-xs;border:none; }
.jimu-button-type-float.didi_btn_disable,.jimu-button-type-float.didi_btn_disable:focus{background: @fill-float;color: @color-text-disabled;}
.jimu-button-type-float:active{background:@fill-float;}
.jimu-button-type-float.didi_btn_highlight{color:@fill-highlight;}