agneta-angularjs/source/style/button.module.styl

Create your agneta applications with AngularJS

.md-white{

  background: white !important;

  &:hover{
    background: color-grey;
  }
  md-icon {
    color: color-primary !important;
    fill: color-primary !important;
  }

}

.ag-list-item{
  margin: 0;
  display: flex;
  cursor: pointer;
  padding: 4px;

  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
  max-width: 100%;

  >*{
    margin: 8px;
  }

  &:hover{
    opacity: 0.7;
  }
  md-icon{
    width: 34px;
    height: 34px;
  }

  &.active{
    background: color-primary !important;
    color: white;
    md-icon{
      color: white !important;
    }
  }
}

.md-button{
  text-transform: none;
}

md-menu-item>a.md-button.selected{
  background: color-primary !important;
  color: white !important;
}

select-buttons{
  .md-button{
    md-icon{
      color: color-primary;
    }
    &.selected{
      background: color-primary;
      color: white;
      pointer-events: none;
      md-icon{
        color: white;
      }
      &.md-raised:not([disabled]):hover {
        background: color-primary;
      }
    }
  }
}