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-within | ||
active | ||
visited | ||
checked | ||
disabled |