engagementgamelab/CivicSeed

*, *:before, *:after
  box-sizing border-box

body
  margin-top 110px
  margin-bottom 3em
  font-family $bodyFont

.navbar
  user-select none
  background-color white
  height 70px
  padding-bottom 10px
  border-bottom 0
  .logo
    height 64px
    margin-top 2px
    margin-left 1em
  .navbar-nav
    margin-top 0.5em
    font-size 1.1em
  .nav
    & > li > a
      color $csGray
      text-shadow 0 1px 0 rgba(96,96,96,0.25)
      &:hover
        color $csOrange
        text-shadow 0 1px 0 rgba(0,0,0,0.25)
    button
      margin-top 10px
      padding 5px 10px
  .navbar-toggle
    margin-top 18px
  .dropdown
    margin-right 20px
    margin-left 10px
    .username
      margin 0 6px
    .caret
      margin-top -3px
  .zag
    position absolute
    background $cloudUrl('img/other/zig.png')
    width 100%
    height 10px
    bottom -10px   // set height = bottom
  .navbar-collapse
    border-top 0
    background-color white
    border-bottom 1px solid #e8e8e8
    // Hack for dropdown not appearing at full width on smaller screens
    @media (max-width $grid-float-breakpoint)
      position absolute
      width 100%
    @media (min-width $grid-float-breakpoint)
      border-bottom 0

.form-inline
  // Override extra margin below forms
  margin-bottom 0

input, textarea
  border-radius 0
  border 1px solid #ccc
  background lighten($csGray, 90%)
  color $csBlack
  font-family $buttonFont
  box-shadow inset 0 0 0

textarea
  width 100%
  padding 15px 10px

input
  padding 6px 10px
  height auto

// Iframes
iframe
  border 0

// Links
a, a:hover, a:visited, a:active
  color $csOrange

a:hover
  text-decoration none

h2
  color $csDarkBlue

// Buttons.styl overrides
// .btn, .btn-group .btn:first-child, .btn-group.open .dropdown-menu
button
  outline none !important
button, a.btn, .btn
  border 0 none
  border-radius 2px
  background-color $csOrange
  color white
  font-family $buttonFont
  font-weight 300
  &:hover, &:focus
    color white
    box-shadow 0 0 0 3px $csLightGray
// Override colors for types
.btn-info, .btn-info:hover, .btn-info:focus
  background-color $csBlue !important
.btn-primary, .btn-primary:hover, .btn-primary:focus
  background-color $csOrange !important
.btn-success, .btn-success:hover, .btn-success:focus
  background-color $csGreen !important
// Override large button border-radius
.btn-lg
  border-radius 2px

p, span
  font-family inherit

.iconInfo
  margin-bottom 30px


// Override Bootstrap's silly blockquote style
blockquote
  margin 1em 40px
  border-left 4px solid #b3b3b3

// Fixes for bootstylus tooltips
// Reduce line spacing between multiple lines
.tooltip.in
  opacity 1
.tooltip-inner
  line-height 1.25em
  padding 8px
  background-color $csBlue
.tooltip.top .tooltip-arrow
  border-top-color $csBlue
.tooltip.bottom .tooltip-arrow
  border-bottom-color $csBlue

// Fix slightly uncentered placement of pointer arrows due to global box model change
.tooltip.top, .tooltip.bottom
  .tooltip-arrow
    margin-left -5px
// Fix for Font Awesome using the translateZ hack
.fa-lg
  transform translateZ(0)


// CSS SPINNER

// CSS Spinner test: https://github.com/jlong/css-spinners/blob/master/css/spinner/spinner.css
// Modify font-size for .spinner get the right size

vendors = webkit moz
@keyframes spinner {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

/* :not(:required) hides this rule from IE9 and below */
.spinner:not(:required)
  border-radius 0.5em
  box-shadow rgba(64, 64, 64, 0.5) 1.5em 0 0 0, rgba(64, 64, 64, 0.5) 1.1em 1.1em 0 0, rgba(64, 64, 64, 0.5) 0 1.5em 0 0, rgba(64, 64, 64, 0.5) -1.1em 1.1em 0 0, rgba(64, 64, 64, 0.5) -1.5em 0 0 0, rgba(64, 64, 64, 0.5) -1.1em -1.1em 0 0, rgba(64, 64, 64, 0.5) 0 -1.5em 0 0, rgba(64, 64, 64, 0.5) 1.1em -1.1em 0 0
  display none
  font-size 8px
  width 1em
  height 1em
  margin 1.5em
  overflow hidden
  text-indent 100%
  animation-name spinner
  -webkit-animation-name spinner
  animation-duration 1500ms
  -webkit-animation-duration 1500ms
  animation-iteration-count infinite
  -webkit-animation-iteration-count infinite
  animation-timing-function linear
  -webkit-animation-timing-function linear