button scss

//***ALL COLOR VARS & MIXINS***//
$heading_color: #555;
$body_background: #ebebeb;
$primary_color: #555;
$anchor_color: #03998d;
$body-txt-color: #777;
$wanted-card-color: #b6060a;
$closed-content-a-color: #729;
$infographic-heading: #949494;
$div-border-color: #f1f1f1;

//button colors
$button-color: #03998d;
$button-color-hover: #00A99B;
$button-border: #00756c;
$cancel-button-color: #777;
$cancel-button-border: #B6B6B6;
$cancel-button-hover: #F4F4F4;
$cancel-button-background: #fff;
$join-button: #F06E6E;
$join-button-border: #E52D2D;
$join-button-hover: #FF8080;


//note colors
$note-tag-companybg: #d3741c;
$note-tag-companybg-hover: #bb5b00;
$note-tag-topicbg: #2b7ea0;
$note-tag-topicbg-hover: #01648d;
$note-tag-notexist: #f0f0f0;
$note-tag-notexist-hover: #ececec;

$card-header-color: #fff;

// //snippet for all buttons in Wikirate. Should use this .button primary class anywhere a button is required for a positive action(like submit, Go, etc)
button,
.button-primary,
.right-sidebar-button a,
.TYPE-page .source-side .internal-link,
.TYPE-analysis.STRUCTURE-analysis_comparison a.internal-link,
.ui-dialog .ui-dialog-buttonpane button {
  margin-right: 1%;
  background: $button-color;
  border: none;
  color: #fff;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  background-clip: padding-box;
  border-bottom: 4px solid $button-color;
  padding: 10px 12px 6px;
  cursor: pointer;
  text-decoration: none !important;
  font-size: 1em;
  font-weight: 600;
  outline: none;
  -webkit-transition: background 200ms linear;
  -moz-transition: background 200ms linear;
  -o-transition: background 200ms linear;
  transition: background 200ms linear;
  &:hover {
    background: $button-color-hover;
    padding: 10px 12px 6px;
    border-bottom: 4px solid $button-border;

  }
  &:active {
    background: $button-color-hover;
    border-top: 2px solid $button-border;
    border-bottom: 0;
    padding: 9px 12px;

  }
  &.create-cancel-button,
  &.cancel-button,
  &.button-secondary,
  &.grey-color {
    background: $cancel-button-background;
    color: $cancel-button-color;
    border: 1px solid $cancel-button-border;
    padding-bottom: 8px;
    &:hover {
      background: $cancel-button-hover;
      padding: 10px 12px 6px 12px;
      border-top: 1px solid $cancel-button-border;
      border-right: 1px solid $cancel-button-border;
      border-left: 1px solid $cancel-button-border;
      border-bottom: 3px solid #C2C2C2;
      // color: #fff;
    }
    &:active {
      background: $cancel-button-hover;
      border-top: 2px solid $cancel-button-border;
      border-bottom: 0;
      padding: 9px 12px;
    }
  }


}

//Tweak to large buttons in topic,company and overview page
.right-sidebar-button a {
  text-align: center;
  display: block;
  font-size: 1em;
  margin-bottom: 10px;
}

//Seconday button for anchors
.button-secondary-a a,
.grey-color a {
  background: $cancel-button-background;
  color: $cancel-button-color;
  border: 1px solid $cancel-button-border;
  padding-bottom: 8px;
  &:hover {
    background: $cancel-button-hover;
    padding: 10px 11px 6px 12px;
    border-top: 1px solid $cancel-button-border;
    border-right: 1px solid $cancel-button-border;
    border-left: 1px solid $cancel-button-border;
    border-bottom: 3px solid #C2C2C2;
    // color: #fff;
  }
  &:active {
    background: $cancel-button-hover;
    border-top: 2px solid $cancel-button-border;
    border-bottom: 0;
    padding: 9px 12px;
  }
}

.TYPE-analysis .cite-button{
    color: #fff;
    padding: 2px 4px 2px 4px!important;
    float: left;
    margin-top: 16px;
}

.join-button,#signup-link, .TYPE-analysis .cite-button{
  background: $join-button;
  border: 1px solid $join-button;
  padding-bottom: 8px;
  &:hover {
    background: $join-button-hover;
    padding: 10px 12px 6px 12px;
    border-bottom: 3px solid $join-button-border;
    text-decoration:none;
    // color: #fff;
  }
  &:active {
    background: $join-button-hover;
    border-top: 2px solid $join-button-border;
    border-bottom: 0;
    padding: 9px 12px;
  }
}