More actions
m Update dependencies. |
Fix typo. Add basic info about design-tokens. |
||
| Line 21: | Line 21: | ||
;Syntax | ;Syntax | ||
: {{T|Banner|2=color= color|3=border= color|4=text= color|5=icon= link|6= | : {{T|Banner|2= color= color|3= border= color|4= text= color|5= icon= link|6= icon-both= yes|7= align= align|8= content}} | ||
: With the exception of <kbd>content</kbd>, all parameters are optional | : With the exception of <kbd>content</kbd>, all parameters are optional | ||
:: '''color''' - Color of the banner background. If omitted the background color is transparent. Colors can be given either by color name<ref>https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]</ref> (e.g. {{Co|red|red}} or {{Co|green|green}}) or values<ref>https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]</ref> (like {{Co|#0000FF|#0000FF}}). | :: '''color''' - Color of the banner background. If omitted the background color is transparent. | ||
:: Colors can be given either by design-token<ref>Design tokens are the building blocks of UI elements. For colors they are used as CSS custom properties (variables) e.g. var(--background-color-warning-subtle). For wikimedia see: [https://doc.wikimedia.org/codex/latest/design-tokens/overview.html Design tokens]. Warning: Individual wikis can change these base color i.e. in [[MediaWiki:Citizen.css|Citizen.css]]</ref>, color name<ref>https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]</ref> (e.g. {{Co|red|red}} or {{Co|green|green}}) or values<ref>https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]</ref> (like {{Co|#0000FF|#0000FF}}). | |||
:: '''border''' - Color of the border of the banner. If omitted and "color" is given then the border is the same color as the background. If color is also omitted then the border color is {{Co|red|red}}. | :: '''border''' - Color of the border of the banner. If omitted and "color" is given then the border is the same color as the background. If color is also omitted then the border color is {{Co|red|red}}. | ||
:: '''text''' - Color of the text in the banner. If omitted the text color is inherited from the parent container.the icon is placed on the left side of the banner. | :: '''text''' - Color of the text in the banner. If omitted the text color is inherited from the parent container.the icon is placed on the left side of the banner. | ||