package.utilities.Sizing.sizing.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 *;

$pf-v6-u-sizing--min-max--breakpoint-map: build-breakpoint-map();
// stylelint-disable

// Width options
$pf-v6-u-width-options: (
  w-auto:    (width auto),
  w-initial: (width initial),
  w-inherit: (width inherit),
  w-0:       (width 0%),
  w-25:      (width 25%),
  w-33:      (width calc(100% / 3)),
  w-50:      (width 50%),
  w-66:      (width calc(100% / 3 * 2)),
  w-75:      (width 75%),
  w-100:     (width 100%),
  w-25vw:    (width 25vw),
  w-33vw:    (width calc(100vw / 3)),
  w-50vw:    (width 50vw),
  w-66vw:    (width calc(100vw / 3 * 2)),
  w-75vw:    (width 75vw),
  w-100vw:   (width 100vw)
);

// Height options
$pf-v6-u-height-options: (
  h-auto:    (height auto),
  h-initial: (height initial),
  h-inherit: (height inherit),
  h-0:       (height 0%),
  h-25:      (height 25%),
  h-33:      (height calc(100% / 3)),
  h-50:      (height 50%),
  h-66:      (height calc(100% / 3 * 2)),
  h-75:      (height 75%),
  h-100:     (height 100%),
  h-25vh:    (height 25vh),
  h-33vh:    (height calc(100vh / 3)),
  h-50vh:    (height 50vh),
  h-66vh:    (height calc(100vh / 3 * 2)),
  h-75vh:    (height 75vh),
  h-100vh:   (height 100vh)
);

@include pf-v6-utility-builder($pf-v6-u-width-options, $pf-v6-global--breakpoint-list);
@include pf-v6-utility-builder($pf-v6-u-height-options, $pf-v6-global--breakpoint-list);

.#{$pf-prefix}u-min-width {
  --#{$pf-prefix}u-min-width--MinWidth: 0;

  @include pf-v6-build-css-variable-stack(
    "min-width",
    "--#{$pf-prefix}u-min-width--MinWidth",
    $pf-v6-u-sizing--min-max--breakpoint-map,
    $important: true
  );
}

.#{$pf-prefix}u-max-width {
  --#{$pf-prefix}u-max-width--MaxWidth: auto;

  @include pf-v6-build-css-variable-stack(
    "max-width",
    "--#{$pf-prefix}u-max-width--MaxWidth",
    $pf-v6-u-sizing--min-max--breakpoint-map,
    $important: true
  );
}

.#{$pf-prefix}u-min-height {
  --#{$pf-prefix}u-min-height--MinHeight: 0;

  @include pf-v6-build-css-variable-stack(
    "min-height",
    "--#{$pf-prefix}u-min-height--MinHeight",
    $pf-v6-u-sizing--min-max--breakpoint-map,
    $important: true
  );
}

.#{$pf-prefix}u-max-height {
  --#{$pf-prefix}u-max-height--MaxHeight: auto;

  @include pf-v6-build-css-variable-stack(
    "max-height",
    "--#{$pf-prefix}u-max-height--MaxHeight",
    $pf-v6-u-sizing--min-max--breakpoint-map,
    $important: true
  );
}

// stylelint-enable