input-field.css

/**
Control the style on input-field component.
In most scenarios, you should only change the values of the
CSS variables.
 */

.input-field {
  --label-width: 10em;
  --input-width: calc(100% - var(--label-width) - 4em);
  --rule-padding-left: calc(var(--label-width) + 1em);

  --border-radius: 4px;
  --border-radius-circle: 50%;

  --label-color: darkgreen;
  --label-font-weight: bold;
  --label-font-size: 1em;

  --sublabel-color: darkgreen;
  --sublabel-font-weight: lighter;
  --sublabel-font-size: 0.9em;

  --required-marker: " *";
  --required-marker-color: green;

  --tooltip-icon-color: white;
  --tooltip-icon-background: green;
  --tooltip-color: darkgreen;
  --tooltip-background: HoneyDew;

  --input-color: black;
  --input-background-color: white;
  --input-background-bad: linear-gradient(to right, LavenderBlush, white);
  --input-background-focus: linear-gradient(to right, HoneyDew, white);
  --input-background-focus-bad: linear-gradient(to right, LavenderBlush, HoneyDew, white);
  --input-border-color: Gainsboro;
  --input-border-color-bad: red;
  --input-border-focus: green;

  --radio-item-width: 8em;
  --radio-background-color: white;
  --radio-background-color-selected: green;
  --radio-button-size: 1.2em;

  --checkbox-background-color: white;
  --checkbox-background-color-selected: green;
  --checkbox-color-selected: white;
  --checkbox-size: 1em;

  --rule-font-size: 0.9em;
  --rule-color: green;
  --rule-color-bad: red;

  --listbox-checkmark-color: green;
  --listbox-optgroup-color: green;
  --listbox-optgroup-font-weight: bold;
  --listbox-size: 1em;
}

/*#region Label */
.input-field label.label {
  display: inline-block;
  width: var(--label-width);
  text-align: right;
  margin: 0.4em 0.2em 0.1em 0.4em;
  padding-top: 0.2em;
  vertical-align: top;

  color: var(--label-color);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
}

.input-field label.label .required:after {
  content: var(--required-marker);
  color: var(--required-marker-color);
}

.input-field .sublabel {
  font-size: var(--sublabel-font-size);
  font-weight: var(--sublabel-font-weight);
  color: var(--sublabel-color);
}

@media screen and (max-width: 600px) {
  .input-field label.label {
    display: block;
    text-align: left;
    margin-bottom: 0.1em;
    margin-left: 1.2em;
  }
}

/*#endregion Label */

/*#region input */
.input-field input.input {
  width: var(--input-width);
  margin: 0.4em 0.4em 0.1em 0.2em;
  padding: 1em 0.7em;

  color: var(--input-color);
  background-color: var(--input-background-color, white);
  border-radius: var(--border-radius, 4px);
  border: 1px solid var(--input-border-color);
  height: 2em;
  font-size: 1em;
}

.input-field input.input:focus {
  background-image: var(--input-background-focus);
  outline: none;
  border-color: var(--input-border-focus);
}

.input-field.bad input  {
  border-color: var(--input-border-color-bad, red);
  background-image: var(--input-background-bad);
}

.input-field.bad input:focus {
  border-color: var(--input-border-color-bad);
  background-image: var(--input-background-focus-bad);
}

@media screen and (max-width: 600px) {
  .input-field input.input {
    margin-top: 0.1em;
    width: 80%;
    margin-left: 1em;
  }
}
/*#endregion input */

/*#region Footer/Rules*/
.input-field footer {
  padding-left: var(--rule-padding-left);
  margin-bottom: 1em;
  font-size: var(--rule-font-size);
}

.input-field footer ul {
  margin: 0.5em 0;
}

.input-field footer ul.rules li {
  color: var(--rule-color);
}

.input-field footer ul.rules li.bad {
  color: var(--rule-color-bad);
}

@media screen and (max-width: 600px) {
  .input-field footer {
    padding-left: 1em;
  }

  .input-field footer ul {
    padding-left: 2em;
  }
}
/*#endregion Footer/Rules*/

/*#region Tooltip */
.input-field .circle {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius-circle, 50%);
  padding: 0.1em 0.3em;
  margin: 0 0.1em 0 0.06em;

  color: var(--tooltip-icon-color, white);
  background: var(--tooltip-icon-background, green);
  text-align: center;
  font-size: small;
  font-family: "Courier New", monospace;
  transform: translateY(-0.2em);
}

