inject.scss

@import 'base';
@import 'compass/reset/utilities';



//ADDER////////////////////////////////
.annotator-adder {
  $border: #333;
  $hoverborder: #000;
  @include box-sizing(border-box);
  @include sweetbutton;
  height: 40px;
  margin-left: -20px;
  margin-top: -50px;
  padding: 5px;
  position: absolute;
  border: 4px solid $border;
  border-radius: 7px;
  width: 40px;
  z-index: 999;

  &:before {
    @include rotate(45deg);
    background: #fdfdfd;
    bottom: -8px;
    border-bottom: 4px solid $border;
    border-right: 4px solid $border;
    content: "";
    display: block;
    height: 6px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    width: 6px;
  }

  button {
    background: url("../images/pen_1.png");
    background-size: 95% 95%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    height: 100%;
    opacity: .8;
    text-indent: -999em;
    width: 100%;

    &::-moz-focus-inner {
      border: 0;
    }
  }

  &:hover {
    @include box-shadow(1px 1px 6px -2px $grayLight);
    border-color: $hoverborder;

    &:before {
      border-color: $hoverborder;
    }

    button {
      opacity: 1;
    }
  }
}



//HIGHLIGHTS////////////////////////////////
.annotator-hl {
  @include single-transition('background-color,color', .03s, linear, .1s);
}

.annotator-hl-active, .annotator-hl-temporary {
  background: #c9d7f1;
  color: black;
  &::-moz-selection {
    background: #c9d7f1;
    color: black;
  }
  &::-moz-selection, &::-moz-window-inactive, &::window-inactive {
    background: #c9d7f1;
    color: black;
  }
  &::selection, &::selection:window-inactive {
    background: #c9d7f1;
    color: black;
  }
}

.annotator-notice {
  display: none;
}



//IFRAME////////////////////////////////
.annotator-frame {
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 500;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  &.annotator-collapsed {
    margin-left: -$heatmap-width - 17px;
  }
}

.annotator-no-transition {
  @include transition(none !important);
}


/*
  Mobile layout
  240–479 px
  Zoomed out below 320 px
*/

@media screen and (min-width: 15em) {
  .annotator-frame {
    width: 99%;
    margin-left: -99%;
  }
}

/*
  Wide mobile layout
  480-767 px
  Zoomed in above 480 px
*/

@media screen and (min-width: 30em) {
  .annotator-frame {
    width: 70%;
    margin-left: -70%;
  }
}

/*
  Tablet layout
  600-911 px
  Zoomed in above 600 px
*/

@media screen and (min-width: 37.5em) {
  .annotator-frame {
    @include single-transition(margin-left, .4s);
    width: 428px + $heatmap-width + 17px;
    margin-left: -428px - $heatmap-width - 17px;
  }
}

/*
  Widescreen layout
  912-1887 px
  Zoomed in above 912 px
*/

@media screen and (min-width: 57em) {
}

/*
  Huge-screen layout
  1888-2520 px
  Zoomed in above 1920 px
*/

@media screen and (min-width: 118em) {
}