package.components.InputGroup.input-group.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
.pf-v6-c-input-group {
  --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
  --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
  --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
  --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
  --pf-v6-c-input-group__item--BackgroundColor: transparent;
  --pf-v6-c-input-group__item--AlignItems: start;
  --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
  --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
  --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base);
  --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
  --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
  --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
  --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
  --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
  --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent;
  --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
}

.pf-v6-c-input-group {
  display: flex;
  gap: var(--pf-v6-c-input-group--Gap);
  width: 100%;
}

.pf-v6-c-input-group__item {
  position: relative;
  display: flex;
  align-items: var(--pf-v6-c-input-group__item--AlignItems);
  min-width: var(--pf-v6-c-input-group__item--MinWidth, revert);
  max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert);
  background-color: var(--pf-v6-c-input-group__item--BackgroundColor);
  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
}
.pf-v6-c-input-group__item.pf-m-box {
  --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor);
  padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart);
  padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd);
  border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid;
  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
  border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius);
}
.pf-v6-c-input-group__item.pf-m-plain {
  --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-plain--BackgroundColor);
  border: none;
}
.pf-v6-c-input-group__item.pf-m-disabled {
  --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-disabled--BackgroundColor);
  --pf-v6-c-input-group__text--Color: var(--pf-v6-c-input-group__item--m-disabled__text--Color);
}
.pf-v6-c-input-group__item.pf-m-fill {
  flex-grow: 1;
}

.pf-v6-c-input-group__text {
  align-self: center;
  font-size: var(--pf-v6-c-input-group__text--FontSize);
  color: var(--pf-v6-c-input-group__text--Color);
}
label.pf-v6-c-input-group__text {
  cursor: pointer;
}