76 lines
2.1 KiB
SCSS
76 lines
2.1 KiB
SCSS
|
|
|
|
// ----------------------------------
|
|
// 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;
|
|
@include button-circle(40px);
|
|
}
|
|
|
|
// Colors
|
|
// ----------------------------------
|
|
|
|
.button-default { @include button-variant($text-color, $button-bg-color); }
|
|
.button-primary { @include button-variant($button-primary-color, $button-primary-bg); }
|
|
.button-brand { @include button-variant($button-brand-color, $button-brand-bg); }
|
|
.button-light { @include button-variant($text-light-color, $button-bg-color, $button-hover-color); }
|
|
|
|
.button-info { @include button-variant($button-info-color, $button-info-bg); }
|
|
.button-success { @include button-variant($button-success-color, $button-success-bg); }
|
|
.button-warning { @include button-variant($button-warning-color, $button-warning-bg); }
|
|
.button-danger { @include button-variant($button-danger-color, $button-danger-bg); }
|
|
|
|
.button-github { @include button-variant($button-github-color, $button-github-bg); }
|
|
.button-gitlab { @include button-variant($button-gitlab-color, $button-gitlab-bg); }
|
|
.button-google { @include button-variant($button-google-color, $button-google-bg); }
|
|
.button-linkedin { @include button-variant($button-linkedin-color, $button-linkedin-bg); }
|
|
|
|
// Outline
|
|
// ----------------------------------
|
|
|
|
.button-outline-primary { @include button-outline-variant($text-color, $button-bg-color); }
|
|
|
|
// Sizes
|
|
// ----------------------------------
|
|
|
|
.button-large { font-size: $font-size-large; }
|
|
.button-small { font-size: 0.6em; }
|
|
|
|
// Block button
|
|
// ----------------------------------
|
|
|
|
.button-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|