diff options
| author | Nikita Mikhaylov <[email protected]> | 2020-09-14 08:33:31 +0300 |
|---|---|---|
| committer | Martijn Cuppens <[email protected]> | 2020-11-13 20:16:05 +0100 |
| commit | 1fddb48affc5cbf45effe65ef0a45b56b252f6fa (patch) | |
| tree | 2fd1583e3567fc4fdd3561e3ea5a1a93ad3bb2d4 /site/content | |
| parent | 55f2192a398cdb4446937322f14b3e7e359a0d00 (diff) | |
| download | bootstrap-1fddb48affc5cbf45effe65ef0a45b56b252f6fa.tar.xz bootstrap-1fddb48affc5cbf45effe65ef0a45b56b252f6fa.zip | |
Add hover utilities
remome several hobers
refactoring hover utilities
refactoring hover utilities
Diffstat (limited to 'site/content')
| -rw-r--r-- | site/content/docs/5.0/utilities/api.md | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md index c3fa5b150..a0ba976d8 100644 --- a/site/content/docs/5.0/utilities/api.md +++ b/site/content/docs/5.0/utilities/api.md @@ -264,3 +264,59 @@ $utilities: map-merge( ) ); ``` + +## Adding pseudo-classes to utilities + +With the `state` option, pseudo-class utilities can be generated: + +```scss +$utilities: ( + "shadow": ( + property: box-shadow, + state: hover focus, + class: shadow, + values: ( + null: $box-shadow, + sm: $box-shadow-sm, + lg: $box-shadow-lg, + none: none, + ) + ) +); +``` + +Output: + +```css +.shadow-hover:hover { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +} + +.shadow-focus:focus { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +} + +.shadow-sm-hover:hover { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +} + +.shadow-sm-focus:focus { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +} + +.shadow-lg-hover:hover { + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +} + +.shadow-lg-focus:focus { + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +} + +.shadow-none-hover:hover { + box-shadow: none !important; +} + +.shadow-none-focus:focus { + box-shadow: none !important; +} +``` |