diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 60ac6dac27..dc3bd7238b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -443,6 +443,10 @@ $utilities: map-merge( class: font, values: (monospace: $font-family-monospace) ), + "user-select": ( + property: user-select, + values: all auto none + ), "rounded": ( property: border-radius, class: rounded, diff --git a/site/content/docs/4.3/utilities/interactions.md b/site/content/docs/4.3/utilities/interactions.md new file mode 100644 index 0000000000..13ca4ef90e --- /dev/null +++ b/site/content/docs/4.3/utilities/interactions.md @@ -0,0 +1,17 @@ +--- +layout: docs +title: Interactions +description: Utility classes that change how users interact with contents of a website. +group: utilities +toc: false +--- + +## Text selection + +Change the way in which the content is selected when the user interacts with it. + +{{< example >}} +

This paragraph will be entirely selected when clicked by the user.

+

This paragraph has default select behavior.

+

This paragraph will not be selectable when clicked by the user.

+{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index dd6a3676ac..c1f9e3cc9f 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -80,6 +80,7 @@ - title: Display - title: Flex - title: Float + - title: Interactions - title: Overflow - title: Position - title: Shadows