mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 12:51:52 +02:00
Code Issues Releases Wiki Activity

Add hover utilities

Browse Source 
remome several hobers

refactoring hover utilities

refactoring hover utilities
This commit is contained in:
Nikita Mikhaylov
2020-09-14 08:33:31 +03:00
committed by Martijn Cuppens
parent 55f2192a39
commit 1fddb48aff
2 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
site/content/docs/5.0/utilities/api.md
View File

@@ -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;
}
```