ComboStrap Styling - Color
Table of Contents
1 - About
Every ComboStrap UI component can be colorized with one of the following attributes
- color: The color of the text
- background-color: The color of the background
- border-color: The color of the border
2 - Articles Related
3 - Example
With a card
<card background-color="teal" color="black" border-color="blue" width="200px">
A teal [[ui:card|card]] with a black text and a blue border
</card>
4 - Value
ComboStrap supports the following color value:
4.1 - Name
ComboStrap follows the Bootstrap color naming and you may then use the following color names.
The default Bootstrap colors are:
4.2 - Gradient
ComboStrap implements also a gradient color naming scheme in order to show a linear color gradient in the background.
Since version 1.2
If you want to have a gradient on your color, just add the gradient- prefix to a color value.
Example with a note:
<note info background-color="gradient-light" >
==== Linear Background Gradient Color ====
A [[ui:note|info note]] with a ''light gradient color'' as background
</note>
Linear Background Gradient Color
A info note with a light gradient color as background
5 - Info
5.1 - Default Border Attributes
If you set a border-color attributes, by default ComboStrap will set the following properties if they are not present.
- a width of 1px
- a style of solid (ie a continue line)
- a radius of 0.25rem (round corner)
This is :
- to avoid the confusion to see nothing appearing on the screen
- and to have a consistent styling with bootstrap.
6 - FYI: Bootstrap Color Set
For instance, you got this colors for a Primary button
.btn-primary {
color: #fff;
background-color: #075ebb;
border-color: #075ebb;
}
and this one for a primary note
.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}