index.styl

// Base styles
// --------------------------------------------------

$btn-font-weight ?=              500

$btn-default-color ?=            #333
$btn-default-bg ?=               #f1f1f1
$btn-default-border ?=           #ccc

$btn-primary-color ?=            #fff
$btn-primary-bg ?=               $brand-primary
$btn-primary-border ?=           darken($btn-primary-bg, 5)

$btn-success-color ?=            #fff
$btn-success-bg ?=               $brand-success
$btn-success-border ?=           darken($btn-success-bg, 5)

$btn-info-color ?=               #fff
$btn-info-bg ?=                  $brand-info
$btn-info-border ?=              darken($btn-info-bg, 5)

$btn-warning-color ?=            #fff
$btn-warning-bg ?=               $brand-warning
$btn-warning-border ?=           darken($btn-warning-bg, 5)

$btn-danger-color ?=             #fff
$btn-danger-bg ?=                $brand-danger
$btn-danger-border ?=            darken($btn-danger-bg, 5)

$btn-link-disabled-color ?=      $gray-light

// Allows for customising button radius independently from global border radius
$btn-border-radius-base ?=       $border-radius-base
$btn-border-radius-large ?=      $border-radius-large
$btn-border-radius-small ?=      $border-radius-small


.btn
  display inline-block
  margin-bottom 0 // For input.btn
  font-weight $btn-font-weight
  text-align center
  vertical-align middle
  touch-action manipulation
  cursor pointer
  background-image none // Reset unusual Firefox-on-Android default style see https://github.com/necolas/normalize.css/issues/214
  // border 1px solid transparent
  white-space nowrap
  button-size($padding-base-vertical, $padding-base-horizontal, 13px, $line-height-base, $btn-border-radius-base)
  user-select none
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  text-transform: uppercase
  letter-spacing: 1px;
  border: 0;
  background-color: transparent;
  color: $color-text;

  &,
  &:active,
  &.active
    &:focus,
    &.focus
      // tab-focus()
      outline: none;

  &:hover,
  &:focus,
  &.focus
    color $btn-default-color
    text-decoration none

  &:active,
  &.active
    outline 0
    background-image none
    // box-shadow inset 0 3px 5px rgba(0, 0, 0, .125)

  &.disabled,
  &[disabled],
  fieldset[disabled] &
    cursor $cursor-disabled
    opacity-ie(.65)
    box-shadow none
    pointer-events: none
    border: 0
    background-color: $bg-color-gray
    border-color: gray
    color: $color-text-lighter

  a&
    &.disabled,
    fieldset[disabled] &
      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements


// Alternate buttons
// --------------------------------------------------

.btn-default, .theme-dark .btn-default
  button-variant($btn-default-color, $btn-default-bg, $btn-default-border)

.btn-primary, .theme-dark .btn-primary
  button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border)

// Success appears as green
.btn-success, .theme-dark .btn-success
  button-variant($btn-success-color, $btn-success-bg, $btn-success-border)

// Info appears as blue-green
.btn-info, .theme-dark .btn-info
  button-variant($btn-info-color, $btn-info-bg, $btn-info-border)

// Warning appears as orange
.btn-warning, .theme-dark .btn-warning
  button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border)

// Danger and error appear as red
.btn-danger, .theme-dark .btn-danger
  button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border)


// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link
  color $link-color
  font-weight normal
  border-radius 0

  &,
  &:active,
  &.active,
  &[disabled],
  fieldset[disabled] &
    background-color transparent
    box-shadow none

  &,
  &:hover,
  &:focus,
  &:active
    border-color transparent

  &:hover,
  &:focus
    color $link-hover-color
    text-decoration $link-hover-decoration
    background-color transparent

  &[disabled],
  fieldset[disabled] &
    &:hover,
    &:focus
      color $btn-link-disabled-color
      text-decoration none


// Button Sizes
// --------------------------------------------------

.btn-lg
  // line-height ensure even-numbered height of button next to large input
  button-size($padding-large-vertical, $padding-large-horizontal, $font-size-base, $line-height-large, $btn-border-radius-large)

.btn-sm
  // line-height ensure proper height of button next to small input
  button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small)

.btn-xs
  button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small)


// Block button
// --------------------------------------------------

.btn-block
  display block
  width 100%

// Vertically space out multiple block buttons
.btn-block + .btn-block
  margin-top 5px

// Specificity overrides
.btn
  &[type="button"],
  &[type="reset"],
  &[type="submit"]
    -webkit-appearance none

input[type="submit"],
input[type="reset"],
input[type="button"]
  &.btn-block
    width 100%


.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-warning
  font-weight: $font-weight-bold
  color: white;
  border-radius: 3px;
  padding: 10px 14px;
  a
    color: white;
    border-bottom: 1px solid white;
    padding-bottom: 1px;

.bg-primary
  background: $color-blue;

.bg-success
  background: $color-green;

.bg-warning
  background: $color-yellow;

.bg-info
  background-color: $color-blue-light;

.bg-danger
  background: $bg-color-error;

.help-circle
  max-height: 14px;
  max-width: 14px;
  opacity: .2;
  margin-left: 4px;
  position: relative;
  top: -2px;

  &:hover
      opacity: 1;

.glyphs.css-mapping{color:rgba(0,0,0,0.5); padding: 0; margin: 0;}
.glyphs.css-mapping li{margin:0 20px 20px 0;padding:0;display:inline-block;overflow:hidden}
.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}
.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:100px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}
.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}



.btn
  overflow: hidden;
  position: relative;
  span.btn-icon
    margin-right: $padding-base-horizontal;
    display: inline-block
    width: 28px;
    background: red;
    margin-left: -$padding-base-horizontal;
    &::before
      border-right: 1px solid rgba(255,255,255,.15);
      display: inline-block
      position: absolute;
      padding-right: 13px;
      line-height: 44px;
      left: 14px;
      top: 0;

  &.btn-default
    span
      &::before
        border-right: 1px solid rgba(0,0,0,.15);

  &.btn-lg
    span.btn-icon
      &::before
        line-height: 51px;
        width: 35px;
        padding-right: 10px;