tiramisu-react-form/lib/css/index.css

form component for reactjs

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

.flex--space {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.flex--center {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center; }

button {
  outline-style: none;
  cursor: pointer;
  background: transparent;
  border: 0 solid transparent; }

button:disabled {
  opacity: .6; }

fieldset, input {
  border: 0 solid transparent;
  padding: 0; }

*:focus {
  outline: none; }

input {
  background-repeat: no-repeat;
  background-size: 40px 171px;
  -ms-input-placeholder-letter-spacing: 1px;
  -ms-input-placeholder-font-size: 14px;
  -ms-input-placeholder-font-weight: 300;
  -moz-placeholder-letter-spacing: 1px;
  -moz-placeholder-font-size: 14px;
  -moz-placeholder-font-weight: 300; }
  input ::-webkit-input-placeholder {
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 300; }
  input ::-moz-placeholder {
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 300; }

html, body, h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0; }

html, body {
  background: #fff;
  font-size: 14px;
  font-family: "Lato", sans-serif;
  color: #484848;
  line-height: 1.5em;
  letter-spacing: 0.5px;
  overflow-x: hidden; }

*, *:before, *:after {
  box-sizing: border-box; }

a {
  text-decoration: none;
  color: #484848; }

table {
  border-collapse: collapse; }

textarea {
  resize: none; }

textarea {
  -ms-input-placeholder-letter-spacing: 1px;
  -ms-input-placeholder-font-size: 18px;
  -ms-input-placeholder-font-weight: 300;
  -moz-placeholder-letter-spacing: 1px;
  -moz-placeholder-font-size: 18px;
  -moz-placeholder-font-weight: 300; }
  textarea ::-webkit-input-placeholder {
    letter-spacing: 1px;
    font-size: 18px;
    font-weight: 300; }
  textarea ::-moz-placeholder {
    letter-spacing: 1px;
    font-size: 18px;
    font-weight: 300; }

.form {
  max-width: 450px;
  margin-bottom: 20px;
  position: relative;
  margin-top: 100px; }
  .form__row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .form__group, .form__select {
    display: block;
    width: 100%;
    position: relative;
    padding: 0 10px;
    margin-bottom: 60px; }

.form__button, .form__button--disabled {
  display: block;
  color: #fff;
  font-size: 16px;
  border-radius: 2px;
  padding: 18px 27px;
  background-color: #fd5c63;
  text-align: center;
  cursor: pointer;
  letter-spacing: .9px;
  font-weight: 300;
  border-radius: 4px;
  margin-top: 20px;
  width: 100%;
  position: relative; }
  .form__button:first-letter, .form__button--disabled:first-letter {
    text-transform: uppercase; }
  .form__button--disabled {
    opacity: .6; }

.form__label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  top: -35px;
  left: 10px; }

.form__input, .form__select__input {
  border: 1px solid #dce0e0;
  border-radius: 2px;
  padding: 8px 10px;
  height: 50px;
  line-height: 35px;
  display: block;
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px; }

.form__select {
  position: relative; }
  .form__select__input {
    cursor: pointer; }
  .form__select__dropdown {
    position: absolute;
    top: 10px;
    left: -5px;
    border: 1px solid #dce0e0;
    border-radius: 1px;
    width: 80%;
    background: #fff;
    z-index: 10;
    max-height: 300px;
    overflow: scroll; }
  .form__select__option {
    display: block;
    padding: 20px;
    cursor: pointer; }
    .form__select__option:hover {
      background-color: rgba(0, 132, 137, 0.8);
      color: #fff; }

.form__checkbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  .form__checkbox__input {
    display: block;
    margin-right: 20px; }
  .form__checkbox__text {
    opacity: .8;
    line-height: 1.6em;
    letter-spacing: .7px; }

.form__textarea {
  height: auto;
  border: 0 black solid;
  border-bottom: 1px solid #dce0e0;
  padding: 8px 10px;
  line-height: 25px;
  width: 100%;
  font-size: 16px; }

.form__error {
  color: #ffb400;
  font-size: 16px;
  line-height: 1.6em; }
  .form__error__text {
    display: block; }
    .form__error__text:first-letter {
      text-transform: uppercase; }