Initial commit

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

@@ -0,0 +1,215 @@
+.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;
+}