@opencitylabs/bootstrap-italia/lib/css/styles.css

Bootstrap Italia templates for Form.io forms

@charset "UTF-8";
.field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}
.field .tippy-box {
  word-break: break-all;
}
.field {
  /**
  * Add a transition to the label and input.
  * I'm not even sure that touch-action: manipulation works on
  * inputs, but hey, it's new and cool and could remove the
  * pesky delay.
  */
}
.field label, .field input {
  transition: all 0.2s;
  touch-action: manipulation;
}
.field input {
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid #5b6f82;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 6px 10px 6px 8px;
  cursor: text;
}
.field input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}
.field .input-group input:not(:focus) + label {
  position: absolute;
  transform: translate(0, 0rem) !important;
}
.field .input-group input:not(:focus) + label, .field .input-group input:placeholder-shown + label {
  position: absolute;
  transform: translate(0, -2.5rem) !important;
}
.field .input-group input:focus + label, .field .input-group input:placeholder-shown + label {
  position: absolute;
  transform: translate(0, -2.5rem) !important;
}
.field {
  /**
  * Translate down and scale the label up to cover the placeholder,
  * when following an input (with placeholder-shown support).
  * Also make sure the label is only on one row, at max 2/3rds of the
  * field—to make sure it scales properly and doesn't wrap.
  */
}
.field input:placeholder-shown + label {
  cursor: text;
  max-width: fit-content;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.5rem);
  font-weight: 700;
  font-size: 18px;
  padding: 6px 10px 6px 8px;
}
.field {
  /**
  * By default, the placeholder should be transparent. Also, it should
  * inherit the transition.
  */
}
.field ::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
.field {
  /**
  * Show the placeholder when the input is focused.
  */
}
.field input:focus::-webkit-input-placeholder {
  opacity: 1;
}
.field {
  /**
  * When the element is focused, remove the label transform.
  * Also, do this when the placeholder is _not_ shown, i.e. when
  * there's something in the input at all.
  */
}
.field input:not(:placeholder-shown) + label,
.field input:focus + label {
  transform: translate(0, 0);
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px 6px 8px;
}

.required .field label:after {
  content: " *";
  color: #EB0000;
}

.form-control.ui.fluid.selection.dropdown {
  background: transparent;
}

.formio-error-wrapper {
  color: #721c24;
  background-color: #fceff1;
  border-color: #fceff1;
}

select, .choices.form-group.formio-choices {
  border-top-width: initial;
  border-right-width: initial;
  border-left-width: initial;
  border-top-color: initial;
  border-right-color: initial;
  border-left-color: initial;
  width: 100%;
  box-shadow: none;
  font-weight: 700;
  color: rgb(26, 26, 26);
  background-color: rgb(255, 255, 255);
  appearance: auto !important;
  border-style: none none solid;
  border-image: initial;
  border-bottom: 1px solid rgb(91, 111, 130) !important;
  border-radius: 0px;
  outline: 0px;
  transition: 0.2s ease-out;
}

.select-wrapper-custom {
  position: relative;
  padding-bottom: 1rem;
}