1#@!#!123s

: / proc / thread-self / root / proc / self / root / home / shubmkcj / urbane.createerp.com / assets / scss /
Filename : _buttons.scss
back
/* =============
   Buttons
============= */
.btn {
  border-radius: 2px;
  font-size: $font-size-base;
  padding: 7px 14px;
  outline: none !important;
  font-family: $font-secondary;
}

.btn-md {
  padding: 9px 18px;
}

.btn-group-lg>.btn, .btn-lg {
  padding: 12px 20px !important;
  font-size: 18px;
}
.btn-group-sm>.btn, .btn-sm {
  padding: 5px 10px !important;
  font-size: 14px;
}
.btn-group-xs>.btn, .btn-xs {
  padding: 1px 5px !important;
  font-size: 12px;
}

.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: 0 0 0 100px rgba(0,0,0,.1) inset;
  box-shadow: 0 0 0 100px rgba(0,0,0,.1) inset;
}
.btn-custom,.btn-primary, .btn-success, .btn-info, .btn-warning,
.btn-danger, .btn-inverse, .btn-purple, .btn-pink{
  color: $white !important;
}

.btn-custom {
  background-color: $custom;
  border-color: $custom;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active,
.btn-custom.focus, .btn-custom:active, .btn-custom:focus, .btn-custom:hover,
.open > .dropdown-toggle.btn-custom  {
  background-color: darken($custom, 5%) !important;
  border: 1px solid darken($custom, 5%) !important;
}

.btn-custom.focus, .btn-custom:focus,.btn-outline-custom.focus, .btn-outline-custom:focus {
  -webkit-box-shadow: 0 0 0 2px rgba($custom,.3);
  box-shadow: 0 0 0 2px rgba($custom,.3);
}

.btn-secondary {
  background-color: $white;
  border-color: rgba($dark,0.2);
  color: $light7;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
.btn-secondary.focus, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover,
.open > .dropdown-toggle.btn-secondary,.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle  {
  background-color: rgba($dark, 0.07) !important;
  border-color: rgba($dark, 0.2) !important;
  color: $light7;
}

.btn-secondary.focus, .btn-secondary:focus,.btn-outline-secondary.focus, .btn-outline-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus{
  -webkit-box-shadow: 0 0 0 2px rgba($dark,.1);
  box-shadow: 0 0 0 2px rgba($dark,.1);
}

.btn-primary{
  background-color: $primary !important;
  border: 1px solid $primary !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover,
.open > .dropdown-toggle.btn-primary  {
  background-color: darken($primary, 5%) !important;
  border-color: darken($primary, 5%) !important;
}

.btn-primary.focus, .btn-primary:focus,.btn-outline-primary.focus, .btn-outline-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus{
  -webkit-box-shadow: 0 0 0 2px rgba($primary,.3);
  box-shadow: 0 0 0 2px rgba($primary,.3);
}

.btn-success {
  background-color: $success !important;
  border: 1px solid $success !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open > .dropdown-toggle.btn-success {
  background-color: darken($success, 5%) !important;
  border-color: darken($success, 5%) !important;
}

.btn-success.focus, .btn-success:focus,.btn-outline-success.focus, .btn-outline-success:focus,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus{
  -webkit-box-shadow: 0 0 0 2px rgba($success,.3);
  box-shadow: 0 0 0 2px rgba($success,.3);
}

.btn-info {
  background-color: $info !important;
  border: 1px solid $info !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open > .dropdown-toggle.btn-info {
  background-color: darken($info, 5%) !important;
  border-color: darken($info, 5%) !important;
}

.btn-info.focus, .btn-info:focus,.btn-outline-info.focus, .btn-outline-info:focus,
.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus{
  -webkit-box-shadow: 0 0 0 2px rgba($info,.3);
  box-shadow: 0 0 0 2px rgba($info,.3);
}

.btn-warning {
  background-color: $warning !important;
  border: 1px solid $warning !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open > .dropdown-toggle.btn-warning {
  background-color: darken($warning, 5%) !important;
  border-color: darken($warning, 5%) !important;
}

.btn-warning.focus, .btn-warning:focus,.btn-outline-warning.focus, .btn-outline-warning:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show>.btn-warning.dropdown-toggle:focus{
  -webkit-box-shadow: 0 0 0 2px rgba($warning,.3);
  box-shadow: 0 0 0 2px rgba($warning,.3);
}

.btn-danger {
  background-color: $danger !important;
  border: 1px solid $danger !important;
}
.btn-danger:active, .btn-danger:focus, .btn-danger:hover, .btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open > .dropdown-toggle.btn-danger {
  background-color: darken($danger, 5%) !important;
  border-color: darken($danger, 5%) !important;
}

.btn-danger.focus, .btn-danger:focus,.btn-outline-danger.focus, .btn-outline-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-danger.dropdown-toggle:focus{
  -webkit-box-shadow: 0 0 0 2px rgba($danger,.3);
  box-shadow: 0 0 0 2px rgba($danger,.3);
}

.btn-inverse {
  background-color: $inverse !important;
  border: 1px solid $inverse !important;
}
.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.focus, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .open > .dropdown-toggle.btn-inverse {
  background-color: darken($inverse, 5%) !important;
  border-color: darken($inverse, 5%) !important;
}

.btn-inverse.focus, .btn-inverse:focus,.btn-outline-inverse.focus, .btn-outline-inverse:focus {
  -webkit-box-shadow: 0 0 0 2px rgba($inverse,.3);
  box-shadow: 0 0 0 2px rgba($inverse,.3);
}

.btn-purple {
  background-color: $purple !important;
  border: 1px solid $purple !important;
}
.btn-purple:hover, .btn-purple:focus, .btn-purple:active {
  background-color: darken($purple, 5%) !important;
  border-color: darken($purple, 5%) !important;
}

.btn-purple.focus, .btn-purple:focus,.btn-outline-purple.focus, .btn-outline-purple:focus {
  -webkit-box-shadow: 0 0 0 2px rgba($purple,.3);
  box-shadow: 0 0 0 2px rgba($purple,.3);
}

.btn-pink {
  background-color: $pink !important;
  border: 1px solid $pink !important;
}
.btn-pink:hover, .btn-pink:focus, .btn-pink:active {
  background-color: darken($pink, 5%) !important;
  border-color: darken($pink, 5%) !important;
}

.btn-pink.focus, .btn-pink:focus,.btn-outline-pink.focus, .btn-outline-pink:focus {
  -webkit-box-shadow: 0 0 0 2px rgba($pink,.3);
  box-shadow: 0 0 0 2px rgba($pink,.3);
}

.btn-bordered {
  background-color: transparent !important;
}

.btn-bordered.btn-secondary {
  background-color: $white;
  border: 2px solid rgba($dark,0.15) !important;
}
.btn-bordered.btn-custom {
  color: $custom !important;
  border: 2px solid $custom !important;

  &:hover,&:focus,&:active {
    background-color: $custom;
    color: $white !important;
    border: 2px solid darken($custom, 7%) !important;
  }
}

.btn-bordered.btn-primary {
  color: $primary !important;
  border: 2px solid $primary !important;

  &:hover,&:focus,&:active {
    background-color: $primary;
    color: $white !important;
    border: 2px solid darken($primary, 7%) !important;
  }
}

.btn-bordered.btn-success {
  color: $success !important;
  border: 2px solid $success !important;

  &:hover,&:focus,&:active {
    background-color: $success;
    color: $white !important;
    border: 2px solid darken($success, 7%) !important;
  }
}

.btn-bordered.btn-info {
  color: $info !important;
  border: 2px solid $info !important;

  &:hover,&:focus,&:active {
    background-color: $info;
    color: $white !important;
    border: 2px solid darken($info, 7%) !important;
  }
}

.btn-bordered.btn-warning {
  color: $warning !important;
  border: 2px solid $warning !important;

  &:hover,&:focus,&:active {
    background-color: $warning;
    color: $white !important;
    border: 2px solid darken($warning, 7%) !important;
  }
}

.btn-bordered.btn-danger {
  color: $danger !important;
  border: 2px solid $danger !important;

  &:hover,&:focus,&:active {
    background-color: $danger;
    color: $white !important;
    border: 2px solid darken($danger, 7%) !important;
  }
}

.btn-bordered.btn-inverse {
  color: $inverse !important;
  border: 2px solid $inverse !important;

  &:hover,&:focus,&:active {
    background-color: $inverse;
    color: $white !important;
    border: 2px solid darken($inverse, 7%) !important;
  }
}

.btn-bordered.btn-purple {
  color: $purple !important;
  border: 2px solid $purple !important;

  &:hover,&:focus,&:active {
    background-color: $purple;
    color: $white !important;
    border: 2px solid darken($purple, 7%) !important;
  }
}

.btn-bordered.btn-pink {
  color: $pink !important;
  border: 2px solid $pink !important;

  &:hover,&:focus,&:active {
    background-color: $pink;
    color: $white !important;
    border: 2px solid darken($pink, 7%) !important;
  }
}

.btn-rounded {
  border-radius: 2em;
}

/* Social Buttons */
.btn-facebook {
  color: $white !important;
  background-color: #3b5998 !important;
}
.btn-twitter {
  color: $white !important;
  background-color: #00aced !important;
}
.btn-linkedin {
  color: $white !important;
  background-color: #007bb6 !important;
}
.btn-dribbble {
  color: $white !important;
  background-color: #ea4c89 !important;
}
.btn-googleplus {
  color: $white !important;
  background-color: #dd4b39 !important;
}
.btn-instagram {
  color: $white !important;
  background-color: #517fa4 !important;
}
.btn-pinterest {
  color: $white !important;
  background-color: #cb2027 !important;
}
.btn-dropbox {
  color: $white !important;
  background-color: #007ee5 !important;
}
.btn-flickr {
  color: $white !important;
  background-color: #ff0084 !important;
}
.btn-tumblr {
  color: $white !important;
  background-color: #32506d !important;
}
.btn-skype {
  color: $white !important;
  background-color: #00aff0 !important;
}
.btn-youtube {
  color: $white !important;
  background-color: #bb0000 !important;
}
.btn-github {
  color: $white !important;
  background-color: #171515 !important;
}