<commit_before>//----------------------------------------
// variables
//----------------------------------------
$sticky-bar-background-color: $white;
$sticky-bar-padding: rem-calc(10);

@mixin stick-bar-stuck {
  @include box-shadow-grey-light;
  width: 100%;

  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

//----------------------------------------
// sticky bar
//----------------------------------------
.sticky-bar--basic {
  @include gutters;
  width: 100%;

  @include breakpoint($large) { padding: 0; }

  .sticky-bar {
    &__wrapper {
      background-color: $sticky-bar-background-color;
      padding-top: $sticky-bar-padding;
      padding-bottom: $sticky-bar-padding;
      z-index: 1;
      
      &.sticky-bar--stuck {
        @include stick-bar-stuck;

        .sticky-bar__content { @include gutters; }
      }
    }

    &__content {
      margin: 0 auto;
      max-width: $site-width;
    }
  }
}

.sticky-bar--slide-in {
  width: 100%;

  @include breakpoint($large) { padding: 0; }

  .sticky-bar {
    &__wrapper {
      background-color: $sticky-bar-background-color;
      
      top: -100px;
      z-index: 1;
      
      &.sticky-bar--stuck {
        @include stick-bar-stuck;

        transition: top ease-in 1s;
      }
    }
  }
}<commit_msg>Sort out transition so that it isn't laggy<commit_after>//----------------------------------------
// variables
//----------------------------------------
$sticky-bar-background-color: $white;
$sticky-bar-padding: rem-calc(10);

@mixin stick-bar-stuck {
  @include box-shadow-grey-light;
  width: 100%;

  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

//----------------------------------------
// sticky bar
//----------------------------------------
.sticky-bar--basic {
  @include gutters;
  width: 100%;

  @include breakpoint($large) { padding: 0; }

  .sticky-bar {
    &__wrapper {
      background-color: $sticky-bar-background-color;
      padding-top: $sticky-bar-padding;
      padding-bottom: $sticky-bar-padding;
      z-index: 1;
      
      &.sticky-bar--stuck {
        @include stick-bar-stuck;

        .sticky-bar__content { @include gutters; }
      }
    }

    &__content {
      margin: 0 auto;
      max-width: $site-width;
    }
  }
}

.sticky-bar--slide-in {
  width: 100%;

  @include breakpoint($large) { padding: 0; }

  .sticky-bar {
    &__wrapper {
      background-color: $sticky-bar-background-color;
      
      top: -100px;
      z-index: 1;
      
      &.sticky-bar--stuck {
        @include stick-bar-stuck;

        transition: top linear .2s;
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.2588369441277081, 'fraction_numerical': 0.017483846446218167, 'mean_word_length': 1.4415584415584415, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '1451632', 'n_tokens_mistral': 927, 'n_tokens_neox': 863, 'n_words': 161}