apostrophe/lib/modules/apostrophe-ui/public/css/components/fields.less

The Apostrophe Content Management System.

// ===============================================================
// 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 {
}

.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: 260px;

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

.apos-field-input-colorpicker-value {
  display: inline-block;
  margin-left: 10px;
  margin-top: 15px;
}

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

.apos-field-input-color-preview {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.apos-field-input-color-preview--empty {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMKL/ty4ADMIIkF3SqbsYmP+gkAayXGgfe8HOVAAAAAElFTkSuQmCC);
}

.apos-field-input-color {
  width: 70px;
  padding: 15px;
  height: 60px;
  float: left;
  &:hover {
    cursor: pointer;
  }
}

// Range ===================================

.apos-field-input-range {
  padding-left: 0;
  padding-right: 0;
}

.apos-field-input-range-value {
  display: inline-block;
  margin-left: 10px;
}

.apos-field-range .apos-field-label {
  display: inline-block;
}

// Browse and autocomplete combo
.apos-browse-and-autocomplete {
  display: flex;
  position: relative;
  align-items: center;
  .apos-button {
    position: absolute;
    right: 10px;
  }
}

// Browse only
.apos-browse {
  margin-bottom: 16px;
}