hopscotch.less

@import "util.less";
@import "bounce.less";

@anim-duration: .5s;
@bubbleCornerRadius: 10px;
@bubbleColor: #fff;
@bubbleBorderWidth: 6px;
@bubblePadding: 15px;
@borderColor: rgba(0, 0, 0, 0.5);
@circleWidth: 30px;
@spriteUrl: url(../img/sprite_os.png);

div#hopscotch-bubble {
  background-color: @bubbleColor;
  border: @bubbleBorderWidth solid #000; /* default */
  border: @bubbleBorderWidth solid @borderColor; /* transparent, if supported */
  color: #000;
  font-family: Helvetica, Arial;
  font-size: 13px;
  position: absolute;
  z-index: 999999;

  .background-clip;

  &.animate {
    .transition('top, left', @anim-duration, ease-in-out);
  }

  &.hide,
  .hide,
  .hide-all {
    display: none;
  }

  h3,
  #hopscotch-bubble-number {
    font-size: 18px;
  }

  h3 {
    margin: 0;
    padding: 0;
  }

  #hopscotch-bubble-container {
    padding: @bubblePadding;
    position: relative;
    -webkit-font-smoothing: antialiased; /* to fix text flickering */

    p {
      margin: 10px 0;
      padding: 0;
    }
  }

  #hopscotch-bubble-content {
    margin: 0 0 0 (@circleWidth + 10px);

    h3 {
      margin: 0 @bubblePadding 0 0;
    }
  }

  #hopscotch-bubble-close {
    color: #000;
    background: transparent @spriteUrl -200px -100px no-repeat;
    display: block;
    margin: @bubblePadding 10px 0 0;
    position: absolute;
    text-decoration: none;
    text-indent: -9999px;

    width: 10px;
    height: 10px;

    top: 0;
    right: 0;
  }

  #hopscotch-bubble-number {
    background: transparent @spriteUrl 0 0 no-repeat;
    color: #fff;
    display: block;
    float: left;
    line-height: @circleWidth + 3px;
    margin: 0 10px 0 0;
    text-align: center;
    width: @circleWidth;
    height: @circleWidth;
  }

  #hopscotch-bubble-arrow-container {
    @arrowWidth: 20px;
    position: absolute;

    width: @arrowWidth*2;
    height: @arrowWidth*2;

    .hopscotch-bubble-arrow,
    .hopscotch-bubble-arrow-border {
      width: 0;
      height: 0;
    }

    &.up {
      top: 0 - @arrowWidth - @bubbleBorderWidth;
      left: @bubbleCornerRadius;

      .hopscotch-bubble-arrow {
        border-bottom: @arrowWidth solid @bubbleColor;
        border-left: @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
        position: relative;
        top: 0 - @arrowWidth + 10px;
      }
      .hopscotch-bubble-arrow-border {
        border-bottom: @arrowWidth solid #000;
        border-bottom: @arrowWidth solid @borderColor;
        border-left: @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
      }
    }
    &.down {
      bottom: 0 - @arrowWidth*2 - @bubbleBorderWidth;
      left: @bubbleCornerRadius;

      .hopscotch-bubble-arrow {
        border-top:   @arrowWidth solid @bubbleColor;
        border-left:  @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
        position:     relative;
        top:          0 - @arrowWidth - 10px;
      }
      .hopscotch-bubble-arrow-border {
        border-top:   @arrowWidth solid #000;
        border-top:   @arrowWidth solid @borderColor;
        border-left:  @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
      }
    }
    &.left {
      top: @bubbleCornerRadius;
      left: 0 - @arrowWidth - @bubbleBorderWidth;

      .hopscotch-bubble-arrow {
        border-bottom: @arrowWidth solid transparent;
        border-right:  @arrowWidth solid @bubbleColor;
        border-top:    @arrowWidth solid transparent;
        position: relative;
        left: 9px;
        top: 0 - (2*@arrowWidth);
      }
      .hopscotch-bubble-arrow-border {
        border-right:  @arrowWidth solid #000;
        border-right:  @arrowWidth solid @borderColor;
        border-bottom: @arrowWidth solid transparent;
        border-top:    @arrowWidth solid transparent;
      }
    }
    &.right {
      top: @bubbleCornerRadius;
      right: 0 - @arrowWidth*2 - @bubbleBorderWidth;

      .hopscotch-bubble-arrow {
        border-bottom: @arrowWidth solid transparent;
        border-left:   @arrowWidth solid @bubbleColor;
        border-top:    @arrowWidth solid transparent;
        position: relative;
        left: 0 - @arrowWidth + 11px;
        top: 0 - (2*@arrowWidth);
      }
      .hopscotch-bubble-arrow-border {
        border-left:   @arrowWidth solid #000;
        border-left:   @arrowWidth solid @borderColor;
        border-bottom: @arrowWidth solid transparent;
        border-top:    @arrowWidth solid transparent;
      }
    }
  }

  #hopscotch-actions {
    text-align: right;
  }

  input.hopscotch-nav-button {
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
    overflow: visible;
    padding: 3px 10px 2px;
    *padding: 2px 10px 1px;
    text-decoration: none !important;
    vertical-align: top;
    width: auto;
    .round-corners(3px);
    *padding: 3px 10px;

    &.next {
      background: #FFCF0B;
      background: -moz-linear-gradient(top, #FFF5BD 0, #FFF5BD 1px, #FFE976 1px, #FFCF0B 100%);
      background: -o-linear-gradient(top, #FFF5BD 0, #FFF5BD 1px, #FFE976 1px, #FFCF0B 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#FFF5BD), color-stop(5%,#FFF5BD), color-stop(5%,#FFE976), color-stop(100%,#FFCF0B));
      background: linear-gradient(top, #FFF5BD 0, #FFF5BD 1px, #FFE976 1px, #FFCF0B 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE976', endColorstr='#FFCF0B',GradientType=0 );
      border-color: #e8b463;
      color: #333;
      font-weight: bold;
      margin: 0 0 0 10px;
      overflow: visible;

      &.hide-all {
        display: none;
      }

      &:hover {
        background: #F6C408;
        background: -moz-linear-gradient(top, #FAEEAE 0, #FAEEAE 1px, #F5DB59 1px, #F6C408 100%);
        background: -o-linear-gradient(top, #FAEEAE 0, #FAEEAE 1px, #F5DB59 1px, #F6C408 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#FAEEAE), color-stop(5%,#FAEEAE), color-stop(5%,#F5DB59), color-stop(100%,#F6C408));
        background: linear-gradient(top, #FAEEAE 0, #FAEEAE 1px, #F5DB59 1px, #F6C408 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5DB59', endColorstr='#F6C408',GradientType=0 );
      }

      &:active {
        background: #F5DD61;
        background: -moz-linear-gradient(top, #F6C202 0, #F5DD61 100%);
        background: -o-linear-gradient(top, #F6C202 0, #F5DD61 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F6C202), color-stop(100%,#F5DD61));
        background: linear-gradient(top, #F6C202 0, #F5DD61 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6C202', endColorstr='#F5DD61',GradientType=0 );
      }
    }

    &.prev {
      background: #CECECE;
      background: -moz-linear-gradient(top, #F2F2F2 0, #F2F2F2 1px, #E4E4E4 1px, #CECECE 100%);
      background: -o-linear-gradient(top, #F2F2F2 0, #F2F2F2 1px, #E4E4E4 1px, #CECECE 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F2F2F2), color-stop(5%,#F2F2F2), color-stop(5%,#E4E4E4), color-stop(100%,#CECECE));
      background: linear-gradient(top, #F2F2F2 0, #F2F2F2 1px, #E4E4E4 1px, #CECECE 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4', endColorstr='#CECECE',GradientType=0 );
      border-color: #999;
      color: #666 !important;

      &:hover {
        background: #B7B7B7;
        background: -moz-linear-gradient(top, #E4E4E4 0, #E4E4E4 1px, #C8C8C8 1px, #B7B7B7 100%);
        background: -o-linear-gradient(top, #E4E4E4 0, #E4E4E4 1px, #C8C8C8 1px, #B7B7B7 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#E4E4E4), color-stop(5%,#E4E4E4), color-stop(5%,#C8C8C8), color-stop(100%,#B7B7B7));
        background: linear-gradient(top, #E4E4E4 0, #E4E4E4 1px, #C8C8C8 1px, #B7B7B7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C8C8C8', endColorstr='#B7B7B7',GradientType=0 );
      }

      &:active { background: #C9C9C9;
        background: -moz-linear-gradient(top, #B6B6B6 0, #C9C9C9 100%);
        background: -o-linear-gradient(top, #B6B6B6 0, #C9C9C9 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#B6B6B6), color-stop(100%,#C9C9C9));
        background: linear-gradient(top, #B6B6B6 0, #C9C9C9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B6B6B6', endColorstr='#C9C9C9',GradientType=0 );
      }
    }
  }
}