...
| Table of Contents |
|---|
| minLevel | 1 |
|---|
| maxLevel | 7 |
|---|
| exclude | ([Cc]ontents) |
|---|
| type | flat |
|---|
| separator | pipe |
|---|
|
Opaque
Variable Name | Hex tripletVariable Value | Details |
|---|
$blue-gradient
| linear-gradient(-45deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6)-o-linear-gradient(135deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6);
| Blue Gradient |
$green-gradient
| linear-gradient(-45deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2)-o-linear-gradient(135deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2)
| Green Gradient |
$dark-green-gradient
| linear-gradient(-45deg, #9fd64d, #44873c, #2c736e, #186299, #059bd6)-o-linear-gradient(135deg, #9fd64d, #44873c, #2c736e, #186299, #059bd6)
| Dark Green Gradient |
Transparency
Variable Name | Hex tripletVariable Value |
|---|
$light-green-gradient
| linear-gradient(-45deg, rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6))
-o-linear-gradient(135deg, rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6))
|
$bg-blue-gradientlinear-gradient(-45deg, rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93))
| -o-linear-gradient(135deg, rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93))
|
$black-gradient
| linear-gradient(-45deg, transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%, rgba(0, 0, 0, 1) 100%)
|
$black-o-linear-gradient(135deg, gradient-mobile
| transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%65%, rgba(0, 0, 0, 1) 100%)
| $black-gradient-mobile | |
Additional Context
These variables are applied using the linear gradient mixin. The default angle is -45deg.
Example
| Code Block |
|---|
|
.sample {
@include linear-gradient( |
...
Output
| Code Block |
|---|
|
.sample {
background: #253a6e;
background: -webkit-linear-gradient(135deg, |
...
#253a6e, #1d5389, #146ea6, #0c85be, #059bd6);
background: linear-gradient(-45deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6);
} |
...
https://styleguide.asce.org/section-colors.html#asgref-colors-gradients
...