Merge pull request #357 from Trim/fix-sidebar-background

fix gasp between backgrounds of body and sidebar divs

Author: Oumph

app/assets/stylesheets/RonRonnement.scss

@@ -9,6 +9,7 @@ $PX_MARGE_GAUCHE: 42px;
 $PX_MARGE_DROITE: 30px;
 $PX_BANDEAU: 7px;
 $PX_BRANDING_LARG: 201px;
+$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px;
 $PX_SITE_PAD_DROIT: 42px;
 $PX_CONT_TOP: 34px;
 

app/assets/stylesheets/contrib/RonRonnement-Classic.scss

@@ -40,6 +40,7 @@ $PX_MARGE_GAUCHE: 42px;
 $PX_MARGE_DROITE: 30px;
 $PX_BANDEAU: 7px;
 $PX_BRANDING_LARG: 201px;
+$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px;
 $PX_SITE_PAD_DROIT: 42px;
 $PX_CONT_TOP: 34px;
 
@@ -88,15 +89,11 @@ body {
   max-width: 150ex;
   margin: 0 auto;
   border: solid $C_BORDER_FONCE;
-  border-width: 0 1px;
-  background: linear-gradient(
-      90deg,
-      $C_CLAIR,
-      $C_CLAIR $PX_BRANDING_LARG,
-      $C_CONTAINER $PX_BRANDING_LARG,
-      $C_CONTAINER
-    )
-    #fff;
+  border-width: 0 $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-repeat: no-repeat;
+  background-size: $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT, auto;
+  background-position: 0, $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-image: linear-gradient($C_CLAIR, $C_CLAIR), linear-gradient($C_CONTAINER, $C_CONTAINER);
 }
 
 a {
@@ -360,7 +357,6 @@ a.edit_client_app,
   width: $PX_BRANDING_LARG;
   text-align: left;
   font-size: 0.8em;
-  background: $C_CLAIR;
 
   a {
     font-weight: inherit;

app/assets/stylesheets/contrib/RonRonnement-Sepia.scss

@@ -36,6 +36,7 @@ $PX_MARGE_DROITE: 30px;
 $PX_TOP: 16px;
 $PX_BANDEAU: 7px;
 $PX_BRANDING_LARG: 201px;
+$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px;
 $PX_BRANDING_HEIGHT: 186px;
 $PX_SITE_PAD_DROIT: 42px;
 $PX_CONT_TOP: 34px;
@@ -85,8 +86,8 @@ body {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: $PX_TOP;
-  border-left: 1px #333 solid;
-  border-right: 1px #333 solid;
+  border-left: $PX_BODY_BORDER_WIDTH_LEFT_RIGHT #333 solid;
+  border-right: $PX_BODY_BORDER_WIDTH_LEFT_RIGHT #333 solid;
   background: #fff;
 }
 
@@ -285,7 +286,6 @@ input[type="submit"] {
   width: $PX_BRANDING_LARG;
   text-align: left;
   font-size: small;
-  background: $C_CLAIR;
 
   a {
     font-weight: inherit;

app/assets/stylesheets/parts/a_tag.scss

@@ -21,15 +21,11 @@ body {
   max-width: $BODY_MAX_WIDTH;
   margin: 0 auto;
   border: solid #999;
-  border-width: 0 1px;
-  background: linear-gradient(
-      90deg,
-      $C_CLAIR,
-      $C_CLAIR $PX_BRANDING_LARG,
-      $C_CONTAINER $PX_BRANDING_LARG,
-      $C_CONTAINER
-    )
-    #fff;
+  border-width: 0 $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-repeat: no-repeat;
+  background-size: $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT, auto;
+  background-position: 0, $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-image: linear-gradient($C_CLAIR, $C_CLAIR), linear-gradient($C_CONTAINER, $C_CONTAINER);
 }
 
 a {

app/assets/stylesheets/parts/sidebar.scss

@@ -4,7 +4,6 @@
   text-align: left;
   font-size: 0.8em;
   line-height: 1.3;
-  background: $C_CLAIR;
 
   a {
     font-weight: inherit;