<commit_before>// ===============================================================
// Apostrophe default form fields
// ===============================================================

// General Styles ===================================

.apos-field
{
  margin-bottom: @apos-margin-4;
  width: 100%;
  max-width: 540px;
}

.apos-field-label
{
  display: block;
  margin-bottom: @apos-margin-1;
  .apos-text-instruction;
}

.apos-field-input
{
  display: block;
  padding: @apos-padding-2;
  background-color: @apos-light;
  width: 100%;
  border: none;
  .apos-text-normal;
  .apos-transition;
}

.apos-field-input--small {
  padding: @apos-padding-1 @apos-padding-2;
}

// Select Specific ============================

.apos-field-input-select-wrapper
{
  position: relative;
  &:after
  {
    content: "\f0d7";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: @apos-padding-3;
    .fa;
    pointer-events: none;
  }
}

.apos-field-input-select-wrapper--small:after {
  top: 12px;
  right: 36px;
}

.apos-field-input-select
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  
  &:hover { cursor: pointer; }
}

.apos-field-input-text,
.apos-field-input-select,
.apos-field-input-textarea
{
  &:focus
  {
    outline:none;
    .apos-glow;
  }
}

// Checkbox (singular) ===================================
.apos-field-input-checkbox-indicator
{
  display: inline-block;
  vertical-align: top;
  height: 21px;
  width: 21px;
  border: 1px solid @apos-dark;
  .apos-transition(all, .1s, ease-in-out);
  .apos-no-select;

  &:hover{ cursor: pointer; }
}

.apos-field-input-checkbox:checked + .apos-field-input-checkbox-indicator
{
  background: @apos-primary;
  border-color: @apos-primary;
  border-width: 6px;

}

.apos-field-input-checkbox
{
  display: inline;
  max-width: 21px; //Match it to our indicator box;
  visibility: hidden;
  position: absolute;
  //&:checked + .apos-field-input-checkbox-indicator

}

// Checkboxes (collection) ===================================

.apos-checkbox-choice
{
  label {
    width: 200px;
    display: inline-block;
    margin-bottom: 0.5em;
  }
}

.apos-form-checkbox 
{
  position: relative;
  padding: @apos-padding-2 0 @apos-padding-2 @apos-padding-2;
    
  &:nth-child(even)
  {
    background-color: @apos-lighter;
  }
  
  &-label
  {
    color: @apos-dark;
    
    &:hover 
    {
      cursor: pointer;
    }
  }
  
  &-input 
  {
    margin-right: @apos-margin-2;
    opacity: 0;
    z-index: -1;
    
    &:checked ~ .apos-form-checkbox-indicator 
    {
      background: @apos-primary;
      border-color: @apos-primary;
      border-width: 6px; 
    }
  }
  
  &-indicator
  {
    position: absolute;
    display: inline-block;
    vertical-align: top;
    height: 21px;
    width: 21px;
    left: 0;
    margin-left: @apos-margin-2;
    border: 1px solid @apos-dark;
    .apos-transition(all, .1s, ease-in-out);
    .apos-no-select;

    &:hover { cursor: pointer; }
  }  
}

// Tags ========================================
.apos-field-tags .apos-tags
{
  position: relative;
  .apos-field-input { position: relative; }
  .apos-tag-add
  {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: @apos-padding-2;
    color: @apos-dark;
    text-decoration: none;
    line-height: 28px;
    &:hover { color: @apos-primary; }
  }
  .apos-tag-remove
  {
    color: @apos-mid;
    text-decoration: none;
    &:hover { color: @apos-delete; }
  }
  .apos-tag-list
  {
    position: relative;
    padding: @apos-padding-1 @apos-padding-2;
    background-color: fade(@apos-light, 50%);
    &.apos-empty { display: none; }
    &.ui-sortable
    {
      .apos-tag-list-item
      {
        cursor: -webkit-grab;
        cursor: grab;
        &.ui-sortable-helper
        {
          cursor: -webkit-grabbing;
          cursor: grabbing;
        }
      }
      .ui-sortable-placeholder
      {
        visibility: visible !important;
        height: 38px;
        width: 100px;
        display: inline-block;
        border: 1px dashed @apos-base;
        background-color: fade(@apos-base, 50%);
        transform: translateY(30%);
      }
    }
  }
  .apos-tag-list-item
  {
    // .apos-inline-block;
    display: inline;
    margin-top: 6px;
    &:not(:first-of-type) { margin-left: 10px; }
  }
  .apos-tag-entry
  {
    .apos-text-normal;
    line-height: 38px;
    text-transform: capitalize;
    padding-bottom: 6px;
    border-bottom: 1px dashed @apos-primary;
  }
}

// Colorpicker ===================================
.apos-field-color {
  position: relative;
  max-width: 229px;

  .sp-replacer {
    position: absolute;
    background-color: transparent;
    padding: 16px 10px 18px 60px;
    left: 0;
    z-index: 2;
  }
}

.apos-field-input-color-value {
  float: left;
  margin: 20px 0px 0 20px 
}

