Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Contents

Table of Contents
minLevel1
maxLevel7
exclude([Cc]ontents)
typeflat
separatorpipe

Opaque

Variable Name

Variable Value

Hex triplet

Details

$blue-gradient

linear-gradient(-45deg,

#253a6e, #1d5389, #146ea6, #0c85be, #059bd6

)

Blue Gradient

$green-gradient

linear-gradient(-45deg,

#9fd64d, #75c170, #49ab95, #2297b6, #0086d2

)

Green Gradient

$dark-green-gradient

linear-gradient(-45deg,

#9fd64d, #44873c, #2c736e, #186299, #059bd6

)

Dark Green Gradient

Transparency

Variable Name

Hex triplet

Variable Value

$light-green-gradient

linear-gradient(-45deg,

rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6)

)

$bg-blue-gradient

linear-gradient(-45deg,

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-gradient-mobile

linear-gradient(-45deg,

transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, 1) 100%

Additional Context

These variables are applied using the linear gradient mixin. The default angle is -45deg.

Example

Code Block
languagesass
.sample {
  @include linear-gradient($blue-gradient);
}

Output

Code Block
languagecss
.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

...