react-jam-ui/components/Button/themes/flat.styl

React JAM UI components

btn-flat($params) {
  background: $params.default.bg;
  border: $params.default.border;
  color: $params.default.color;
  text-shadow: $params.default.textShadow;
  border-radius: $params.default.radius;
  
  &:focus,
  &:hover {
    background: $params.hover.bg;
    border: $params.hover.border;
    color: $params.hover.color;
  }
  &:active  {
    background: $params.active.bg;
    border: $params.active.border;
    color: $params.active.color;
  }

  &[disabled],
  &.disabled {
    cursor: default;
    background: $params.disabled.bg;
    color: $params.disabled.color;
    border: $params.disabled.border;
    &:hover,
    &:active  {
      background: $params.disabled.bg;
      color: $params.disabled.color;
      border: $params.disabled.border;
    }
  }

  for type, params in $sizes {
    if (type == 'default') {
      & {
        border-radius: $params.default.radius;
      }      
    } else {
      &.{type} {
        & {
          border-radius: $params.default.radius * (params.height / $sizes.default.height);
        }
        &:hover {
          border-radius: $params.default.radius * (params.height / $sizes.default.height);
        }
        &:active  {
          border-radius: $params.default.radius * (params.height / $sizes.default.height);
        }
      }
    }
  }  
}