NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions 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 4f0713af54
commit 3d73e4c5b4
4 changed files with 63 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
extensions/odoo_theme/static/scss/_mixins.scss
View File

@ -49,8 +49,7 @@
//-- add icon
@mixin o-inline-icon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $o-fw-regular) {
content: '#{$icon-content}';
@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $o-fw-regular) {
vertical-align: $v-align;
margin: $margin;
@include font-size($font-size);

24
extensions/odoo_theme/static/scss/_variables.scss
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)
);

12
extensions/odoo_theme/static/scss/bootstrap_overridden.scss vendored
View File

@ -31,18 +31,6 @@ $info: $blue;
$warning: $orange;
$danger: $red;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"tip": $primary,
"light": $light,
"dark": $dark,
);
// Fonts
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;

92
extensions/odoo_theme/static/style.scss
View File

@ -163,7 +163,8 @@ header {
&:before {
@include o-position-absolute($top: 50%, $right: 3rem);
@include o-transform (translateY(-50%)) ;
@include o-inline-icon($i-close, auto, middle, 1.2rem);
content: $i-close;
@include o-inline-icon(auto, middle, 1.2rem);
}
}
}
@ -295,7 +296,8 @@ header {
> .toctree-l1 {
&[class*="o_menu_"] > .o_toc_entry_wrapper > i:before {
@include o-inline-icon($i-doc-apps, 0 5px 0 0);
content: $i-doc-apps;
@include o-inline-icon(0 5px 0 0);
color: $o-violet;
}
@ -570,7 +572,8 @@ header {
align-items: center;
&:before {
@include o-inline-icon($i-article, 0 $o-icon-margin 0 0);
content: $i-article;
@include o-inline-icon(0 $o-icon-margin 0 0);
color: $o-gray-light;
}
}
@ -886,13 +889,14 @@ header {
//------------------------------------------------------------------------------
// Alerts
//------------------------------------------------------------------------------
.alert {
border-width: 0 0 0 $alert-border-width;
@include font-size($font-size-sm);
code, div[class^="highlight"] {
background-color: $white !important;
border: 1px solid $o-gray-border;
border: 1px solid var(--o-alert-code-border-color,#{$o-gray-border}) ;
color: inherit;
}
@ -911,7 +915,8 @@ header {
font-weight: $o-fw-bold;
&:before {
@include o-inline-icon($i-info, 0 $o-icon-margin 0 0, baseline, $font-size-base, inherit);
content: var(--o-alert-icon, #{$o-alert-default-icon});
@include o-inline-icon(0 $o-icon-margin 0 0, baseline, $font-size-base, inherit);
@include media-breakpoint-down(md) {
display:none;
}
@ -920,87 +925,70 @@ header {
// Custom Admonitions
&[class^="admonition"] {
@extend .alert-info;
--o-alert-icon: '#{$i-info}';
--o-alert-code-border-color: tint-color($info, 30%);
$background: shift-color($info, $alert-bg-scale);
$border: shift-color($info, $alert-border-scale);
$color: shift-color($info, $alert-color-scale);
code, div[class^="highlight"] {
border-color: tint-color($info, 30%);
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
$color: mix($info, color-contrast($background), abs($alert-color-scale));
}
@include alert-variant($background, $border, $color);
}
// Note
&.alert-primary {
> .alert-title:before, > h3:before {
content: '#{$i-note}';
}
code, div[class^="highlight"] {
border-color: tint-color($primary, 30%);
}
--o-alert-code-border-color: #{tint-color($primary, 50%)};
--o-alert-icon: '#{$i-note}';
}
// See Also
&.alert-secondary {
> .alert-title:before, > h3:before {
content: '#{$i-arrow-right}';
}
--o-alert-icon: '#{$i-article}';
--o-alert-code-border-color: #{tint-color($secondary, 30%)};
a {
color: $secondary;
}
code, div[class^="highlight"] {
border-color: tint-color($secondary, 50%);
}
}
// Tip
&.alert-tip {
background-color: $o-gray-bg;
> .alert-title:before, > h3:before {
content: '#{$i-lightbulb}';
@include font-size(1.2rem);
--o-alert-icon: '#{$i-lightbulb}';
--o-alert-code-border-color: #{$o-gray-border};
$background: $o-gray-bg;
$border: shift-color($primary, $alert-border-scale);
$color: shift-color($primary, $alert-color-scale);
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
$color: mix($primary, color-contrast($background), abs($alert-color-scale));
}
@include alert-variant($background, $border, $color);
}
// Example
&.alert-success {
> .alert-title:before, > h3:before {
content: '#{$i-knowledge}';
}
code, div[class^="highlight"] {
border-color: tint-color($success, 50%);
}
--o-alert-icon: '#{$i-knowledge}';
--o-alert-code-border-color: #{tint-color($success, 50%)};
}
// Warning & Important
&.alert-warning {
> .alert-title:before, > h3:before {
content: '#{$i-warning}';
}
code, div[class^="highlight"] {
border-color: tint-color($warning, 50%);
}
--o-alert-icon: '#{$i-warning}';
--o-alert-code-border-color: #{tint-color($warning, 50%)};
}
// Danger
&.alert-danger {
> .alert-title:before, > h3:before {
content: '#{$i-danger}';
}
code, div[class^="highlight"] {
border-color: tint-color($danger, 50%);
}
--o-alert-icon: '#{$i-danger}';
--o-alert-code-border-color: #{tint-color($danger, 50%)};
}
// Exercises
&.alert-dark {
> .alert-title:before, > h3:before {
content: '#{$i-exercise}';
}
code, div[class^="highlight"] {
border-color: tint-color($dark, 50%);
}
--o-alert-icon: '#{$i-exercise}';
--o-alert-code-border-color: #{tint-color($dark, 50%)};
}
}
.graphviz {