From dc371b83b871f7c9c11aef22159e71e118b0ddcc Mon Sep 17 00:00:00 2001
From: Simon Lehericey <simon.lehericey@gmail.com>
Date: Wed, 3 May 2017 16:50:36 +0200
Subject: [PATCH] CSS: add new application layout + CSS

Without bootstrap!
---
 app/assets/stylesheets/application.scss       |  2 --
 app/assets/stylesheets/common.scss            |  7 +++++
 app/assets/stylesheets/custom_reset.scss      | 27 +++++++++++++++++++
 app/assets/stylesheets/landing.scss           |  2 --
 app/assets/stylesheets/new_application.scss   |  9 +++++++
 app/assets/stylesheets/new_footer.scss        |  3 +--
 .../{header.scss => new_header.scss}          |  4 ---
 app/assets/stylesheets/utils.scss             | 11 ++++++++
 app/views/layouts/new_application.html.haml   |  2 +-
 config/initializers/assets.rb                 |  2 +-
 10 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/stylesheets/common.scss
 create mode 100644 app/assets/stylesheets/custom_reset.scss
 create mode 100644 app/assets/stylesheets/new_application.scss
 rename app/assets/stylesheets/{header.scss => new_header.scss} (88%)
 create mode 100644 app/assets/stylesheets/utils.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index dd8e19bbe..33338dbdb 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -33,13 +33,11 @@
 // = require etapes
 // = require fonts
 // = require france_connect_particulier
-// = require header
 // = require landing
 // = require left_panel
 // = require login
 // = require main_container
 // = require navbar
-// = require new_footer
 // = require notification_alert
 // = require pieces_justificatives_fields
 // = require pj_modal
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
new file mode 100644
index 000000000..bbf87837b
--- /dev/null
+++ b/app/assets/stylesheets/common.scss
@@ -0,0 +1,7 @@
+@import "typography";
+
+body {
+  @extend %new-type;
+  font-size: 16px;
+  line-height: 1.42857143;
+}
diff --git a/app/assets/stylesheets/custom_reset.scss b/app/assets/stylesheets/custom_reset.scss
new file mode 100644
index 000000000..009fd7c0d
--- /dev/null
+++ b/app/assets/stylesheets/custom_reset.scss
@@ -0,0 +1,27 @@
+html,
+body {
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a {
+  text-decoration: none;
+}
+
+// remove dotted outline on firefox
+:focus {
+  outline: none;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
index bc8481080..e5f6b2251 100644
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@@ -2,10 +2,8 @@
 @import "colors";
 @import "mixins";
 @import "placeholders";
-@import "typography";
 
 .landing {
-  @extend %new-type;
   background-color: #FFFFFF;
 }
 
diff --git a/app/assets/stylesheets/new_application.scss b/app/assets/stylesheets/new_application.scss
new file mode 100644
index 000000000..839ecd613
--- /dev/null
+++ b/app/assets/stylesheets/new_application.scss
@@ -0,0 +1,9 @@
+// = require reset
+// = require custom_reset
+// = require common
+// = require utils
+// = require fonts
+// = require new_header
+// = require new_footer
+// = require landing
+// = require navbar
diff --git a/app/assets/stylesheets/new_footer.scss b/app/assets/stylesheets/new_footer.scss
index ffdaa9e6b..de93cd97d 100644
--- a/app/assets/stylesheets/new_footer.scss
+++ b/app/assets/stylesheets/new_footer.scss
@@ -1,10 +1,9 @@
+@import "colors";
 @import "constants";
 @import "mixins";
 @import "placeholders";
-@import "typography";
 
 .footer {
-  @extend %new-type;
   @include vertical-padding(72px);
   background-color: $light-grey;
 }
diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/new_header.scss
similarity index 88%
rename from app/assets/stylesheets/header.scss
rename to app/assets/stylesheets/new_header.scss
index fdc9e81c8..3213bb3c1 100644
--- a/app/assets/stylesheets/header.scss
+++ b/app/assets/stylesheets/new_header.scss
@@ -1,15 +1,11 @@
 @import "constants";
 @import "colors";
 @import "mixins";
-@import "typography";
 
 // FIXME: Rename when the header is generalized
 .new-header {
-  @extend %new-type;
   height: 72px;
   background-color: #FFFFFF;
-  // FIXME: Delete when the header is generalized
-  margin-top: -60px;
 }
 
 .header-inner-content {
diff --git a/app/assets/stylesheets/utils.scss b/app/assets/stylesheets/utils.scss
new file mode 100644
index 000000000..cb9f55abd
--- /dev/null
+++ b/app/assets/stylesheets/utils.scss
@@ -0,0 +1,11 @@
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+.clearfix {
+  clear: both;
+}
diff --git a/app/views/layouts/new_application.html.haml b/app/views/layouts/new_application.html.haml
index 9908098f3..2c9204012 100644
--- a/app/views/layouts/new_application.html.haml
+++ b/app/views/layouts/new_application.html.haml
@@ -13,7 +13,7 @@
     = favicon_link_tag(image_url("favicons/32x32.png"), type: "image/png", sizes: "32x32")
     = favicon_link_tag(image_url("favicons/96x96.png"), type: "image/png", sizes: "96x96")
 
-    = stylesheet_link_tag "application", :media => "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag "new_application", :media => "all", "data-turbolinks-track" => true
     = stylesheet_link_tag "print", :media => "print", "data-turbolinks-track" => true
 
   %body
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 76333b2be..882590de7 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-Rails.application.config.assets.precompile += %w(print.css)
+Rails.application.config.assets.precompile += %w(print.css new_application.css)