.apos-field-input-color-preview {<commit_msg>Replace absolute centering with flexbox<commit_after>// ===============================================================
// Apostrophe default form fields
// ===============================================================

// General Styles ===================================

.apos-field
{
  margin-bottom: @apos-margin-4;
  width: 100%;
  max-width: 540px;
}

.apos-field-label
{
  display: block;
  margin-bottom: @apos-margin-1;
  .apos-text-instruction;
}

.apos-field-input
{
  display: block;
  padding: @apos-padding-2;
  background-color: @apos-light;
  width: 100%;
  border: none;
  .apos-text-normal;
  .apos-transition;
}

.apos-field-input--small {
  padding: @apos-padding-1 @apos-padding-2;
}

// Select Specific ============================

.apos-field-input-select-wrapper
{
  position: relative;
  display: flex;
  align-items: center;
  &:after
  {
    content: "\f0d7";
    position: absolute;
    right: @apos-padding-3;
    .fa;
    pointer-events: none;
  }
}

.apos-field-input-select-wrapper--small:after {
  top: 12px;
  right: 36px;
}

.apos-field-input-select
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;

  &:hover { cursor: pointer; }
}

.apos-field-input-text,
.apos-field-input-select,
.apos-field-input-textarea
{
  &:focus
  {
    outline:none;
    .apos-glow;
  }
}

// Checkbox (singular) ===================================
.apos-field-input-checkbox-indicator
{
  display: inline-block;
  vertical-align: top;
  height: 21px;
  width: 21px;
  border: 1px solid @apos-dark;
  .apos-transition(all, .1s, ease-in-out);
  .apos-no-select;

  &:hover{ cursor: pointer; }
}

.apos-field-input-checkbox:checked + .apos-field-input-checkbox-indicator
{
  background: @apos-primary;
  border-color: @apos-primary;
  border-width: 6px;

}

.apos-field-input-checkbox
{
  display: inline;
  max-width: 21px; //Match it to our indicator box;
  visibility: hidden;
  position: absolute;
  //&:checked + .apos-field-input-checkbox-indicator

}

// Checkboxes (collection) ===================================

.apos-checkbox-choice
{
  label {
    width: 200px;
    display: inline-block;
    margin-bottom: 0.5em;
  }
}

.apos-form-checkbox
{
  position: relative;
  padding: @apos-padding-2 0 @apos-padding-2 @apos-padding-2;

  &:nth-child(even)
  {
    background-color: @apos-lighter;
  }

  &-label
  {
    color: @apos-dark;

    &:hover
    {
      cursor: pointer;
    }
  }

  &-input
  {
    margin-right: @apos-margin-2;
    opacity: 0;
    z-index: -1;

    &:checked ~ .apos-form-checkbox-indicator
    {
      background: @apos-primary;
      border-color: @apos-primary;
      border-width: 6px;
    }
  }

  &-indicator
  {
    position: absolute;
    display: inline-block;
    vertical-align: top;
    height: 21px;
    width: 21px;
    left: 0;
    margin-left: @apos-margin-2;
    border: 1px solid @apos-dark;
    .apos-transition(all, .1s, ease-in-out);
    .apos-no-select;

    &:hover { cursor: pointer; }
  }
}

// Tags ========================================
.apos-field-tags .apos-tags
{
  position: relative;
  .apos-field-input { position: relative; }
  .apos-tag-add
  {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: @apos-padding-2;
    color: @apos-dark;
    text-decoration: none;
    line-height: 28px;
    &:hover { color: @apos-primary; }
  }
  .apos-tag-remove
  {
    color: @apos-mid;
    text-decoration: none;
    &:hover { color: @apos-delete; }
  }
  .apos-tag-list
  {
    position: relative;
    padding: @apos-padding-1 @apos-padding-2;
    background-color: fade(@apos-light, 50%);
    &.apos-empty { display: none; }
    &.ui-sortable
    {
      .apos-tag-list-item
      {
        cursor: -webkit-grab;
        cursor: grab;
        &.ui-sortable-helper
        {
          cursor: -webkit-grabbing;
          cursor: grabbing;
        }
      }
      .ui-sortable-placeholder
      {
        visibility: visible !important;
        height: 38px;
        width: 100px;
        display: inline-block;
        border: 1px dashed @apos-base;
        background-color: fade(@apos-base, 50%);
        transform: translateY(30%);
      }
    }
  }
  .apos-tag-list-item
  {
    // .apos-inline-block;
    display: inline;
    margin-top: 6px;
    &:not(:first-of-type) { margin-left: 10px; }
  }
  .apos-tag-entry
  {
    .apos-text-normal;
    line-height: 38px;
    text-transform: capitalize;
    padding-bottom: 6px;
    border-bottom: 1px dashed @apos-primary;
  }
}

// Colorpicker ===================================
.apos-field-color {
  position: relative;
  max-width: 229px;

  .sp-replacer {
    position: absolute;
    background-color: transparent;
    padding: 16px 10px 18px 60px;
    left: 0;
    z-index: 2;
  }
}

.apos-field-input-color-value {
  float: left;
  margin: 20px 0px 0 20px
}

.apos-field-input-color-preview {
{'fraction_non_alphanumeric': 0.21131226347550372, 'fraction_numerical': 0.020251610923596196, 'mean_word_length': 2.593531789783168, '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': '529609', 'n_tokens_mistral': 3674, 'n_tokens_neox': 3590, 'n_words': 644}