]> git.parisson.com Git - mezzo.git/commitdiff
Update the dashed style to make it work on multiple lines
authorJérémy Fabre <Jeremy@iMac-de-Jeremy.local>
Fri, 4 Nov 2016 10:30:21 +0000 (11:30 +0100)
committerJérémy Fabre <Jeremy@iMac-de-Jeremy.local>
Fri, 4 Nov 2016 10:30:21 +0000 (11:30 +0100)
app/static/src/sass/modules/_dashed.scss

index 6a005535414c62b350b65571accf835b90ac4504..e8dc87db4e9b39bdb29eb69d5dae2289d925e3e9 100644 (file)
@@ -12,7 +12,7 @@ $module: ".dashed";
         content: '.';
     }
 
-    &:after {
+    /*&:after {
         position: absolute;
         height: 40%;
         width: 100%;
@@ -22,7 +22,14 @@ $module: ".dashed";
         content: "";
         background: $color-main;
         z-index: -1;
-    }
+    }*/
+    background-image: -webkit-linear-gradient(transparent 14px,$color-main 14px,$color-main 34px,transparent 34px);
+    background-image:    -moz-linear-gradient(transparent 14px,$color-main 14px,$color-main 34px,transparent 34px);
+    background-image:     -ms-linear-gradient(transparent 14px,$color-main 14px,$color-main 34px,transparent 34px);
+    background-image:      -o-linear-gradient(transparent 14px,$color-main 14px,$color-main 34px,transparent 34px);
+    background-image:         linear-gradient(transparent 14px,$color-main 14px,$color-main 34px,transparent 34px);
+    background-repeat: repeat;
+    background-size: 16px 48px;
 
     &--gray {
 
@@ -45,6 +52,14 @@ $module: ".dashed";
 
         @include padding-right(.5);
 
+        background-image: -webkit-linear-gradient(transparent 7px,$color-main 7px,$color-main 16px,transparent 16px);
+        background-image:    -moz-linear-gradient(transparent 7px,$color-main 7px,$color-main 16px,transparent 16px);
+        background-image:     -ms-linear-gradient(transparent 7px,$color-main 7px,$color-main 16px,transparent 16px);
+        background-image:      -o-linear-gradient(transparent 7px,$color-main 7px,$color-main 16px,transparent 16px);
+        background-image:         linear-gradient(transparent 7px,$color-main 7px,$color-main 16px,transparent 16px);
+        background-repeat: repeat;
+        background-size: 16px 24px;
+
     }
 
 }