diff options
| author | Jens Luyten <[email protected]> | 2020-02-14 08:24:16 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-02-14 09:24:16 +0200 |
| commit | 7a694396c1efdc70872968b0cae311c5b373ae68 (patch) | |
| tree | e85d9397d651f3ac61a58d06443b10e4bca4c9a7 | |
| parent | a9263e38fdfde6fe866223d0e9e3e532f68657c2 (diff) | |
| download | bootstrap-7a694396c1efdc70872968b0cae311c5b373ae68.tar.xz bootstrap-7a694396c1efdc70872968b0cae311c5b373ae68.zip | |
Add utility class for the user-select property (#30035)
* Add utility class for the user-select property
* Docs: Add new page for behavior utility classes - includes user select utility
* Update and rename behaviors.md to interactions.md
* Update sidebar.yml
Co-authored-by: Mark Otto <[email protected]>
Co-authored-by: XhmikosR <[email protected]>
Co-authored-by: Martijn Cuppens <[email protected]>
| -rw-r--r-- | scss/_utilities.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/4.3/utilities/interactions.md | 17 | ||||
| -rw-r--r-- | site/data/sidebar.yml | 1 |
3 files changed, 22 insertions, 0 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 60ac6dac2..dc3bd7238 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 000000000..13ca4ef90 --- /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 >}} +<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p> +<p class="user-select-auto">This paragraph has default select behavior.</p> +<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p> +{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index dd6a3676a..c1f9e3cc9 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 |