thesis

body.thesis-tray-open
  #thesis-editor
    right: 380px

#thesis-editor
  +transition(right .3s ease-in-out)
  display         : block
  position        : absolute
  right           : 0
  bottom          : 0
  z-index         : 1040
  position        : fixed
  z-index         : 1040
  color           : white
  line-height     : 0
  font-size       : 0
  text-decoration : none
  height          : 315px
  width           : 85px

  &:hover
    .thesis-button.add, .thesis-button.delete
      opacity        : 1
      pointer-events : auto

      // - vertically positions 'add' and 'delete' buttons on hover
      @for $i from 2 to 4
        &:nth-last-child(#{$i})
          $modifier: $i - 1
          bottom: $modifier * 80 - 5 + px

  //
  // in edit mode
  // --------------------------------------------------------------------------
  &.active
    .thesis-button
      opacity        : 1
      pointer-events : auto

    .thesis-button.add, .thesis-button.delete
      opacity        : 0
      pointer-events : none

    .thesis-button.edit i
      +barber_pole(darken($gray, 8%), rgba(white, .25))

  //
  // with 'add' button - bottom positioning and curve depending on button count
  // --------------------------------------------------------------------------
  // - curves page tool buttons on active
  &.active.thesis-page-tools-count-5 .thesis-button, &.active.thesis-page-tools-count-5:hover .thesis-button
    +curve_buttons(6, 2)

  // - curves 'add' button on hover
  &.thesis-page-tools-count-5:hover .thesis-button
    +curve_buttons(5, 0, true)

  // - vertically positions page tool buttons
  &.thesis-page-tools-count-5 .thesis-button
    @for $i from 2 to 5
      &:nth-last-child(#{$i + 1})
        $modifier: $i - 1
        bottom: $modifier * 80 - 5 + px

  //
  // with 'add' and 'delete' buttons - bottom positioning and curve depending on button count
  // --------------------------------------------------------------------------
  // - curves page tool buttons on active
  &.active.thesis-page-tools-count-6 .thesis-button, &.active.thesis-page-tools-count-6:hover .thesis-button
    +curve_buttons(6, 2)

  // - curves 'add' and 'delete' buttons on hover
  &.thesis-page-tools-count-6:hover .thesis-button
    +curve_buttons(6, 0, true)

  // - vertically positions page tool buttons
  &.thesis-page-tools-count-6 .thesis-button
    @for $i from 2 to 5
      &:nth-last-child(#{$i + 2})
        $modifier: $i - 1
        bottom: $modifier * 80 - 5 + px

  //
  // default bottom positioning based on 4 buttons
  // --------------------------------------------------------------------------
  // - curves page tool buttons on active
  &.active.thesis-page-tools-count-4 .thesis-button, &.active.thesis-page-tools-count-4:hover .thesis-button
    +curve_buttons(4)

  // - vertically positions page tool buttons
  &.thesis-page-tools-count-4 .thesis-button
    @for $i from 2 to 5
      &:nth-last-child(#{$i})
        $modifier: $i - 1
        bottom: $modifier * 80 - 5 + px

  .thesis-button
    +editor_icons(("cancel": $ir_red, "delete": $pink, "add": $blue, "save": $green, "settings": $yellow ))
    +transform-origin(0% 100%)
    +transition(opacity .3s ease-in-out, right .4s ease-in-out, transform .4s ease-in-out, bottom .4s ease-in-out)
    right          : 15px
    opacity        : 0
    display        : block
    float          : right
    clear          : both
    text-align     : right
    position       : relative
    cursor         : pointer
    padding        : 0px 0px
    height         : 80px
    width          : auto
    padding-bottom : 20px
    pointer-events : none
    position       : absolute
    bottom         : 0

    &:hover
      .tooltip
        right   : 80px
        opacity : 1

    &.edit
      opacity        : 1 !important
      height         : 60px !important
      padding-bottom : 0px !important
      pointer-events : auto !important
      bottom         : 15px
      right          : 15px

    &.add, &.delete
      right: 15px

    i
      position         : relative
      z-index          : 2
      width            : 60px
      height           : 60px
      display          : inline-block
      background-color : $gray
      border           : 3px solid white
      font-size        : 30px
      line-height      : 55px
      text-align       : center
      vertical-align   : middle
      font-family      : $fontawesome
      color            : white
      +transition(background-color .3s ease-in-out)

      &:hover
        background-color: darken($gray, 8%)
        +transition(background-color .3s ease-in-out)

    .tooltip
      +transition(opacity .2s ease-out, right .2s ease-out)
      z-index        : 1
      position       : absolute
      right          : 0px
      top            : 17px
      font-size      : 13px
      color          : white
      background     : rgba(black, .70)
      padding        : 5px 15px 4px
      line-height    : 1
      opacity        : 0
      text-transform : uppercase
      letter-spacing : 1px
      vertical-align : middle
      display        : inline-block
      font-weight    : normal
      border         : 2px solid white
      white-space    : nowrap
      pointer-events : none

      &:before
        content  : ""
        display  : block
        position : absolute
        right    : -25px
        width    : 40px
        height   : 60px
        top      : -19px
        z-index  : 0

      &.error
        background : rgba(darken(red, 20%), .75)