mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
Move button styling into its own stylesheet
This commit is contained in:
Brett Sun
parent
a5e573c736
commit
e5210a8410
164
sass/ascribe_button.scss
Normal file
164
sass/ascribe_button.scss
Normal file
@ -0,0 +1,164 @@
|
||||
// buttons!
|
||||
// thought of the day:
|
||||
// "every great atrocity is the result of people just following orders"
|
||||
|
||||
.btn {
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background-color: $ascribe--button-default-color;
|
||||
border-color: $ascribe--button-default-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:hover,
|
||||
&:active:focus,
|
||||
&:active.focus,
|
||||
&.active:hover,
|
||||
&.active:focus,
|
||||
&.active.focus {
|
||||
background-color: lighten($ascribe--button-default-color, 20%);
|
||||
border-color: lighten($ascribe--button-default-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// disabled buttons
|
||||
.btn-default.disabled,
|
||||
.btn-default.disabled:hover,
|
||||
.btn-default.disabled:focus,
|
||||
.btn-default.disabled.focus,
|
||||
.btn-default.disabled:active,
|
||||
.btn-default.disabled.active,
|
||||
.btn-default[disabled],
|
||||
.btn-default[disabled]:hover,
|
||||
.btn-default[disabled]:focus,
|
||||
.btn-default[disabled].focus,
|
||||
.btn-default[disabled]:active,
|
||||
.btn-default[disabled].active,
|
||||
fieldset[disabled] .btn-default,
|
||||
fieldset[disabled] .btn-default:hover,
|
||||
fieldset[disabled] .btn-default:focus,
|
||||
fieldset[disabled] .btn-default.focus,
|
||||
fieldset[disabled] .btn-default:active,
|
||||
fieldset[disabled] .btn-default.active {
|
||||
background-color: darken($ascribe--button-default-color, 20%);
|
||||
border-color: darken($ascribe--button-default-color, 20%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: $ascribe--button-secondary-bg-color;
|
||||
border-color: $ascribe--button-secondary-fg-color;
|
||||
color: $ascribe--button-secondary-fg-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:hover,
|
||||
&:active:focus,
|
||||
&:active.focus,
|
||||
&.active:hover,
|
||||
&.active:focus,
|
||||
&.active.focus {
|
||||
background-color: $ascribe--button-secondary-fg-color;
|
||||
border-color: $ascribe--button-secondary-bg-color;
|
||||
color: $ascribe--button-secondary-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
// disabled buttons
|
||||
.btn-secondary.disabled,
|
||||
.btn-secondary.disabled:hover,
|
||||
.btn-secondary.disabled:focus,
|
||||
.btn-secondary.disabled.focus,
|
||||
.btn-secondary.disabled:active,
|
||||
.btn-secondary.disabled.active,
|
||||
.btn-secondary[disabled],
|
||||
.btn-secondary[disabled]:hover,
|
||||
.btn-secondary[disabled]:focus,
|
||||
.btn-secondary[disabled].focus,
|
||||
.btn-secondary[disabled]:active,
|
||||
.btn-secondary[disabled].active,
|
||||
fieldset[disabled] .btn-secondary,
|
||||
fieldset[disabled] .btn-secondary:hover,
|
||||
fieldset[disabled] .btn-secondary:focus,
|
||||
fieldset[disabled] .btn-secondary.focus,
|
||||
fieldset[disabled] .btn-secondary:active,
|
||||
fieldset[disabled] .btn-secondary.active {
|
||||
background-color: darken($ascribe--button-secondary-bg-color, 20%);
|
||||
border-color: darken($ascribe--button-secondary-fg-color, 20%);
|
||||
color: darken($ascribe--button-secondary-fg-color, 20%);
|
||||
}
|
||||
|
||||
.btn-tertiary {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $ascribe-dark-blue;
|
||||
|
||||
&:focus,
|
||||
&:active:focus,
|
||||
&:active.focus {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $ascribe-dark-blue;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&.active:hover{
|
||||
background-color: $ascribe-pink;
|
||||
border-color: $ascribe-pink;
|
||||
color: $ascribe-white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wide {
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
}
|
||||
|
||||
.btn-spinner, .btn-spinner:hover {
|
||||
background-color: $ascribe--button-default-color;
|
||||
border-color: $ascribe--button-default-color;
|
||||
[class^="spinner-wrapper-"] {
|
||||
color: white;
|
||||
.spinner-circle {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary .spinner-wrapper {
|
||||
.spinner-circle,
|
||||
.spinner-inner {
|
||||
border-color: $ascribe--button-secondary-fg-color;
|
||||
color: $ascribe--button-secondary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-ascribe-add {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid $ascribe-dark-blue;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
border-color: white!important;
|
||||
background-color: $ascribe-dark-blue!important;
|
||||
}
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: $ascribe-dark-blue;
|
||||
padding: 0.4em;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -233,147 +233,6 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-ascribe-add {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid $ascribe-dark-blue;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
border-color: white!important;
|
||||
background-color: $ascribe-dark-blue!important;
|
||||
}
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: $ascribe-dark-blue;
|
||||
padding: 0.4em;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
// buttons!
|
||||
// thought of the day:
|
||||
// "every great atrocity is the result of people just following orders"
|
||||
|
||||
.btn {
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background-color: $ascribe--button-default-color;
|
||||
border-color: $ascribe--button-default-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:hover,
|
||||
&:active:focus,
|
||||
&:active.focus,
|
||||
&.active:hover,
|
||||
&.active:focus,
|
||||
&.active.focus {
|
||||
background-color: lighten($ascribe--button-default-color, 20%);
|
||||
border-color: lighten($ascribe--button-default-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// disabled buttons
|
||||
.btn-default.disabled,
|
||||
.btn-default.disabled:hover,
|
||||
.btn-default.disabled:focus,
|
||||
.btn-default.disabled.focus,
|
||||
.btn-default.disabled:active,
|
||||
.btn-default.disabled.active,
|
||||
.btn-default[disabled],
|
||||
.btn-default[disabled]:hover,
|
||||
.btn-default[disabled]:focus,
|
||||
.btn-default[disabled].focus,
|
||||
.btn-default[disabled]:active,
|
||||
.btn-default[disabled].active,
|
||||
fieldset[disabled] .btn-default,
|
||||
fieldset[disabled] .btn-default:hover,
|
||||
fieldset[disabled] .btn-default:focus,
|
||||
fieldset[disabled] .btn-default.focus,
|
||||
fieldset[disabled] .btn-default:active,
|
||||
fieldset[disabled] .btn-default.active {
|
||||
background-color: darken($ascribe--button-default-color, 20%);
|
||||
border-color: darken($ascribe--button-default-color, 20%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: $ascribe--button-secondary-bg-color;
|
||||
border-color: $ascribe--button-secondary-fg-color;
|
||||
color: $ascribe--button-secondary-fg-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:hover,
|
||||
&:active:focus,
|
||||
&:active.focus,
|
||||
&.active:hover,
|
||||
&.active:focus,
|
||||
&.active.focus {
|
||||
background-color: $ascribe--button-secondary-fg-color;
|
||||
border-color: $ascribe--button-secondary-bg-color;
|
||||
color: $ascribe--button-secondary-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
// disabled buttons
|
||||
.btn-secondary.disabled,
|
||||
.btn-secondary.disabled:hover,
|
||||
.btn-secondary.disabled:focus,
|
||||
.btn-secondary.disabled.focus,
|
||||
.btn-secondary.disabled:active,
|
||||
.btn-secondary.disabled.active,
|
||||
.btn-secondary[disabled],
|
||||
.btn-secondary[disabled]:hover,
|
||||
.btn-secondary[disabled]:focus,
|
||||
.btn-secondary[disabled].focus,
|
||||
.btn-secondary[disabled]:active,
|
||||
.btn-secondary[disabled].active,
|
||||
fieldset[disabled] .btn-secondary,
|
||||
fieldset[disabled] .btn-secondary:hover,
|
||||
fieldset[disabled] .btn-secondary:focus,
|
||||
fieldset[disabled] .btn-secondary.focus,
|
||||
fieldset[disabled] .btn-secondary:active,
|
||||
fieldset[disabled] .btn-secondary.active {
|
||||
background-color: darken($ascribe--button-secondary-bg-color, 20%);
|
||||
border-color: darken($ascribe--button-secondary-fg-color, 20%);
|
||||
color: darken($ascribe--button-secondary-fg-color, 20%);
|
||||
}
|
||||
|
||||
.btn-tertiary {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $ascribe-dark-blue;
|
||||
|
||||
&:focus,
|
||||
&:active:focus,
|
||||
&:active.focus {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $ascribe-dark-blue;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&.active:hover{
|
||||
background-color: $ascribe-pink;
|
||||
border-color: $ascribe-pink;
|
||||
color: $ascribe-white;
|
||||
}
|
||||
}
|
||||
|
||||
.ascribe-piece-list-toolbar-filter-widget button {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
@ -387,29 +246,6 @@ fieldset[disabled] .btn-secondary.active {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wide {
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
}
|
||||
|
||||
.btn-spinner, .btn-spinner:hover {
|
||||
background-color: $ascribe--button-default-color;
|
||||
border-color: $ascribe--button-default-color;
|
||||
[class^="spinner-wrapper-"] {
|
||||
color: white;
|
||||
.spinner-circle {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary .spinner-wrapper {
|
||||
.spinner-circle,
|
||||
.spinner-inner {
|
||||
border-color: $ascribe--button-secondary-fg-color;
|
||||
color: $ascribe--button-secondary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .btn-default.dropdown-toggle:hover,
|
||||
.open > .btn-default.dropdown-toggle:focus,
|
||||
.open > .btn-default.dropdown-toggle.focus,
|
||||
|
||||
@ -40,6 +40,7 @@ $BASE_URL: '<%= BASE_URL %>';
|
||||
@import 'lib/buttons';
|
||||
@import 'lib/modals';
|
||||
@import 'ascribe_custom_style';
|
||||
@import 'ascribe_button';
|
||||
@import 'ascribe_spinner';
|
||||
|
||||
@import 'whitelabel/index';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user