3scale/porta

$fieldset-margin-bottom: 32px; // --pf-c-form__group--m-action--MarginTop

form.formtastic:not(.pf-c-form) {
  ol, ul, li {
    list-style: none;
  }
}

input[type='text']:not(.pf-c-form-control, .pf-c-text-input-group__text-input),
input[type='search']:not(.pf-c-form-control),
input[type='number'],
textarea,
select,
form.button-to button:not(.pf-c-button),
form.formtastic:not(.pf-c-form) button:not(.pf-c-button, .btn-add, .btn-danger,
  .pf-c-data-list__item-draggable-button),
form.formtastic:not(.pf-c-form) textarea,
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='text']:not(.pf-c-text-input-group__text-input),
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='number'],
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='tel'],
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='email'],
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='url'],
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='password'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: $font-size-base;
  border: $border-width solid $border-color;
  color: $font-color;
  background-color: $background-color-base;
  width: 100%;
  padding: line-height-times(1/4);
  height: line-height-times(3/2);
  border-radius: $border-radius;
  line-height: $line-height-base;

  &:focus {
    outline: none !important;
    border-color: $highlight-color;
    box-shadow: 0;
    color: $highlight-color;
  }
}

// HACK: overrides form.button-to min height so that it fits pf-c-table
.pf-c-table form.button-to button.unset-min-height {
  height: unset;
}

.error input[type='text'],
.error textarea,
.error select,
form.formtastic:not(.pf-c-form) fieldset.inputs .error input[type='text'],
form.formtastic:not(.pf-c-form) fieldset.inputs .error input[type='number'],
form.formtastic:not(.pf-c-form) fieldset.inputs .error input[type='tel'],
form.formtastic:not(.pf-c-form) fieldset.inputs .error input[type='email'],
form.formtastic:not(.pf-c-form) fieldset.inputs .error input[type='url'],
form.formtastic:not(.pf-c-form) fieldset.inputs .error input[type='password'] {
  border-color: $error-color;
}

form.formtastic:not(.pf-c-form) textarea,
textarea {
  height: line-height-times(4.5);
}

// TODO: where is this applied and why isn't it wrapper around form?
button:not(.pf-c-button, .pf-c-nav__link, .pf-c-dropdown__menu-item, .pf-c-select__menu-item,
  .pf-c-data-list__item-draggable-button) {
  min-width: line-height-times(2);
  width: auto;
}

form + hr {
  margin: line-height-times(1) 0;
}

td.delta {
  //td.delta input[type='text'] {
  max-width: line-height-times(2);
}

td.delta input[type='text'] {
  //width: line-height-times(1) !important;
  min-width: 0;
}

table tr.search {
  th input[type='text'],
  th select,
  td input[type='text'],
  td select {
    &#search_month_number,
    &#search_year {
      width: 45%;
    }
  }
}

th input[type='submit'] {
  width: auto;
}

fieldset ol li input[type='text'] + a {
  float: right;
  margin-top: line-height-times(-3/2, true);
  position: relative;
  z-index: 1000;
  padding: line-height-times(1/4);
}

select:not(.pf-c-form-control) {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8, \
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
        <polygon points='0,0 60,0 30,40' style='fill:#{$border-color};'/> \
      </svg>");
  background-position: right line-height-times(1/3) center;
  background-repeat: no-repeat;
  background-size: line-height-times(1/3) auto;
  box-shadow: 0 0 0 transparent;
  margin: 0 line-height-times(1/4) 0 0;
  max-width: calc(100% - #{$border-width}) !important;
  padding-right: line-height-times(1/2);

  &:hover,
  &:focus {
    background-image: url("data:image/svg+xml;charset=utf-8, \
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
        <polygon points='0,0 60,0 30,40' style='fill:#{$link-color};'/> \
      </svg>");
  }
}

.commit {
  float: right;
}

input[type='checkbox']:not(.pf-c-check__input, .pf-c-switch__input),
input[type='checkbox']:not(.pf-c-check__input, .pf-c-switch__input):active,
form.formtastic:not(.pf-c-form) fieldset > ol > li.boolean label input,
form.formtastic:not(.pf-c-form) fieldset > ol > li.radio fieldset ol li label input[type='radio'],
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='checkbox'],
form.formtastic:not(.pf-c-form) fieldset.inputs input[type='checkbox']:active,
form.formtastic:not(.pf-c-form) fieldset.inputs > ol > li.select select {
  position: relative;
  top: -$border-width; // to make it more or less ok in chrome, firefox and safari
  margin: 0 line-height-times(1/4) 0 $border-width;
  vertical-align: baseline;
  border-radius: $border-radius;
}

.button-bar fieldset.actions {
  text-align: right;

  li {
    max-width: 100%;
  }

  &-inline {
    margin: line-height-times(1/2) 0;
  }

  border-top: 0;

  .delete {
    margin-top: 0 !important;
    float: none !important;
  }
}

form.formtastic:not(.pf-c-form) fieldset.actions ol {

  li {
    padding: 0 0 0 0;
    margin: 0 0 0 0;

    &.commit {
      text-align: right;
    }
  }

  .delete {
    margin-top: line-height-times(1/4);
    float: left;
  }
}

form + form .action.delete {
  display: inline-block;
  left: line-height-times(1);
  position: relative;
  top: line-height-times(-7 / 2);
  z-index: 1000;
}

form.formtastic:not(.pf-c-form) ol > li#api_docs_service_body_input {
    max-width: 100%;
}

