<commit_before>@import 'base/environment';
@import 'vendor/bootstrap/button-groups';
@import 'components/_ic-toggle.scss';

$border-dark:  #c1c7cf;
$border-light: #e1e3e4;
$font-color:   #555;
$left-offset:  16px;

#tab-features .alert {
  margin-bottom: 20px;
  padding: 8px 35px 8px 14px;
}

.feature-flags {
  border: 1px solid $border-dark;
  border-radius: 3px;
  color: $font-color;
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
}

.feature-flag {
  border-bottom: 1px solid $border-light;
  line-height: 30px;
  padding: 6px 6px 6px $left-offset;

  &:last-child {
    border-bottom: none;
  }
}

.feature-flag .element_toggler, .feature-flag .element_toggler:hover {
  color: #333;
  text-decoration: none;
}

.feature-flag .element_toggler {
  transition: outline-offset 0.2s ease-out;
  @include ic-focus-base;
  &:focus { @include ic-focus-variant; }
}

.feature-flag .ui-button {
  min-width: 50px;
}

.feature-flag-group-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding-left: $left-offset;
}

.feature-title {
  font-weight: bold;
  margin-right: 8px;
}

.feature-release, .feature-release-notes-link {
  font-size: 12px;
}

.feature-release-date {
  font-weight: bold;
}

.feature-details {
  display: none;
  font-size: 12px;
  line-height: 20px;
  margin-top: 16px;
  position: relative;
}

.feature-details p {
  padding-left: 24px;
}

.feature-detail-links {
  bottom: 0;
  position: absolute;
  right: 0;
}

$switch-background: lighten($ic-color-dark, 15%);
$switch-background-disabled: lighten($switch-background, 40%);
$switch-text: rgba($ic-color-light, 0.6);

.ic-Toggle--feature-settings {
  @include ic-Toggle-appearance (
          115px, // Toggle width
          35px,  // Toggle height
          35px,  // Toggle border radius
          3px,   // Offset (distance btw switch and box)
          14px,  // Label font size
          12px,  // Switch font size
          0px 2px 6px rgba(black, 0.4), // Switch shadow on hover/focus
          1px // Bottom padding on main element to make sure switch shadow always shows
  );
  @include ic-Toggle-branding (
          $switch-background,
          $switch-background,
          $switch-text
  );
}

.ff-background {
  display: inline-block;
  background-color: $switch-background;
  margin: 0px -2px;
  &.ff-disabled {
    background-color: $switch-background-disabled;
  }
  &.ff-left {
    border-radius: 20px 0 0 20px;
  }
  &.ff-right{
    border-radius: 0 20px 20px 0;
  }
}

.ui-buttonset--feature-settings {
  .ui-button {
    background-color: $switch-background;
    color: $switch-text;
    border-color: $switch-background;
    border-width: 3px;
    margin: 0px;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 20px;
    height: 15px;
    line-height: 15px;
    font-weight: 500;
    &.ui-corner-left {
      border-radius: 20px;
    }
    &.ui-corner-right {
      border-radius: 20px;
    }
    &.ui-state-active {
      background-color: $ic-color-light;
      color: $switch-background;
      border-color: $switch-background;
    }
    &.ui-state-disabled {
      opacity: 1;
      background-color: $switch-background-disabled;
      border-color: $switch-background-disabled;
      &.ui-state-active {
        background-color: $ic-color-light;
        color: $switch-background-disabled;
      }
    }
    &.ui-state-hover {
      border-color: $switch-background;
      color: white;
      background-color: $switch-background;
      &.ui-state-active {
        background-color: $ic-color-light;
        color: $ic-color-dark;
      }
    }
  }
}<commit_msg>(NUI) Fix Alignment of Feature Options on the Account Settings page<commit_after>@import 'base/environment';
@import 'vendor/bootstrap/button-groups';
@import 'components/_ic-toggle.scss';

$border-dark:  #c1c7cf;
$border-light: #e1e3e4;
$font-color:   #555;
$left-offset:  16px;

#tab-features .alert {
  margin-bottom: 20px;
  padding: 8px 35px 8px 14px;
}

.feature-flags {
  border: 1px solid $border-dark;
  border-radius: 3px;
  color: $font-color;
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
}

.feature-flag {
  border-bottom: 1px solid $border-light;
  line-height: 30px;
  padding: 6px 6px 6px $left-offset;

  &:last-child {
    border-bottom: none;
  }
}

.feature-flag .element_toggler, .feature-flag .element_toggler:hover {
  color: #333;
  text-decoration: none;
}

.feature-flag .element_toggler {
  transition: outline-offset 0.2s ease-out;
  @include ic-focus-base;
  &:focus { @include ic-focus-variant; }
}

.feature-flag .ui-button {
  min-width: 25px;
}

.feature-flag-group-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding-left: $left-offset;
}

.feature-title {
  font-weight: bold;
  margin-right: 8px;
}

.feature-release, .feature-release-notes-link {
  font-size: 12px;
}

.feature-release-date {
  font-weight: bold;
}

.feature-details {
  display: none;
  font-size: 12px;
  line-height: 20px;
  margin-top: 16px;
  position: relative;
}

.feature-details p {
  padding-left: 24px;
}

.feature-detail-links {
  bottom: 0;
  position: absolute;
  right: 0;
}

$switch-background: lighten($ic-color-dark, 15%);
$switch-background-disabled: lighten($switch-background, 40%);
$switch-text: rgba($ic-color-light, 0.6);

.ic-Toggle--feature-settings {
  @include ic-Toggle-appearance (
          115px, // Toggle width
          35px,  // Toggle height
          35px,  // Toggle border radius
          3px,   // Offset (distance btw switch and box)
          14px,  // Label font size
          12px,  // Switch font size
          0px 2px 6px rgba(black, 0.4), // Switch shadow on hover/focus
          1px // Bottom padding on main element to make sure switch shadow always shows
  );
  @include ic-Toggle-branding (
          $switch-background,
          $switch-background,
          $switch-text
  );
}

.ff-background {
  display: inline-block;
  background-color: $switch-background;
  margin: 0px -2px;
  &.ff-disabled {
    background-color: $switch-background-disabled;
  }
  &.ff-left {
    border-radius: 20px 0 0 20px;
  }
  &.ff-right{
    border-radius: 0 20px 20px 0;
  }
}

.ui-buttonset--feature-settings {
  .ui-button {
    background-color: $switch-background;
    color: $switch-text;
    border-color: $switch-background;
    border-width: 3px;
    margin: 0px;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 20px;
    height: 15px;
    line-height: 15px;
    font-weight: 500;
    &.ui-corner-left {
      border-radius: 20px;
    }
    &.ui-corner-right {
      border-radius: 20px;
    }
    &.ui-state-active {
      background-color: $ic-color-light;
      color: $switch-background;
      border-color: $switch-background;
    }
    &.ui-state-disabled {
      opacity: 1;
      background-color: $switch-background-disabled;
      border-color: $switch-background-disabled;
      &.ui-state-active {
        background-color: $ic-color-light;
        color: $switch-background-disabled;
      }
    }
    &.ui-state-hover {
      border-color: $switch-background;
      color: white;
      background-color: $switch-background;
      &.ui-state-active {
        background-color: $ic-color-light;
        color: $ic-color-dark;
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.14266117969821673, 'fraction_numerical': 0.030727023319615913, 'mean_word_length': 2.58985721319547, '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': '3508491', 'n_tokens_mistral': 2802, 'n_tokens_neox': 2594, 'n_words': 550}