package.components.Radio.radio.scss 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!
@use '../../sass-utilities' as *;

@include pf-root($radio) {
  --#{$radio}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
  --#{$radio}--AccentColor: var(--pf-t--global--icon--color--brand--default);
  --#{$radio}--m-standalone--MinHeight: calc(var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight));

  // TODO: update to `--#{$radio}--FontSize` `--#{$radio}--LineHeight`
  --#{$radio}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
  --#{$radio}__label--Color: var(--pf-t--global--text--color--regular);
  --#{$radio}__label--FontWeight: var(--pf-t--global--font--weight--body--default);
  --#{$radio}__label--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$radio}__label--LineHeight: var(--pf-t--global--font--line-height--body);
  --#{$radio}__description--FontSize: var(--pf-t--global--font--size--body--sm);
  --#{$radio}__description--Color: var(--pf-t--global--text--color--subtle);

  // * Radio input
  --#{$radio}__input--first-child--MarginInlineStart: #{pf-size-prem(1px)};
  --#{$radio}__input--last-child--MarginInlineEnd: #{pf-size-prem(1px)};
  --#{$radio}__body--MarginBlockStart: var(--pf-t--global--spacer--sm);

  // TODO: due to subpixel rendering and this value resolving to 21px, the checkbox vertical centering is off by 1px. Mozilla rounds subpixels up while chrome rounds down. This is a temporary fix until we can find a better solution.
  --#{$radio}__input--TranslateY: calc((var(--#{$radio}__label--LineHeight) * var(--#{$radio}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
}

// - Radio
.#{$radio} {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: var(--#{$radio}--GridGap);
  align-items: baseline;
  accent-color: var(--#{$radio}--AccentColor);

  &.pf-m-standalone {
    display: inline-grid;
    grid-template-columns: auto;
    min-height: var(--#{$radio}--m-standalone--MinHeight);

    .#{$radio}__input {
      align-self: center;
      transform: none;
    }
  }
}

// - Radio input
.#{$radio}__input {
  align-self: start;
  font-size: var(--#{$radio}__label--FontSize);
  line-height: var(--#{$radio}__label--LineHeight);

  // find height of single label, divide by two, offset by 50% of own height
  transform: translateY(var(--#{$radio}__input--TranslateY));

  // fixes a chrome issue where the left edge is cut off in a container with overflow hidden
  &:first-child {
    margin-inline-start: var(--#{$radio}__input--first-child--MarginInlineStart);
  }

  // fixes a chrome issue where the right edge is cut off in a container with overflow hidden
  &:last-child {
    margin-inline-end: var(--#{$radio}__input--last-child--MarginInlineEnd);
  }
}

.#{$radio}__label {
  font-size: var(--#{$radio}__label--FontSize);
  font-weight: var(--#{$radio}__label--FontWeight);
  line-height: var(--#{$radio}__label--LineHeight);
  color: var(--#{$radio}__label--Color);
}

.#{$radio}__description {
  grid-column: 2;
  font-size: var(--#{$radio}__description--FontSize);
  color: var(--#{$radio}__description--Color);
}

.#{$radio}__body {
  grid-column: 2;
  margin-block-start: var(--#{$radio}__body--MarginBlockStart);
}

.#{$radio}__label,
.#{$radio}__input {
  justify-self: start;

  @at-root label.#{$radio},
  & {
    cursor: pointer;
  }

  &:disabled,
  &.pf-m-disabled {
    --#{$radio}__label--Color: var(--#{$radio}__label--disabled--Color);

    cursor: not-allowed;
  }
}