website/thaliawebsite/static/css/_buttons.scss
/* Buttons */
.btn {
font-weight: $regular;
font-size: 14px;
letter-spacing: $letter-spacing;
-moz-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
transition: 0.2s ease-in;
border-radius: 0;
text-transform: uppercase;
&:hover {
cursor: pointer;
}
&:focus {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;;
box-shadow: none !important;;
}
}
.btn-link {
color: var(--primary);
&:hover {
color: var(--primary-hover);
text-decoration: none;
}
&:focus {
color: var(--primary-hover);
text-decoration: none;
}
}
.btn-primary, .btn-primary:active, .btn-primary:focus {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: var(--primary-contrast) !important;
&:hover, &.active {
background: var(--primary-hover) !important;
border-color: var(--primary-hover) !important;
}
}
.btn-secondary, .btn-secondary:active, .btn-secondary:focus {
background: var(--secondary) !important;
border-color: var(--secondary) !important;
color: var(--secondary-contrast) !important;
&:hover {
background: var(--secondary-hover) !important;
border-color: var(--secondary-hover) !important;
}
}
.btn-success, .btn-success:active, .btn-success:focus {
background: var(--success) !important;
border-color: var(--success) !important;
color: var(--success-contrast) !important;
&:hover {
background: var(--success-hover) !important;
border-color: var(--success-hover) !important;
}
}
.btn-info, .btn-info:active, .btn-info:focus {
background: var(--info) !important;
border-color: var(--info) !important;
color: var(--info-contrast) !important;
&:hover {
background: var(--info-hover) !important;
border-color: var(--info-hover) !important;
}
}
.btn-warning, .btn-warning:active, .btn-warning:focus {
background: var(--warning) !important;
border-color: var(--warning) !important;
color: var(--warning-contrast) !important;
&:hover {
background: var(--warning-hover) !important;
border-color: var(--warning-hover) !important;
}
}
.btn-danger, .btn-danger:active, .btn-danger:focus {
background: var(--danger) !important;
border-color: var(--danger) !important;
color: var(--danger-contrast) !important;
&:hover {
background: var(--danger-hover) !important;
border-color: var(--danger-hover) !important;
}
}