Sha256: ba1f7dac6efd88f40de80f5b8bcd1429b6b10d34dcd72910056cba0d182dd61a
Contents?: true
Size: 1.52 KB
Versions: 517
Compression:
Stored size: 1.52 KB
Contents
@import "../tokens/colors";
@import "../tokens/spacing";
$overlay_sizes: (
full: 100%,
xxs: $space_xxs,
xs: $space_xs,
sm: $space_sm,
md: $space_md,
lg: $space_lg,
xl: $space_xl,
);
$overlay_positions: left, right, top, bottom, x, y;
$overlay_colors: (
card_light: $card_light,
card_dark: $card_dark,
bg_dark: $bg_dark,
bg_light: $bg_light,
);
@mixin overlay($direction, $size, $color) {
display: block;
position: absolute;
pointer-events: none;
z-index: 1;
content: "";
@if $direction == "left" {
inset: 0 auto 0 0;
background: linear-gradient(to right, $color 0%, transparent 100%);
width: $size;
}
@if $direction == "right" {
inset: 0 0 0 auto;
background: linear-gradient(to left, $color 0%, transparent 100%);
width: $size;
}
@if $direction == "top" {
inset: 0 0 auto 0;
background: linear-gradient(to bottom, $color 0%, transparent 100%);
height: $size;
}
@if $direction == "bottom" {
inset: auto 0 0 0;
background: linear-gradient(to top, $color 0%, transparent 100%);
height: $size;
}
}
[class^=pb_overlay] {
position: relative;
@each $color_name, $color in $overlay_colors {
.overlay_#{$color_name} {
@each $name, $size in $overlay_sizes {
@each $position in $overlay_positions {
&_#{$position}_#{$name} {
@include overlay($position, $size, $color);
}
}
}
}
}
.overlay_linear_gradient {
inset: 0;
position: absolute;
pointer-events: none;
z-index: 1;
}
}
Version data entries
517 entries across 517 versions & 1 rubygems