$utilities: (
// Name for utility
"[string]": (
// CSS property (required)
property: [variable],
// CSS values (required)
values: [space-separated list or map (if class names and values should be different],
// Class name prefix to use instead of property name
class: [variable],
// Generate variants for different states
state: [space-separated list],
// Generate responsive classes
responsive: [boolean (false)],
// Enable fluid rescaling
rfs: [boolean (false)],
// Generate print classes,
print: [boolean (false)],
// Keep utility in RTL,
rtl: [boolean (true)]
)
);
Modify sizing utility for width
$utilities: (
"width": (
property: width,
class: w,
values: (
10: 10%,
20: 20%,
30: 30%,
40: 40%,
50: 50%,
60: 60%,
70: 70%,
80: 80%,
90: 90%,
100: 100%,
auto: auto
)
),
);
Generate cursor utilities
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
values: auto context-menu copy grab help pointer wait,
)
)
);
Generate opacity utilities
$utilities: map-merge(
$utilities,
(
"opacity": (
property: opacity,
class: o,
responsive: true,
print: true,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
)
);
Rename class prefix for "margin start" from .ms-* to .ml-*.
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
Remove interaction utilities
$utilities: map-merge(
$utilities,
(
"user-select": null,
"pointer-events": null
)
);
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.