@conduction/components/src/components/formFields/select/select.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  --conduction-input-select-padding-block-start: var(--skeleton-size-xs);
  --conduction-input-select-padding-block-end: var(--skeleton-size-xs);
  --conduction-input-select-border-radius: var(--skeleton-border-radius-md);
  --conduction-input-select-background-color: var(--skeleton-color-white);
  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
  --conduction-input-select-invalid-border-color: var(
    --utrecht-textbox-invalid-border-color,
    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
  );

  --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
  /* --conduction-input-select-list-option-background-color: unset; */
  /* --conduction-input-select-list-option-color: unset; */
  /* --conduction-input-select-list-option-selected--background-color: unset; */
  /* --conduction-input-select-list-option-selected-color: unset; */
  /* --conduction-input-select-list-option-focus-background-color: unset; */
  /* --conduction-input-select-list-option-focus-color: unset; */

  /* --conduction-input-select-list-option-hover-background-color: unset; */
  /* --conduction-input-select-list-option-hover-color: unset; */
  /* --conduction-input-select-list-option-font-family: unset; */

  --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
  --conduction-input-select-placeholder-color: #757575;

  --conduction-input-select-group-font-size: 12px;
  --conduction-input-select-group-text-color: grey;
  --conduction-input-select-group-font-family: "Noto Sans", Arial, sans-serif;
}

.select > div {
  background-color: var(--conduction-input-select-background-color);
  border: var(--conduction-input-select-border);
  border-radius: var(--conduction-input-select-border-radius);
  box-sizing: border-box;
  padding-block-start: var(--conduction-input-select-padding-block-start);
  padding-block-end: var(--conduction-input-select-padding-block-end);
}

.select.error > div {
  border-color: var(--conduction-input-select-invalid-border-color);
}

.select .select > div:focus-within {
  outline: none;
  box-shadow: none;
}

.select > div:focus-within::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  bottom: calc(var(--skeleton-size-2xs) * -1);
  left: calc(var(--skeleton-size-2xs) * -1);
  right: calc(var(--skeleton-size-2xs) * -1);
  top: calc(var(--skeleton-size-2xs) * -1);
  border: var(--conduction-input-select-border-focus);
  border-radius: var(--conduction-input-select-border-radius);
}

.groupLabel {
  font-size: var(--conduction-input-select-group-font-size);
  color: var(--conduction-input-select-group-text-color);
  font-family: var(--conduction-input-select-group-font-family);
}