[IMP][CSS] Use CSS variables to style different alert types
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
Antoine Vandevenne (anv)
parent
ff5ac57e1d
commit
750c43d0cf
@ -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);
|
||||
|
||||
@ -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)
|
||||
);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user