Effects
Fluid Padding v1.0.8
Utilities for sets min and max paddings for screen size without breakpoints.
Class
| class | css |
|---|---|
| fluid p-min- {value}p-max- {value} | @media screen and (min-width: 20rem) { .fluid.p-min-{modifier}.p-max-{modifier} { padding: calc({min} + 0 * ((100vw - 20rem) / 30)) } } @media screen and (min-width: 50rem) { .fluid.p-min-{modifier}.p-max-{modifier} { padding: {max} } } |
| value | modifier | |
|---|---|---|
| 0 | 0 | |
| 1 | 0.25rem | |
| 2 | 0.5rem | |
| 3 | 0.75rem | |
| 4 | 1rem | |
| 5 | 1.25rem | |
| 6 | 1.5rem | |
| 8 | 2rem | |
| 10 | 2.5rem | |
| 12 | 3rem | |
| 16 | 4rem | |
| 20 | 5rem | |
| 24 | 6rem | |
| 32 | 8rem | |
| 40 | 10rem | |
| 48 | 12rem | |
| 56 | 14rem | |
| 64 | 16rem | |
| 72 v1.1.3 | 18rem | |
| 80 v1.1.3 | 20rem | |
| 88 v1.1.3 | 22rem | |
| 96 v1.1.3 | 24rem | |
| 104 v1.1.3 | 26rem | |
| 112 v1.1.3 | 28rem |
Usage
Set padding spacing adaptively to the width of the screen size. When the smaller screen size, the padding is p-10 max. Meanwhile, when the screen size is getting bigger, the padding is p-4 max.
<!-- Example -->
<y class="fluid p-min-10 p-max-4">
...
</y>Mix with other fluid utilities, such as Fluid Margin, Fluid Font Size.
<!-- Example -->
<y class="fluid p-min-8 p-max-4 m-min-4 m-max-2 text-min-lg text-max-md">
...
</y>Variant
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | |
| Dark Theme | ||
| hover | ||
| group-hover | ||
| focus | ||
| focus-visible | ||
| focus-within | ||
| active | ||
| visited | ||
| checked | ||
| disabled |
