default.scss

/**
 * The default button theme: white button with dark gray label, gray border, and
 * some extra effects in different state.
 *
 * The comments in this file explain how to write a custom button theme.
 */

@import "~styles/mixins";

/* Generic button of medium size. */
@mixin button {
  @include tc-label-lg;

  align-items: center;
  background: $tc-white;
  border: solid 1px $tc-gray-30;
  border-radius: 4px;
  box-sizing: border-box;
  color: $tc-gray-80;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
}

/* NOTE: All CSS rules below use two classes, to have higher specifity, thus
 * avoiding overriding of these rules by parent rules in some scenarious. */

/* Additional styling for a disabled button. */
.button.disabled {
  @include button;

  cursor: not-allowed;
  opacity: 0.3;
}

/* .link and .regular classes are applied only to active button-like links,
* and real buttons (rendered as <button> elements). */
.button.link,
.button.regular {
  @include button;

  /* To prevent different styling of the button-like link once it has been
   * visited. */
  &:visited {
    @include tc-label-lg;

    color: $tc-gray-80;
  }

  &:focus {
    box-shadow: 0 0 2px 1px #cfe6ff;
    border-color: #59a7ff;
    outline: none;
  }

  &:hover {
    background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
    border-color: $tc-gray-40;
  }

  &.active,
  &:active {
    background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    border-color: $tc-gray-40;
  }
}

/* And a few extra classes to support XS, SM and LG sizes. */

.button.xs {
  @include tc-label-sm;

  border-radius: 2px;
  color: $tc-gray-80;
  min-height: 20px;
  padding: 1px 13px;
}

.button.sm {
  @include tc-label-md;

  color: $tc-gray-80;
  min-height: 30px;
  padding: 4px 18px;
}

.button.lg {
  @include tc-label-xl;

  color: $tc-gray-80;
  min-height: 50px;
  padding: 5px 28px;
}