Manager

Back Back Up Advanced Editor

/* Buttons */
.btn {
  font-size: $btn-font-size;
  line-height: 1;
  font-family: $type-1;

i {
    margin-right: 0.3125rem;
  }

.btn-label {
    &:before {
      font-size: 1rem;
      line-height: 5px;
      vertical-align: middle;
    }

&.btn-label-left {
      margin-right: 5px;
    }

&.btn-label-right {
      margin-left: 5px;
    }
  }

&.btn-rounded {
    @include border-radius(50px);
  }

&.btn-icons {
    width: 40px;
    height: 40px;
    padding: 10px;
    text-align: center;
    vertical-align: middle;

i {
      margin: auto;
      line-height: initial;
    }
  }

&.btn-fw {
    min-width: $button-fixed-width;
  }

&.icon-btn {
    i {
      margin-right: 0;
    }
  }

&.social-btn {
    padding: $social-btn-padding;

i {
      margin-right: 0;
      font-size: $social-btn-icon-size;
    }
  }

&.btn-sm {
    font-size: $btn-font-size-sm;
  }

&.btn-lg {
    font-size: $btn-font-size-lg;
  }

&.btn-xs {
    padding: $btn-padding-y-xs $btn-padding-x-xs;
    font-size: $btn-font-size-xs;
  }

&.btn-danger,
  &.btn-info,
  &.btn-success,
  &.btn-teal,
  &.btn-warning {
    color: $white;
  }

&.btn-outline-light {
    border-color: darken(theme-color(light),15%);
    color: darken(theme-color(light),15%);
  }

&.btn-outline-secondary {
    color: rgba($black, 0.5);
  }

&.btn-inverse-secondary {
    background-color: rgba(theme-color(secondary), 0.5);
    color: rgba($black, 0.5);

&:hover {
      color: rgba($black, 0.5);
    }
  }

&.btn-inverse-light {
    background-color: $white;
    color: rgba($black, 0.5);
    border-color: lighten($black, 85%);

&:hover {
      color: rgba($black, 0.5);
      border-color: lighten($black, 85%);
    }
  }
}

.btn-group {
  border: $border-width solid $border-color;
  @include border-radius($btn-border-radius);

.btn {
    border-top: none;
    border-bottom: none;
    border-left: none;

&:last-child {
      border-right: none;
    }

&.btn-primary {
      border-color: darken(theme-color(primary),3%);
    }

&.btn-secondary {
      border-color: darken(theme-color(secondary),3%);
    }

&.btn-info {
      border-color: darken(theme-color(info),3%);
    }

&.btn-warning {
      border-color: darken(theme-color(warning),3%);
    }

&.btn-success {
      border-color: darken(theme-color(success),3%);
    }

&.btn-danger {
      border-color: darken(theme-color(danger),3%);
    }

&.btn-dark {
      border-color: darken(theme-color(dark),3%);
    }

&.btn-light {
      border-color: darken(theme-color(light),3%);
    }
  }
}

.btn-toolbar {
  .btn-group {
    +.btn-group {
      @extend .ml-2;
    }
  }
}
/*social buttons*/
@each $color, $value in $social-colors {
  .btn-#{$color} {
    @include social-button(social-color($color));
  }
}
/*social buttons*/
@each $color, $value in $social-colors {
  .btn-social-outline-#{$color} {
    @include btn-social-outline-variant(social-color($color));
  }
}
/* inverse buttons */
@each $color, $value in $theme-colors {
  .btn-inverse-#{$color} {
    @include button-inverse-variant($value);
  }
}
/* Inverse Outlined Buttons */
@each $color, $value in $theme-colors {
  .btn-inverse-outline-#{$color} {
    @include button-inverse-outline-variant($value);
  }
}