<commit_before>$button-radius:    3px


//=========================================
// base button mixin. used by the .btn class, <button> tags, and also dropdowns
//=========================================

=btn
  display: inline-block
  font-size: $font-size
  font-weight: normal
  color: $link-color
  cursor: pointer
  padding: 0 12px
  height: 32px
  line-height: 30px
  background-color: $link-color
  color: white
  border-radius: $button-radius
  border: none
  text-align: center
  text-decoration: none
  transition: all 0.2s ease-in-out
  +btn_hover($link-color)
  &:focus
    text-decoration: none
    outline: none
  &:disabled, &.disabled
    opacity: .30 !important
    pointer-events: none

  // these classes are used mostly for selected buttons in button groups
  &.selected, &.active
    background-color: darken(#E5E3E8, 7%)
    box-shadow: inset 0 0 1px rgba(0,0,0,0.2)

  .material-icons
    margin-right: 4px
    vertical-align: text-top

@mixin btn_hover($color)
  transition: none
  &:hover
    text-decoration: none
    background-color: $color
    background-image: linear-gradient($color, darken($color, 5%))
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2)
  &:active
    background-color: $color
    background-image: linear-gradient($color, darken($color, 5%))
    box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.2)


//=========================================
// button classes
//=========================================

.btn, input[type='submit'], button
  +btn

  //=========================================
  // different colored buttons
  //=========================================

  &.btn-primary
    background-color: $green
    color: white
    +btn_hover($green)
  &.btn-warning
    color: white
    background-color: $error-color
    +btn_hover($error-color)
  &.btn-white
    color: $text-color
    border: 1px solid $light-gray
    background-color: white
    +btn_hover(white)
  &.btn-gray
    color: $text-color
    border: 1px solid $gray
    background-color: $lighter-gray
    +btn_hover($lighter-gray)

  &.btn-outline
    background-color: transparent
    color: $link-color
    box-shadow: inset 0 0 0 1px $link-color
    +btn_hover($link-color)
    &:hover, &:active
      color: #fff


  // todo: is this necessary?
  &.btn-outline-white
    background-color: transparent
    color: rgba(255,255,255,0.8)
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7)
    +btn_hover(rgba(255,255,255,0.1))

  // todo: is this necessary?
  &.btn-outline-gray
    background-color: transparent
    color: $text-color
    border: 1px solid $gray
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7)
    +btn_hover(rgba(255,255,255,0.1))

  // todo: is this necessary?
  &.btn-cancel
    border: 1px solid #ccc
    color: #aaa
    background: #fff

  &.btn-pill
    border-radius: 24px

  // todo: is this necessary?
  &.filter-btn
    background-color: #fff
    color: $gray
    font-size: $small-font-size
    border: none
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2)
    .dropdown-trigger
      margin-left: 5px

    .dropdown-trigger:after
      border-top-color: $gray !important
    &.jq-dropdown-open .dropdown-trigger:after
      border-bottom-color: $gray !important

  //=========================================
  // button sizes
  //=========================================

  &.btn-huge
    padding: 0 16px
    height: 48px
    line-height: 46px
    font-size: 20px
    .material-icons
      font-size: 24px

  &.btn-large
    padding: 0 16px
    height: 40px
    line-height: 38px
    font-size: 16px
    .material-icons
      font-size: 20px

  &.btn-small
    font-size: $small-font-size
    padding: 0 8px
    height: 24px
    line-height: 24px
    .tv-icon
      font-size: 16px

  &.btn-tiny
    font-size: $tiny-font-size
    padding: 0 4px
    height: 20px
    line-height: 20px

  //=========================================
  // button alignment styles
  //=========================================

  &.btn-block
    display: block

  &.btn-block-left
    display: block
    text-align: left

  &.centered-wide-btn
    display: block
    margin-left: auto
    margin-right: auto
    width: 75%
    +mobile
      width: 100%

  // todo: consolidate with the above, and document
  &.btn-wide
    min-width: 320px
    +mobile
      min-width: 0
      width: 100%


//=========================================
// button groups
//=========================================

.btn-group
  .btn
    margin-right: -5px
    border-radius: 0
    &:hover
      box-shadow: none
    &.selected, &:active
      background-image: linear-gradient(#eee, darken(#eee, 5%))
      box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.2)
  .btn:first-child
    border-top-left-radius: $button-radius
    border-bottom-left-radius: $button-radius
  .btn:last-child
    margin-right: 0
    border-top-right-radius: $button-radius
    border-bottom-right-radius: $button-radius
  &.m-stack
    +mobile
      .btn
        margin: 0
        margin-top: -1px
        display: block
        border-radius: 0
      .btn:first-child
        margin-top: 0
        border-top-left-radius: $button-radius
        border-top-right-radius: $button-radius
      .btn:last-child
        border-bottom-left-radius: $button-radius
        border-bottom-right-radius: $button-radius

