SASS BoilerPlate

boilerplate.sass

/*********************
/* COLORS MIXINS
/*********************

@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,700,900')

$font-stack:  'Lato', Helvetica, Arial,  sans-serif

/* Color */
$orange: #EF7A23
$lightorange: #f7b836
$lightgray: #FAF8F5
$blue: #016499


=bluebutton
  background: rgba(1,100,153,0.79)
  font-size: 1.5rem
  color: #FFFFFF
  border: 2px solid rgb(1,100,153)
  border: 2px solid rgba(1,100,153,0.79)
  -webkit-background-clip: padding-box
  /* for Safari */
  background-clip: padding-box
  &:hover
    background: transparent
    border: 2px solid rgb(1,100,153)
    border: 2px solid rgba(1,100,153,0.79)
    -webkit-background-clip: padding-box
    /* for Safari */
    background-clip: padding-box
    color: $blue

=whitebutton
  background: rgba(255,255,255,0.98)
  color: $orange
  font-size: 1.5rem
  border: 2px solid #fff
  &:hover
    background: transparent
    border: 2px solid #fff
    color: #fff

=hollowbutton
  background-color: transparent
  border: 1px solid $orange
  padding: .85rem 1rem
  color: #494949
  &:hover
    background-color: rgba(239, 122, 35, 0.41)
    color: #fff


=cssTransition($secs)
  -webkit-transition: all $secs ease-in-out
  -moz-transition: all $secs ease-in-out
  -o-transition: all $secs ease-in-out
  -ms-transition: all $secs ease-in-out
  transition: all $secs ease-in-out

=arrow($size, $color)
  border-top: $size solid transparent
  border-bottom: $size solid transparent
  border-left: $size solid $color
  display: inline-block
  height: 0
  width: 0

/*********************
/* GENERAL STYLES
/*********************

// Sets REM root size to 16px
html
  font-size: 100%

body
  font-family: $font-stack
  color: $bodyColor

/*********************
/* LINK STYLES
/*********************
a, a:visited
  // Mobile tap color
  &:link
    //Highlight links on iOS, Similar to :hover for mobile devices.
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3)
  &:hover
    color: rgba(1, 86, 132, 0.7)

// Default Button
.button
  +bluebutton
  .arrow
    +arrow(8px, #fff)
  &:hover
    .arrow
      +arrow(8px, $blue)

/*********************
/* H1, H2, H3, H4, H5 P STYLES
/*********************
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5
  font-family: $font-stack
  font-weight: bold
  color: $HeadlineColor

  // Removing text decoration from all headline links
  a
    text-decoration: none

h1, .h1
  line-height: 2.8rem

h2, .h2

h3, .h3

h4, .h4

h5, .h5

p
  line-height: 1.5rem

ul.check
  list-style: none
  margin-left: 0
  li
    padding-left: 35px
    background: url(../images/greencheck.png) no-repeat 0px 2px
    background-size: 27px
    font-weight: bold
    margin-bottom: .25rem

blockquote
  font-size: 1.2rem
  font-weight: 300
  font-style: italic
  margin: 0 0 2rem
  position: relative
  &:after
    content: "\0022"
    position: absolute
    top: -6px
    left: -4px
    font-size: 3rem