@contensis/forms/dist/contensis-forms.css

Render Contensis Forms with React

/* src/themes/contensis.css */
:root {
  --global-font-family: system-ui, sans-serif;
  --global-font-size: 1rem;
  --global-font-weight-bold: 600;
  --global-font-size-label: 1.1875rem;
  --color-accent: #00857e;
  --color-border: #949494;
  --color-border-subtle: #dbdbdb;
  --color-error: #d4351c;
  --color-focus: #4c9aff;
  --color-progress: var(--color-accent);
  --color-bg-light: #fff;
  --color-bg-subtle: #fafafa;
  --color-text: #444;
  --color-text-subtle: #595959;
  --color-text-title: var(--color-text);
  --color-text-description: var(--color-text-subtle);
  --color-text-label: var(--color-text);
  --color-text-hint: var(--color-text-subtle);
  --color-text-error: var(--color-error);
  --size-outline: 0.1875rem;
  --size-border: 0.1875rem;
  --size-border-small: 0.125rem;
  --size-border-large: 0.375rem;
  --size-border-radius: 0.1875rem;
  --form-bg-color: var(--color-bg-subtle);
  --form-border-radius: var(--size-border-radius);
  --form-width: calc(68ch + 2ch + 0.125em);
  --form-text-size-title: calc(var(--global-font-size) * 2);
  --form-text-size-subtitle: calc(var(--global-font-size) * 1.5);
  --form-text-size-description: var(--global-font-size);
  --form-text-size-toolbar-title: var(--global-font-size);
  --form-text-size-toolbar-small: calc(14 / var(--global-font-size));
  --form-current-page-title-font-size: var(--form-text-size-subtitle);
  --form-current-page-description-font-size: var(--form-text-size-description);
  --form-progress-label-color: var(--color-text-label);
  --form-progress-label-font-size: var(--global-font-size);
  --form-progress-bar-bg-color: #fff;
  --form-progress-value-bg-color: var(--color-progress);
  --form-progress-border-radius: var(--size-dimension-8);
  --form-field-text-color: var(--color-text);
  --form-field-bg-color: var(--color-bg-light);
  --form-field-hover-bg-color: #effefc;
  --form-field-error-bg-color: #f9d7d7;
  --form-field-border-color: var(--color-border);
  --form-field-border-focus-color: var(--color-accent);
  --form-field-border-error-color: var(--color-error);
  --form-field-border-width: var(--size-border-small);
  --form-field-border-radius: var(--size-border-radius);
  --form-field-padding: var(--size-space-8);
  --form-field-border-width-error: var(--size-dimension-4);
  --btn-background: var(--color-bg-light);
  --btn-text-color: var(--color-text);
  --btn-font-size: var(--global-font-size);
  --btn-font-weight: var(--global-font-weight-bold);
  --btn-padding-block: var(--size-space-8);
  --btn-padding-inline: var(--size-space-12);
  --btn-border-color: var(--color-border);
  --btn-border-radius: var(--size-border-radius);
  --btn-border-width: var(--size-border);
  --btn-primary-bg-color: var(--color-accent);
  --btn-primary-bg-color-hover: #006c67;
  --btn-primary-bg-color-focus: #006c67;
  --btn-primary-bg-color-disabled: #949494;
  --btn-primary-border-color: var(--color-accent);
  --btn-primary-border-color-hover: #006c67;
  --btn-primary-border-color-focus: #006c67;
  --btn-primary-border-color-disabled: #949494;
  --btn-primary-text-color: #fff;
  --btn-primary-text-color-hover: #fff;
  --btn-primary-text-color-focus: #fff;
  --btn-primary-text-color-disabled: #fff;
  --btn-secondary-bg-color: #ffffff;
  --btn-secondary-bg-color-hover: #f0f0f0;
  --btn-secondary-bg-color-focus: #ffffff;
  --btn-secondary-bg-color-disabled: #949494;
  --btn-secondary-border-color: #dbdbdb;
  --btn-secondary-border-color-hover: #dbdbdb;
  --btn-secondary-border-color-focus: #dbdbdb;
  --btn-secondary-border-color-disabled: #c9c9c9;
  --btn-secondary-text-color: #262626;
  --btn-secondary-text-color-hover: #262626;
  --btn-secondary-text-color-focus: #262626;
  --btn-secondary-text-color-disabled: #ffffff;
  --text-preset-5: 1rem;
  --text-preset-6: 0.875rem;
  --size-space-4: 0.25rem;
  --size-space-8: 0.5rem;
  --size-space-12: 0.75rem;
  --size-space-16: 1rem;
  --size-space-24: 1.5rem;
  --size-space-32: 2rem;
  --size-dimension-4: 0.25rem;
  --size-dimension-8: 0.5rem;
  --size-dimension-24: 1.5rem;
  --size-dimension-32: 2rem;
  --size-dimension-40: 2.5rem;
  --size-width-25: 25%;
  --size-width-33: 33.33%;
  --size-width-50: 50%;
  --size-width-66: 66.66%;
  --size-width-75: 75%;
  --size-width-100: 100%;
  --size-width-ch-2: calc(2ch + 2ch + var(--size-border));
  --size-width-ch-3: calc(3ch + 2ch + var(--size-border));
  --size-width-ch-4: calc(4ch + 2ch + var(--size-border));
  --size-width-ch-5: calc(5ch + 2ch + var(--size-border));
  --size-width-ch-10: calc(10ch + 2ch + var(--size-border));
  --size-width-ch-20: calc(20ch + 2ch + var(--size-border));
  --size-width-ch-30: calc(30ch + 2ch + var(--size-border));
}
*,
::after,
::before {
  box-sizing: border-box;
}
.visually-hidden {
  display: none;
}
html {
  background-color: var(--color-bg-subtle);
  font-family: var(--global-font-family);
  color: var(--color-text);
  font-size: var(--global-font-size);
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
.form {
  --background-color: var(--form-bg-color);
  --font-size: var(--global-font-size);
  --border-radius: var(--form-border-radius);
  --width: var(--form-width);
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  font-size: var(--font-size);
  border-radius: var(--border-radius);
  margin: 3em auto;
  inline-size: var(--size-width-100);
  max-inline-size: var(--width);
}
label,
legend {
  padding: 0;
}
.form-load-error {
  color: var(--color-text-error);
}
.form-header {
  padding-block-end: var(--size-space-24);
}
.form-title {
  font-size: var(--form-text-size-title);
  padding-block-end: var(--size-space-8);
  color: var(--color-text-title);
}
.form-description {
  font-size: var(--form-text-size-description);
  color: var(--color-text-description);
}
.form-current-page {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-32);
}
.form-current-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-8);
}
.form-current-page-title {
  --font-size: var(--form-current-page-title-font-size);
  --font-weight: var(--global-font-weight-bold);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  margin: 0;
  color: var(--color-text-title);
}
.form-current-page-description {
  --font-size: var(--form-current-page-description-font-size);
  font-size: var(--font-size);
  color: var(--color-text-description);
  & p {
    margin: 0;
  }
}
.form-fields-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-32);
}
.form-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-4);
  border: none;
  padding: 0;
}
.form-fieldset-has-error {
  border-inline-start: var(--form-field-border-width-error) solid var(--color-error);
  padding-inline-start: var(--size-space-16);
  & .form-field-label-required,
  & .form-field-legend-required {
    color: var(--color-error);
  }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-4);
}
.form-field-has-error {
  border-inline-start: var(--form-field-border-width-error) solid var(--color-error);
  padding-inline-start: var(--size-space-16);
  & .form-field-label-required,
  & .form-field-legend-required {
    color: var(--color-error);
  }
}
.form-field-label,
.form-field-legend {
  font-size: var(--global-font-size-label);
  color: var(--color-text-label);
  font-weight: var(--global-font-weight-bold);
  display: block;
  text-wrap: pretty;
}
.form-field-legend {
  margin-block-end: var(--size-space-4);
}
.form-field-error {
  color: var(--color-text-error);
  font-weight: var(--global-font-weight-bold);
}
.form-field-label-required,
.form-field-legend-required {
  text-decoration: none;
}
.form-field-instructions {
  color: var(--color-text-subtle);
  line-height: 1.5;
  margin-block-end: var(--size-space-8);
  text-wrap: pretty;
  & p {
    margin: 0;
  }
}
.form-checkbox-field {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-4);
}
.form-checkbox-field-has-error {
  border-inline-start: var(--form-field-border-width-error) solid var(--color-error);
  padding-inline-start: var(--size-space-16);
}
.form-checkbox-field-label,
.form-checkbox-field-legend {
  font-size: var(--global-font-size-label);
  color: var(--color-text-label);
  font-weight: var(--global-font-weight-bold);
  margin-inline-start: var(--size-space-12);
  align-self: center;
}
.form-checkbox-field-label-required {
  text-decoration: none;
}
.form-checkbox-field-error {
  color: var(--color-text-error);
  font-weight: var(--global-font-weight-bold);
}
.form-checkbox-field-instructions {
  color: var(--color-text-subtle);
  line-height: 1.5;
  margin-block-end: var(--size-space-8);
}
.form-validation-summary {
  border: var(--size-border) solid var(--color-error);
  background-color: var(--color-bg-light);
  padding: var(--size-space-16);
  &:focus {
    outline: var(--size-outline) solid var(--color-focus);
    outline-offset: 0;
  }
}
.form-validation-summary-title {
  font-size: var(--form-text-size-subtitle);
  margin-block-start: 0;
}
.form-validation-summary-list {
  color: var(--color-text-error);
  font-weight: var(--global-font-weight-bold);
  list-style-type: none;
  padding-inline-start: 0;
  margin: 0;
  & a {
    color: var(--color-text-error);
  }
}
.form-footer {
  display: flex;
  justify-content: space-between;
}
.form-footer-page {
  align-self: center;
}
.form-actions {
  display: flex;
  gap: var(--size-space-16);
  justify-content: flex-end;
  padding-block: var(--size-space-32);
}
.form-button {
  border: var(--btn-border-width) solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  &:focus {
    outline: var(--size-outline) solid var(--color-focus);
    outline-offset: 0;
  }
}
.form-button--primary {
  background-color: var(--btn-primary-bg-color);
  color: var(--btn-primary-text-color);
  border-color: var(--btn-primary-border-color);
  &:hover {
    background-color: var(--btn-primary-bg-color-hover);
    border-color: var(--btn-primary-border-color-hover);
    color: var(--btn-primary-text-color-hover);
  }
  &:focus {
    background-color: var(--btn-primary-bg-color-focus);
    border-color: var(--btn-primary-border-color-focus);
    color: var(--btn-primary-text-color-focus);
  }
  &:disabled {
    background-color: var(--btn-primary-bg-color-disabled);
    color: var(--btn-primary-text-color-disabled);
    border-color: var(--btn-primary-border-color-disabled);
  }
}
.form-button--secondary {
  background-color: var(--btn-secondary-bg-color);
  color: var(--btn-secondary-text-color);
  border-color: var(--btn-secondary-border-color);
  &:hover {
    background-color: var(--btn-secondary-bg-color-hover);
    border-color: var(--btn-secondary-border-color-hover);
    color: var(--btn-secondary-text-color-hover);
  }
  &:focus {
    background-color: var(--btn-secondary-bg-color-focus);
    border-color: var(--btn-secondary-border-color-focus);
    color: var(--btn-secondary-text-color-focus);
  }
  &:disabled {
    background-color: var(--btn-secondary-bg-color-disabled);
    color: var(--btn-secondary-text-color-disabled);
    border-color: var(--btn-secondary-border-color-disabled);
  }
}
.form-text-input,
.form-email-input,
.form-tel-input,
.form-url-input,
.form-select-input,
.form-multiline-input,
.form-integer-input,
.form-decimal-input,
.form-date-input,
.form-date-time-input,
.form-time-input,
.form-date-day-input,
.form-date-month-input,
.form-date-year-input,
.form-date-hour-input,
.form-date-minute-input {
  --width: var(--size-width-100);
  padding: var(--form-field-padding);
  inline-size: var(--width);
  border: var(--form-field-border-width) solid var(--form-field-border-color);
  border-radius: var(--form-field-border-radius);
  min-block-size: var(--size-dimension-40);
  font-size: var(--global-font-size);
  background-color: var(--form-field-bg-color);
  &:hover {
    background-color: var(--form-field-hover-bg-color);
  }
}
.form-text-input:focus,
.form-email-input:focus,
.form-tel-input:focus,
.form-url-input:focus,
.form-select-input:focus,
.form-radio-input:focus,
.form-checkbox-input:focus,
.form-multiline-input:focus,
.form-integer-input:focus,
.form-decimal-input:focus,
.form-date-input:focus,
.form-date-time-input:focus,
.form-time-input:focus,
.form-date-day-input:focus,
.form-date-month-input:focus,
.form-date-year-input:focus,
.form-date-hour-input:focus,
.form-date-minute-input:focus {
  outline: var(--size-outline) solid var(--color-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 0.0625em var(--form-field-border-focus-color);
  border-color: var(--form-field-border-focus-color);
}
.form-text-input.form-text-input-has-error,
.form-email-input.form-email-input-has-error,
.form-tel-input.form-tel-input-has-error,
.form-url-input.form-url-input-has-error,
.form-select-input.form-select-input-has-error,
.form-multiline-input.form-multiline-input-has-error,
.form-integer-input.form-integer-input-has-error,
.form-decimal-input.form-decimal-input-has-error,
.form-date-input.form-date-input-has-error,
.form-date-time-input.form-date-time-input-has-error,
.form-time-input.form-time-input-has-error,
.form-date-day-input.form-date-day-input-has-error,
.form-date-month-input.form-date-month-input-has-error,
.form-date-year-input.form-date-year-input-has-error,
.form-date-hour-input.form-date-hour-input-has-error,
.form-date-minute-input.form-date-minute-input-has-error {
  border: var(--form-field-border-width) solid var(--color-error);
  box-shadow: inset 0 0 0 0.0625em var(--form-field-border-error-color);
  background-color: var(--form-field-error-bg-color);
}
.form-select-input {
  -webkit-appearance: none;
  background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  background-color: var(--form-field-bg-color);
  padding-inline-end: var(--size-space-32);
}
.form-radio-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-16);
}
.form-radio {
  display: flex;
}
.form-radio-label {
  margin-inline-start: var(--size-space-12);
  align-self: center;
}
.form-radio-input {
  inline-size: var(--size-dimension-32);
  block-size: var(--size-dimension-32);
  border: var(--form-field-border-width) solid var(--form-field-border-color);
  accent-color: var(--color-accent);
  margin: 0;
}
.form-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-16);
}
.form-checkbox {
  display: flex;
}
.form-checkbox-label {
  margin-inline-start: var(--size-space-12);
  align-self: center;
}
.form-checkbox-input {
  inline-size: var(--size-dimension-32);
  block-size: var(--size-dimension-32);
  border: var(--form-field-border-width) solid var(--form-field-border-color);
  accent-color: var(--color-accent);
  margin: 0;
}
.form-date-item {
  display: inline-block;
}
.form-date-day-input,
.form-date-hour-input,
.form-date-minute-input {
  max-inline-size: var(--size-width-ch-2);
}
.form-date-month-input {
  max-inline-size: var(--size-width-ch-3);
}
.form-date-year-input {
  max-inline-size: var(--size-width-ch-4);
}
.form-time-input {
  max-inline-size: var(--size-width-ch-10);
}
.form-date-input {
  max-inline-size: var(--size-width-ch-20);
}
.form-date-time-input {
  max-inline-size: var(--size-width-ch-30);
}
.form-progress {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-4);
  padding-block-end: var(--size-space-24);
}
.form-progress-label {
  font-size: var(--form-progress-label-font-size);
  font-weight: var(--global-font-weight-bold);
  color: var(--form-progress-label-color);
}
progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  block-size: var(--size-dimension-8);
  border-radius: var(--form-progress-border-radius);
  background: var(--form-progress-bar-bg-color);
  inline-size: var(--size-width-100);
}
progress[value]::-webkit-progress-bar {
  border-radius: var(--form-progress-border-radius);
  background: var(--form-progress-bar-bg-color);
}
progress[value]::-webkit-progress-value {
  border-radius: var(--form-progress-border-radius);
  background: var(--form-progress-value-bg-color);
}
progress[value]::-moz-progress-bar {
  border-radius: var(--form-progress-border-radius);
  background: var(--form-progress-value-bg-color);
}
.field-char-count {
}
.field-char-count-error {
  color: var(--color-text-error);
  font-weight: var(--global-font-weight-bold);
}
[dir=rtl] {
  & .form-tel-input,
  & .form-email-input {
    text-align: end;
  }
  & .form-select-input {
    background-position: left 0.7em top 50%, 0 0;
  }
}
/*# sourceMappingURL=contensis-forms.css.map */