.vertical-btn-group
  .btn
    display: block
    margin-top: -1px
    border-radius: 0
    white-space: nowrap
    text-align: left
    border: solid 1px #9da5aa
    &:hover
      box-shadow: none
    &.selected, &:active
      background-color: #eee
      background-image: linear-gradient(#eee, darken(#eee, 5%))
      box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.2)
  .btn:first-child
    margin-top: 0
    border-top-left-radius: $button-radius
    border-top-right-radius: $button-radius
  .btn:last-child
    border-bottom-left-radius: $button-radius
    border-bottom-right-radius: $button-radius
  .btn-small
    padding: 6px 10px

  .dropdown
    display: block
    margin-top: -1px
    margin-right: 0
    .btn
      +btn
      display: block
      border-top-left-radius: 0
      border-top-right-radius: 0
    &.dropdown-open
      border-top-left-radius: 0
      border-top-right-radius: 0


.dropdown-btn-group
  +clearfix
  display: inline-block
  height: 25px
  padding: 0 2px 0 8px
  background: #F6F6F6
  border: 1px solid rgba(0,0,0,0.10)
  border-radius: 3px
  font-size: 12px
  font-weight: 500
  color: #666
  &:hover
    background: $lighter-gray
  .primary
    float: left
    color: $gray
    margin-right: 8px
    &:hover
      text-decoration: none

  .arrow
    float: right
    padding: 0
    border-left: 1px solid rgba(0,0,0,0.10)
    height: 24px
    &:hover
      text-decoration: none
    &:after
      font-family: "Material Icons"
      font-size: 20px
      content: 'arrow_drop_down'
      color: rgba(0,0,0,0.30)
      padding: 0
    &.jq-dropdown-open:after
      content: 'arrow_drop_up'
  .jq-dropdown
    ul.jq-dropdown-menu
      min-width: 150px
      top: -1px
      left: 1px
      box-shadow: none
      border-top: 1px solid rgba(0,0,0,0.10)
      border-left: 1px solid rgba(0,0,0,0.10)
      border-right: 1px solid rgba(0,0,0,0.10)
      li
        text-align: left
        a
          display: block
          padding: 5px
          background: #fff
          border-bottom: 1px solid rgba(0,0,0,0.10)
          &:hover
            background: $lighter-gray
            color: $text-color
<commit_msg>update line height and vertical-align of buttons<commit_after>$button-radius:    3px


//=========================================
// base button mixin. used by the .btn class, <button> tags, and also dropdowns
//=========================================

=btn
  display: inline-block
  vertical-align: middle
  font-size: $font-size
  font-weight: normal
  color: $link-color
  cursor: pointer
  padding: 0 12px
  height: 32px
  line-height: 32px
  background-color: $link-color
  color: white
  border-radius: $button-radius
  border: none
  text-align: center
  text-decoration: none
  transition: all 0.2s ease-in-out
  +btn_hover($link-color)
  &:focus
    text-decoration: none
    outline: none
  &:disabled, &.disabled
    opacity: .30 !important
    pointer-events: none

  // these classes are used mostly for selected buttons in button groups
  &.selected, &.active
    background-color: darken(#E5E3E8, 7%)
    box-shadow: inset 0 0 1px rgba(0,0,0,0.2)

  .material-icons
    margin-right: 4px
    vertical-align: text-top

@mixin btn_hover($color)
  transition: none
  &:hover
    text-decoration: none
    background-color: $color
    background-image: linear-gradient($color, darken($color, 5%))
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2)
  &:active
    background-color: $color
    background-image: linear-gradient($color, darken($color, 5%))
    box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.2)


//=========================================
// button classes
//=========================================

