Refs #2629: updating routes stop_points form styles

3 files changed, 69 insertions, 3 deletions

diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index fd5f90006..99e5b41bf 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -11,3 +11,4 @@
 @import 'layout'
 
 @import 'components/*'
+@import 'modules/routes_stopoints'
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index 933c9dc2a..f4894c46a 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -502,7 +502,7 @@ $cbx-size: 20px
           margin: 0
           padding-right: 0
           padding-left: 0
-          width: 34px
+          width: 25px
           text-align: center
 
       .form-group
@@ -518,7 +518,7 @@ $cbx-size: 20px
 
     @for $i from 1 through 10
       > div.actions-#{$i}
-        width: 34px * $i + 20px
+        width: 25px * $i + 20px
 
   .remove_fields
     height: 34px
@@ -576,7 +576,7 @@ $cbx-size: 20px
 
     @for $i from 1 through 10
       > div.actions-#{$i}
-        width: 34px * $i + 20px
+        width: 25px * $i + 20px
 
 .nested-linker
   padding: 20px 0 0 0
diff --git a/app/assets/stylesheets/modules/_routes_stopoints.sass b/app/assets/stylesheets/modules/_routes_stopoints.sass
new file mode 100644
index 000000000..029221605
--- /dev/null
+++ b/app/assets/stylesheets/modules/_routes_stopoints.sass
@@ -0,0 +1,65 @@
+//----------------------//
+//  Routes Stop Points  //
+//----------------------//
+
+#stop_points
+  .nested-head > .wrapper > div:first-child
+    padding-left: 20px
+
+  .nested-fields
+    > .wrapper
+      > div:first-child
+        position: relative
+        padding-left: 20px /* intial value is 10 */
+
+        &:before
+          content: ''
+          display: block
+          width: 10px
+          height: 10px
+          background-color: #fff
+          border: 2px solid $blue
+          border-radius: 50%
+          position: absolute
+          z-index: 5
+          left: 0
+          top: 50%
+          margin-top: -5px
+
+        &:after
+          content: ''
+          display: block
+          width: 4px
+          margin: 0 3px
+          background-color: rgba($grey, 0.5)
+          position: absolute
+          z-index: 3
+          top: 0
+          left: 0
+          bottom: 0
+
+      + .map_container
+        > .map_metas
+          position: relative
+          padding-left: 25px
+
+          &:before
+            content: ''
+            display: block
+            width: 4px
+            margin: 0 3px
+            background-color: rgba($grey, 0.5)
+            position: absolute
+            z-index: 3
+            top: 0
+            bottom: 0
+            left: 5px
+
+    &:last-child > .wrapper > div:first-child
+      &:after
+        bottom: 50%
+
+  .nested-fields:first-child > .wrapper > div:first-child,
+  .nested-head + .nested-fields > .wrapper > div:first-child
+    &:after
+      top: 50%