mirror of
https://github.com/datahub-project/datahub.git
synced 2025-07-30 12:59:51 +00:00
124 lines
2.8 KiB
SCSS
124 lines
2.8 KiB
SCSS
/// Contains all application level Sass mixins
|
|
|
|
/// Event wrapper
|
|
/// @param {Bool} $self [false] - Whether or not to include current selector
|
|
/// @link https://twitter.com/csswizardry/status/478938530342006784
|
|
@mixin on-event($self: false) {
|
|
@if $self {
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
@content;
|
|
}
|
|
} @else {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Make a context based selector a little more friendly
|
|
/// @param {String} $context
|
|
@mixin when-inside($context) {
|
|
#{$context} & {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/// Sets equal width and height properties, and 50% border radius
|
|
/// @param {Size} $size width and height for the image
|
|
@mixin round-image($size) {
|
|
width: $size;
|
|
height: $size;
|
|
max-width: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/// Breakpoint manager
|
|
/// @param {String} $breakpoint - a string that maps to a breakpoint key in $breakpoints
|
|
/// @requires $breakpoints
|
|
@mixin respond-to($breakpoint) {
|
|
$breakpoint-query: map-get($breakpoints, $breakpoint);
|
|
|
|
@if $breakpoint-query {
|
|
$query: if(
|
|
type-of($breakpoint-query) == 'string',
|
|
unquote($breakpoint-query),
|
|
inspect($breakpoint-query)
|
|
);
|
|
|
|
@media #{$query} {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@error 'Could not find `#{$breakpoint}` in `$breakpoints`';
|
|
}
|
|
}
|
|
|
|
/// Applies flex styles that center an elements contents on the main and cross axes
|
|
/// i.e. vertically and horizontally
|
|
@mixin flex-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/// Applies flex box centering using the flex-center mixin,
|
|
/// but sets the main axis to column
|
|
@mixin flex-column-center {
|
|
@include flex-center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/// Applies full -screen dimensions to the specified element
|
|
@mixin full-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/// Temp implementation before Auto Prefixer is installed
|
|
/// @link https://github.com/postcss/autoprefixer
|
|
|
|
/// Vendor prefix helper
|
|
/// @param {String} $property - CSS property to be prefixed
|
|
/// @param {*} $value to be prefixed
|
|
/// @param {List} $prefixes prepend prefixes
|
|
@mixin prefix($property, $value, $prefixes: ()) {
|
|
@each $prefix in $prefixes {
|
|
-#{$prefix}-#{$property}: $value;
|
|
}
|
|
|
|
#{$property}: $value;
|
|
}
|
|
|
|
|
|
/// Maintains the aspect ratio for a wrapped element
|
|
/// @param {Number} $width number value for the container's width ratio
|
|
/// @param {Number} $height number value for the container's with ratio
|
|
@mixin aspect-ratio($width, $height) {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
padding-top: ($height / $width) * 100%;
|
|
}
|
|
|
|
> * {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
}
|
|
}
|