form.formtastic:not(.pf-c-form) {
  #settings,
  #staging {
    .inputs ol {
      position: relative;
    }
  }
}

form.formtastic:not(.pf-c-form) ol > li {
  padding: 0 0 0 0;
  margin: 0 0 line-height-times(1) 0;
  max-width: line-height-times(32);
  position: relative;

  &.full-width {
    max-width: 100%;
  }

  &.hidden {
    margin: 0;
  }
}

form.formtastic:not(.pf-c-form) .button-bar fieldset > ol > li {
  min-width: 0;
}

form.formtastic:not(.pf-c-form) table fieldset > ol > li {
  margin: 0 0 line-height-times(1/2) 0;
  min-width: 0;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li.radio fieldset ol li {
  margin: 0 0 line-height-times(1/4) 0;
}

/* -------------------------------------------------------------------------------------------------
Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
--------------------------------------------------------------------------------------------------*/

form.formtastic:not(.pf-c-form) {
  @include white-box-shadow;
  min-width: line-height-times(20);
  padding: line-height-times(1);
  text-align: left; /* overriding legacy_theme text-align: center*/
  width: 100%;
  &:first-of-type {
    margin: 0;
  }

  fieldset.inputs[data-behavior~=toggle-inputs] {
    border: $border-width $border-color solid;
    border-radius: $border-radius;
    margin-left: 0;
    padding-left: line-height-times(1);

    .fa-caret-right,
    .fa-caret-down {
      font-size: $font-size-lg;
    }

    .fa-caret-down {
      margin: 0 line-height-times(1/4) 0 line-height-times(-1/4);
    }

    &.packed {
      background-color: transparent;
      border-color: $background-color-base;
      border-top-color: $border-color;
    }

    &> legend {
      background-color: $background-color-base;
      color: $highlight-color;
      cursor: pointer;
      margin-left: line-height-times(-1, true);
      padding-left: 1px;

      &:hover {
        color: $font-color;
      }
    }
  }

  p.instruction { margin: 10px 0;  }

  fieldset > ol > li label {
    width: auto !important;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    display: block;
  }

  legend {

    i.fa {
      display: inline-block;

      &.fa-caret-right {
        width: line-height-times(1/4);
        top: line-height-times(1/24);
        position: relative;
      }
      &.fa-caret-down {
        width: line-height-times(1/4);
      }
    }
  }

  label abbr {
    display: none;
  }

  fieldset.inputs,
  :not(.form-group) > fieldset {
    &:not(.policies-fieldset) {
      position: relative;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;

      fieldset {
        margin-left: line-height-times(1);
        min-width: 0;

        fieldset {
          margin-left: 0;
          min-width: 0;
        }
      }
    }
  }

  fieldset.inputs > legend {
    margin-bottom: 12px;
  }

  div.pf-c-form__group.pf-m-action {
    margin-top: $fieldset-margin-bottom;
  }

  fieldset {
    border: 0;
  }

  legend:not(.label) {
    color: rgb(21, 21, 21); // --pf-c-content--Color
    font-size: 18px; // --pf-c-form__section-title--FontSize
    font-weight: 700; // --pf-c-form__section-title--FontWeight
  }
}

form.formtastic:not(.pf-c-form) fieldset > ol > li.boolean label {
  padding: 0 0 0 0;
}

form#new_post.formtastic fieldset > ol > li.boolean label {
  padding: 0 0 0 0;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li.text textarea {
  border: $border-width solid $border-color;
  color: $font-color;

  &:focus {
    outline: none !important;
    border-color: $highlight-color;
    box-shadow: 0;
    color: $highlight-color;
  }
}

form.formtastic:not(.pf-c-form) fieldset.inputs label.disabled {
  color: $disabled-color;
}

select:disabled,
form.formtastic:not(.pf-c-form) fieldset.inputs input:disabled,
form.formtastic:not(.pf-c-form) fieldset.inputs input[readonly="readonly"] {
  outline: none !important;
  background: $disabled-background-color;
  color: $disabled-color;
  border: $border-width solid $border-color;
  -webkit-text-fill-color: $disabled-color;
}

form.formtastic:not(.pf-c-form) fieldset.inputs input[readonly="readonly"] {
  color: $disabled-color;
}

form.formtastic:not(.pf-c-form) fieldset.inputs input[type="submit"] {
  width: auto;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li.password input {
  max-width: none;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li.price   input,
form.formtastic:not(.pf-c-form) fieldset > ol > li.numeric input {
  max-width: 25%;
}

form.formtastic:not(.pf-c-form) fieldset fieldset fieldset {
  margin: line-height-times(1) 0 line-height-times(1) line-height-times(1);
  padding: 0 0 0 0;
}

form.formtastic:not(.pf-c-form) table fieldset {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

form.formtastic:not(.pf-c-form) .radio fieldset {
  margin: 0 0 line-height-times(1/4) 0;
}

.dashboard_card form.formtastic:not(.pf-c-form) fieldset>ol>li.boolean label {
  padding-left:0;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li p.inline-hints,
form.formtastic:not(.pf-c-form) fieldset > ol > li p.inline-errors {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  color: $hint-color;
  font-size: $font-size-sm;
  max-width: line-height-times(36);
  display: inline-block;
}

form.formtastic:not(.pf-c-form) fieldset + p.inline-hints,
form.formtastic:not(.pf-c-form) fieldset > ol > li.inline-hints > p.inline-hints {
  margin-left: line-height-times(1) !important;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li.inline-hints {
  margin: 0;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li p.inline-errors {
  color: $error-color;

  &::first-letter {
    text-transform: capitalize;
  }
}

/*** FancyBox Adjustmets  ***/
/****************************/

#fancybox-inner form.formtastic:not(.pf-c-form) fieldset > ol > li label {
  float: none;
  text-align: left;
}

#fancybox-inner form.formtastic:not(.pf-c-form) fieldset > ol > li p.inline-hints {
 margin: 0;
}

#fancybox-inner form.formtastic:not(.pf-c-form) fieldset.actions {
  padding: 0;
}


form.formtastic:not(.pf-c-form) fieldset > ol li.text > textarea.source_code {
  width: 80em;
}

form.formtastic:not(.pf-c-form) strong small {
  font-size: $font-size-sm;
}

.ui-widget a {
  outline: none;
}

form.formtastic:not(.pf-c-form) .radio.required abbr {
  display: none;
}

@mixin placeholder {
  color: $placeholder-color;
  font-style: italic;
  opacity: 1;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  @include placeholder;
}

::-moz-placeholder { /* Firefox 19+ */
  @include placeholder;
}

form.button-to, form.button-to div, form.inline, form.inline div {
  display: inline;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li fieldset legend {
  padding: 0;
  position: static;
  width: 100%;
}

form.formtastic:not(.pf-c-form) fieldset > ol > li fieldset legend.label label {
  position: static;
}

.errorExplanation {
  border: $border-width $error-color solid;
  border-radius: $border-radius;
  padding: line-height-times(1/2);
  margin-bottom: line-height-times(1);
  background-color:

  h2 {
    color: $error-color;
  }
}

li.hidden {
  display: none;
}

#new_service_wrapper {
  .errorMessage {
    color: $error-color;
    margin: 0;
    padding: 0 line-height-times(1);
  }

  .new-service-source-input {
    padding: 0 line-height-times(5 / 10);
  }
}

// Overrides
.new-service-form {
  @include white-box-shadow;

  form.formtastic:not(.pf-c-form) {
    box-shadow: none;
  }
}

.dashboard_card form.formtastic:not(.pf-c-form) {
  box-shadow: none;
  margin: 0;
  padding: line-height-times(1) 0 0;
}

#integration-tabs {
  form.formtastic:not(.pf-c-form) {
    box-shadow: none;
    margin: 0;
    padding: 0;

    &.staging-settings {
      @include white-box-shadow;
      padding: line-height-times(1);
    }
  }
}

form#liquid-settings > fieldset {
  border-top: 0;
}

// TODO: will be moved eventually to a NewMetric React component
form.formtastic#new_metric {
  li#metric_system_name_input {
    div {
      display: block;

      input,
      p,
      #system_name_popover {
        display: inline;
      }

      input {
        margin-right: .5rem;
        width: 60%;
      }

      p {
        margin-right: 1rem;
      }
    }
  }
}

// HACK: first pf-c-section in a form don't have margin-top. However, formtastic adds hidden fields
// before and therefore the section is not a first element and margin-top is maintained.
.pf-c-form.formtastic > input[type="hidden"] + .pf-c-form__section {
  margin-top: 0;
}

// HACK: this class needs ot be under a pf-c-form but most forms are still very old and would break
// if we add this class directly. This is to give the required "star" its styles. Remove when all
// forms use pf-c-form
form:not(.pf-c-form) .pf-c-form__label-required {
  margin-left: 0.25rem; // --pf-c-form__label-required--MarginLeft
  font-size: 0.875rem; // --pf-c-form__label-required--FontSize
  color: #c9190b; // --pf-c-form__label-required--Color
}