sky/assets/scss/argon-design-system/separator.scss

216 lines
2.1 KiB
SCSS
Executable File

.separator {
position: absolute;
top: auto;
left: 0;
right: 0;
width: 100%;
height: 150px;
z-index: 1;
transform: translateZ(0);
overflow: hidden;
pointer-events: none;
svg {
position: absolute;
pointer-events: none;
}
}
.separator-top {
top: 0;
bottom: auto;
svg {
top: 0;
}
}
.separator-bottom {
top: auto;
bottom: 0;
svg {
bottom: 0;
}
}
.separator-inverse {
transform: rotate(180deg);
}
// Styles
.separator-skew {
height: 80px;
@include media-breakpoint-down(md) {
z-index: 0;
}
}
.mt-md,
.my-md
{
margin-top: 4rem !important;
}
.mr-md,
.mx-md
{
margin-right: 4rem !important;
}
.mb-md,
.my-md
{
margin-bottom: 4rem !important;
}
.ml-md,
.mx-md
{
margin-left: 4rem !important;
}
.m-lg
{
margin: 6rem !important;
}
.mt-lg,
.my-lg
{
margin-top: 6rem !important;
}
.mr-lg,
.mx-lg
{
margin-right: 6rem !important;
}
.mb-lg,
.my-lg
{
margin-bottom: 6rem !important;
}
.ml-lg,
.mx-lg
{
margin-left: 6rem !important;
}
.m-xl
{
margin: 8rem !important;
}
.mt-xl,
.my-xl
{
margin-top: 8rem !important;
}
.mr-xl,
.mx-xl
{
margin-right: 8rem !important;
}
.mb-xl,
.my-xl
{
margin-bottom: 8rem !important;
}
.ml-xl,
.mx-xl
{
margin-left: 8rem !important;
}
.pt-lg,
.py-lg
{
padding-top: 6rem !important;
}
.pr-lg,
.px-lg
{
padding-right: 6rem !important;
}
.pb-lg,
.py-lg
{
padding-bottom: 6rem !important;
}
.pl-lg,
.px-lg
{
padding-left: 6rem !important;
}
.p-xl
{
padding: 8rem !important;
}
.pt-xl,
.py-xl
{
padding-top: 8rem !important;
}
.pr-xl,
.px-xl
{
padding-right: 8rem !important;
}
.pb-xl,
.py-xl
{
padding-bottom: 8rem !important;
}
.pl-xl,
.px-xl
{
padding-left: 8rem !important;
}
.m-auto
{
margin: auto !important;
}
.mt-auto,
.my-auto
{
margin-top: auto !important;
}
.mr-auto,
.mx-auto
{
margin-right: auto !important;
}
.mb-auto,
.my-auto
{
margin-bottom: auto !important;
}
.ml-auto,
.mx-auto
{
margin-left: auto !important;
}