<commit_before>// Edit field styles
//
// - String
// - Number
// - Boolean
// - Date
// - Geometry
//
// --------------------------------------------------


@import "../variables/mixins";
@import "../variables/colors";
@import "../variables/sizes";

.EditField {
  position: relative;
  @include display-flex();
  width: 100%;
}
.EditField-input { @include flex-grow(2) }
.EditField-input.is-number { color: #4DC964 }
.EditField-textarea {
  resize: vertical;
  height: 20px;
  min-height: 20px;
  max-height: 150px;
  padding: 10px 12px;
  flex-grow: 2;
}
.EditField-label {
  background: none;
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  max-width: 140px;
  overflow: hidden;
  font-size: $sFontSize-normal;
  line-height: $sLineHeight-normal;
  color: $cTypography-secondary;
}
.EditField-label:hover {
  color: $cTypography-paragraphs;
  cursor: pointer;
}
.EditField-label:focus {
  $fieldBgColor: transparent;
  $fieldBorderColor: #CCC;
  color: $cTypography-paragraphs;
  background: -webkit-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: -moz-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: -ms-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: -o-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background-size: 100% $sLineHeight-normal;
}
.EditField-label:focus:hover {
  color: $cTypography-paragraphs;
  cursor: text;
}
.EditField-label.is-disabled {
  color: $cTypography-paragraphs;
  background: none;
}
.EditField-label.has-failed { color: $cHighlight-negative }
.EditField-radiobutton { margin-right: 28px }
.EditField.is-invalid {
  .EditField-input,
  .EditField-textarea {
    border-color: $cHighlight-negative;
    color: $cHighlight-negative;
  }

  &.EditField--withBorder { border-color: $cHighlight-negative }
}
.EditField-loader { margin: 12px 0 0 8px }
// Select
.EditField-select .select2-container {
  background: none;
  margin-top: 10px;
}
.EditField-select .select2-container .select2-choice { background: $cStructure-grayBkg }

@mixin edit-type-field($t,$c,$mod:true) {
  // Is it a modifier or a normal class?
  $class_: '';
  @if ($mod) {
    $class_: '.EditField-select .select2-container .select2-choice'
  } @else {
    $class_: '.EditField-select.#{$t} .select2-container .select2-choice'
  }

  #{$class_},
  #{$class_}:hover {
    border-color: $c!important;
    color: $c;

    div b:after,
    div b:before {
      top: inherit;
      border-bottom: none;
      border-top-style: solid;
      border-top-width: 4px;
      border-left-width: 4px;
      border-right-width: 4px;
    }

    div b:after {
      bottom: 8px;
      border-top-color: $cStructure-grayBkg;
      z-index: 2;
    }
    div b:before {
      bottom: 7px;
      border-top-color: $c;
      z-index: 2;
    }
  }
}

// @include edit-type-field(date, #F5A623, true);
// @include edit-type-field(number, #4DC964, true);
// @include edit-type-field(string, #AAA, true);
// @include edit-type-field(boolean, #AAA, true);

@include edit-type-field('', #999, true);
@include edit-type-field(has-failed, $cHighlight-negative, false);

.EditField-info {
  display: none;
  height: 18px;
  width: 18px;
  margin: 12px 0 0 10px;
  text-align: center;
  line-height: 18px;
  border-radius: 18px;
  background: $cStructure-mainLine;
  color: white;
  font-size: $sFontSize-small;
}
.EditField-info:hover {
  background: #787878;
  cursor: pointer;
}
// Modifiers
.EditField--withBorder {
  @include justify-content(space-between, justify);<commit_msg>Added new style for number editfield-select<commit_after>// Edit field styles
//
// - String
// - Number
// - Boolean
// - Date
// - Geometry
//
// --------------------------------------------------


@import "../variables/mixins";
@import "../variables/colors";
@import "../variables/sizes";

.EditField {
  position: relative;
  @include display-flex();
  width: 100%;
}
.EditField-input { @include flex-grow(2) }
.EditField-input.is-number { color: #4DC964 }
.EditField-textarea {
  resize: vertical;
  height: 20px;
  min-height: 20px;
  max-height: 150px;
  padding: 10px 12px;
  flex-grow: 2;
}
.EditField-label {
  background: none;
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  max-width: 140px;
  overflow: hidden;
  font-size: $sFontSize-normal;
  line-height: $sLineHeight-normal;
  color: $cTypography-secondary;
}
.EditField-label:hover {
  color: $cTypography-paragraphs;
  cursor: pointer;
}
.EditField-label:focus {
  $fieldBgColor: transparent;
  $fieldBorderColor: #CCC;
  color: $cTypography-paragraphs;
  background: -webkit-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: -moz-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: -ms-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: -o-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background: linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0px;
  background-size: 100% $sLineHeight-normal;
}
.EditField-label:focus:hover {
  color: $cTypography-paragraphs;
  cursor: text;
}
.EditField-label.is-disabled {
  color: $cTypography-paragraphs;
  background: none;
}
.EditField-label.has-failed { color: $cHighlight-negative }
.EditField-radiobutton { margin-right: 28px }
.EditField.is-invalid {
  .EditField-input,
  .EditField-textarea {
    border-color: $cHighlight-negative;
    color: $cHighlight-negative;
  }

  &.EditField--withBorder { border-color: $cHighlight-negative }
}
.EditField-loader { margin: 12px 0 0 8px }
// Select
.EditField-select .select2-container {
  background: none;
  margin-top: 10px;
}
.EditField-select .select2-container .select2-choice { background: $cStructure-grayBkg }

@mixin edit-type-field($t,$c,$mod:true) {
  // Is it a modifier or a normal class?
  $class_: '';
  @if ($mod) {
    $class_: '.EditField-select .select2-container .select2-choice'
  } @else {
    $class_: '.EditField-select.#{$t} .select2-container .select2-choice'
  }

  #{$class_},
  #{$class_}:hover {
    border-color: $c!important;
    color: $c;

    div b:after,
    div b:before {
      top: inherit;
      border-bottom: none;
      border-top-style: solid;
      border-top-width: 4px;
      border-left-width: 4px;
      border-right-width: 4px;
    }

    div b:after {
      bottom: 8px;
      border-top-color: $cStructure-grayBkg;
      z-index: 2;
    }
    div b:before {
      bottom: 7px;
      border-top-color: $c;
      z-index: 2;
    }
  }
}

// @include edit-type-field(date, #F5A623, true);
// @include edit-type-field(string, #AAA, true);
// @include edit-type-field(boolean, #AAA, true);

@include edit-type-field('', #999, true);
@include edit-type-field(EditField-select--number, #4DC964, false);
@include edit-type-field(has-failed, $cHighlight-negative, false);

.EditField-info {
  display: none;
  height: 18px;
  width: 18px;
  margin: 12px 0 0 10px;
  text-align: center;
  line-height: 18px;
  border-radius: 18px;
  background: $cStructure-mainLine;
  color: white;
  font-size: $sFontSize-small;
}
.EditField-info:hover {
  background: #787878;
  cursor: pointer;
}
// Modifiers
.EditField--withBorder {
  @include justify-content(space-between, justify);
{'fraction_non_alphanumeric': 0.1677605670779732, 'fraction_numerical': 0.028353898661065895, 'mean_word_length': 3.32161089052751, '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': '4932769', 'n_tokens_mistral': 2927, 'n_tokens_neox': 2680, 'n_words': 580}