denkGroot/Spina

// Buttons

button, input[type="submit"], input[type="button"]
  background: none
  border: none

.button
  background: #efefef
  border-radius: 3px
  color: #444
  display: inline-block
  font-size: 14px
  font-weight: bold
  line-height: 20px
  margin: 0 4px 4px 0
  outline: none
  padding: 8px 16px
  text-decoration: none
  transition: all .3s ease

  &:hover
    background: shade(#efefef, 5%)
    color: inherit

  &.button-shaded:hover
    background: #efefef

  &:active, &.button-active, &.button-shaded, &.button-shaded:active
    background: shade(#efefef, 10%)

  &:focus
    outline: none

  &.button-primary
    background: $primary-color
    color: #fff

    &:hover
      background: shade($primary-color, 10%)

    &.button-shaded:hover
      background: $primary-color

    &:active, &.button-active, &.button-shaded, &.button-shaded:active
      background: shade($primary-color, 20%)

  &.button-success
    background: $success-color
    color: #fff

    &:hover
      background: tint($success-color, 20%)

    &.button-shaded:hover
      background: $success-color

    &:active, &.button-active, &.button-shaded, &.button-shaded:active
      background: shade($success-color, 10%)

  &.button-danger
    color: $danger-color

  &.button-block
    display: block
    text-align: center

  &.button-link
    background: none
    font-weight: 600

    &:hover
      color: #333

    &:active, &.button-active
      color: #111

  i.icon
    margin-right: 8px
    margin-top: -2px

  &.icon-only
    &:before, i.icon
      margin-right: 0

  &.icon-mini:before
    margin-right: 4px

  &.button-large
    border-radius: 4px
    padding: 11px 18px

    &:before
      margin-right: 10px

  &.button-small
    font-size: 13px
    padding: 6px 12px

    i.icon
      margin-right: 4px

  &.button-mini
    font-size: 12px
    padding: 3px 10px

  &.button-hollow
    background: none
    border: 1px solid #ccc
    color: #777

    &:hover
      border: 1px solid #bbb
      color: #666

    &:active, &.button-active
      border: 1px solid #aaa
      color: #444

  &.button-round
    border-radius: 21px

  &.button-saving
    background: #999 !important

  &.button-saving:before
    animation: rotate 3.0s linear infinite
    display: inline-block

@keyframes rotate
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)

.pull-right .button
  margin: 0 0 4px 4px

// Button groups

.button-group
  .button
    border-radius: 0
    float: left
    margin-right: 0

  .button:first-child
    border-radius: 3px 0 0 3px

  .button:last-child
    border-radius: 0 3px 3px 0

  &:after
    clear: both
    content: ""
    display: block

.button-group.button-group-round
  .button
    float: left
    margin-left: 0
    border-right: none

  .button:first-child
    border-radius: 21px 0 0 21px

  .button:last-child
    border-radius: 0 21px 21px 0

// Pagination

.pagination-container
  background: #f9f9f9
  border: 1px solid #eee
  border-left: none
  border-right: none
  margin: 0 -40px
  padding: 0 40px

.pagination

  .previous_page, .next_page, em.current, a
    color: #999
    display: inline-block
    font-size: 14px
    font-style: normal
    font-weight: 600
    line-height: 20px
    padding: 6px 8px

    &:first-child
      padding-left: 0

  .disabled
    display: none

// Dropdowns

[data-dropdown]
  position: relative

  ul, .sliding-dropdown
    background: #fff
    border: 1px solid #ccc
    border-radius: 3px
    box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
    display: none
    list-style: none
    margin: 0
    margin-top: 6px
    padding: 6px 0
    position: absolute
    width: 200px
    z-index: 999

    &.animated
      animation-duration: .3s
      display: block

    &.no-animation
      animation: none

  ul:before, .sliding-dropdown:before
    content: ""
    display: block
    height: 0
    position: absolute
    left: 11px
    top: -8px
    width: 0
    border-bottom: 8px solid #aaa
    border-left: 8px solid transparent
    border-right: 8px solid transparent

  ul:after, .sliding-dropdown:after
    content: ""
    display: block
    height: 0
    position: absolute
    left: 12px
    top: -7px
    width: 0
    border-bottom: 7px solid #fff
    border-left: 7px solid transparent
    border-right: 7px solid transparent

  ul.align-right, .sliding-dropdown.align-right
    right: 0px

  ul.align-right:before, .sliding-dropdown.align-right:before
    left: auto
    right: 11px

  ul.align-right:after, .sliding-dropdown.align-right:after
    left: auto
    right: 12px

  ul li.divider
    border-top: 1px solid #e9e9e9
    margin: 8px 0

  ul li a, ul li button
    background: none
    color: #333
    display: block
    font-size: 14px
    padding: 8px 16px
    text-align: left
    text-decoration: none
    width: 100%

  ul li a:hover, ul li button:hover
    background-color: $primary-color
    color: #fff

  ul li a:before, ul li button:before
    margin-right: 8px

[data-dropdown] .sliding-dropdown
  padding: 0
  width: 300px

  .slide-controls
    border-bottom: 1px solid #eaeaea
    color: #333
    font-size: 14px
    font-weight: 600
    line-height: 44px
    text-align: center

    .slide-title
      display: none

    .slide-title.active
      display: block

    .previous, .next
      color: #666
      font-size: 12px
      outline: none
      padding: 0 12px
      position: absolute
      top: 0px

      .icon:before
        line-height: 44px

      &:hover
        color: #333

      &.muted
        color: #ccc
        cursor: default

    .previous
      left: 0px

    .next
      right: 0px

  .slide-controls.open
    display: block

  .slide
    display: none
    text-align: center

    &.active
      display: block

    p
      color: #333
      font-size: 14px
      font-weight: 400
      margin: 16px

    p.muted
      color: #999

    .button
      border-top-left-radius: 0
      border-top-right-radius: 0
      margin: -1px
      width: 300px

      &.button-primary
        background: lighten($primary-color, 40%)
        border: 1px solid lighten($primary-color, 30%)
        color: $primary-color

        &:hover
          background: $primary-color
          border: 1px solid $primary-color
          color: #fff

  .slide-dots
    margin: 12px
    text-align: center

    .slide-dot
      background: #ccc
      border-radius: 2px
      display: inline-block
      height: 4px
      width: 4px

      &.active
        background: #333