react-jam-ui/components/Button/styles.styl

React JAM UI components

$default = json('default.json', { hash: true });
$layoutDefault = json('../Layout/default.json', { hash: true });
$custom = json('../../../../ui.config.json', { hash: true, optional: true });

$buttons = typeof($custom) != 'null' ? $custom.$buttons : $default.$buttons;
$sizes = typeof($custom) != 'null' ? $custom.$sizes : $layoutDefault.$sizes;

@import 'themes/default.styl';
@import 'themes/flat.styl';

btn-ripples($params) {

  @keyframes ripples {
    0% { opacity: 0; }

    25% { opacity: 1; }

    100% {
      width: 200%;
      padding-bottom: 200%;
      opacity: 0;
    }
  }

  .ripples {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    
    .circle {//change to :after?
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      width: 0;
      height: 0;
      display: block;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
    }
  }


  .btn.active {
    .ripples .circle {
      animation: ripples .3s ease-in;
    }
  }
}

.btn {
  display: inline-block;
  padding: 0 12px;
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  position: relative;
  color: #000000;
  outline: none;
  min-width: 40px;
  
  &.focus,
  &:focus {
  }

  &.hover,
  &:hover {
  }

  &.active,
  &:active {    
  }

  &.loading {
    cursor: wait;
  }

  for type, params in $sizes {
    if (type == 'default') {
      & {
        height: params.height;
        line-height: params.height;
        font-size: params[font-size];
        padding: 0 (params.height/2);

        &.round {
          border-radius: (params.height / 2)!important;
        }
      }      
    } else {
      &.{type} {
        height: params.height;
        line-height: params.height;
        font-size: params[font-size];
        padding: 0 (params.height/2 * 1.1);
        
        &.round {
          border-radius: (params.height / 2)!important;
        }
      }
    }
  }

  for type, params in $buttons {
      if (type == 'default') {
        & {
            define('name', params.theme)
            btn-{name}(params)
        }
      } else {
        &.btn-{type} {
            define('name', params.theme)
            btn-{name}(params)
        }
      }
  }
}