// // shapes.scss // Theme component //
.shape {
position: absolute; pointer-events: none;
}
.shape > * {
display: block;
}
.shape:not() {
overflow: hidden;
}
.shape:not() > * {
transform: scale(2);
}
// Hide SVG images in IE
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.shape > svg { display: none; }
}
// Position
.shape-top {
top: 0; right: 0; left: 0;
}
.shape-top > * {
transform-origin: bottom center;
}
.shape-right {
top: 0; right: 0; bottom: 0; left: 0;
}
.shape-right > * {
position: inherit; top: inherit; bottom: inherit; right: inherit; transform-origin: center left;
}
.shape-bottom {
right: 0; bottom: 0; left: 0;
}
.shape-bottom > * {
transform-origin: top center;
}
.shape-bottom-100 {
right: 0; bottom: 100%; left: 0;
}
.shape-bottom-100 > * {
transform-origin: top center;
}
.shape-left {
top: 0; right: 0; bottom: 0; left: 0;
}
.shape-left > * {
position: inherit; top: inherit; bottom: inherit; left: inherit; transform-origin: center right;
}
// Orientation
.shape-fluid-x > * {
width: 100%; height: auto;
}
.shape-fluid-y > * {
width: auto; height: 100%;
}
// Blurs
.shape-blur-1 {
top: 0; right: 0; left: 0; @include media-breakpoint-up(md) { bottom: 0; left: 50%; right: auto; }
}
.shape-blur-1 > * {
width: 100%; height: auto; @include media-breakpoint-up(md) { width: auto; height: 100%; }
}
.shape-blur-2 {
top: 0; right: 0; left: 0; @include media-breakpoint-up(md) { bottom: 0; right: 50%; left: auto; }
}
.shape-blur-2 > * {
width: 100%; height: auto; @include media-breakpoint-up(md) { width: auto; height: 100%; float: right; }
}
.shape-blur-3 {
top: 0; right: 0; left: 0;
}
.shape-blur-3 > * {
width: 100%; height: auto;
}
.shape-blur-4 {
top: 0; bottom: 0; left: 50%; transform: translateX(-50%) scale(1.3);
}
.shape-blur-4 > * {
width: auto; height: 100%;
}