mwcpl/dist/collection/components/mwcpl-form-field/mwcpl-form-field.css

Master's Web Component Pattern Library

:host {
  display: inline-flex;
  flex-direction: column;
  font-family: Roboto, sans-serif;
}

:host([fullwidth]) {
  width: 100%;
}
:host([fullwidth]) .form-field-wrapper {
  flex: 1 1 auto;
}

.form-field-wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--mwcpl-form-field-background-color, #f5f5f5);
  border-top-left-radius: var(--mwcpl-form-field-border-radius, 4px);
  border-top-right-radius: var(--mwcpl-form-field-border-radius, 4px);
  padding: 0.5rem;
  box-shadow: 0 1px 0 var(--mwcpl-form-field-color, #000000);
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
}

label {
  transition: color 100ms ease;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--mwcpl-form-field-color, #000000);
}

.form-field-wrapper:focus-within {
  box-shadow: 0 2px 0 var(--mwcpl-form-field-color-active, #3f51b5);
}
.form-field-wrapper:focus-within label {
  color: var(--mwcpl-form-field-color-active, #3f51b5);
}

slot[name=input]::slotted(*) {
  font-family: Roboto, sans-serif;
  flex: 1 1 auto;
  border: none;
  color: var(--mwcpl-form-field-color, #000000);
  outline: none;
  background-color: var(--mwcpl-form-field-background-color, #f5f5f5);
  font-size: 1rem;
}

slot[name=icon]::slotted(*) {
  color: var(--mwcpl-form-field-color, #000000);
  font-size: 1rem;
}

slot[name=hint]::slotted(*) {
  font-size: 0.75rem;
  color: var(--mwcpl-form-field-hint-color, #808080);
  margin-left: 0.5rem;
  margin-top: 0.5rem;
}