<commit_before>$sequence--border-color: #C8C8C8;

// repeated extends - needed since LMS styling was referenced
.block-link {
  border-left: 1px solid lighten($sequence--border-color, 10%);
  display: block;

  &:hover, &:focus {
    background: none;
  }
}

.topbar {
  @include clearfix();
  border-bottom: 1px solid $sequence--border-color;

  @media print {
    display: none;
  }

  a {
    &.block-link {
      border-left: 1px solid lighten($sequence--border-color, 10%);
      display: block;

      &:hover, &:focus {
        background: none;
      }
    }
  }
}

// ====================

.sequence-nav {
  // TODO (cpennington): This doesn't work anymore. XModules aren't able to
  // import from external sources.
  @extend .topbar;
  margin: -4px 0 ($baseline*1.5);
  position: relative;
  border-bottom: none;

  @media print {
    display: none;
  }

  .left-shadow {
    @extend %ui-depth4;
    @include linear-gradient(left, $shadow, $transparent);
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 46px;
    background-color: transparent;
    pointer-events: none;
  }

  .right-shadow {
    @extend %ui-depth4;
    @include linear-gradient(right, $shadow, $transparent);
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 46px;
    background-color: transparent;
    pointer-events: none;
  }

  .sequence-list-wrapper {
    @extend %ui-depth2;
    @include linear-gradient(top, #ddd, #eee);
    position: relative;
    border: 1px solid $gray-l3;
    height: 44px;
    margin: 0 ($baseline*2);
    box-shadow: 0 1px 3px $shadow-l1 inset;
  }

  ol {
    position: absolute;
    top: 0;
    left: 0;
    @include box-sizing(border-box);
    display: table;
    height: 100%;
    margin: 0;
    padding: 0 ($baseline/2);
    width: 100%;

    a {
      @extend .block-link;
    }

    li {
      display: table-cell;
      min-width: 20px;

      a {
        @extend %ui-fake-link;
        @include transition(none);
        width: 100%;
        height: 42px;
        margin: 0;
        background-position: center 14px;
        background-repeat: no-repeat;
        border: 1px solid transparent;
        display: block;
        padding: 0;
        position: relative;
        text-align: center;

        .icon {
          line-height: 42px; // This matches the height of the <a> it's within (the parent) to get vertical centering.
          font-size: 90%;  // The icons at 100% are just a tad too big.
          color: rgb(90, 90, 90);
          -webkit-font-smoothing: antialiased; // Clear up the lines on the icons
        }

        &.inactive {

          .icon {
            color: rgb(90, 90, 90);
          }
        }

        &.active {
          @extend %ui-depth1;
          background-color: $white;

          .icon {
            color: rgb(10, 10, 10);
          }

          &:hover, &:focus {
            background-color: $white;
            background-repeat: no-repeat;
            background-position: center 14px;

            .icon {
              color: rgb(10, 10, 10);
            }
          }
        }

        &:hover, &:focus {
          background-color: $white;
          background-repeat: no-repeat;
          background-position: center 14px;
        }

        //video
        &.seq_video {

          .icon:before {
            content: "\f008"; // .fa-film
          }
        }

        //other
        &.seq_other {

          .icon:before {
            content: "\f016"; // .fa-file-o
          }
        }

        //vertical & problems
        &.seq_vertical, &.seq_problem {

          .icon:before {
            content: "\f00b";  // .fa-tasks
          }

          &.progress-none {

          }

          &.progress-some, &.progress-in_progress {

          }

          &.progress-done {

          }
        }

        p {
          @extend %ui-depth2;
          background: #333;
          color: $white;
          font-family: $sans-serif;
          line-height: lh();
          right: 0;
          opacity: 0.0;
          padding: 6px;
          position: absolute;
          top: 48px;
          text-shadow: 0 -1px 0 $black;
          @include transition(all .1s $ease-in-out-quart 0s);
          white-space: pre;
          visibility: hidden;
          pointer-events: none;

          &:empty {
            background: none;

            &::after {
              display: none;
            }
          }

          &::after {
            background: #333;
            content: " ";
            display: block;
            height: 10px;
            right: 18px;
            position: absolute;
            top: -5px;
            @include transform(rotate(45deg));
            width: 10px;
          }
        }

        &:hover, &:focus {
          p {
            display: block;
            margin-top: ($baseline/5);
            opacity: 1.0;
            visibility: visible;
          }
        }
      }
    }
  }

  body.touch-based-device & ol li a:hover p {
    display: none;
  }
}

.sequence-nav-button {
  @extend %ui-depth3;
  @include transition(all .2s $ease-in-out-quad 0s);
  position: absolute;
  display: block;
  top: 0;
  width: ($baseline*2);
  height: 46px;
  padding: 0;

  &.button-previous {
    @include border-radius(35px, 0, 0, 35px);
    @include left(0);
  }

  &.button-next {
    @include border-radius(0, 35px, 35px, 0);
    @include right(0);
  }

  &:hover,
  &:active {

      &.prev {
        @include left(-10px);
        @include border-radius(35px 0 0 35px);

        a {
          background-image: $prev-icon;
          background-position: center 15px;
        }
      }

      &.next {
        @include right(-10px);
        @include border-radius(0 35px 35px 0);

        a {
          @include margin-left(30px);
          background-image: $next-icon;
          background-position: center 15px;
        }
      }
    }

  &.disabled {
    cursor: normal;
  }
}

.seq_contents {
  display: none;
}

nav.sequence-bottom {
  position: relative;
  width: 79px;
  height: 1px;
  margin: lh(2) auto;
  text-align: center;

  @media print {
    display: none;

    ul {
      @include clearfix();
      display: inline-block;

      li {
        @include float(left);
        width: 50px;
        height: 44px;
        border: 1px solid $gray-l3;
        @include linear-gradient(top, #eee, #ddd);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;

        &.prev, &.next {
          margin-bottom: 0;

          a {
            background-position: center center;
            background-repeat: no-repeat;
            border: none;
            display: block;
            padding: lh(0.5) 4px;
            text-indent: -9999px;
            overflow: hidden;
            @include transition(all .2s $ease-in-out-quad 0s);

            &:hover, &:focus {
              opacity: 0.5;
              background-position: center 15px;
            }

            &.disabled {
              opacity: 0.4;
            }

            /*          &:focus {
                        outline: 0;
                      }
            */
          }
        }

        $prev-icon: url('../images/sequence-nav/previous-icon.png');
        $next-icon: url('../images/sequence-nav/next-icon.png');

        &.prev {
          @include border-radius(35px 0 0 35px);

          a {
            background-image: $prev-icon;
            background-position: center 15px;
          }
        }

        &.next {
          @include border-radius(0 35px 35px 0);
          @include border-left(none);

          a {
            background-image: $next-icon;
            background-position: center 15px;

            @include ltr {
              background-image: $next-icon;
            }

            @include rtl {
              background-image: $prev-icon;
            }
          }
        }
      }
    }
  }
}

#seq_content {

  &:focus,
  &:active {
    outline: none;
  }
}
<commit_msg>Fixed xmodule sequence scss variable.<commit_after>$sequence--border-color: #C8C8C8;
$prev-icon: url('../images/sequence-nav/previous-icon.png');
$next-icon: url('../images/sequence-nav/next-icon.png');
// repeated extends - needed since LMS styling was referenced
.block-link {
  border-left: 1px solid lighten($sequence--border-color, 10%);
  display: block;

  &:hover, &:focus {
    background: none;
  }
}

.topbar {
  @include clearfix();
  border-bottom: 1px solid $sequence--border-color;

  @media print {
    display: none;
  }

  a {
    &.block-link {
      border-left: 1px solid lighten($sequence--border-color, 10%);
      display: block;

      &:hover, &:focus {
        background: none;
      }
    }
  }
}

// ====================

.sequence-nav {
  // TODO (cpennington): This doesn't work anymore. XModules aren't able to
  // import from external sources.
  @extend .topbar;
  margin: -4px 0 ($baseline*1.5);
  position: relative;
  border-bottom: none;

  @media print {
    display: none;
  }

  .left-shadow {
    @extend %ui-depth4;
    @include linear-gradient(left, $shadow, $transparent);
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 46px;
    background-color: transparent;
    pointer-events: none;
  }

  .right-shadow {
    @extend %ui-depth4;
    @include linear-gradient(right, $shadow, $transparent);
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 46px;
    background-color: transparent;
    pointer-events: none;
  }

  .sequence-list-wrapper {
    @extend %ui-depth2;
    @include linear-gradient(top, #ddd, #eee);
    position: relative;
    border: 1px solid $gray-l3;
    height: 44px;
    margin: 0 ($baseline*2);
    box-shadow: 0 1px 3px $shadow-l1 inset;
  }

  ol {
    position: absolute;
    top: 0;
    left: 0;
    @include box-sizing(border-box);
    display: table;
    height: 100%;
    margin: 0;
    padding: 0 ($baseline/2);
    width: 100%;

    a {
      @extend .block-link;
    }

    li {
      display: table-cell;
      min-width: 20px;

      a {
        @extend %ui-fake-link;
        @include transition(none);
        width: 100%;
        height: 42px;
        margin: 0;
        background-position: center 14px;
        background-repeat: no-repeat;
        border: 1px solid transparent;
        display: block;
        padding: 0;
        position: relative;
        text-align: center;

        .icon {
          line-height: 42px; // This matches the height of the <a> it's within (the parent) to get vertical centering.
          font-size: 90%;  // The icons at 100% are just a tad too big.
          color: rgb(90, 90, 90);
          -webkit-font-smoothing: antialiased; // Clear up the lines on the icons
        }

        &.inactive {

          .icon {
            color: rgb(90, 90, 90);
          }
        }

        &.active {
          @extend %ui-depth1;
          background-color: $white;

          .icon {
            color: rgb(10, 10, 10);
          }

          &:hover, &:focus {
            background-color: $white;
            background-repeat: no-repeat;
            background-position: center 14px;

            .icon {
              color: rgb(10, 10, 10);
            }
          }
        }

        &:hover, &:focus {
          background-color: $white;
          background-repeat: no-repeat;
          background-position: center 14px;
        }

        //video
        &.seq_video {

          .icon:before {
            content: "\f008"; // .fa-film
          }
        }

        //other
        &.seq_other {

          .icon:before {
            content: "\f016"; // .fa-file-o
          }
        }

        //vertical & problems
        &.seq_vertical, &.seq_problem {

          .icon:before {
            content: "\f00b";  // .fa-tasks
          }

          &.progress-none {

          }

          &.progress-some, &.progress-in_progress {

          }

          &.progress-done {

          }
        }

        p {
          @extend %ui-depth2;
          background: #333;
          color: $white;
          font-family: $sans-serif;
          line-height: lh();
          right: 0;
          opacity: 0.0;
          padding: 6px;
          position: absolute;
          top: 48px;
          text-shadow: 0 -1px 0 $black;
          @include transition(all .1s $ease-in-out-quart 0s);
          white-space: pre;
          visibility: hidden;
          pointer-events: none;

          &:empty {
            background: none;

            &::after {
              display: none;
            }
          }

          &::after {
            background: #333;
            content: " ";
            display: block;
            height: 10px;
            right: 18px;
            position: absolute;
            top: -5px;
            @include transform(rotate(45deg));
            width: 10px;
          }
        }

        &:hover, &:focus {
          p {
            display: block;
            margin-top: ($baseline/5);
            opacity: 1.0;
            visibility: visible;
          }
        }
      }
    }
  }

  body.touch-based-device & ol li a:hover p {
    display: none;
  }
}

.sequence-nav-button {
  @extend %ui-depth3;
  @include transition(all .2s $ease-in-out-quad 0s);
  position: absolute;
  display: block;
  top: 0;
  width: ($baseline*2);
  height: 46px;
  padding: 0;

  &.button-previous {
    @include border-radius(35px, 0, 0, 35px);
    @include left(0);
  }

  &.button-next {
    @include border-radius(0, 35px, 35px, 0);
    @include right(0);
  }

  &:hover,
  &:active {

      &.prev {
        @include left(-10px);
        @include border-radius(35px 0 0 35px);

        a {
          background-image: $prev-icon;
          background-position: center 15px;
        }
      }

      &.next {
        @include right(-10px);
        @include border-radius(0 35px 35px 0);

        a {
          @include margin-left(30px);
          background-image: $next-icon;
          background-position: center 15px;
        }
      }
    }

  &.disabled {
    cursor: normal;
  }
}

.seq_contents {
  display: none;
}

nav.sequence-bottom {
  position: relative;
  width: 79px;
  height: 1px;
  margin: lh(2) auto;
  text-align: center;

  @media print {
    display: none;

    ul {
      @include clearfix();
      display: inline-block;

      li {
        @include float(left);
        width: 50px;
        height: 44px;
        border: 1px solid $gray-l3;
        @include linear-gradient(top, #eee, #ddd);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;

        &.prev, &.next {
          margin-bottom: 0;

          a {
            background-position: center center;
            background-repeat: no-repeat;
            border: none;
            display: block;
            padding: lh(0.5) 4px;
            text-indent: -9999px;
            overflow: hidden;
            @include transition(all .2s $ease-in-out-quad 0s);

            &:hover, &:focus {
              opacity: 0.5;
              background-position: center 15px;
            }

            &.disabled {
              opacity: 0.4;
            }

            /*          &:focus {
                        outline: 0;
                      }
            */
          }
        }

        &.prev {
          @include border-radius(35px 0 0 35px);

          a {
            background-image: $prev-icon;
            background-position: center 15px;
          }
        }

        &.next {
          @include border-radius(0 35px 35px 0);
          @include border-left(none);

          a {
            background-image: $next-icon;
            background-position: center 15px;

            @include ltr {
              background-image: $next-icon;
            }

            @include rtl {
              background-image: $prev-icon;
            }
          }
        }
      }
    }
  }
}

#seq_content {

  &:focus,
  &:active {
    outline: none;
  }
}

{'fraction_non_alphanumeric': 0.12969476196457733, 'fraction_numerical': 0.029644517020474815, 'mean_word_length': 1.4265467845169155, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '525204', 'n_tokens_mistral': 5469, 'n_tokens_neox': 4917, 'n_words': 1170}