whmcsCrosterTemplates/assets/less/buttons.less

.btn {
	outline:0 none !important;
	box-shadow: none!important;
	padding: 10.5px 27px;
	
	> .icon-only[class*="fa-"] {
		margin: 0;
		padding: 0;
	}
	> [class*="fa-"]  {
		margin-right: 4px;
		&.icon-on-right {
			margin-right: 0px;
			margin-left: 4px;
		}
	}
	&.btn-white {
		background-color: transparent;
		color: @white;
		&:hover, &:focus, &.focus, &:active, &.active {
			background-color:rgba(255,255,255,0.3);
		}
	}
	
	&.btn-icon {
		background: none!important;
		border: 0 none!important;
		color: @baseFontcolor;
		padding: 0.25rem;
		
		> [class*="fa-"]  {
			margin: 0;
			opacity: 0.7;
		}
		
		&:hover, &:focus, &.active {
			> [class*="fa-"]  {
				opacity: 1;
			}			
		}
	}
}

.btn {
  &.btn-xlg {
    padding: 16px 32px;
  }
  &.btn-lg {
    padding: 13px 27px;
    font-size: 16px;
  }
  &.btn-sm {
    font-size: 12px;
    padding: 7.5px 18px;
  }
  &.btn-xs {
    font-size: 12px;
    padding: 4px 10px;
  }
}

.btn-transparent {
	color: @white;
	border-color: @white;
	&:hover, &:focus,&.active, &:active {
		color: @white;
		border-color: @white;
		background-color: rgba(0,0,0,0.1);
	}
}

.btn-link {
	background-color: transparent;
	border-color: transparent;
	&:hover, &:active, &:focus, &.disabled {
		background-color: transparent;
		text-decoration: none;
	}
}


.btn-default {
  color: @baseFontcolor;
  background-color: @white;
  border-color: @default-border-color;
}

.btn-default:focus,
.btn-default.focus {
  color: @baseFontcolor;
  background-color: @gray-lighter;
  border-color: @default-border-color;
}

.btn-default:hover {
  color: @baseFontcolor;
  background-color: @gray-lighter;
  border-color: @default-border-color;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: @baseFontcolor;
  background-color: @gray-lighter;
  background-image: none;
  border-color: @default-border-color;
}

.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: @baseFontcolor;
  background-color: @gray-lighter;
  border-color: @default-border-color;
}

.btn-default.disabled {
  border-color: @default-border-color;
}

.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: @white !important;
  border-color: @default-border-color !important;
}


//btn dark

.btn-dark {
  color: @white;
  background-color: @gray-800;
  border-color: @gray-800;
}

.btn-dark:focus,
.btn-dark.focus,
.btn-dark:hover,
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
  background-color: @gray-900;
  background-image: none;
  border-color: @gray-900;
  color: @white;
}

.btn-dark:active:hover,
.btn-dark.active:hover,
.open > .dropdown-toggle.btn-dark:hover,
.btn-dark:active:focus,
.btn-dark.active:focus,
.open > .dropdown-toggle.btn-dark:focus,
.btn-dark:active.focus,
.btn-dark.active.focus,
.open > .dropdown-toggle.btn-dark.focus {
  background-color: @gray-900;
  border-color: @gray-900;
}

.btn-dark.disabled {
  border-color: @gray-700;
}

.btn-dark.disabled:hover,
.btn-dark[disabled]:hover,
fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus,
.btn-dark[disabled]:focus,
fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled.focus,
.btn-dark[disabled].focus,
fieldset[disabled] .btn-dark.focus {
  border-color: @gray-900 !important;
}





.btn-green {
	color: @white;
	border-color: @success;
	background-color: @success;
	
	&:focus, &.focus, &:hover, &.active, &:active {
		background-color: @success;
		color: @white;
	}
}

.bg-primary {
	.btn-default, .btn-primary {
		color: var(--primary);
		border-color: var(--primary);
		background-color: @white;
		
		&:focus, &.focus, &:hover, &.active, &:active {
			background-color: @gray-lighter;
		}
	}
}