Scrim

View on GitHub

import { Scrim } from '@sky-uk/ui-core';

Scrim provides a container with an eased gradient with a specified color from solid to transparent.

<Scrim $backgroundColor="products.glass.up" $height="100px" />

<Scrim $backgroundColor="products.glass.up" $height="100px" />

Props

$backgroundColor

$backgroundColor supports any of the system colors.

The following directions can also be applied:

up - Default direction from bottom to top.
right - From left to right.
left - From right to left.
down - From top to bottom.

The direction key is appended to the $backgroundColor value using dot notation. For example a Scrim with grey40 from right to left would be:

<Scrim $backgroundColor="grey40.left" $height="100px" />

<Scrim $backgroundColor="grey40.left" $height="100px" />

$pointerEvents

$pointerEvents supports standard CSS pointer-events.

By default this is set to auto. Should the Scrim be used in a context where it is stacked above an interactive element it can be set to none.

All children will retain their interactivity regardless of the $pointerEvents setting on the Scrim.

<Box $height="100px" $position="relative">
    <Button>Click me</Button>
    <Scrim $pointerEvents="none" $position="absolute" $top="0" $right="0" $bottom="0" $left="0" />
</Box>

<Box $height="100px" $position="relative">
    <Button>Click me</Button>
    <Scrim $pointerEvents="none" $position="absolute" $top="0" $right="0" $bottom="0" $left="0" />
</Box>

System Modifiers

The Scrim component supports the props applied using the following system functions: