68 lines
1.6 KiB
SCSS
68 lines
1.6 KiB
SCSS
@use './variables' as vars;
|
|
|
|
// Reusable chamfer/fillet container mixin used by cards, lists, forms, etc.
|
|
@mixin cd-chamfered-container($fillet: vars.$cyberduck-border-fillet) {
|
|
--cd-list-fillet: var(--cyberduck-border-fillet, #{$fillet});
|
|
|
|
border: 1px solid var(--color-border-default);
|
|
border-radius: 0;
|
|
clip-path: polygon(
|
|
0 0,
|
|
calc(100% - var(--cd-list-fillet)) 0,
|
|
100% var(--cd-list-fillet),
|
|
100% 100%,
|
|
var(--cd-list-fillet) 100%,
|
|
0 calc(100% - var(--cd-list-fillet))
|
|
);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Mixin: add corner accent L-shape at top-left and bottom-right
|
|
// Generalized name: cd-accent-container
|
|
@mixin cd-accent-container(
|
|
$color,
|
|
$size: vars.$cyberduck-accent-size,
|
|
$length: vars.$cyberduck-accent-length
|
|
) {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: $length;
|
|
height: $length;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(to right, $color 0 $size, transparent $size),
|
|
linear-gradient(to bottom, $color 0 $size, transparent $size);
|
|
background-repeat: no-repeat;
|
|
background-position:
|
|
left top,
|
|
left top;
|
|
z-index: 1000;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: $length;
|
|
height: $length;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(to left, $color 0 $size, transparent $size),
|
|
linear-gradient(to top, $color 0 $size, transparent $size);
|
|
background-repeat: no-repeat;
|
|
background-position:
|
|
right bottom,
|
|
right bottom;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
|