agile-alliance-brazil/submissions

View on GitHub
app/assets/stylesheets/formtastic_changes.css.scss

Summary

Maintainability
Test Coverage
/* -------------------------------------------------------------------------------------------------

Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

For example, to make the inline hint paragraphs a little darker in color than the standard #666:

form.formtastic fieldset ol li p.inline-hints { color:#333; }

--------------------------------------------------------------------------------------------------*/
form.formtastic legend {
  color: #666666;
  font-size: 1.2em;
  margin: 10px 0;
}

form.formtastic fieldset ol li {
  width: 100%;
}

form.formtastic fieldset ol li label {
  width: 100%;
  font-weight: bold;
}

form.formtastic fieldset ol li.boolean label {
  width: 100%;
  padding: 0;
}

form.formtastic fieldset ol li.string input, form.formtastic fieldset ol li.password input, form.formtastic fieldset ol li.url input, form.formtastic fieldset ol li.text textarea,form.formtastic fieldset ol li.numeric input,form.formtastic fieldset ol li.phone input,form.formtastic fieldset ol li.email input {
  background-color: #ffffff;
  border: 1px solid #bbbbbb;
  padding: 2px;
  width: 100%;
  box-sizing: border-box;
}

form.formtastic fieldset ol li span.counter {
  float: right;
  margin-top: -3ex;
  color: #666666;

  &.warning, &.exceeded {
    color: #d20000;
    font-weight: bold;
  }
  &.achieved {
    color: #66cc66;
    font-weight: bold;
  }
}

form.formtastic fieldset ol li span.counter.exceeded + input {
  color: #d20000;
}

form.formtastic fieldset ol li.check_boxes fieldset ol {
  padding: 15px;
}

form.formtastic fieldset ol li.error input, form.formtastic fieldset ol li.error textarea {
  background: #fbe3e4;
  color: #8a1f11;
  border-color: #fbc2c4;
}

form.formtastic abbr, form.formtastic acronym {
  color: #d20000;
}

form.formtastic abbr::before, form.formtastic acronym::before {
  content: ' ';
}

form.formtastic fieldset ol li p.inline-hints {
  color: #666666;
  font-style: italic;
}

form.formtastic fieldset.submission ol span.possibleDurations {
  display: inline-block;
  margin-left: 10em;
  margin-top: -6em;
  text-align: right;
  width: 55%;
  color: #666;
}

form.formtastic fieldset.submission ol li {
  position: relative;
  display: block;
}

form.formtastic fieldset.submission ol li p.inline-hints {
  position: absolute;
  left: -250px; /* because it is on top of the actions column */
  top: 0;
  width: 220px;

  border: 2px solid #369;
  border-radius: 0.5em;
  color: #333;
  display: none;
  font-size: 1.3em;
  padding: 0.5em;
}

form.formtastic fieldset.submission ol li:nth-child(2n+1) p.inline-hints {
  background-color: #B0DFF5;
}

form.formtastic fieldset.submission ol li:nth-child(2n) p.inline-hints {
  background-color: #FFFF00;
}

form.formtastic fieldset ol li ul.errors {
  background: url(image-path('error_bg.png')) no-repeat;
  color: #d20000;
  float: right;
  list-style: none;
  margin: 0;
  padding-left: 19px;
}

form.reviewer.formtastic fieldset ol ul.errors, form.early_review.formtastic fieldset ol ul.errors, form.final_review.formtastic fieldset ol ul.errors {
  background: url(image-path('error_bg.png')) no-repeat;
  color: #d20000;
  float: left;
  list-style: none;
  margin: 0;
  padding-left: 19px;
}

form.formtastic fieldset ol li ul.errors li {
  margin: 0;
}

form.formtastic fieldset.buttons {
  padding: 0;
}

form.formtastic fieldset ol ul.tags li {
  display: inline-block;
  background-color: #CCF;
  font-size: 0.8em;
  padding: 0.3em;
  margin: 0.2em 0;
  width: initial;
}

form.formtastic fieldset ol ul.tags li:after {
    content: "";
}

form.formtastic fieldset ol ul.tags li.selectedTag {
    background-color: #CFC;
}

form.formtastic fieldset ol ul.tags {
    text-align: center;
}

form.formtastic.reviewer fieldset {
  width: 100%;
}

form.formtastic.reviewer,form.formtastic.review_decision_confirm,form.formtastic.review_decision_withdraw {
  fieldset.actions ol li::after {
    display: none;
  }
  fieldset ol {
    li {
      .inline-hints {
        width: 100%;
      }
    }
    li.string,li.text,li.numeric {
      input,textarea {
        width: 100%;
      }
    }
  }
}