[MOV] website: add s_process_steps snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937
task-2088157

1 files changed, 75 insertions, 0 deletions

diff --git a/addons/website/static/src/snippets/s_process_steps/000.scss b/addons/website/static/src/snippets/s_process_steps/000.scss
new file mode 100644
index 00000000000..a0b7f942b06
--- /dev/null
+++ b/addons/website/static/src/snippets/s_process_steps/000.scss
@@ -0,0 +1,75 @@
+.s_process_steps {
+    .s_process_step_icon {
+        margin: $grid-gutter-width 0;
+        span {
+            display: block;
+            overflow: hidden;
+        }
+        .fa {
+            display: block;
+        }
+    }
+    .s_process_step_content {
+        padding: 0 $grid-gutter-width/2;
+    }
+    @include media-breakpoint-up(lg) {
+        overflow-x: hidden;
+        .s_process_step {
+            .s_process_step_icon {
+                position: relative;
+                z-index: 1;
+                span:after {
+                    content: '';
+                    z-index: -1;
+                    border-top: 1px solid gray('500');
+                    @include o-position-absolute(50%, 0, 0, auto);
+                }
+            }
+            &:not(:first-child):not(:last-child) .s_process_step_icon {
+                span:after {
+                    width: 100%;
+                }
+            }
+            &:first-child .s_process_step_icon,
+            &:last-child .s_process_step_icon {
+                span:after {
+                    width: 1000%;
+                }
+                .fa {
+                    &:after {
+                        content: '';
+                        z-index: -1;
+                        @include o-position-absolute(50%, auto, 0, auto);
+                        width: 100%;
+                        border-top: 1px solid gray('500');
+                    }
+                    &.mx-auto:after {
+                        width: 50%;
+                    }
+                }
+            }
+            &:first-child .s_process_step_icon {
+                .fa:after { right: 0; }
+                .fa.float-right:after { width: 0; }
+            }
+            &:last-child .s_process_step_icon {
+                span:after { left: 0; }
+                .fa {
+                    &:after { left: 0; }
+                    &.float-left:after { width: 0; }
+                }
+            }
+        }
+    }
+
+    $s_process_step_line_fw: true;
+
+    @if $s_process_step_line_fw == true {
+        .s_process_step:first-child,
+        .s_process_step:last-child {
+            .s_process_step_icon > span:after {
+                display: none;
+            }
+        }
+    }
+}