rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scss/mixins/_utilities.scss
View File

@ -20,6 +20,9 @@
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if($property-class == null, "", $property-class); $property-class: if($property-class == null, "", $property-class);
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
// Don't prefix if value key is null (eg. with shadow class) // Don't prefix if value key is null (eg. with shadow class)
@ -44,6 +47,14 @@
#{$property}: $value if($enable-important-utilities, !important, null); #{$property}: $value if($enable-important-utilities, !important, null);
} }
} }
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
@each $property in $properties {
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
}
} }
} }
} }

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