mirror of
https://github.com/ascribe/onion.git
synced 2024-06-29 00:58:03 +02:00
57 lines
1.5 KiB
SCSS
57 lines
1.5 KiB
SCSS
/**
|
|
* Styles for the buttons
|
|
*
|
|
* The style of a button is context-dependent. This means that if the button
|
|
* is placed in a form, for example, and is the only child, it will be displayed
|
|
* with 100% width. If the button is together with other buttons, it will
|
|
* be displayed with auto width and pushed on the right.
|
|
*
|
|
*/
|
|
|
|
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons';
|
|
|
|
|
|
// Buttons that are one next to the other will have 1px margin on the left
|
|
.btn + .btn {
|
|
margin-left: 1px;
|
|
}
|
|
|
|
// Buttons in the footer of a form are aligned on the right
|
|
form .footer {
|
|
text-align: right;
|
|
|
|
// A single button in the footer of a form will take all the space available
|
|
> .btn:only-child {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.btn.loading {
|
|
background-image: url('//s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
|
|
// force transparency so we don't need to go crazy with all the states of the button.
|
|
color: rgba(0, 0, 0, 0) !important;
|
|
}
|
|
|
|
/**
|
|
* Colors
|
|
*/
|
|
|
|
.btn-primary {
|
|
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
|
}
|
|
|
|
.btn-danger {
|
|
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
color: $btn-secondary-color;
|
|
}
|