danielweinmann/unlock

@mixin unlock_button
  background: $button_color
  padding: 0.2em 1.2em
  border-radius: 0.4em
  border: none
  text-align: center
  color: $button_text_color
  font-weight: $bold_weight
  font-size: 2.2em
  line-height: 100%
  text-decoration: none
  width: auto
  cursor: pointer
  &:hover
    background: $button_hover_color
    color: $button_text_color
@mixin unlock_warning
  background-color: tint($flash_failure_color, 80%)
  padding: 2em
  h2, h3
    font-size: 1.17em
    color: $flash_failure_color
  h3
    margin-bottom: 1em
  margin-bottom: 2em
.button
  +unlock_button
.suspend
  background: $careful_color
  &:hover
    background: $careful_hover_color
.links
  +span-columns(6)
  text-align: center
.field
  margin-bottom: 2em
.warning
  +unlock_warning
.menu
  position: relative
  .open
    text-decoration: none
    color: $subheadline_color
    &:hover
      color: $hover_color
  nav
    z-index: 500
    position: absolute
    top: 3em
    left: 0
    min-width: 100%
    display: none
    background-color: $container_color
    border: 1px solid $border_color
    a
      text-decoration: none
      display: block
      padding: 0.5em
      color: $subheadline_color
      margin: 0 !important
      color: $text_color !important
      &:hover
        background-color: $highlight_color
        text-decoration: none !important
.initiatives
  h2
    a
      &.mobile
        +media($tablet)
          display: none
        +media($desktop)
          display: none
      &.not_mobile
        display: none
        +media($tablet)
          display: inline
        +media($desktop)
          display: inline
      font-size: 0.9em
      font-weight: $normal_weight
      text-decoration: none
      float: right
      color: $alternative_link_color
      &:hover
        color: $alternative_hover_color
.initiative
  position: relative
  +span-columns(6)
  height: 38.625vw
  overflow: hidden
  background-color: $container_color
  border-bottom: 0.2em solid $border_color
  margin-bottom: 1em
  &:hover
    .image
      display: none
    .status
      display: block
  +media($tablet)
    font-size: 1.382em
    +span-columns(4)
    +omega(2n)
    margin-bottom: 2em
  +media($desktop)
    font-size: 1.382em
    +span-columns(4)
    +omega(3n)
    height: 22vw
    margin-bottom: 4em
  +media($large_desktop)
    height: 263px
  .image, .status
    overflow: hidden
    height: 61.8%
    img
      width: 100%
  .image
    background: $border_color
  .status
    display: none
    background-color: $box_hover_color
    padding: 1em 0.4em
    h5
      +span-columns(3)
      &:first-child
        text-align: left
        +media($tablet)
          text-align: right
        +media($desktop)
          text-align: right
      +media($tablet)
        +span-columns(8)
      +media($desktop)
        +span-columns(12)
      color: $text_color
      font-weight: $normal_weight
      font-size: 0.9em
      text-align: right
      margin-bottom: 1em
      span.currency
        font-size: 1em
      span.number
        color: $box_color
        font-size: 2.6em
        font-weight: $bold_weight
  a
    text-decoration: none
  .info
    padding: 0.4em
    height: 38.2%
    h3, h4
      font-family: $standard_font
      font-style: normal
      font-size: 0.6em
      color: $text_color
      +media($tablet)
        font-size: 0.7em
    h3
      font-weight: $bold_weight
      margin-bottom: 0.8em
    h4
      font-weight: $normal_weight
.contributions
  padding: 0
  list-style: none
.contribution
  background-color: $container_color
  border-bottom: 0.2em solid $border_color
  margin-bottom: 2em
  height: 7em
  overflow: hidden
  +span-columns(6)
  +media($tablet)
    +span-columns(4)
    +omega(2n)
  +media($desktop)
    +span-columns(4)
    +omega(3n)
  padding: 1em
  a
    color: $text_color
  .image
    +span-columns(1)
    img
      border-radius: 12%
  .info
    +span-columns(5)
    float: left
    h4
      margin-bottom: 0.4em
