WIP #3374 @5

diff --git a/wp-content/themes/CCV/resources/assets/styles/common/debug.styl b/wp-content/themes/CCV/resources/assets/styles/common/debug.styl
index e3e09dd25b6dea42bcda1db99cdba8f91a9172ad..2de34a4ae14c78fc0a8843fe671447a049febec4 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/common/debug.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/common/debug.styl
@@ -13,10 +13,10 @@ if ($debug.overlays)
       opacity: 0.2 !important
 
   html
-    lost-utility: overlay ($base-width) 1 10px theme('colors.green.700');
+    lost-utility: overlay ($base-width) 1 10px theme('colors.purple');
 
   body
-    lost-utility: overlay ($content-max-width * 0.9) 1 2px theme('colors.blue.300');
+    lost-utility: overlay ($content-max-width * 0.9) 1 2px #fc0;
 
     // Centre line
     &:after

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/elastic-arrow.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/elastic-arrow.styl
new file mode 100644 (file)
index 0000000..c5f91a7
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/elastic-arrow.styl
@@ -0,0 +1,26 @@
+$elastic-arrow-width = 36px
+
++above(500px)
+  .elastic-arrow
+    position: relative
+    padding-bottom: 1.5em
+
+    &:before, &:after
+      content: ''
+      position: absolute
+      left: -3.3em
+      background-repeat: no-repeat
+      width: $elastic-arrow-width
+      height: 100%
+
+    &:before
+      top: 0
+      background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='36px' height='300px' viewBox='0 0 36 300' preserveAspectRatio='none' style='enable-background:new 0 0 36 300;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st1%7Bfill:none;stroke:url(%23SVGID_1_);stroke-width:6;stroke-linecap:none;stroke-miterlimit:10;%7D%0A%3C/style%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='18' y1='1' x2='18' y2='299'%3E%3Cstop offset='0' style='stop-color:%23FFCFED'/%3E%3Cstop offset='1' style='stop-color:%23FF078B'/%3E%3C/linearGradient%3E%3Cline class='st1' x1='18' y1='0' x2='18' y2='300'/%3E%3C/svg%3E")
+      background-position: center
+      background-size: $elastic-arrow-width 100%
+
+    &:after
+      bottom: -2px // Pull down a little so arrow shaft doesn't stick out from behind arrow head
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='21'%3E%3Cpath d='M35.12.88a3.012 3.012 0 00-4.25 0l-9.91 9.91L18 13.95c-2 0 2 0 0 0l-3.05-3.25L5.13.88a3.012 3.012 0 00-4.25 0 3.012 3.012 0 000 4.25l14.99 14.99a3.012 3.012 0 004.25 0l15-14.99a3.012 3.012 0 000-4.25z' fill='%23ff078b'/%3E%3C/svg%3E")
+      background-position: bottom center
+      background-size: contain