cartodb/assets/stylesheets/common/buttons.scss

// Buttons
// --------------------------------------------------

@import '../variables/colors';
@import '../variables/sizes';

$cHighlight-mainHover: rgba(#007FBD, 1);

.Button {
  display: flex;
  align-items: center;
  height: $sButton-height;
  padding: 0 29px;
  border: $sButton-border solid $cStructure-mainBkg;
  border-radius: $sButton-borderRadius;
  outline: none;
  text-align: center;
  text-decoration: none;
}

.Button--inline {
  display: inline-block;
  margin: 0 $sMargin-elementInline;
}

.Button--centered {
  margin: auto;
}

.Button,
.Button span {
  box-sizing: border-box;
  color: #FFF;
  font-size: $sFontSize-smallUpperCase;
  font-weight: $sFontWeight-bold;
  line-height: $sLineHeight-button;
  text-transform: uppercase;
  white-space: nowrap;
}

.Button-inner {
  line-height: $sButton-height;
}

.Button-arrowMenu {
  margin-top: 2px;
  margin-left: 3px;
  font-size: 8px;
  vertical-align: top;
}

.Button.is-hidden {
  display: none;
}

.Button:hover,
.Button span:hover {
  text-decoration: none;
}

.Button.is-disabled {
  opacity: 0.5;

  &:hover {
    cursor: default;
  }
}

.Button--main {
  border-color: $cHighlight-main;
  background-color: $cHighlight-main;

  &:hover {
    background-color: $cHighlight-mainHover;
  }

  &.is-disabled:hover {
    background-color: $cHighlight-main;
  }
}

.Button--positive {
  border-color: $cHighlight-positive;
  background-color: $cHighlight-positive;

  &:hover {
    $positive-hover: rgba(#7FA538, 1);
    border-color: $positive-hover;
    background-color: $positive-hover;
  }

  &.is-disabled:hover {
    border-color: $cHighlight-positive;
    background-color: $cHighlight-positive;
  }
}

.Button--invert {
  border-color: $cTypography-link;
  background-color: none;
  color: $cTypography-link;

  span {
    color: $cTypography-link;
  }

  &:hover {
    background-color: $cTypography-link;
    color: #FFF;

    span {
      color: #FFF;
    }
  }
}

.Button--negative {
  border-color: $cHighlight-negative;
  background-color: $cHighlight-negative;

  &:hover {
    background-color: rgba(#B93F37, 1);
  }
}

.Button--alert {
  border-color: $cHighlight-alert2;
  background-color: $cHighlight-alert2;

  &:hover {
    background-color: rgba($cHighlight-alert2, 1);
  }
}

.Button--secondary {
  border: 1px solid $cNavButton-default;
  background-color: rgba(#FFF, 1);

  span {
    color: $cNavButton-default;
  }

  .Button-arrowMenu {
    color: #777;
  }

  &:hover {
    border-color: $cNavButton-active;

    span {
      color: $cNavButton-active;
    }

    .Button-arrowMenu {
      color: #444;
    }
  }
}

.Button--secondaryTransparentBkg {
  background-color: transparent;
}

.Button.is-smaller {
  height: 30px;
  padding: 0 15px;
}

.Button--secondaryBlue {
  border-color: transparent;
  background-color: rgba(#FFF, 1);

  span {
    color: $cHighlight-main;
  }

  &:hover span {
    color: $cHighlight-mainHover;
  }
}

.Button--light {
  border: $sButton-border solid #FFF;
  background-color: rgba(#FFF, 1);
  color: #384047;

  &:hover {
    background-color: rgba(#384047, 1);
    color: #FFF;
  }
}

.Button--link {
  color: $cTypography-link;
  text-transform: inherit;

  &:hover {
    color: $cTypography-linkSelected;
    text-decoration: underline;
  }
}

.Button--link.is-inline {
  padding-right: 0;
  padding-left: 0;
}

.Button--link.is-destructive {
  color: $cHighlight-negative;

  &:hover {
    color: $cHighlight-negative;
  }
}
// Use this instead of .Button--positive on header background
.Button--headerPositive {
  border: $sButton-border + 1 solid #FFF;
  color: #FFF;

  &:hover {
    background-color: #FFF;

    span {
      color: $cTypography-linkHover;
    }
  }
}

.Button-importShowDetails {
  height: 24px;
  padding: 0 11px;
  border: 1px solid #CCC;
  border-radius: $sButton-borderRadius;
  background: transparent;
  color: $cTypography-paragraphs;
  font-size: $sFontSize-smallUpperCase;
  line-height: 24px;

  &:hover {
    border-color: $cTypography-paragraphs;
    color: $cTypography-paragraphs;
  }
}

.Button--gray {
  display: inline-block;
  margin: auto;
  transition: opacity 150ms ease-in-out;
  border: 1px solid #CCC;
  border-radius: $sButton-borderRadius;
  background-color: transparent;
  color: $cTypography-linkSecondaryHover;
  font-size: $sFontSize-smallUpperCase;
  line-height: 24px;

  &:hover {
    border-color: #888;
  }
}