Background #
Primary theme colors are used for elements that must reflect Fluxo's brand. These can be customized to represent your brand identity using Sass.
Background Color #
.background--brand
.background--primary
.background--secondary
.background--success
.background--danger
.background--warning
.background--warning2
.background--info
.background--light
.background--dark
.background--white
.background--transparent
<div class="p-3 mb-2 background--brand text-white">.background--brand</div>
<div class="p-3 mb-2 background--primary text-white">.background--primary</div>
<div class="p-3 mb-2 background--secondary text-white">.background--secondary</div>
<div class="p-3 mb-2 background--success text-white">.background--success</div>
<div class="p-3 mb-2 background--danger text-white">.background--danger</div>
<div class="p-3 mb-2 background--warning text-dark">.background--warning</div>
<div class="p-3 mb-2 background--warning2 text-dark">.background--warning2</div>
<div class="p-3 mb-2 background--info text-white">.background--info</div>
<div class="p-3 mb-2 background--light text-dark">.background--light</div>
<div class="p-3 mb-2 background--dark text-white">.background--dark</div>
<div class="p-3 mb-2 background--white">.background--white</div>
<div class="p-3 mb-2 background--transparent text-dark">.background--transparent</div>Background Gradient #
.gradient-brand-color
.gradient-light--lean-right
.gradient-light--lean-left
.gradient-light--upright
<div class="p-7 mb-2 gradient-brand-color text-white">.gradient-brand-color</div>
<div class="p-7 mb-2 gradient-light--lean-right">.gradient-light--lean-right</div>
<div class="p-7 mb-2 gradient-light--lean-left">.gradient-light--lean-left</div>
<div class="p-7 mb-2 gradient-light--upright">.gradient-light--upright</div>