<commit_before>/******************************************************************************
                              Progress Bars component
******************************************************************************/


@import 'progress_bars-config';


$bar-element: getBEMReference($c-component-name, 'bar');
$bar-element--b: getBEMReference($c-component-name, 'bar--b');
$bar-element--fb: getBEMReference($c-component-name, 'bar--fb');
$bar-element--pr: getBEMReference($c-component-name, 'bar--pr');

@include c($c-component-name) {

  // Provide brackground and text color variations
  @include backgroundVariants();
  @include textVariants();

  position: relative;
  height: $c-progress-bars-height;
  margin: 20px;
  text-align: center;
  background-color: tint(get-color('background'), 90);


    //--------------------------------------------------------------------------
    //                      percentage - Progress Bars
    //--------------------------------------------------------------------------

    &.h-percentage {
      margin-left: $c-progress-bars-percentage-margin-left;

      &:after {
        @extend %c-progress-bars-percentage-after;
        left: -#{$c-progress-bars-percentage-margin-left - 10px};
      }

      @include m( 'right' ) {
        margin-right: $c-progress-bars-percentage-margin-left;
        &:after {
          @extend %c-progress-bars-percentage-after;
          right: -#{$c-progress-bars-percentage-margin-left - 10px};
        }
      }

      @include m( 'center' ) {
        height: $c-progress-bars-height-middle;
        padding: 0;
        color: white(.9);
        text-shadow: 0 1px 1px rgba(0,0,0,.5);

        & .#{$bar-element} {
          height: $c-progress-bars-height-middle;
        }

        &:after {
          @extend %c-progress-bars-percentage-after;
          @extend %c-progress-bars-absolute-center;
        }
      }
    }

    //--------------------------------------------------------------------------
    //                        Rounded - Progress Bars
    //--------------------------------------------------------------------------
    @include m( 'rounded' ) {
      border-radius: 10px;
    }


    //--------------------------------------------------------------------------
    //                        Borders - Progress Bars
    //--------------------------------------------------------------------------

    &.#{$g-framework-name}_h-border--light {
      border: 1px solid black(.2);
    }

    &.#{$g-framework-name}_h-border--normal {
      border: 1px solid black(.5);
    }

    &.#{$g-framework-name}_h-border--heavy {
      border: 1px solid black(.8);
    }

    //--------------------------------------------------------------------------
    //                        Type2 - Progress Bars
    //--------------------------------------------------------------------------

    @include m( 'big' ) {
      @extend %c-progress-bars-big;
    }

    //--------------------------------------------------------------------------
    //                        Type3 - Progress Bars
    //--------------------------------------------------------------------------

    @include m( 'type3' ) {
      @extend %c-progress-bars-hide-overflow-x;
      @extend %c-progress-bars-border-light;
      @extend %c-progress-bars-big;

      & .#{$bar-element} {
        height: 0!important;
        border: $c-progress-bars-height dashed white(.9);
      }
    }

    //--------------------------------------------------------------------------<commit_msg>Fix left position - progress bars type4<commit_after>/******************************************************************************
                              Progress Bars component
******************************************************************************/


@import 'progress_bars-config';


$bar-element: getBEMReference($c-component-name, 'bar');
$bar-element--b: getBEMReference($c-component-name, 'bar--b');
$bar-element--fb: getBEMReference($c-component-name, 'bar--fb');
$bar-element--pr: getBEMReference($c-component-name, 'bar--pr');

@include c($c-component-name) {

  // Provide brackground and text color variations
  @include backgroundVariants();
  @include textVariants();

  position: relative;
  height: $c-progress-bars-height;
  margin: 20px;
  text-align: center;
  background-color: tint(get-color('background'), 90);


    //--------------------------------------------------------------------------
    //                      percentage - Progress Bars
    //--------------------------------------------------------------------------

    &.h-percentage {
      margin-left: $c-progress-bars-percentage-margin-left;

      &:after {
        @extend %c-progress-bars-percentage-after;
        left: -#{$c-progress-bars-percentage-margin-left - 10px};
      }

      @include m( 'right' ) {
        margin-right: $c-progress-bars-percentage-margin-left;
        &:after {
          @extend %c-progress-bars-percentage-after;
          right: -#{$c-progress-bars-percentage-margin-left - 10px};
        }
      }

      @include m( 'center' ) {
        height: $c-progress-bars-height-middle;
        padding: 0;
        color: white(.9);
        text-shadow: 0 1px 1px rgba(0,0,0,.5);

        & .#{$bar-element} {
          height: $c-progress-bars-height-middle;
        }

        &:after {
          @extend %c-progress-bars-percentage-after;
          @extend %c-progress-bars-absolute-center;
        }
      }
    }

    //--------------------------------------------------------------------------
    //                        Rounded - Progress Bars
    //--------------------------------------------------------------------------
    @include m( 'rounded' ) {
      border-radius: 10px;
    }


    //--------------------------------------------------------------------------
    //                        Borders - Progress Bars
    //--------------------------------------------------------------------------

    &.#{$g-framework-name}_h-border--light {
      border: 1px solid black(.2);
    }

    &.#{$g-framework-name}_h-border--normal {
      border: 1px solid black(.5);
    }

    &.#{$g-framework-name}_h-border--heavy {
      border: 1px solid black(.8);
    }

    //--------------------------------------------------------------------------
    //                        Type2 - Progress Bars
    //--------------------------------------------------------------------------

    @include m( 'big' ) {
      @extend %c-progress-bars-big;
    }

    //--------------------------------------------------------------------------
    //                        Type3 - Progress Bars
    //--------------------------------------------------------------------------

    @include m( 'type3' ) {
      @extend %c-progress-bars-hide-overflow-x;
      @extend %c-progress-bars-border-light;
      @extend %c-progress-bars-big;

      & .#{$bar-element} {
        left: -#{$c-progress-bars-height * 2};
        height: 0!important;
        border: $c-progress-bars-height dashed white(.9);
      }
    }

    //--------------------------------------------------------------------------
{'fraction_non_alphanumeric': 0.3874739039665971, 'fraction_numerical': 0.008629088378566458, 'mean_word_length': 1.0219471018570625, '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': '7152249', 'n_tokens_mistral': 1850, 'n_tokens_neox': 1699, 'n_words': 286}