| Class | Properties |
|---|---|
.scale-95 | transform: scale(.95); |
.scale-100 | transform: scale(100); |
.scale-105 | transform: scale(1.05); |
.scale-110 | transform: scale(1.1); |
Usage
Use .scale-{percentage} to scale an element by a given percentage.
<div class="avatar scale-95">
<img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-100">
<img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-105">
<img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-110">
<img class="avatar-img" src="..." alt="...">
</div>Variants
By default, no responsive or hover-state variants are generated for scale utilities.
Responsive
To include responsive variants like .md:scale-105, add "scale" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:
$responsive-variants: (
// ...
"scale",
);
Hover-state
To include hover-state variants like .hover:scale-105, add "scale" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"scale",
);