327 lines
10 KiB
SCSS
327 lines
10 KiB
SCSS
///
|
|
/// This file regroups the CSS rules made to fix/extend bootstrap in the backend
|
|
/// ==============================================================================
|
|
|
|
|
|
// Buttons
|
|
// ============================================================================
|
|
// Generating bootstrap color buttons was disabled (see import_bootstrap.scss).
|
|
// We do it ourself here generating each btn design type individually.
|
|
|
|
.btn {
|
|
--#{$variable-prefix}btn-disabled-border-color: transparent;
|
|
}
|
|
|
|
// 1. Render buttons defined in '$o-btns-bs-override' and '$o-btns-bs-outline-override'
|
|
// maps.
|
|
@each $-name, $-value in $o-btns-bs-override {
|
|
.btn-#{$-name} {
|
|
@include button-variant(
|
|
o-safe-get($-value, background),
|
|
o-safe-get($-value, border),
|
|
o-safe-get($-value, color),
|
|
o-safe-get($-value, hover-background),
|
|
o-safe-get($-value, hover-border),
|
|
o-safe-get($-value, hover-color),
|
|
o-safe-get($-value, active-background),
|
|
o-safe-get($-value, active-border),
|
|
o-safe-get($-value, active-color),
|
|
);
|
|
}
|
|
}
|
|
|
|
@each $-name, $-value in $o-btns-bs-outline-override {
|
|
.btn-outline-#{$-name} {
|
|
@include button-variant(
|
|
o-safe-get($-value, background),
|
|
o-safe-get($-value, border),
|
|
o-safe-get($-value, color),
|
|
o-safe-get($-value, hover-background),
|
|
o-safe-get($-value, hover-border),
|
|
o-safe-get($-value, hover-color),
|
|
o-safe-get($-value, active-background),
|
|
o-safe-get($-value, active-border),
|
|
o-safe-get($-value, active-color),
|
|
);
|
|
}
|
|
}
|
|
|
|
@each $-name, $-value in $o-btns-bs-override {
|
|
.btn-fill-#{$-name} {
|
|
@include button-variant(
|
|
o-safe-get($-value, background),
|
|
o-safe-get($-value, border),
|
|
o-safe-get($-value, color),
|
|
o-safe-get($-value, hover-background),
|
|
o-safe-get($-value, hover-border),
|
|
o-safe-get($-value, hover-color),
|
|
o-safe-get($-value, active-background),
|
|
o-safe-get($-value, active-border),
|
|
o-safe-get($-value, active-color),
|
|
);
|
|
}
|
|
}
|
|
|
|
// 2. Render '$theme-colors' buttons excluding the ones already generated
|
|
// using the custom maps.
|
|
@each $-name, $-color in $theme-colors {
|
|
@if (not map-get($o-btns-bs-override, $-name)) {
|
|
.btn-#{$-name} {
|
|
@include button-variant($-color, $-color);
|
|
}
|
|
}
|
|
@if (not map-get($o-btns-bs-outline-override, $-name)) {
|
|
.btn-outline-#{$-name} {
|
|
@include button-outline-variant($-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 3. Render custom buttons.
|
|
@each $-name, $-color in $o-btn-custom {
|
|
.btn-#{$-name} {
|
|
@include button-variant($-color, $-color);
|
|
}
|
|
}
|
|
|
|
// Button group
|
|
// ============================================================================
|
|
.btn-group {
|
|
> :not(.btn-check:first-child) + .btn,
|
|
> .btn-group:not(:first-child) {
|
|
margin-left: var(--btn-group-gap, $btn-border-width);
|
|
}
|
|
}
|
|
|
|
// Bootstrap '$theme-colors' text-x and bg-x classes generation
|
|
// ============================================================================
|
|
// Bootstrap's default behavior is to generate classes directly from its
|
|
// '$theme-colors' map. However, we have disabled this to allow our own
|
|
// approach.
|
|
|
|
// 'text-x' classes
|
|
// ----------------------------------------------------------------------------
|
|
// 1. To comply with WCAG standards, we need to use text-colors that are
|
|
// different from the ones in the '$theme-colors' map. We achieve this by
|
|
// creating a temporary map that overrides uncompliant colors with
|
|
// '$o-theme-text-colors' ones.
|
|
$-o-theme-text-colors: map-merge($theme-colors, $o-theme-text-colors);
|
|
|
|
// 2. Use different colors for links and buttons when in conjunction with
|
|
// 'text-x' classes to keep consistency with previous versions of Bootstrap.
|
|
// To do so we pass the values through the 'text-emphasis-variant' mixin.
|
|
@each $-name, $-value in $-o-theme-text-colors {
|
|
@include text-emphasis-variant(".text-#{$-name}", $-value);
|
|
}
|
|
|
|
// 3. Adapt the behaviour of .btn-link buttons when in conjuction with contextual
|
|
// classes (eg. text-warning). 'muted' is set as default text color, while
|
|
// the contextual-class color will be used on ':hover'.
|
|
// Note: For the custom classes, this is duplicated below where the classes are
|
|
// generated with the o-gray
|
|
.btn-link {
|
|
font-weight: $btn-font-weight;
|
|
|
|
@each $-name, $-color in $-o-theme-text-colors{
|
|
&.btn-#{$-name}, &.text-#{$-name} {
|
|
@include o-btn-link-variant($o-gray-600!important, o-text-color($-name) or $-color!important);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 3. Cleanup temporary map
|
|
$-o-theme-text-colors: null;
|
|
|
|
// 'bg-x' classes
|
|
// ----------------------------------------------------------------------------
|
|
// 1. Generate $theme-colors classes using 'o-print-color()' mixin in order to
|
|
// assign the color and print relative CSS variables as well. Note that
|
|
// 'black' and 'white' are not included in the map, we'll generate these
|
|
// classes later in conjunction with legacy 'bg-white-x' and 'bg-black-x'
|
|
// ones.
|
|
@each $-name, $-color in $theme-colors {
|
|
.bg-#{$-name} {
|
|
@include o-print-color($-color, background-color, bg-opacity);
|
|
}
|
|
}
|
|
|
|
|
|
// Bootstrap black/white text-x and bg-x classes + legacy opacity ones
|
|
// ============================================================================
|
|
|
|
// 1. Define placeholder-selectors (aka pseudo-classes) for both white and
|
|
// black. We'll then extend placeholder rather than classes to avoid
|
|
// performance issues during SCSS compilation.
|
|
%-text-white {
|
|
@include o-print-color($o-white, color, text-opacity);
|
|
}
|
|
|
|
%-text-black {
|
|
@include o-print-color($o-black, color, text-opacity);
|
|
}
|
|
|
|
%-bg-white {
|
|
@include o-print-color($o-white, background-color, bg-opacity);
|
|
}
|
|
|
|
%-bg-black {
|
|
@include o-print-color($o-black, background-color, bg-opacity);
|
|
}
|
|
|
|
.text-white {
|
|
@extend %-text-white;
|
|
}
|
|
|
|
.text-black {
|
|
@extend %-text-black;
|
|
}
|
|
|
|
.bg-white {
|
|
@extend %-bg-white;
|
|
}
|
|
|
|
.bg-black {
|
|
@extend %-bg-black;
|
|
}
|
|
|
|
.bg-transparent{
|
|
--bg-opacity: 0;
|
|
@extend %-bg-black;
|
|
}
|
|
|
|
// 2. Generate legacy opacity-variations classes for both white and black. We
|
|
// don't specifically assign colors here, we just extend placeholder
|
|
// selectors. To control opacity we act on the '--X-opacity' Bootstrap
|
|
// default CSS variables.
|
|
$-o-grayscale-opacities: map-remove($o-opacities, 0, 100);
|
|
@each $-name, $-value in $-o-grayscale-opacities {
|
|
.bg-white-#{$-name} {
|
|
--bg-opacity: #{$-value};
|
|
@extend %-bg-white;
|
|
}
|
|
|
|
.bg-black-#{$-name} {
|
|
--bg-opacity: #{$-value};
|
|
@extend %-bg-black;
|
|
}
|
|
}
|
|
|
|
@each $-name, $-value in $-o-grayscale-opacities {
|
|
.text-white-#{$-name} {
|
|
--text-opacity: #{$-value};
|
|
@extend %-text-white;
|
|
}
|
|
|
|
.text-black-#{$-name} {
|
|
--text-opacity: #{$-value};
|
|
@extend %-text-black;
|
|
}
|
|
}
|
|
|
|
// 3. Cleanup temporary map
|
|
$-o-grayscale-opacities: null;
|
|
|
|
|
|
// Odoo custom text/bg colors classes generation
|
|
// ============================================================================
|
|
|
|
// 1. Extend odoo's custom colors maps adding Bootstrap's grays.
|
|
// Note: the card-body rule below needs those grays utilities to be defined
|
|
// before, so that the related o-bg-color text-muted rules work.
|
|
$-o-text-colors-custom: map-merge($o-text-colors-custom, $o-grays);
|
|
$-o-bg-colors-custom: map-merge($o-bg-colors-custom, $o-grays);
|
|
|
|
// 2. Generate custom 'text-x' contextual classes
|
|
@each $-name, $-color in $-o-text-colors-custom {
|
|
@include text-emphasis-variant(".text-#{$-name}", $-color);
|
|
}
|
|
|
|
// 3. Generate custom 'bg-x' and 'text-bg-x' contextual classes
|
|
@each $-name, $-color in map-merge($-o-bg-colors-custom, $o-grays) {
|
|
.bg-#{$-name}, .text-bg-#{$-name} {
|
|
@include o-print-color($-color, background-color, bg-opacity);
|
|
}
|
|
|
|
.text-bg-#{$-name} {
|
|
@include o-print-color(color-contrast($-color), color, text-opacity);
|
|
}
|
|
}
|
|
|
|
// 4. Cleanup temporary maps
|
|
$-o-text-colors-custom: null;
|
|
$-o-bg-colors-custom: null;
|
|
|
|
// 5. Adapt the behaviour of .btn-link buttons when in conjuction with the custom
|
|
// contextual classes (eg. text-action). 'muted' is set as default text color,
|
|
// while the contextual-class color will be used on ':hover'.
|
|
// Note: the same is done above for the '$theme-colors'. Here on the
|
|
// '$o-text-colors-custom' because we don't want it to apply on the '$o-grays'.
|
|
.btn-link {
|
|
@each $-name, $-color in $o-text-colors-custom{
|
|
&.btn-#{$-name}, &.text-#{$-name} {
|
|
@include o-btn-link-variant($o-gray-600!important, o-text-color($-name) or $-color!important);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 6. Adds a bg-inherit custom utility class
|
|
.bg-inherit {
|
|
background-color: inherit;
|
|
}
|
|
|
|
// Alert
|
|
// ==============================================================================
|
|
.alert {
|
|
padding-top: var(--alert-padding-y, $alert-padding-y);
|
|
padding-bottom: var(--alert-padding-y, $alert-padding-y);
|
|
margin-bottom: var(--alert-margin-bottom, $alert-margin-bottom);
|
|
}
|
|
|
|
// Switches
|
|
// ============================================================================
|
|
.form-switch {
|
|
.form-check-input:checked {
|
|
background-color: $o-success;
|
|
border-color: $o-success;
|
|
}
|
|
|
|
.form-check-input:focus {
|
|
border-color: $o-success;
|
|
}
|
|
|
|
&:hover .form-check-input:not(:disabled) {
|
|
border-color: $o-success;
|
|
}
|
|
|
|
// Creating a different styling for toggle switches with a purpose of switching
|
|
// from A to B (eg. switching between month and year) rather than ON/OFF.
|
|
// The 'o_switch_toggle' class should be use in addition to the default
|
|
// 'form-switch' Bootstrap class.
|
|
&.o_switch_toggle {
|
|
.form-check-input, .form-check-input:checked {
|
|
border-color: $o-action;
|
|
background-color: $o-view-background-color;
|
|
|
|
&, &:focus, &:checked {
|
|
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$o-action}'/></svg>"));
|
|
}
|
|
}
|
|
|
|
&:hover .form-check-input:not(:disabled) {
|
|
border-color: $o-action;
|
|
}
|
|
}
|
|
|
|
&:disabled, &.disabled, &[disabled] {
|
|
opacity: $o-opacity-disabled;
|
|
}
|
|
}
|
|
|
|
// Switches
|
|
// ============================================================================
|
|
.table {
|
|
> :not(caption) > * > * {
|
|
color: unset;
|
|
}
|
|
}
|