Yumma CSS 3.15

Resize

Set how an element can be resized.

Limited availability

This feature does not work in some of the most widely-used browsers.

Chrome
Edge
FirefoxDesktop only
SafariDesktop only

Usage

None

Prevent an element from being resized.

Try resizing the text area to see how it changes in size.
<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="px-3 py-2 bc-silver-4 bw-1 fs-md r-none f:oc-silver-1 f:os-s f:ow-2" rows="4"></textarea>
</div>

Both

Allow an element to be resized both horizontally and vertically.

<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="max-h-50 max-w-100 px-3 py-2 bc-silver-4 bw-1 fs-md r-b f:oc-silver-1 f:os-s f:ow-2" rows="4"></textarea>
</div>

Horizontal

Allow an element to be resized horizontally.

<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="max-w-100 px-3 py-2 bc-silver-4 bw-1 fs-md r-h f:oc-silver-1 f:os-s f:ow-2" rows="4"></textarea>
</div>

Vertical

Allow an element to be resized vertically.

<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="max-h-100 px-3 py-2 bc-silver-4 bw-1 fs-md r-v f:oc-silver-1 f:os-s f:ow-2" rows="4"></textarea>
</div>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:r-*
Small≥640px
md:r-*
Medium≥768px
lg:r-*
Large≥1024px
xxl:r-*
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:r-*