OpenFn/OpenFn-Site

/* Layout
 ========================================================================== */

.container-max-width
  max-width: 1600px

.container-fluid-padding
  padding: 0 60px !important
  @media screen and (max-width: 992px)
    padding: 0 !important

/* Header
 ========================================================================== */

.headline-text
  font-weight: 200

.headline
  padding: 5em 7em 4em 7em


  background-color: $base
  background-image: image-url("wow_bg.jpg")
  color: $bg-color
  border-bottom: 8px solid $grey
  position: relative

  @media screen and (max-width: 768px)
    padding: rem-calc(100px) rem-calc(30px)
    padding-bottom: rem-calc(90px)

  @media (max-width: 33.9em)
    padding: rem-calc(50px) rem-calc(18px)
    padding-bottom: rem-calc(40px)

.search-field
  input[type="text"]
    box-sizing: content-box
    width: calc(100% - 38px)
    box-shadow: none
    border: none
    font-size: 15px
    font-weight: bold
    text-transform: uppercase
    border-radius: 2px
    padding: 4px 16px
    border: solid 3px #fff
    transition: border 0.3s
  input[type="text"]:focus
    outline: none
    border: solid 3px $accent

.dropdown-menu
  margin: 0
  padding: 0
  width: calc(100% - 30px)
  line-height: 2em
  color: black  
  li a
    cursor: pointer
    padding: 10px 20px

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus
  font-weight: bold

.integrated-btn
  color: $light
  transition: all 0.25s
  @media screen and (max-width: 480px)
    font-size: .7em

  &:hover
    color: $light-grey
  &.active
    color: $accent
  &:hover, &.active
    -webkit-box-shadow: none
    box-shadow: none

.accordion-panel-toggle
  position: absolute
  width: 48px
  height: 34px
  margin-left: -24px
  left: 50%
  padding: 8px 10px 5px 10px
  bottom: 0
  background: $grey
  color: white
  cursor: pointer
  transition: all .25s
  &:hover
    background: darken($grey, 10%)

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

=keyframe-transforms($from, $to)
  from
    transform: translateX($from)
  to
    transform: translateX($to)

=slider-animation($animation-name)
  -webkit-animation: $animation-name .25s
  -moz-animation:    $animation-name .25s
  -o-animation:      $animation-name .25s
  animation:         $animation-name .25s

+keyframes(slide-start-right)
  +keyframe-transforms(0, 8px)
+keyframes(slide-right)
  +keyframe-transforms(8px, 0)
+keyframes(slide-start-left)
  +keyframe-transforms(0, -8px)
+keyframes(slide-left)
  +keyframe-transforms(-8px, 0)

.accordion-panel-toggle
  #slider-top, #slider-bottom
    +slider-animation(slide-start-right)
  #slider-middle
    +slider-animation(slide-start-left)
  &:hover
    #slider-top, #slider-bottom
      +slider-animation(slide-right)
    #slider-middle
      +slider-animation(slide-left)

/* Accordion
 ========================================================================== */

$accordion-base:   #cfd0cc
$accordion-active: #5b6a70
$accordion-dark:   #354a54
$accordion-danger: #e8564c

.accordion-container
  background: $nav
  background-image: image-url("noise.png")
  display: none

// refactor could be DRY-er
.custom-accord
  .panel
    border-radius: 0

    .panel-heading
      background: $accordion-base
      border-radius: 0
      text-align: left
      text-transform: uppercase
      padding: 0
      .panel-title
        font-size: 1em
        font-weight: bold

        a
          &:hover, &:focus
            text-decoration: none
      .ng-panel-title
        padding: 12px 15px
        transition: all .25s
        &:hover
          background: darken($accordion-base, 5%)
        &.active
          color: $accent !important
          background: $accordion-active !important
    .panel-body
      background: $accordion-active
      padding: 5px 0
      border: none !important
    li
      cursor: pointer
      background: $accordion-active
      font-size: .9em
      text-align: left
      color: white
      border: none
      transition: all .25s
      &:hover, &:hover .badge
        color: $grey
        background: none
      &.active
        color: $accent
      .badge
        background: none
        font-size: .9em
        font-weight: normal
        padding: 0
        transition: all .25s
        &.active
          color: $accent

.reset-accordions
  background: $red-accent
  color: white
  padding: 12px 15px
  text-align: left
  text-transform: uppercase
  font-size: 1em
  font-weight: bold

  cursor: pointer
  transition: all .25s
  &:hover, a:hover
    color: white
    background: darken($red-accent, 8%)