@cbpds/web-components/dist/collection/components/cbp-form-field/cbp-form-field.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-form-field-color: var(--cbp-color-text-darkest);
* @prop --cbp-form-field-color-bg: var(--cbp-color-white);
* @prop --cbp-form-field-color-border: var(--cbp-color-interactive-secondary-base);
* @prop --cbp-form-field-color-border-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-form-field-color-border-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-form-field-color-label: var(--cbp-color-text-darkest);
* @prop --cbp-form-field-color-description: var(--cbp-color-text-darkest);
* @prop --cbp-form-field-color-placeholder: var(--cbp-color-text-dark);

* @prop --cbp-form-field-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-form-field-color-bg-dark: var(--cbp-color-gray-cool-70);
* @prop --cbp-form-field-color-border-dark: var(--cbp-color-interactive-secondary-light);
* @prop --cbp-form-field-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-form-field-color-border-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-form-field-color-label-dark: var(--cbp-color-text-lightest);
* @prop --cbp-form-field-color-description-dark: var(--cbp-color-text-lightest);
* @prop --cbp-form-field-color-placeholder-dark: var(--cbp-color-text-light);

* @prop --cbp-form-field-padding-inline: var(--cbp-space-2x);
* @prop --cbp-form-field-margin-bottom: var(--cbp-space-4x);
* @prop --cbp-form-field-border-radius: var(--cbp-border-radius-soft);
*/
:root {
  --cbp-form-field-color: var(--cbp-color-text-darkest);
  --cbp-form-field-color-bg: var(--cbp-color-white);
  --cbp-form-field-color-border: var(--cbp-color-interactive-secondary-base);
  --cbp-form-field-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-form-field-color-border-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-form-field-color-label: var(--cbp-color-text-darkest);
  --cbp-form-field-color-description: var(--cbp-color-text-darkest);
  --cbp-form-field-color-placeholder: var(--cbp-color-text-dark);
  --cbp-form-field-color-dark: var(--cbp-color-text-lightest);
  --cbp-form-field-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-form-field-color-border-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-form-field-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-form-field-color-border-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-form-field-color-label-dark: var(--cbp-color-text-lightest);
  --cbp-form-field-color-description-dark: var(--cbp-color-text-lightest);
  --cbp-form-field-color-placeholder-dark: var(--cbp-color-text-light);
  --cbp-form-field-padding-inline: var(--cbp-space-2x);
  --cbp-form-field-margin-bottom: var(--cbp-space-4x);
  --cbp-form-field-border-radius: var(--cbp-border-radius-soft);
  --cbp-form-field-select-chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%23fcfcfc"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  --cbp-form-field-select-chevron-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%231b1b1b"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
}

[data-cbp-theme=light] cbp-form-field[context*=dark],
[data-cbp-theme=dark] cbp-form-field:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-form-field-color-label: var(--cbp-form-field-color-label-dark);
  --cbp-form-field-color-description: var(--cbp-form-field-color-description-dark);
  --cbp-form-field-color: var(--cbp-form-field-color-dark);
  --cbp-form-field-color-bg: var(--cbp-form-field-color-bg-dark);
  --cbp-form-field-color-border: var(--cbp-form-field-color-border-dark);
  --cbp-form-field-color-border-hover: var(--cbp-form-field-color-border-hover-dark);
  --cbp-form-field-color-border-focus: var(--cbp-form-field-color-border-focus-dark);
  --cbp-form-field-color-placeholder: var(--cbp-form-field-color-placeholder-dark);
  --cbp-form-field-select-chevron: var(--cbp-form-field-select-chevron-dark);
}

