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

React JAM UI components

@import '../variables.styl';

btn-type-1($params) {
  background: $params.default.bg;
  border-color: $params.default.border;
  color: $params.default.color;
  box-shadow: $params.default.shadow;
  text-shadow: $params.default.textShadow;
  border-radius: $params.default.radius;
  
  &:hover {
    background: $params.hover.bg;
    border-radius: $params.hover.radius;
    border-color: $params.hover.border;
    color: $params.hover.color;
    box-shadow: $params.hover.shadow;
    text-shadow: $params.hover.textShadow;
  }
  &:active  {
    background: $params.active.bg;
    border-radius: $params.active.radius;
    border-color: $params.active.border;
    color: $params.active.color;
    box-shadow: $params.active.shadow;
    text-shadow: $params.active.textShadow;
  }

  &.disabled,
  &.disabled {
    &:hover,
    &:active  {
      background: $params.default.bg;
      border-radius: $params.default.radius;
      border-color: $params.default.border;
      border-radius: $params.default.radius;
      box-shadow: $params.default.shadow;
      text-shadow: $params.default.textShadow;
    }
  }

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

.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 {
    box-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 2px #0f90fd;
    z-index: 3;
  }

  &.hover,
  &:hover {
    
  }

  &.active,
  &:active {
    
  }

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

  &.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);
      }
    } else {
      &.{type} {
        height: params.height;
        line-height: params.height;
        font-size: params[font-size];
        padding: 0 (params.height/2 * 1.1);
      }
    }
  }
  
  for type, params in $buttons {
    if (type == 'default') {
      & {
        btn-type-1(params)
      }
    } else {      
      &.btn-{type} {
        btn-type-1(params)
      }
    }
  }

  .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);
    }
  }
}

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

  25% { opacity: 1; }

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