yun-ui/packages/style/stylesheets/buttonGroup.less

Mobile UI Components Library for Vue.js by yunzhijia.

@import "var";

/* tabbar */
.@{uiName} {
  &-button-group {
    display: flex;
    display: -webkit-box;
    text-align: center;
    background-color: #ffffff;
    &.is-fixed {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zIndexNormal;
    }
    .@{uiName}-tab-item-label:active{
      opacity: 0.5;
    }
    //重置内嵌的tabItem默认样式
    .@{uiName}-tab-item-label {
      color: @secondaryFontColor;
      height: @buttonGroupHeight;
      line-height: @buttonGroupHeight;
      font-size: @buttonGroupFontSize;
      > img{
        display: inline-block;
        vertical-align: middle;
        width: 22px;
        height: auto;
      }
      &.is-active {
        color: @themeColor;
        .iconfont{
          opacity: 1;
          color: @themeColor;
        }
      }
      .iconfont {
        opacity: 0.4;
        vertical-align: middle;
        color: @secondaryFontColor;
        //padding: 0 @buttonGroupIconFontPadding;
      }
    }
  }
}