NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[IMP][CSS] Use CSS variables to style different alert types

Browse Source 
CSS variables avoid having to repeat code for each alert type.
Also remove the need to add "tip" to the theme-colors (no need for "tip"
styled buttons, badges etc, especially as tips use the primary color) by
styling `.alert-tip` with customized copy of BS alert mechanism.

In order to be able to modify the icons with a CSS variable,
the `content` attribute has been removed from the `o-inline-icon` mixin.
Code where this mixin is called in other places has been adapted.
This commit is contained in:
Elisabeth Dickinson
2022-12-28 15:45:54 +01:00
committed by Antoine Vandevenne (anv)
parent 60ad2bdb7d
commit 6dbff460fb
4 changed files with 63 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extensions/odoo_theme/static/scss/_variables.scss
+22 -2
View File
@@ -133,6 +133,15 @@ $o-literals-border: $o-literals-bg;
$o-toc-bg: $o-gray-bg;
$o-toc-border: $o-toc-bg;
$o-alert-note-color: $primary;
$o-alert-tip-color: $primary;
$o-alert-example-color: $success;
$o-alert-warning-color: $success;
$o-alert-danger-color: $danger;
$o-alert-exercises-color: $dark;
$o-accordion-bg: $o-alert-exercises-color!default;
//------------------------------------------------------------------------------
// Misc
//------------------------------------------------------------------------------
@@ -168,5 +177,16 @@ $o-icon-margin: .2em;
// Components
//------------------------------------------------------------------------------
// Accordion
$o-accordion-bg: $o-gray-bg!default;
// Alerts
$o-alert-default-icon: $i-info;
$o-alert-code-border-color: $o-gray-border;
$o-alert-types: (
"primary": ("color": $primary, "icon": $i-exercise),
"secondary": ("color": $secondary, "icon": $i-arrow-right),
"tip": ("color": $primary, "icon": $i-lightbulb),
"success": ("color": $success, "icon": $i-knowledge),
"warning": ("color": $warning, "icon": $i-warning),
"danger": ("color": $danger, "icon": $i-danger),
"dark": ("color": $dark, "icon": $i-exercise)
);