mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-15 15:29:22 +01:00
Add hover utilities
remome several hobers refactoring hover utilities refactoring hover utilities
This commit is contained in:
parent
55f2192a39
commit
1fddb48aff
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
Loading…
x
Reference in New Issue
Block a user