superfly-css-utilities-layout/src/main/css/height-width.css

Layout utilities

:root {
  --u-height-halfx {
      height: 0.5rem;
  }
}

.u-height-halfx {
      height: 0.5rem !important;
}

@for $factor from 0 to 50 {
  :root {
    --u-height-$(factor)x {
        height: $(factor)rem;
    }
  }
  .u-height-$(factor)x {
      height: $(factor)rem !important;
  }
}

:root {
  --u-min-height-halfx {
      min-height: 0.5rem;
  }
}

.u-min-height-halfx {
    min-height: 0.5rem !important;
}

@for $factor from 0 to 50 {
  :root {
    --u-min-height-$(factor)x {
        min-height: $(factor)rem;
    }
  }
  .u-min-height-$(factor)x {
      min-height: $(factor)rem !important;
  }
}


:root {
  --u-max-height-halfx {
      max-height: 0.5rem;
  }
}

.u-max-height-halfx {
    max-height: 0.5rem !important;
}

@for $factor from 0 to 50 {
  :root {
    --u-max-height-$(factor)x {
        max-height: $(factor)rem;
    }
  }
  .u-max-height-$(factor)x {
      max-height: $(factor)rem !important;
  }
}


:root {
  --u-min-width-halfx {
      min-width: 0.5rem;
  }
}

.u-min-width-halfx {
      min-width: 0.5rem !important;
}

@for $factor from 0 to 50 {
  :root {
    --u-min-width-$(factor)x {
        min-width: $(factor)rem;
    }
  }
  .u-min-width-$(factor)x {
      min-width: $(factor)rem !important;
  }
}

:root {
  --u-max-width-halfx {
      max-width: 0.5rem;
  }
}

.u-max-width-halfx {
    max-width: 0.5rem !important;
}

:root {
  @for $factor from 0 to 50 {
    :root {
      --u-max-width-$(factor)x {
          max-width: $(factor)rem;
      }
    }
    .u-max-width-$(factor)x {
          max-width: $(factor)rem !important;
    }
  }
}

:root {
  --u-height-100 {
    height: 100%;
  }
}

.u-height-100 {
    height: 100% !important;
}

:root {
  --u-width-halfx {
      width: 0.5rem;
  }
}
.u-width-halfx {
      width: 0.5rem !important;
}

@for $factor from 0 to 50 {
  :root {
    --u-width-$(factor)x {
        width: $(factor)rem;
    }
  }
  .u-width-$(factor)x {
        width: $(factor)rem !important;
  }
}

:root {
  --u-width-100 {
    width: 100%;
  }
}

.u-width-100 {
    width: 100% !important;
}