impress/app/assets/stylesheets/partials/_campaign-progress.sass
2017-01-05 15:47:12 -08:00

60 lines
No EOL
1.6 KiB
Sass

// 2015 campaign blue
// $campaign-border-color: #006
// $campaign-background-color: #eef
// $campaign-text-color: #004
// $campaign-link-color: $campaign-text-color + #222
$campaign-border-color: hsl(33, 100%, 40%)
$campaign-background-color: hsl(33, 100%, 97%)
$campaign-text-color: hsl(33, 100%, 20%)
$campaign-link-color: $campaign-text-color + #222
=campaign-progress
.campaign-progress-wrapper
+border-radius(8px)
background: desaturate(lighten($campaign-border-color, 30%), 85%)
background-image: linear-gradient(color-stops(desaturate(lighten($campaign-border-color, 50%), 85%), desaturate(lighten($campaign-border-color, 30%), 85%)))
border: 4px solid $campaign-border-color
clear: both
margin-bottom: 1em
margin-top: .5em
position: relative
.button
+awesome-button
+awesome-button-color(#004)
font-size: 75%
margin-left: 1em
padding: .25em .75em
.campaign-progress
background: $campaign-border-color
background-image: linear-gradient(color-stops($campaign-border-color + #222, $campaign-border-color))
border-right: 1px solid $campaign-border-color
.campaign-progress-wrapper, .campaign-progress
height: 2.5em
.campaign-progress-label
text-shadow: 1px 1px 0 #888
color: white
font-size: 150%
left: 0
position: absolute
top: 0
text-align: center
width: 100%
a
color: inherit
display: block
text-decoration: none
.button
position: relative
top: -2px /* lame hack to align well with text; sigh */
&.campaign-loaded
.campaign-progress-wrapper
visibility: visible