122 lines
2.9 KiB
SCSS
122 lines
2.9 KiB
SCSS
// main: global.scss
|
|
@mixin active {
|
|
&:active,
|
|
&.active {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin hover-focus {
|
|
&:focus,
|
|
&.focus,
|
|
&:hover {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin disabled {
|
|
&.disabled,
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin dropdown-open {
|
|
.open > &.dropdown-toggle { @content }
|
|
}
|
|
|
|
@mixin btn-special {
|
|
/**
|
|
* This mixin applies content if the button is in at least one of the
|
|
* following states:
|
|
*
|
|
* - hovered,
|
|
* - focused,
|
|
* - actived,
|
|
* - is responsible of an opened dropdown.
|
|
*
|
|
* Where possible, state is checked from class attribute and
|
|
* :pseudo-classes.
|
|
*
|
|
* ## Bootstrap compatibility
|
|
*
|
|
* If content defines 'color', 'background-color' and 'border', it is safe
|
|
* to use this mixin with Bootstrap buttons as it will overrides all
|
|
* Bootstrap color defaults of the previous cases.
|
|
* To be precise, this covers all special important-like cases of the
|
|
* Bootstrap mixin 'button-variant' (except the 'disabled' case).
|
|
*
|
|
*/
|
|
@include hover-focus { @content }
|
|
|
|
@include active {
|
|
@content;
|
|
@include hover-focus { @content }
|
|
}
|
|
|
|
@include dropdown-open {
|
|
@content;
|
|
@include hover-focus { @content }
|
|
}
|
|
}
|
|
|
|
@mixin button-variant-2modes($color, $background-base, $background-special, $border) {
|
|
/**
|
|
* This mixins allows defining color-related properties of buttons.
|
|
*
|
|
* It sets the following properties:
|
|
* color: $color, except for disabled-like buttons.
|
|
* border-color: $border.
|
|
* background-color: Depending on button state:
|
|
* - Default, disabled:
|
|
* $background-base
|
|
* - Hovered, focused, actived, responsible of an opened dropdown:
|
|
* (one is sufficent)
|
|
* $background-special
|
|
*
|
|
* ## Bootstrap compatibility
|
|
*
|
|
* This mixin can be used to replace colors behaviors of Bootstrap buttons.
|
|
* Indeed, this mixin aims to replace each definition done by the
|
|
* 'button-variant' Bootstrap mixin.
|
|
*
|
|
*/
|
|
color: $color;
|
|
background-color: $background-base;
|
|
border-color: $border;
|
|
|
|
@include btn-special {
|
|
color: $color;
|
|
background-color: $background-special;
|
|
border-color: $border;
|
|
}
|
|
|
|
@include disabled {
|
|
@include hover-focus {
|
|
background-color: $background-base;
|
|
border-color: $border;
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
color: $background-base;
|
|
background-color: $color;
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
@include button-variant-2modes($btn-font-color, $btn-bg-base, $btn-bg-special, $btn-border);
|
|
}
|
|
|
|
form#filter_form {
|
|
.form-group {
|
|
padding-right:20px;
|
|
}
|
|
|
|
ul.form-control {
|
|
background-color: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|