.gateways
  +span-columns(6)
  padding: 0
  list-style: none
  margin-bottom: 3em
.gateway
  +span-columns(6)
  background-color: $container_color
  border-bottom: 0.2em solid $border_color
  margin-bottom: 2em
  &:last-child
    margin-bottom: 0
  .image, .info
    padding: 1em
  .image
    width: 20%
    float: left
    text-align: center
    padding-right: 0
  .info
    width: 80%
    float: left
    h4
      color: $text_color
      .state
        background-color: $small_color
        color: $button_text_color
        font-size: 0.7em
        padding: 0.5em 1em
        margin-left: 0.5em
        border-radius: 0.5em
    h5
      margin-bottom: 1em
    em
      margin-bottom: 1em
      display: block
    .button, [type=submit]
      display: block
      padding: 0.7em 1.2em
      margin-bottom: 1em
      &:last-child
        margin-bottom: 0
      +media($desktop)
        display: inline-block
        margin-right: 1em
        &:last-child
          margin-right: 0
      font-size: 0.7em
      background-color: $button_hover_color
      &:hover
        background-color: $button_color
    form
      margin: 0
.editable
  cursor: pointer
  form
    margin: 0
    #{$all-text-inputs}, textarea
      margin-bottom: 0.5em
  &::before
    font-family: "icomoon"
    content: "\e003"
    float: right
  &.rip-active
    border: none
    &::before
      content: none
    &::after
      content: "OK"
      +unlock_button
      font-size: 1em
  &[data-formtype=checkbox]
    &::before
      content: none
    &.rip-active
      &::after
        content: none
  &[data-formtype=timestamp]
    &.rip-active
      &::after
        content: none
    [type=submit]
      +unlock_button
      width: auto
      margin: 0
      margin-right: 0.5em
    .cancel
      line-height: 2.5em
  .rest-in-placeholder
    color: $strong_border_color
    border-bottom: 1px dashed $strong_border_color
.saving
  font-size: 1em
  font-weight: $bold_weight
  color: $highlight_color
.tips
  background-color: $alternative_highlight_color
  color: $alternative_highlight_text_color
  padding: 0.618em
  +media($desktop)
    font-size: 1.382em
  h5
    color: $alternative_highlight_text_color
  a
    color: $alternative_highlight_text_color
    &:hover
      color: $alternative_hover_color
.gateway_data
  +span-columns(6)
  background: $border_color
  margin-top: 2em
  h4
    font-family: $subheadline_font
    font-style: italic
    font-size: 1.2em
    line-height: 100%
    margin-bottom: 0
  ul
    li
      &:first-child
        margin-top: 1em
  padding: 1.2em
  &.failure
    background-color: tint($flash_failure_color, 80%)
    h4
      color: $flash_failure_color
  &.success
    background-color: tint($flash_success_color, 80%)
    h4
      color: $flash_success_color
.accordion
  +span-columns(6)
  padding: 0
  border: 1px solid $border_color
  border-top: none
  list-style: none
  >li
    +span-columns(6)
    margin: 0
    >h4
      margin: 0
      display: block
      border-top: 1px solid $border_color
      padding: 0.5em
      &:before
        content: '▸ '
      &:hover
        cursor: pointer
    .content
      border-top: 1px solid $border_color
      padding: 0 1em
      display: none
    &.expanded
      .content
        display: block
      h4:before
        content: '▾ '
.actions
  text-align: center
.action
  margin-bottom: 1em
  +span-columns(6)
  .careful
    background: $careful_color
    &:hover
      background: $careful_hover_color
  .button
    +span-columns(6)
    font-size: 1em
    padding: 0.5em 1.2em
  &:last-child
    margin-bottom: 3em
  +media($desktop)
    width: auto
    float: none
    +omega
    display: inline-block
    margin-right: 1em
    margin-bottom: 0
    &:last-child
      margin-bottom: 0
      margin-right: 0
.section_title
  +span-columns(6)
  margin-bottom: 1em
  h4
    font-size: 1.5em
    +span-columns(5)
  a
    text-align: right
    +span-columns(1)