Edit
/* scss/buttons/_ButtonsColors.scss */
.base-btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: $white;
cursor: pointer;
background-color: $primary-600;
border: 1px solid transparent;
padding: 5px 15px;
min-height: 40px;
border-radius: 8px;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
@extend .text-sm;
@extend .weight-m;
&:hover {
background-color: $primary-700;
color: $white;
}
&:focus {
background-color: $primary-600;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC;
}
&:disabled,
&.disabled {
background-color: $primary-200;
}
// buttons sizes
&.btn-lg {
@extend .text-md;
padding: 5px 18px;
min-height: 44px;
i {
@extend .text-md;
}
}
&.btn-xl {
@extend .text-md;
padding: 5px 19px;
min-height: 48px;
i {
@extend .text-md;
}
}
&.btn-2xl {
@extend .text-lg;
padding: 5px 27px;
min-height: 60px;
i {
@extend .text-xl;
}
}
// buttons colors
&.secondary-btn {
background-color: $primary-50;
color: $primary-700;
&:hover {
background-color: $primary-100;
}
&:focus {
background-color: $primary-50;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC;
}
&:disabled,
&.disabled {
background-color: $primary-25;
color: $primary-300;
}
&.load-over::after {
border-color: $primary-700;
border-top-color: transparent;
}
}
&.secondary-gray-btn {
background-color: transparent;
border-color: $gray-300;
color: $gray-700;
&:hover {
background-color: $gray-50;
}
&:focus {
background-color: transparent;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F2F4F7;
}
&:disabled,
&.disabled {
color: $gray-50;
}
&.load-over::after {
border-color: $gray-700;
border-top-color: transparent;
}
}
&.tertiary-btn {
background-color: transparent;
color: $primary-700;
box-shadow: none;
&:hover {
background-color: $primary-50;
}
&:focus {
background-color: transparent;
}
&:disabled,
&.disabled {
color: $gray-300;
}
}
&.tertiary-gray-btn {
background-color: transparent;
color: $gray-500;
box-shadow: none;
&:hover {
color: $gray-600;
background-color: $gray-50;
}
&:focus {
color: $gray-500;
background-color: transparent;
}
&:disabled,
&.disabled {
color: $gray-300;
}
}
&.link-btn {
background-color: transparent;
color: $primary-700;
box-shadow: none;
padding: 0;
&:hover {
color: $primary-800;
}
&:focus {
color: $primary-700;
}
&:disabled,
&.disabled {
color: $gray-300;
}
}
&.link-gray-btn {
background-color: transparent;
color: $gray-500;
box-shadow: none;
&:hover {
color: $gray-600;
}
&:focus {
color: $gray-500;
}
&:disabled,
&.disabled {
color: $gray-300;
}
}
&.danger-btn {
background-color: $error-600;
border-color: $white;
color: $white;
&:hover {
background-color: $error-700;
}
&:focus {
background-color: $error-600;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2;
}
&:disabled,
&.disabled {
background-color: $error-200;
}
&.load-over::after {
border-color: $white;
border-top-color: transparent;
}
}
&.danger-secondary-btn {
background-color: $error-50;
color: $error-700;
&:hover {
background-color: $error-100;
}
&:focus {
background-color: $error-50;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2;
}
&:disabled,
&.disabled {
background-color: $error-25;
color: $error-300;
}
&.load-over::after {
border-color: $error-700;
border-top-color: transparent;
}
}
&.danger-secondary-gray-btn {
background-color: transparent;
border-color: $error-300;
color: $error-700;
&:hover {
background-color: $error-50;
color: $error-800;
}
&:focus {
background-color: transparent;
color: $error-700;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2;
}
&:disabled,
&.disabled {
border-color: $error-300;
color: $error-300;
}
&.load-over::after {
border-color: $error-700;
border-top-color: transparent;
}
}
&.danger-tertiary-gray-btn {
background-color: transparent;
color: $error-700;
box-shadow: none;
&:hover {
background-color: $error-50;
color: $error-800;
}
&:focus {
background-color: transparent;
color: $error-700;
}
&:disabled,
&.disabled {
color: $error-300;
}
}
&.danger-link-btn {
background-color: transparent;
color: $error-700;
box-shadow: none;
&:hover {
color: $error-800;
}
&:focus {
color: $error-700;
}
&:disabled,
&.disabled {
color: $error-300;
}
}
// buttons only icon
&.btn-icon-md {
padding: 0;
width: 40px;
height: 40px;
i {
font-size: 20px;
}
}
&.btn-icon-lg {
padding: 0;
width: 44px;
height: 44px;
}
&.btn-icon-xl {
padding: 0;
width: 48px;
height: 48px;
}
&.btn-icon-2xl {
padding: 0;
width: 56px;
height: 56px;
}
// buttons icon
i {
@extend .text-md;
}
// buttons loading
&.load-over {
overflow: hidden;
position: relative;
color: transparent !important;
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%);
display: block;
width: 20px;
height: 20px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
@include dir-margin-right(0.875rem);
animation: load-btn-animate 1s infinite forwards linear;
}
}
}
// loading button keyframe
@keyframes load-btn-animate {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}