dev/scss/main/tutorial.scss

@charset "utf-8";
@import "../util";

/**
 * Rules for the embedded documentation.
 */

#tutorial {
  position:         fixed;
  z-index:          9999;
  top:              5%;
  bottom:           5%;
  left:             2%;
  right:            2%;
  padding-right:    $right-view-distance;
  background-color: $nearly-white;
  box-shadow:       $choose-box-shadow;

  .button-group.button-view {
    background-color: $middle-grey;
    display:          block;
    height:           100%;
  }

  border: {
    width:  2 * $border-size;
    color:  $dark-grey;
    style:  solid;
    radius: $standard-border-radius;
  }

  iframe {
    border-width: 0;
    width: 100%;

    // Hack for a Firefox bug
    min-height: 100.1%;
    background: {
      image:    url('#{$img-path}/korap-bg-kalamar.svg');
      repeat:   no-repeat;
      position: center center;
      size:     20%;
    }
  }
}

body.embedded {
  background-color: $nearly-white;
  aside {
    @include choose-item;
    padding-top: 0;
    background-color: $middle-grey;

    > div {
      position:         relative;
      top:               50%;
      -webkit-transform: translateY(-50%);
      -ms-transform:     translateY(-50%);
      transform:         translateY(-50%);
    }
  }
}

// Link to documentation
main.tutorial a.embedded-link::after {
  @include icon-font;
  content:   " " + $fa-tutorial;
  font-size: 75%;
}