From: Jérémy Fabre <Jeremy@iMac-de-Jeremy-2.fritz.box>
Date: Thu, 9 Feb 2017 17:55:23 +0000 (+0100)
Subject: Update block separators
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=ec54409307253fb06ce116f4cb8c1347e4261039;p=mezzo.git

Update block separators
---

diff --git a/app/static/src/sass/global/_typography.scss b/app/static/src/sass/global/_typography.scss
index 42041e2e..4f200b47 100755
--- a/app/static/src/sass/global/_typography.scss
+++ b/app/static/src/sass/global/_typography.scss
@@ -144,8 +144,19 @@ h3 {
 }
 
 hr {
+
+	&:before {
+		content: "";
+		display: block;
+		height: 1px;
+		background: rgba(255, 255, 255, 0.5);
+		width: 100%;
+		top: -3px;
+		position: relative;
+	}
+
 	border: 0;
-	border-top: 1px solid black;
+
 	height: 11px;
 	background-color: $color-main;
 	@include margin(5 0 2 0);
diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss
index c57a4ef7..8656c870 100644
--- a/app/static/src/sass/modules/_page.scss
+++ b/app/static/src/sass/modules/_page.scss
@@ -126,13 +126,13 @@ $module: ".page";
 
     hr + #{$module}__block--yellow {
 
-        @include margin-top(-2);
+        //@include margin-top(-2);
 
     }
 
     hr + #{$module}__block--black {
 
-        @include margin-top(-2);
+        //@include margin-top(-2);
 
     }
 
@@ -153,6 +153,26 @@ $module: ".page";
 
         &--yellow {
 
+            position: relative;
+            &:before {
+        		content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba($color-main, 0.5);
+        		width: 100%;
+        		top: -4px;
+        		position: absolute;
+        	}
+            &:after {
+                content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba($color-main, 0.5);
+        		width: 100%;
+        		bottom: -4px;
+        		position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -168,11 +188,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
             a:not(.button) {
@@ -202,6 +222,26 @@ $module: ".page";
             @include padding-bottom(2);
             @include margin(2 0 0 0);
 
+            position: relative;
+            &:before {
+        		content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba($color-main, 0.5);
+        		width: 100%;
+        		top: -4px;
+        		position: absolute;
+        	}
+            &:after {
+                content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba($color-main, 0.5);
+        		width: 100%;
+        		bottom: -4px;
+        		position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -226,11 +266,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
         }
@@ -243,6 +283,26 @@ $module: ".page";
             @include padding-bottom(2);
             @include margin(2 0 0 0);
 
+            position: relative;
+            &:before {
+        		content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba(255, 255, 255, 0.5);
+        		width: 100%;
+        		top: -4px;
+        		position: absolute;
+        	}
+            &:after {
+                content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba(255, 255, 255, 0.5);
+        		width: 100%;
+        		bottom: -4px;
+        		position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -267,11 +327,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
         }
@@ -284,6 +344,26 @@ $module: ".page";
             @include padding-bottom(2);
             @include margin(2 0);
 
+            position: relative;
+            &:before {
+        		content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba(255, 255, 255, 0.5);
+        		width: 100%;
+        		top: -4px;
+        		position: absolute;
+        	}
+            &:after {
+                content: "";
+        		display: block;
+        		height: 1px;
+        		background: rgba(255, 255, 255, 0.5);
+        		width: 100%;
+        		bottom: -4px;
+        		position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -308,11 +388,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
         }
diff --git a/app/templates/core/inc/block.html b/app/templates/core/inc/block.html
index c270bab0..d4252689 100644
--- a/app/templates/core/inc/block.html
+++ b/app/templates/core/inc/block.html
@@ -3,7 +3,7 @@
     <div class="pb2">
         {% for block in blocks %}
             {% if block.content %}
-                {% if not forloop.first and block.with_separator %}
+                {% if block.with_separator %}
                     <hr />
                 {% endif %}
                 <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">