.btn, input[type='submit'], button
  +btn

  //=========================================
  // different colored buttons
  //=========================================

  &.btn-primary
    background-color: $green
    color: white
    +btn_hover($green)
  &.btn-warning
    color: white
    background-color: $error-color
    +btn_hover($error-color)
  &.btn-white
    color: $text-color
    border: 1px solid $light-gray
    background-color: white
    +btn_hover(white)
  &.btn-gray
    color: $text-color
    border: 1px solid $gray
    background-color: $lighter-gray
    +btn_hover($lighter-gray)

  &.btn-outline
    background-color: transparent
    color: $link-color
    box-shadow: inset 0 0 0 1px $link-color
    +btn_hover($link-color)
    &:hover, &:active
      color: #fff


  // todo: is this necessary?
  &.btn-outline-white
    background-color: transparent
    color: rgba(255,255,255,0.8)
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7)
    +btn_hover(rgba(255,255,255,0.1))

  // todo: is this necessary?
  &.btn-outline-gray
    background-color: transparent
    color: $text-color
    border: 1px solid $gray
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7)
    +btn_hover(rgba(255,255,255,0.1))

  // todo: is this necessary?
  &.btn-cancel
    border: 1px solid #ccc
    color: #aaa
    background: #fff

  &.btn-pill
    border-radius: 24px

  // todo: is this necessary?
  &.filter-btn
    background-color: #fff
    color: $gray
    font-size: $small-font-size
    border: none
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2)
    .dropdown-trigger
      margin-left: 5px

    .dropdown-trigger:after
      border-top-color: $gray !important
    &.jq-dropdown-open .dropdown-trigger:after
      border-bottom-color: $gray !important

  //=========================================
  // button sizes
  //=========================================

  &.btn-huge
    padding: 0 16px
    height: 48px
    line-height: 48px
    font-size: 20px
    .material-icons
      font-size: 24px

  &.btn-large
    padding: 0 16px
    height: 40px
    line-height: 40px
    font-size: 16px
    .material-icons
      font-size: 20px

  &.btn-small
    font-size: $small-font-size
    padding: 0 8px
    height: 24px
    line-height: 24px
    .tv-icon
      font-size: 16px

  &.btn-tiny
    font-size: $tiny-font-size
    padding: 0 4px
    height: 20px
    line-height: 20px

  //=========================================
  // button alignment styles
  //=========================================

  &.btn-block
    display: block

  &.btn-block-left
    display: block
    text-align: left

  &.centered-wide-btn
    display: block
    margin-left: auto
    margin-right: auto
    width: 75%
    +mobile
      width: 100%

  // todo: consolidate with the above, and document
  &.btn-wide
    min-width: 320px
    +mobile
      min-width: 0
      width: 100%


//=========================================
// button groups
//=========================================

.btn-group
  .btn
    margin-right: -5px
    border-radius: 0
    &:hover
      box-shadow: none
    &.selected, &:active
      background-image: linear-gradient(#eee, darken(#eee, 5%))
      box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.2)
  .btn:first-child
    border-top-left-radius: $button-radius
    border-bottom-left-radius: $button-radius
  .btn:last-child
    margin-right: 0
    border-top-right-radius: $button-radius
    border-bottom-right-radius: $button-radius
  &.m-stack
    +mobile
      .btn
        margin: 0
        margin-top: -1px
        display: block
        border-radius: 0
      .btn:first-child
        margin-top: 0
        border-top-left-radius: $button-radius
        border-top-right-radius: $button-radius
      .btn:last-child
        border-bottom-left-radius: $button-radius
        border-bottom-right-radius: $button-radius

.vertical-btn-group
  .btn
    display: block
    margin-top: -1px
    border-radius: 0
    white-space: nowrap
    text-align: left
    border: solid 1px #9da5aa
    &:hover
      box-shadow: none
    &.selected, &:active
      background-color: #eee
      background-image: linear-gradient(#eee, darken(#eee, 5%))
      box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.2)
  .btn:first-child
    margin-top: 0
    border-top-left-radius: $button-radius
    border-top-right-radius: $button-radius
  .btn:last-child
    border-bottom-left-radius: $button-radius
    border-bottom-right-radius: $button-radius
  .btn-small
    padding: 6px 10px

  .dropdown
    display: block
    margin-top: -1px
    margin-right: 0
    .btn
      +btn
      display: block
      border-top-left-radius: 0
      border-top-right-radius: 0
    &.dropdown-open
      border-top-left-radius: 0
      border-top-right-radius: 0


.dropdown-btn-group
  +clearfix
  display: inline-block
  height: 25px
  padding: 0 2px 0 8px
  background: #F6F6F6
  border: 1px solid rgba(0,0,0,0.10)
  border-radius: 3px
  font-size: 12px
  font-weight: 500
  color: #666
  &:hover
    background: $lighter-gray
  .primary
    float: left
    color: $gray
    margin-right: 8px
    &:hover
      text-decoration: none

  .arrow
    float: right
    padding: 0
    border-left: 1px solid rgba(0,0,0,0.10)
    height: 24px
    &:hover
      text-decoration: none
    &:after
      font-family: "Material Icons"
      font-size: 20px
      content: 'arrow_drop_down'
      color: rgba(0,0,0,0.30)
      padding: 0
    &.jq-dropdown-open:after
      content: 'arrow_drop_up'
  .jq-dropdown
    ul.jq-dropdown-menu
      min-width: 150px
      top: -1px
      left: 1px
      box-shadow: none
      border-top: 1px solid rgba(0,0,0,0.10)
      border-left: 1px solid rgba(0,0,0,0.10)
      border-right: 1px solid rgba(0,0,0,0.10)
      li
        text-align: left
        a
          display: block
          padding: 5px
          background: #fff
          border-bottom: 1px solid rgba(0,0,0,0.10)
          &:hover
            background: $lighter-gray
            color: $text-color

{'fraction_non_alphanumeric': 0.18148542526287767, 'fraction_numerical': 0.03953147877013177, 'mean_word_length': 2.5449398443029017, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5037101', 'n_tokens_mistral': 5656, 'n_tokens_neox': 5019, 'n_words': 1220}