75 lines
2 KiB
Text
75 lines
2 KiB
Text
|
|
// ----------------------------------
|
|
// Base style.
|
|
// ----------------------------------
|
|
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0.5rem 2rem;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
// Resets for <button> elements.
|
|
border: 1px solid transparent;
|
|
transition: all .2s ease-in-out;
|
|
|
|
&:active,
|
|
&:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
// ----------------------------------
|
|
// Variants
|
|
// ----------------------------------
|
|
|
|
|
|
// Round button
|
|
// ----------------------------------
|
|
|
|
.button-round {
|
|
padding: 0;
|
|
.button-circle(40px);
|
|
}
|
|
|
|
// Colors
|
|
// ----------------------------------
|
|
|
|
.button-default { .button-variant(@text-color, @button-bg-color); }
|
|
.button-primary { .button-variant(@button-primary-color, @button-primary-bg); }
|
|
.button-brand { .button-variant(@button-brand-color, @button-brand-bg); }
|
|
.button-light { .button-variant(@text-light-color, @button-bg-color, @button-hover-color); }
|
|
|
|
.button-info { .button-variant(@button-info-color, @button-info-bg); }
|
|
.button-success { .button-variant(@button-success-color, @button-success-bg); }
|
|
.button-warning { .button-variant(@button-warning-color, @button-warning-bg); }
|
|
.button-danger { .button-variant(@button-danger-color, @button-danger-bg); }
|
|
|
|
.button-github { .button-variant(@button-github-color, @button-github-bg); }
|
|
.button-gitlab { .button-variant(@button-gitlab-color, @button-gitlab-bg); }
|
|
.button-google { .button-variant(@button-google-color, @button-google-bg); }
|
|
.button-linkedin { .button-variant(@button-linkedin-color, @button-linkedin-bg); }
|
|
|
|
// Outline
|
|
// ----------------------------------
|
|
|
|
.button-outline-primary { .button-outline-variant(@text-color, @button-bg-color); }
|
|
|
|
// Sizes
|
|
// ----------------------------------
|
|
|
|
.button-large { font-size: @text-size-large; }
|
|
.button-small { font-size: 0.6em; }
|
|
|
|
// Block button
|
|
// ----------------------------------
|
|
|
|
.button-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|