.input-field .tooltip {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.input-field .tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;

  background-color: var(--tooltip-background, dimgray);
  color: var(--tooltip-color, white);
  border-radius: var(--border-radius, 4px);

  text-align: center;
  width: 15em;
  bottom: 125%;
  left: 50%;
  padding: 0.7em;
  margin-left: -6em;
  font-weight: normal;
}


.input-field .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 40%;
  border-width: 0.4em;
  border-style: solid;
  border-color: var(--tooltip-background, dimgray) transparent transparent transparent;
}

.input-field .tooltip .show {
  visibility: visible;
}

@media screen and (max-width: 600px) {
  .input-field .tooltip-text {
    margin-left: -4em;
  }

  .input-field .tooltip-text::after {
    left: 15%;
  }
}
/*#endregion Tooltip */

/*#region Radio*/
.input-field .radio-buttons {
  display: inline-block;
  margin-top: 0.4em;
  width: var(--input-width);
}

.input-field .radio {
  display: inline-block;
  width: var(--radio-item-width, 10em);
}

.input-field .radio .radio-label {
  color: var(--label-color);
}

.input-field .radio input[type="radio"] {
  appearance: none;
  outline: none;
  border-radius: var(--border-radius-circle, 50%);
  background-color: var(--radio-background-color, white);
  background-clip: content-box;
  border: calc(var(--radio-button-size) * 0.15) solid var(--input-border-color, gray);
  width: var(--radio-button-size);
  height: var(--radio-button-size);
}

.input-field .radio input[type="radio"]:checked {
  background-color: var(--radio-background-color-selected, green);
  border: calc(var(--radio-button-size) * 0.3) double var(--input-border-color, gray);
}

@media screen and (max-width: 600px) {
  .input-field .radio {
    margin-left: 1em;
  }
}
/*#endregion Radio*/

/*#region Checkbox*/
.input-field .checkbox-buttons {
  display: inline-block;
  margin-top: 0.4em;
  width: var(--input-width);
}

.input-field .checkbox {
  display: inline-block;
  width: var(--radio-item-width, 10em);
}

.input-field .checkbox .checkbox-label {
  color: var(--label-color);
  display: inline-block;
  transform: translateY(calc(var(--checkbox-size) * -0.4));
}

.input-field .checkbox input[type="checkbox"] {
  appearance: none;
  outline: none;
  background-color: var(--checkbox-background-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--border-radius, 4px);
  display: inline-block;
  position: relative;
  padding: calc(var(--checkbox-size) * 0.7);
}

.input-field .checkbox input[type="checkbox"]:checked {
  background-color: var(--checkbox-background-color-selected);
  border: 1px solid var(--input-border-color);
  color: white;
}

.input-field .checkbox input[type="checkbox"]:checked:after {
  content: "\2714";
  font-size: var(--checkbox-size);
  position: absolute;
  top: calc(var(--checkbox-size) * 0.2);
  left: calc(var(--checkbox-size) * 0.3);
  color: var(--checkbox-color-selected);
}

@media screen and (max-width: 600px) {
  .input-field .checkbox {
    margin-left: 1em;
  }
}
/*#endregion Checkbox*/

/*#region listbox / select styling */
.input-field select {
  width: var(--input-width);
  margin: 0.4em 0.4em 0.1em 0.2em;
  padding: 0.45em 0.5em;
  color: var(--input-color);
  background-color: var(--input-background-color, white);
  border-radius: var(--border-radius, 4px);
  border: 1px solid var(--input-border-color);
  font-size: var(--listbox-size, 1em);
}

.input-field select.listbox.multiple option::before {
  content: "\25A2";  /* square */
  line-height: calc(var(--listbox-size) * 1.5);
  padding-right: calc(var(--listbox-size) * 0.3);
  color: var(--input-border-color);
  font-weight: bold;
}

.input-field select.listbox.multiple option:checked:before {
  content: "\2714";  /* Check mark */
  line-height: calc(var(--listbox-size) * 1.5);
  padding-right: calc(var(--listbox-size) * 0.46);
  color: var(--listbox-checkmark-color, green);
}

.input-field select option {
  background-color: var(--input-background-color);
  color: var(--input-color);
  padding: 0.2em 0 0.1em 0.5em;
}

.input-field select.multiple option {
  padding-left: 0.1em;
}

.input-field select.listbox optgroup {
  color: var(--listbox-optgroup-color, black);
  padding: 0.5em 0 0.5em 0.2em;
  font-weight: var(--listbox-optgroup-font-weight);
}

.input-field select.listbox optgroup option {
  padding-left: calc(var(--listbox-size) * 1.5);
}

@media screen and (max-width: 600px) {
  .input-field select {
    margin-top: 0.1em;
    width: 80%;
    margin-left: 1em;
  }
}

/*#endregion listbox styling */