cbp-form-field {
  display: block;
  margin-bottom: var(--cbp-form-field-margin-bottom);
}
cbp-form-field fieldset,
cbp-form-field legend {
  all: unset;
}
cbp-form-field fieldset {
  display: block;
}
cbp-form-field .cbp-form-field-label {
  display: block;
  color: var(--cbp-form-field-color-label);
  font-size: var(--cbp-font-size-body);
  font-weight: var(--cbp-font-weight-bold);
  font-style: italic;
  line-height: var(--cbp-line-height-xs);
}
cbp-form-field .cbp-form-field-description {
  display: block;
  color: var(--cbp-form-field-color-description);
  font-size: var(--cbp-font-size-subhead);
  font-weight: var(--cbp-font-weight-medium);
  font-style: italic;
  line-height: var(--cbp-line-height-xs);
  margin-bottom: var(--cbp-space-1x);
}
cbp-form-field .cbp-form-field-container {
  position: relative;
}
cbp-form-field input,
cbp-form-field textarea,
cbp-form-field select,
cbp-form-field .cbp-custom-form-control {
  width: 100%;
  max-width: 100%;
  min-height: var(--cbp-space-9x);
  padding-inline: var(--cbp-form-field-padding-inline);
  font-family: inherit;
  font-size: var(--cbp-font-size-body);
  line-height: var(--cbp-line-height-xs);
  text-align: start;
  vertical-align: middle;
  color: var(--cbp-form-field-color);
  background-color: var(--cbp-form-field-color-bg);
  border-style: solid;
  border-width: var(--cbp-border-size-md);
  border-color: var(--cbp-form-field-color-border);
  border-radius: var(--cbp-form-field-border-radius);
  outline-style: solid;
  outline-width: 0;
  outline-color: var(--cbp-form-field-color-border-focus);
  outline-offset: -1px;
  scrollbar-width: thin;
  scrollbar-color: var(--cbp-form-field-color-border) var(--cbp-form-field-color-bg);
}
cbp-form-field input::-webkit-scrollbar,
cbp-form-field textarea::-webkit-scrollbar,
cbp-form-field select::-webkit-scrollbar,
cbp-form-field .cbp-custom-form-control::-webkit-scrollbar {
  width: var(--cbp-space-1x);
}
cbp-form-field input::-webkit-scrollbar-track,
cbp-form-field textarea::-webkit-scrollbar-track,
cbp-form-field select::-webkit-scrollbar-track,
cbp-form-field .cbp-custom-form-control::-webkit-scrollbar-track {
  background-color: var(--cbp-form-field-color-bg);
}
cbp-form-field input::-webkit-scrollbar-thumb,
cbp-form-field textarea::-webkit-scrollbar-thumb,
cbp-form-field select::-webkit-scrollbar-thumb,
cbp-form-field .cbp-custom-form-control::-webkit-scrollbar-thumb {
  background-color: var(--cbp-form-field-color-border);
}
cbp-form-field input:hover,
cbp-form-field textarea:hover,
cbp-form-field select:hover,
cbp-form-field .cbp-custom-form-control:hover {
  --cbp-form-field-color-border: var(--cbp-form-field-color-border-hover);
}
cbp-form-field input:focus, cbp-form-field input:focus-visible,
cbp-form-field textarea:focus,
cbp-form-field textarea:focus-visible,
cbp-form-field select:focus,
cbp-form-field select:focus-visible,
cbp-form-field .cbp-custom-form-control:focus,
cbp-form-field .cbp-custom-form-control:focus-visible {
  --cbp-form-field-color-border: var(--cbp-form-field-color-border-focus);
  outline-width: var(--cbp-border-size-lg);
}
cbp-form-field input[readonly], cbp-form-field input:disabled,
cbp-form-field textarea[readonly],
cbp-form-field textarea:disabled,
cbp-form-field select[readonly],
cbp-form-field select:disabled,
cbp-form-field .cbp-custom-form-control[readonly],
cbp-form-field .cbp-custom-form-control:disabled {
  font-style: italic;
  cursor: not-allowed;
}
cbp-form-field[disabled], cbp-form-field:has(:not(button):disabled) {
  --cbp-form-field-color: var(--cbp-color-interactive-disabled-dark);
  --cbp-form-field-color-bg: var(--cbp-color-interactive-disabled-light);
  --cbp-form-field-color-border: var(--cbp-color-interactive-disabled-dark);
  --cbp-form-field-color-border-hover: var(--cbp-color-interactive-disabled-dark);
  --cbp-form-field-color-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-form-field-color-bg-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-form-field-color-border-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-form-field-color-border-hover-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-form-field-color-placeholder: transparent;
}
cbp-form-field[readonly], cbp-form-field:has(*[readonly]) {
  --cbp-form-field-color-bg: var(--cbp-color-gray-cool-10);
  --cbp-form-field-color-border: var(--cbp-color-interactive-secondary-light);
  --cbp-form-field-color-border-hover: var(--cbp-color-interactive-secondary-light);
  --cbp-form-field-color-border-focus: var(--cbp-color-interactive-secondary-light);
  --cbp-form-field-color-bg-dark: var(--cbp-color-gray-cool-80);
  --cbp-form-field-color-border-dark: var(--cbp-color-interactive-secondary-dark);
  --cbp-form-field-color-border-hover-dark: var(--cbp-color-interactive-secondary-dark);
  --cbp-form-field-color-border-focus: var(--cbp-color-interactive-secondary-dark);
  --cbp-form-field-color-placeholder: transparent;
}
cbp-form-field[readonly] cbp-button[fill=solid]:has(button:disabled), cbp-form-field:has(*[readonly]) cbp-button[fill=solid]:has(button:disabled) {
  --cbp-button-color: var(--cbp-color-text-lightest);
  --cbp-button-color-bg: var(--cbp-color-white);
  --cbp-button-color-border: var(--cbp-form-field-color-border);
  --cbp-button-color-dark: var(--cbp-color-text-base);
  --cbp-button-color-bg-dark: var(--cbp-form-field-color-border-dark);
  --cbp-button-color-border-dark: var(--cbp-form-field-color-border-dark);
}
cbp-form-field[readonly] cbp-button[fill=outline]:has(button:disabled), cbp-form-field:has(*[readonly]) cbp-button[fill=outline]:has(button:disabled) {
  --cbp-button-color: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-bg: var(--cbp-color-interactive-secondary-light);
  --cbp-button-color-border: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-bg-dark: var(--cbp-form-field-color-bg-dark);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-base);
}
cbp-form-field ::placeholder {
  color: var(--cbp-form-field-color-placeholder);
  font-style: italic;
}
cbp-form-field input[type=file] {
  line-height: var(--cbp-space-8x);
}
cbp-form-field ::file-selector-button {
  display: none;
}
cbp-form-field textarea {
  min-height: 6.75rem;
  max-height: 80vh;
  padding-block: var(--cbp-space-2x);
  resize: vertical;
}
cbp-form-field select,
cbp-form-field cbp-dropdown .cbp-custom-form-control {
  appearance: none;
  text-overflow: ellipsis;
  padding-block: calc(var(--cbp-space-2x) - 2px);
}
cbp-form-field select option,
cbp-form-field cbp-dropdown .cbp-custom-form-control option {
  color: var(--cbp-form-field-color);
  background-color: var(--cbp-form-field-color-bg);
}
cbp-form-field select optgroup,
cbp-form-field cbp-dropdown .cbp-custom-form-control optgroup {
  color: var(--cbp-form-field-color);
  background-color: var(--cbp-form-field-color-bg);
  font-weight: var(--cbp-font-weight-bold);
}
cbp-form-field select:not([multiple]):not([size]) {
  --cbp-form-field-dropdown-faux-button-width: calc(var(--cbp-space-9x) - var(--cbp-border-size-md));
  background: right calc(var(--cbp-form-field-dropdown-faux-button-width) / 2 - 8px) top calc(1rem - 8px) no-repeat var(--cbp-form-field-select-chevron), right -0.4px top 0px repeat-y linear-gradient(90deg, var(--cbp-form-field-color-bg) calc(100% - var(--cbp-form-field-dropdown-faux-button-width)), var(--cbp-form-field-color-border) var(--cbp-space-9x));
  padding-inline-end: var(--cbp-space-9x);
}
cbp-form-field[error] {
  --cbp-form-field-color-bg: var(--cbp-color-danger-lighter);
  --cbp-form-field-color-border: var(--cbp-color-danger-dark);
  --cbp-form-field-color-border-hover: var(--cbp-color-danger-darker);
  --cbp-form-field-color-description: var(--cbp-color-danger-dark);
  --cbp-form-field-color-bg-dark: var(--cbp-color-danger-darker);
  --cbp-form-field-color-border-dark: var(--cbp-color-danger-light);
  --cbp-form-field-color-border-hover-dark: var(--cbp-color-danger-lighter);
  --cbp-form-field-color-description-dark: var(--cbp-color-danger-light);
}
cbp-form-field input:is(:-webkit-autofill, :autofill),
cbp-form-field input:is(:-webkit-autofill, :autofill):focus {
  box-shadow: 0 0 0 1000px var(--cbp-form-field-color-bg) inset;
  -webkit-text-fill-color: var(--cbp-form-field-color);
}
cbp-form-field ::-ms-reveal {
  display: none;
}

/*
  // This removes the default increment arrows in the number input field
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; // Margins still appear even if hidden
  }

  input[type=number] {
    -moz-appearance: textfield; // Removes the default increment arrows in Firefox 
  }

*/