60 lines
1.5 KiB
SCSS
60 lines
1.5 KiB
SCSS
// -----------------------------------------------------------------------------
|
|
// This file contains all application-wide Sass mixins.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
/// Event wrapper
|
|
/// @author Harry Roberts
|
|
/// @param {Bool} $self [false] - Whether or not to include current selector
|
|
/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
|
|
@mixin on-event($self: false) {
|
|
@if $self {
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:focus-within {
|
|
@content;
|
|
}
|
|
} @else {
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:focus-within {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Make a context based selector a little more friendly
|
|
/// @author Kitty Giraudel
|
|
/// @param {String} $context
|
|
@mixin when-inside($context) {
|
|
#{$context} & {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/// Mixin to manage responsive breakpoints
|
|
/// @author Kitty Giraudel
|
|
/// @param {String} $breakpoint - Breakpoint name
|
|
/// @require $breakpoints
|
|
@mixin respond-to($breakpoint) {
|
|
// If the key exists in the map
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
|
// Prints a media query based on the value
|
|
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// If the key doesn't exist in the map
|
|
@else {
|
|
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
|
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
|
|
}
|
|
}
|
|
|
|
@mixin font-size($step) {
|
|
font-size: var(--font-size-#{$step});
|
|
line-height: calc(8px + 2ex);
|
|
} |