CartoDB/cartodb20

// Edit field styles
//
// - String
// - Number
// - Boolean
// - Date
// - Geometry
//
// --------------------------------------------------

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

.EditField {
  display: flex;
  position: relative;
  width: 100%;
}

.EditField-input {
  flex-grow: 2;
}

.EditField-input.is-number {
  color: #4DC964;
}

.EditField-textarea {
  flex-grow: 2;
  height: 20px;
  min-height: 20px;
  max-height: 150px;
  padding: 10px 12px;
  resize: vertical;
}

.EditField-label {
  width: 120px;
  max-width: 140px;
  height: 100%;
  margin-top: 10px;
  overflow: hidden;
  border: none;
  outline: none;
  background: none;
  color: $cTypography-secondary;
  font-size: $sFontSize-normal;
  line-height: $sLineHeight-normal;
  text-align: right;
  text-overflow: ellipsis;
}

.EditField-label:hover {
  color: $cTypography-paragraphs;
  cursor: pointer;
}

.EditField-label:focus {
  $fieldBgColor: transparent;
  $fieldBorderColor: #CCC;
  background: -webkit-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
  background: -moz-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
  background: -ms-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
  background: -o-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
  background: linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0; /* stylelint-disable-line */
  background-size: 100% $sLineHeight-normal;
  color: $cTypography-paragraphs;
}

.EditField-label:focus:hover {
  color: $cTypography-paragraphs;
  cursor: text;
}

.EditField-label.is-disabled {
  background: none;
  color: $cTypography-paragraphs;
}

.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 {
  margin-top: 10px;
  background: none;
}

.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-width: 4px;
      border-right-width: 4px;
      border-left-width: 4px;
      border-top-style: solid;
    }

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

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

// @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;
  width: 18px;
  height: 18px;
  margin: 12px 0 0 10px;
  border-radius: 18px;
  background: $cStructure-mainLine;
  color: WHITE;
  font-size: $sFontSize-small;
  line-height: 18px;
  text-align: center;
}

.EditField-info:hover {
  background: #787878;
  cursor: pointer;
}
// Modifiers
.EditField--withBorder {
  align-content: center;
  justify-content: space-between;
  border: 1px solid #CCC;
  border-radius: 4px;
  background: WHITE;
}

.EditField--withSeparator {
  &::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 102px;
    width: 1px;
    height: 24px;
    background: #E5E5E5;
  }
}