Merge pull request #5865 from tchak/layout-cleanup

Remove old design's css and js

.scss-lint.yml

@@ -1,7 +1,6 @@
 exclude:
-  - 'app/assets/stylesheets/new_design/reset.scss'
+  - 'app/assets/stylesheets/reset.scss'
   - 'app/assets/stylesheets/direct_uploads.scss'
-  - 'app/assets/stylesheets/new_design/direct_uploads.scss'
 
 linters:
   BangFormat:

Gemfile

@@ -9,8 +9,6 @@ gem 'administrate'
 gem 'after_party'
 gem 'anchored'
 gem 'bcrypt'
-gem 'bootstrap-sass', '>= 3.4.1'
-gem 'bootstrap-wysihtml5-rails', '~> 0.3.3.8'
 gem 'browser'
 gem 'chartkick'
 gem 'chunky_png'
@@ -30,7 +28,6 @@ gem 'ffi-geos', require: false
 gem 'flipper'
 gem 'flipper-active_record'
 gem 'flipper-ui'
-gem 'font-awesome-rails'
 gem 'fugit'
 gem 'geocoder'
 gem 'geo_coord', require: "geo/coord"
@@ -45,7 +42,6 @@ gem 'hashie'
 gem 'http_accept_language'
 gem 'iban-tools'
 gem 'image_processing'
-gem 'jquery-rails' # Use jquery as the JavaScript library
 gem 'json_schemer'
 gem 'jwt'
 gem 'kaminari', '1.2.1' # Pagination

Gemfile.lock

@@ -134,11 +134,6 @@ GEM
     bcrypt (3.1.16)
     bindata (2.4.8)
     bindex (0.8.1)
-    bootstrap-sass (3.4.1)
-      autoprefixer-rails (>= 5.2.1)
-      sassc (>= 2.0.0)
-    bootstrap-wysihtml5-rails (0.3.3.8)
-      railties (>= 3.0)
     brakeman (4.9.1)
     browser (5.0.0)
     builder (3.2.4)
@@ -277,8 +272,6 @@ GEM
       fog-core (~> 2.1)
       fog-json (>= 1.0)
       ipaddress (>= 0.8)
-    font-awesome-rails (4.7.0.5)
-      railties (>= 3.2, < 6.1)
     formatador (0.2.5)
     fugit (1.3.4)
       et-orbi (~> 1.1, >= 1.1.8)
@@ -807,8 +800,6 @@ DEPENDENCIES
   annotate
   axe-matchers
   bcrypt
-  bootstrap-sass (>= 3.4.1)
-  bootstrap-wysihtml5-rails (~> 0.3.3.8)
   brakeman
   browser
   byebug
@@ -836,7 +827,6 @@ DEPENDENCIES
   flipper
   flipper-active_record
   flipper-ui
-  font-awesome-rails
   fugit
   geo_coord
   geocoder
@@ -856,7 +846,6 @@ DEPENDENCIES
   http_accept_language
   iban-tools
   image_processing
-  jquery-rails
   json_schemer
   jwt
   kaminari (= 1.2.1)

app/assets/javascripts/application.js

@@ -1,18 +0,0 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require_tree ./old_design
-//= require bootstrap-sprockets
-
-//= require smart_listing
-//= require bootstrap-wysihtml5
-//= require bootstrap-wysihtml5/locales/fr-FR

app/assets/javascripts/old_design/admin.js

@@ -1,11 +0,0 @@
-/* globals $ */
-
-$(document).on('click', '.delete', function () {
-  $(this).hide();
-  $(this).closest('td').find('.confirm').show();
-});
-
-$(document).on('click', '.cancel', function () {
-  $(this).closest('td').find('.delete').show();
-  $(this).closest('td').find('.confirm').hide();
-});

app/assets/javascripts/old_design/archive.js

@@ -1,11 +0,0 @@
-/* globals $ */
-
-$(document).on('click', 'button#archive-procedure', function () {
-  $('button#archive-procedure').hide();
-  $('#confirm').show();
-});
-
-$(document).on('click', '#confirm #cancel', function () {
-  $('button#archive-procedure').show();
-  $('#confirm').hide();
-});

app/assets/javascripts/old_design/bootstrap_wysihtml5.js

@@ -1,39 +0,0 @@
-/* globals $ */
-
-$(document).on('DOMContentLoaded', wysihtml5_active);
-
-function wysihtml5_active() {
-  $('.wysihtml5').each(function (i, elem) {
-    $(elem).wysihtml5({
-      toolbar: {
-        fa: true,
-        link: false,
-        color: false
-      },
-      parserRules: {
-        tags: {
-          p: {},
-          h1: {},
-          h2: {},
-          h3: {},
-          h4: {},
-          h5: {},
-          h6: {},
-          b: {},
-          i: {},
-          u: {},
-          small: {},
-          blockquote: {},
-          ul: {},
-          ol: {},
-          li: {},
-          img: {},
-          code: {
-            unwrap: 1
-          }
-        }
-      },
-      locale: 'fr-FR'
-    });
-  });
-}

app/assets/javascripts/old_design/default_data_block.js

@@ -1,38 +0,0 @@
-/* globals $ */
-
-$(document).on('DOMContentLoaded', init_default_data_block);
-
-function init_default_data_block() {
-  $('.default-data-block #dossier .body').toggle();
-  $('.default-data-block #dossier .carret-right').toggle();
-  $('.default-data-block #dossier .carret-down').toggle();
-
-  $('.default-data-block .title').click(function () {
-    toggle_default_data_bloc(this, 400);
-  });
-
-  $('.new-action').click(function () {
-    var messages_block = $(this)
-      .parents()
-      .closest('.default-data-block')
-      .find('.title');
-    toggle_default_data_bloc(messages_block, 400);
-  });
-
-  $('.default-data-block.default_visible').each(function () {
-    toggle_default_data_bloc($(this).find('.title'), 0);
-  });
-
-  function toggle_default_data_bloc(element, duration) {
-    var block = $(element).parents('.show-block');
-    if (block.attr('id') == 'messages') {
-      block.children('.last-commentaire').toggle();
-      $('.commentaires').animate({ scrollTop: $(this).height() }, 'slow');
-    }
-
-    block.children('.body').slideToggle(duration);
-
-    block.find('.carret-right').toggle();
-    block.find('.carret-down').toggle();
-  }
-}

app/assets/javascripts/old_design/dossiers_list_filter.js

@@ -1,46 +0,0 @@
-/* globals $ */
-
-$(document).on('DOMContentLoaded', filters_init);
-
-function filters_init() {
-  $('html').click(function (event) {
-    var visible_filter = $('.filter_framed:visible');
-    if (visible_filter.length) {
-      if (!$(event.target).closest('.filter_framed').is(':visible')) {
-        visible_filter.hide();
-      }
-    }
-  });
-
-  $('.filter').on('click', function (event) {
-    filter_framed_show(event);
-    filter_framed_close_all_excepted(framed_id(event));
-    event.stopPropagation();
-  });
-
-  $('.erase-filter').on('click', function () {
-    $(this).parent().find('.filter_input').val('');
-  });
-}
-
-function filter_framed_close_all_excepted(id) {
-  $('.filter_framed:not(' + id + ')').hide();
-
-  $(id).toggle();
-}
-
-function framed_id(event) {
-  return '#framed_' + event.target.id;
-}
-
-function filter_framed_show(event) {
-  var dom_object = $(framed_id(event));
-
-  var offset = $('#main-container').offset();
-
-  var y = event.pageY - offset.top;
-  var x = event.pageX - offset.left;
-
-  dom_object.css('top', y + 7 + 'px');
-  dom_object.css('left', x + 7 + 'px');
-}

app/assets/javascripts/old_design/dossiers_list_link.js

@@ -1,8 +0,0 @@
-/* globals $ */
-
-$(document).on('click', '#dossiers-list tr', function (event) {
-  var href = $(this).data('href');
-  if (href && event.target.tagName !== 'A') {
-    location.href = href;
-  }
-});

app/assets/javascripts/old_design/input_helpers.js

@@ -1,44 +0,0 @@
-/* globals $ */
-
-$(document).on('DOMContentLoaded', action_type_de_champs);
-
-function action_type_de_champs() {
-  $("input[type='email']").on('change', function () {
-    toggleErrorClass(this, validateEmail($(this).val()));
-  });
-
-  $("input[type='number']").on('change', function () {
-    toggleErrorClass(this, validateNumber($(this).val()));
-  });
-
-  $("input[type='phone']").on('change', function () {
-    var val = $(this).val();
-    val = val.replace(/[ ]/g, '');
-
-    toggleErrorClass(this, validatePhone(val));
-  });
-}
-
-function toggleErrorClass(node, boolean) {
-  if (boolean) $(node).removeClass('input-error');
-  else $(node).addClass('input-error');
-}
-
-function validatePhone(phone) {
-  var re = /^(0|(\+[1-9]{2})|(00[1-9]{2}))[1-9][0-9]{8}$/;
-  return validateInput(phone, re);
-}
-
-function validateEmail(email) {
-  var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-  return validateInput(email, re);
-}
-
-function validateNumber(number) {
-  var re = /^[0-9]+$/;
-  return validateInput(number, re);
-}
-
-function validateInput(input, regex) {
-  return regex.test(input);
-}

app/assets/javascripts/old_design/instructeur_dossier_modal.js

@@ -1,17 +0,0 @@
-/* globals $ */
-
-$(document).on('DOMContentLoaded', modal_action);
-
-function modal_action() {
-  $('#pj-modal').on('show.bs.modal', function (event) {
-    $('#pj-modal .modal-body .table .tr-content').hide();
-
-    var button = $(event.relatedTarget); // Button that triggered the modal
-    var modal_title = button.data('modal_title'); // Extract info from data-* attributes
-    var modal_index = button.data('modal_index'); // Extract info from data-* attributes
-
-    var modal = $(this);
-    modal.find('#pj-modal-title').html(modal_title);
-    $('#pj-modal .modal-body .table #' + modal_index).show();
-  });
-}

app/assets/javascripts/old_design/procedure.js

@@ -1,26 +0,0 @@
-/* globals $ */
-
-$(document).on('DOMContentLoaded', button_edit_procedure_init);
-
-function button_edit_procedure_init() {
-  buttons_api_carto();
-  button_individual();
-}
-
-function buttons_api_carto() {
-  $('#procedure-module-api-carto-use-api-carto').on('change', function () {
-    $('#modules-api-carto').toggle();
-  });
-
-  if ($('#procedure-module-api-carto-use-api-carto').is(':checked'))
-    $('#modules-api-carto').show();
-}
-
-function button_individual() {
-  $('#procedure_for_individual').on('change', function () {
-    $('#individual-with-siret').toggle();
-  });
-
-  if ($('#procedure_for_individual').is(':checked'))
-    $('#individual-with-siret').show();
-}

app/assets/stylesheets/_card.scss

@@ -1,6 +0,0 @@
-.card {
-  background: #FFFFFF;
-  padding: 15px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
-}

app/assets/stylesheets/_constants.scss

@@ -1,5 +1,14 @@
-// colors
+$page-width: 1040px;
-$light-blue: #F2F6FA;
+$small-page-width: 840px;
 
-// Bootstrap constants
+$default-spacer: 8px;
-$font-size-base: 16px;
+$default-padding: 2 * $default-spacer;
+$default-fields-spacer: 5 * $default-spacer;
+
+// layouts
+$two-columns-padding: 60px;
+$two-columns-breakpoint: 980px;
+$sub-header-bottom-margin: 3 * $default-spacer;
+
+// z-order
+$alert-z-index: 100;

app/assets/stylesheets/_helpers.scss

@@ -1,21 +0,0 @@
-$default-spacer: 15px;
-
-.m-1 {
-  margin: $default-spacer;
-}
-
-.mt-1 {
-  margin-top: $default-spacer;
-}
-
-.mr-1 {
-  margin-right: $default-spacer;
-}
-
-.mb-1 {
-  margin-bottom: $default-spacer;
-}
-
-.ml-1 {
-  margin-left: $default-spacer;
-}

app/assets/stylesheets/admin_type_de_champ.scss

@@ -1,52 +0,0 @@
-.header-section {
-  background-color: rgb(0, 49, 137);
-  margin-top: 20px;
-  margin-bottom: 10px;
-  margin-left: 0;
-  margin-right: 0;
-  text-align: center;
-  padding-bottom: 8px;
-
-  color: #FFFFFF;
-
-  .form-control.libelle {
-    font-weight: bold;
-  }
-
-  .form-group.description {
-    display: none;
-  }
-
-  .form-group.mandatory {
-    display: none;
-  }
-}
-
-#liste-champ {
-  .form-inline {
-    margin-bottom: 30px;
-  }
-
-  .show-inline {
-    display: inline-block !important;
-  }
-
-  .form-group.drop-down-list,
-  .form-group.pj-template,
-  .form-group.carte-options {
-    display: none;
-  }
-
-  .form-group {
-    vertical-align: top;
-    margin-right: 15px;
-  }
-
-  .description {
-    padding: 0;
-
-    textarea {
-      padding: 6px 12px;
-    }
-  }
-}

app/assets/stylesheets/application.scss

@@ -1,237 +1,9 @@
-// This is a manifest file that'll be compiled into application.css, which will include all the files
+// = require ./reset
-// listed below.
+// = require ./custom_reset
-//
+// = require ./common
-// Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+// = require ./utils
-// or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+// = require ./fonts
-//
-// You're free to add application-wide styles to this file and they'll appear at the bottom of the
-// compiled file so the styles you add here take precedence over styles defined in any styles
-// defined in the other CSS/SCSS files in this directory. It is generally better to create a new
-// file per style scope.
-//
-// = require _card
-// = require _helpers
-// = require admin_type_de_champ
-// = require carte
-// = require custom_mails
-// = require default_data_block
-// = require direct_uploads
-// = require dossiers
-// = require france_connect_particulier
-// = require left_panel
-// = require login
-// = require main_container
-// = require navbar
-// = require pj_modal
-// = require print
-// = require procedure
-// = require search
-// = require site_banner
-// = require switch_menu
-// = require users
-// = require attestation_template_edit
-
-// = require_self
-// = require font-awesome
 // = require leaflet
-// = require franceconnect
+// = require select2
-// = require bootstrap-wysihtml5
+// = require_tree .
-
+// = stub ./print.scss
-@import "constants";
-@import "bootstrap-sprockets";
-@import "bootstrap";
-
-body {
-  background-color: $light-blue;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  padding-top: 60px;
-}
-
-form {
-  margin-bottom: 0.3em;
-}
-
-.wysihtml5-sandbox {
-  resize: vertical;
-  width: 100% !important;
-}
-
-#wrap {
-  min-height: 100%;
-  margin-bottom: -50px;
-  overflow: hidden;
-}
-
-// Mobile Safari doesn't bubble mouse events by default, unless:
-//
-// - the target element of the event is a link or a form field.
-// - the target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
-// - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
-//
-// (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
-//
-// This is a problem for us, because we bind a lot of click events as
-// `document.on('click', '.my-element', …)` – which requires proper bubbling.
-.ios #wrap {
-  cursor: pointer;
-}
-
-#wrap::after {
-  content: "";
-  display: block;
-}
-
-#footer,
-#wrap::after {
-  height: 50px;
-}
-
-#footer {
-  background-color: $light-blue;
-  text-align: center;
-  padding: 0;
-
-  a,
-  p {
-    color: #000000;
-  }
-
-  a:hover {
-    color: #000000;
-  }
-
-  p {
-    line-height: 40px;
-    padding: 0;
-  }
-}
-
-.text-purple {
-  color: #8B008B;
-}
-
-.text-default {
-  color: #808080;
-}
-
-.progress-bar-purple {
-  background-color: #800080;
-}
-
-.btn {
-  box-shadow: none !important;
-}
-
-.description {
-  padding: 10px;
-}
-
-.btn-file {
-  position: relative;
-  overflow: hidden;
-}
-
-.btn-file input[type=file] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
-  text-align: right;
-  filter: alpha(opacity = 0);
-  opacity: 0;
-  outline: none;
-  background: #FFFFFF;
-  cursor: inherit;
-  display: block;
-}
-
-.vr {
-  border-left: 1px solid #808080;
-}
-
-.center {
-  text-align: center;
-}
-
-textarea#description {
-  width: 100%;
-}
-
-div.pagination {
-  padding-top: 20px;
-  display: block;
-  text-align: center;
-}
-
-.alert {
-  margin-bottom: 0px;
-}
-
-.alert.alert-success.move-up,
-.alert.alert-danger.siret,
-.alert.sticky {
-  position: fixed;
-  top: 0px;
-  left: 0;
-  height: 52px;
-  width: 100%;
-  margin-top: 0px;
-  z-index: 10;
-
-}
-
-.archived {
-  float: right;
-  margin-top: 10px;
-
-  .confirm {
-    display: none;
-  }
-}
-
-#confirm {
-  display: none;
-}
-
-.confirm {
-  display: none;
-}
-
-.fa {
-  width: 15px;
-  text-align: center;
-}
-
-.off-fc-link {
-  font-size: 15px !important;
-  margin-top: -4px;
-}
-
-#fconnect-access {
-  right: 50px;
-}
-
-#fconnect-access::before {
-  left: 22.7% !important;
-}
-
-#fconnect-access::after {
-  left: 23% !important;
-}
-
-.no-padding {
-  padding: 0;
-}
-
-.no-margin {
-  margin: 0;
-}

app/assets/stylesheets/attestation_template_edit.scss

@@ -1,31 +1,56 @@
+@import "colors";
+@import "constants";
 
 #attestation-template-edit {
-  .notice {
+  .text-active {
-    margin-bottom: 30px;
+    color: $green;
   }
 
-  .image-upload {
+  .text-inactive {
-    display: flex;
+    color: $grey;
-    align-items: center;
+  }
+}
 
-    input {
+#tags-table {
-      margin: 10px 0;
+  margin-top: -20px;
+  margin-bottom: 40px;
+
+  .add-tag-title {
+    font-size: 18px;
+    margin-bottom: 16px;
+  }
+
+  .head {
+    padding: 10px 0px;
+    font-weight: bold;
+    display: flex;
+  }
+
+  .items {
+    max-height: 210px;
+    overflow-y: auto;
+    border-bottom: 1px solid $border-grey;
+  }
+
+  .item {
+    display: flex;
+    padding: 10px 0;
+    border-bottom: solid 1px $border-grey;
+
+    .tag {
+      font-weight: bold;
+    }
+
+    &:last-child {
+      border-bottom: none;
     }
   }
 
-  .thumbnail {
+  .tag {
-    width: 90px;
+    width: 35%;
-    margin-right: 15px;
   }
 
-  .balises {
+  .description {
-    max-height: 180px;
+    width: 65%;
-    overflow-y: scroll;
-    margin-bottom: 20px;
-  }
-
-  .table {
-    border: 1px solid #DDDDDD;
-    margin-bottom: 0px;
   }
 }

app/assets/stylesheets/carte.scss

@@ -1,31 +1,17 @@
-// Place all the styles related to the carte controller here.
+.areas-title {
-// They will automatically be included in application.css.
+  font-weight: bold;
-// You can use Sass (SCSS) here: http://sass-lang.com/
+  margin-top: 5px;
-@import "bootstrap";
+  margin-bottom: 5px;
-
-.leaflet-container path {
-  cursor: url("/assets/edit.png"), default !important;
 }
 
-.info {
+.areas {
-  padding: 6px 8px;
+  margin-bottom: 10px;
-  font: 14px/16px Arial, Helvetica, sans-serif;
-  background: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-}
 
-.info h4 {
+  input {
-  margin: 0 0 5px;
+    margin-top: 5px;
-  color: #777777;
-}
-
-#search-by-address {
-  .algolia-autocomplete {
-    width: 555px;
-  }
-
-  .aa-dropdown-menu {
-    width: 555px;
   }
 }
+
+.form [data-react-class='MapEditor'] [data-reach-combobox-input] {
+  margin-bottom: 0;
+}

app/assets/stylesheets/custom_mails.scss

@@ -1,11 +0,0 @@
-#custom-mails {
-  padding: 20px;
-
-  .wrapper {
-    background-color: #FFFFFF;
-    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
-    margin: 15px auto;
-    max-width: 800px;
-    padding: 20px;
-  }
-}

app/assets/stylesheets/default_data_block.scss

@@ -1,88 +0,0 @@
-@import "constants";
-
-.default-data-block {
-  font-family: Arial;
-
-  .show-block {
-    margin-left: auto;
-    margin-right: auto;
-    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
-    margin-bottom: 40px;
-  }
-
-  .carret-right {
-    float: left;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-bottom: 7px solid transparent;
-    border-left: 14px solid #FFFFFF;
-    margin: 12px 12px 0 15px;
-  }
-
-  .carret-down {
-    float: left;
-    width: 0;
-    height: 0;
-    display: none;
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    border-top: 14px solid #FFFFFF;
-    margin: 12px 12px 0 15px;
-  }
-
-  .header {
-    background-color: #003C92;
-    min-height: 40px;
-    color: #FFFFFF;
-    font-size: 18px;
-    font-weight: bold;
-
-    .title,
-    .title-no-expanse,
-    .action,
-    .count {
-      line-height: 40px;
-      padding: 0px;
-      text-transform: uppercase;
-    }
-
-    .title-no-expanse {
-      cursor: not-allowed;
-    }
-
-    .title,
-    .action,
-    .count {
-      cursor: pointer;
-    }
-
-    .title-content {
-      width: calc(100% - 50px);
-      float: left;
-    }
-
-    .action {
-      background-color: #E45B51;
-      text-align: center;
-      line-height: 40px;
-      font-size: 15px;
-      text-decoration: none;
-      color: #FFFFFF;
-    }
-
-    .action:hover {
-      color: $light-blue;
-    }
-
-    .count {
-      font-size: 16px;
-      text-align: center;
-    }
-  }
-
-  .body {
-    background-color: #FFFFFF;
-    display: none;
-  }
-}

app/assets/stylesheets/direct_uploads.scss

@@ -1,12 +1,13 @@
+@import "colors";
+
 .direct-upload {
   display: inline-block;
   position: relative;
-  padding: 2px 4px;
+  padding: 4px 15px;
   margin: 0 3px 3px 0;
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border: 1px solid $border-grey;
   border-radius: 3px;
-  font-size: 11px;
+  font-size: 14px;
-  line-height: 13px;
 }
 
 .direct-upload--pending {
@@ -32,6 +33,7 @@
   border-color: red;
 }
 
-input[type=file][data-direct-upload-url][disabled] {
+input[type=file][data-direct-upload-url][disabled],
+input[type=file][data-auto-attach-url][disabled] {
   display: none;
 }

app/assets/stylesheets/dossiers.scss

@@ -1,76 +0,0 @@
-// Place all the styles related to the dossiers controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-h5 span {
-  font-weight: normal;
-}
-
-#insee-infogreffe {
-  font-size: 17px;
-}
-
-.flag {
-  display: inline;
-  margin-left: auto;
-  margin-right: auto;
-  padding-right: 20px;
-  padding-left: 20px;
-
-  img {
-    max-width: 150px;
-    max-height: 60px;
-  }
-}
-
-#dossiers-list {
-  .filter {
-    cursor: pointer;
-    font-size: 1.1em;
-    display: inline;
-  }
-}
-
-#dossiers-list tr:hover {
-  background-color: #EEEEEE;
-  cursor: pointer;
-}
-
-#procedure-list {
-  margin-left: -10px;
-  margin-top: 20px;
-
-  a,
-  a:hover {
-    color: #FFFFFF;
-    text-decoration: none;
-  }
-
-  .procedure-list-element.active {
-    background-color: #668ABD;
-  }
-
-  .procedure-list-element {
-    padding: 15px 40px 15px 20px;
-    cursor: pointer;
-    line-height: 1.8em;
-
-    .progress-bar-warning {
-      background-color: #E4594F;
-    }
-
-    .missing-steps {
-      color: #FFA500;
-    }
-  }
-
-  .procedure-list-element:hover {
-    background-color: #668ABD;
-    cursor: pointer;
-  }
-}
-
-.split-hr-left {
-  border-bottom: 1px solid #FFFFFF;
-  margin: 20px 10px 0px 10px;
-}

app/assets/stylesheets/france_connect_particulier.scss

@@ -1,5 +0,0 @@
-#france-connect-particulier-email {
-  width: 300px;
-  margin-left: auto;
-  margin-right: auto;
-}

app/assets/stylesheets/left_panel.scss

@@ -1,292 +0,0 @@
-#left-panel {
-  margin-top: 60px;
-  padding: 0;
-  background-color: #003189;
-  height: calc(100% - 60px);
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  color: #FFFFFF;
-  overflow-y: scroll;
-
-  .link-to-dossiers {
-    padding: 15px 0 0 15px;
-
-    a {
-      color: #FFFFFF;
-    }
-  }
-
-  #first-block {
-    font-family: Arial;
-    font-size: 16px;
-    line-height: 18px;
-    margin-top: 20px;
-
-    .infos {
-      font-size: 25px;
-      text-align: center;
-      margin: 10px 10px 30px 0;
-
-      .projet-name {
-        font-size: 25px;
-        line-height: normal;
-        padding: 5px;
-      }
-    }
-
-    .count {
-      display: inline-block;
-      padding: 3px;
-      border-radius: 25px;
-      min-width: 40px;
-      text-align: center;
-      line-height: 23px;
-    }
-
-    .text {
-      display: inline-block;
-      width: 30px;
-      margin: 0 0 0 8px;
-    }
-
-    .dossiers-en-cours,
-    .en-cours {
-      margin-top: 20px;
-    }
-
-    .dossiers-en-cours {
-      .count {
-        border: 1px solid #FFFFFF;
-      }
-    }
-
-    .nouveaux-dossiers {
-      .count {
-        background-color: #5CB85C;
-      }
-    }
-
-    .nouvelles-notifications {
-      .count {
-        background-color: #E4594F;
-      }
-    }
-
-    .dossiers-en-cours,
-    .nouveaux-dossiers,
-    .nouvelles-notifications,
-    .en-cours {
-      margin: 5px auto 0 20px;
-      width: 150px;
-    }
-
-    img {
-      background-color: #FFFFFF;
-    }
-  }
-
-  #action-block {
-    text-align: center;
-    margin: 10px;
-
-    .action {
-      background-color: #E45B51;
-      text-align: center;
-      cursor: pointer;
-      color: #FFFFFF;
-      margin: 0 10px 0 0;
-      min-height: 40px;
-      padding: 5px;
-      font-family: Arial;
-      font-size: 16px;
-      font-weight: bold;
-      border: none;
-      width: 100%;
-    }
-
-    .close-dossier,
-    .refuse-dossier,
-    .forget-dossier {
-      border: 1px solid #FFFFFF;
-      border-radius: 25px;
-      margin: 5px;
-      margin-left: auto;
-      margin-right: auto;
-      width: 60px;
-    }
-
-    .close-dossier:hover,
-    .refuse-dossier:hover,
-    .forget-dossier:hover {
-      color: #000000;
-      border-color: #000000;
-    }
-
-    .close-dossier {
-      background-color: #2A9E2A;
-    }
-
-    .refuse-dossier {
-      background-color: #E4594F;
-    }
-
-    .forget-dossier {
-      background-color: #FF8300;
-    }
-  }
-
-  #menu-block {
-    #switch-buttons {
-      height: 30px;
-      line-height: 30px;
-      font-size: 16px;
-      margin-top: 20px;
-      margin-left: auto;
-      margin-right: auto;
-      width: 205px;
-      border: 1px solid;
-      padding: 0 0 0 10px;
-      border-radius: 25px;
-      cursor: pointer;
-
-      .active {
-        background-color: #668ABD !important;
-        cursor: default;
-      }
-
-      .separator {
-        height: 26px;
-        width: 1px;
-        display: inline-block;
-        background-color: #FFFFFF;
-      }
-
-      #switch-procedures:hover,
-      #switch-notifications:hover {
-        background-color: #668AEA;
-      }
-
-      #switch-procedures {
-        height: 28px;
-        margin: 0 0 0 -10px;
-        padding-left: 10px;
-        width: 100px;
-        display: inline-block;
-        border-radius: 25px 0 0 25px;
-      }
-
-      #switch-notifications {
-        width: 103px;
-        display: inline-block;
-        border-radius: 0 25px 25px 0;
-        height: 28px;
-        margin: 0 0 0 -5px;
-        padding: 0 0 0 5px;
-      }
-    }
-
-    .split-hr {
-      border-bottom: 1px solid #FFFFFF;
-      width: 200px;
-      margin: 20px 0 20px 0;
-    }
-  }
-
-  #infos-block {
-    .split-hr {
-      border-bottom: 1px solid #FFFFFF;
-      width: 200px;
-      margin: 20px 0 20px 0;
-    }
-
-    .dossier-state {
-      text-align: center;
-      font-size: 25px;
-      margin-top: 20px;
-      width: 200px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    #notifications-list {
-      .no-notification {
-        margin: 0 30px 0 30px;
-      }
-
-      .notification {
-        padding: 10px 2px 10px 15px;
-
-        .dossier,
-        .updated-at {
-          display: inline-block;
-          color: #CCCCCC;
-          font-size: 12px;
-          text-align: left;
-        }
-
-        .dossier-index,
-        .updated-at-index,
-        .count {
-          display: inline-block;
-          color: #FFFFFF;
-          font-size: 14px;
-          text-align: left;
-        }
-
-        .count {
-          background-color: #F0AD4E;
-          border-radius: 25px;
-          padding: 0 5px 0 5px;
-          width: 25px;
-          text-align: center;
-        }
-
-        .type-notif {
-          font-size: 16px;
-        }
-      }
-    }
-
-    .notifications {
-      margin: 20px 10px 0 5px;
-
-      .fa {
-        font-size: 25px;
-        width: 100%;
-        margin: 0 0 15px 0;
-      }
-
-      .type-notif {
-        font-size: 16px;
-        float: right;
-        width: 30px;
-      }
-
-      .notification {
-        margin: 10px 0 10px 10px;
-
-        .type {
-          margin-bottom: 20px;
-        }
-
-        .updated-at {
-          color: #CCCCCC;
-          font-size: 12px;
-          text-align: left;
-        }
-
-        .split-hr {
-          width: 40px;
-          margin: auto;
-        }
-      }
-    }
-  }
-}
-
-.motivation-text-area {
-  color: #000000;
-  margin-bottom: 15px;
-}

app/assets/stylesheets/login.scss

@@ -1,33 +0,0 @@
-#form-login {
-  text-align: center;
-  max-width: 500px;
-
-  margin-left: auto;
-  margin-right: auto;
-
-  padding: 20px;
-
-  .btn-fc {
-
-    img {
-      height: 100px;
-    }
-  }
-
-  #new-user {
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  hr {
-    margin-bottom: 40px;
-    border: none;
-    height: 1px;
-    background-image: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 0.75), rgba(100, 100, 100, 0));
-  }
-
-  h4 {
-    text-align: left;
-  }
-}

app/assets/stylesheets/main_container.scss

@@ -1,3 +0,0 @@
-#main-container {
-  float: right;
-}

app/assets/stylesheets/navbar.scss

@@ -1,219 +0,0 @@
-@import "constants";
-
-#header {
-  top: 0;
-  left: 0;
-  position: fixed;
-  width: 100%;
-  z-index: 10;
-  border-radius: 0;
-  height: 60px;
-
-  #title-navbar {
-    color: #FFFFFF;
-    font-weight: bold;
-    font-size: 1.8em;
-    z-index: 10;
-    overflow: hidden;
-  }
-
-  #title-navbar:hover {
-    text-decoration: none;
-  }
-
-  #home {
-    text-align: center;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
-    background-color: #003189;
-    height: 60px;
-
-    .logo {
-      margin-top: 10px;
-      height: 40px;
-    }
-
-    #tps-title {
-      font-family: Arial;
-      font-size: 16px;
-      font-weight: bold;
-      line-height: 20px;
-      margin-top: 10px;
-    }
-  }
-
-  #navbar-body {
-    min-height: 60px;
-    background-color: #FFFFFF;
-    box-shadow: 0 1px 2px 0 rgba(50, 50, 50, 0.5);
-    padding-left: 50px;
-
-    .main-info {
-      font-family: Arial;
-      font-size: 18px;
-      font-weight: bold;
-      line-height: 58px;
-      min-height: 58px;
-      color: #000000;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .options {
-      font-family: Arial;
-      font-size: 14px;
-      text-align: right;
-      line-height: 22px;
-      color: #666666;
-      padding: 8px;
-      border-right: 1px solid #C8C6C8;
-      min-height: 60px;
-
-      .dropdown-toggle {
-        cursor: pointer;
-      }
-
-      .dropdown-pannel {
-        min-height: 100px;
-        width: 400px;
-        padding-left: 10px;
-      }
-
-      .centered-option {
-        line-height: 40px;
-        height: 40px;
-      }
-
-      .caret-right {
-        border-bottom: 4px solid transparent;
-        border-top: 4px solid transparent;
-        border-left: 4px solid;
-        display: inline-block;
-        height: 0;
-        margin: 8px 2px 0 5px;
-        vertical-align: top;
-        width: 0;
-      }
-    }
-
-    #sign-in {
-      margin-top: 7px;
-
-      .btn {
-        float: right;
-        margin-right: 15px;
-      }
-    }
-
-    #sign-out {
-      text-align: center;
-      height: 60px;
-
-      a {
-        line-height: 60px;
-      }
-    }
-  }
-}
-
-#download-menu {
-  .btn-sm {
-    color: #000000;
-    font-size: 14px;
-  }
-}
-
-.btn-nav {
-  color: #FFFFFF;
-  background-color: transparent;
-  margin-top: 6px;
-  height: 36px;
-}
-
-.btn-nav:hover {
-  background-color: #EEEEEE;
-  border-color: #EEEEEE #EEEEEE #DDDDDD;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.btn-nav.text-info:hover {
-  color: #23527C;
-}
-
-.btn-nav.text-success:hover {
-  color: #3C763D;
-}
-
-.btn-nav.text-danger:hover {
-  color: #A10005;
-}
-
-.navbar {
-  border: 0 !important;
-}
-
-#beta {
-  text-align: center;
-  text-transform: uppercase;
-  position: fixed;
-  bottom: 26px;
-  right: -35px;
-  transform: rotate(-45deg);
-  width: 150px;
-  background-color: #008CBA;
-  color: #FFFFFF;
-  padding: 5px;
-  font-size: 15px;
-  font-weight: 700;
-  z-index: 10;
-}
-
-.button-navbar {
-  color: #666666;
-  cursor: pointer;
-}
-
-.button-navbar-action {
-  background-color: #E4594F;
-  color: #FFFFFF;
-  cursor: pointer;
-  display: block;
-  width: 150px;
-  text-align: center;
-  padding: 2px;
-  float: right;
-
-  .fa {
-    font-size: 20px;
-    margin-right: 10px;
-  }
-}
-
-.lien-demarche {
-  p.alert {
-    margin-bottom: 8px;
-  }
-}
-
-.button-navbar-action:hover {
-  color: $light-blue;
-}
-
-.button-navbar:hover,
-.button-navbar-action:hover {
-  text-decoration: none;
-}
-
-#credentials {
-  display: none;
-  width: initial;
-  padding: 10px;
-  left: -130px;
-  text-align: center;
-
-  .description {
-    font-weight: bold;
-    font-size: 20px;
-  }
-}

app/assets/stylesheets/new_design/_constants.scss

@@ -1,14 +0,0 @@
-$page-width: 1040px;
-$small-page-width: 840px;
-
-$default-spacer: 8px;
-$default-padding: 2 * $default-spacer;
-$default-fields-spacer: 5 * $default-spacer;
-
-// layouts
-$two-columns-padding: 60px;
-$two-columns-breakpoint: 980px;
-$sub-header-bottom-margin: 3 * $default-spacer;
-
-// z-order
-$alert-z-index: 100;

app/assets/stylesheets/new_design/attestation_template_edit.scss

@@ -1,56 +0,0 @@
-@import "colors";
-@import "constants";
-
-#attestation-template-edit {
-  .text-active {
-    color: $green;
-  }
-
-  .text-inactive {
-    color: $grey;
-  }
-}
-
-#tags-table {
-  margin-top: -20px;
-  margin-bottom: 40px;
-
-  .add-tag-title {
-    font-size: 18px;
-    margin-bottom: 16px;
-  }
-
-  .head {
-    padding: 10px 0px;
-    font-weight: bold;
-    display: flex;
-  }
-
-  .items {
-    max-height: 210px;
-    overflow-y: auto;
-    border-bottom: 1px solid $border-grey;
-  }
-
-  .item {
-    display: flex;
-    padding: 10px 0;
-    border-bottom: solid 1px $border-grey;
-
-    .tag {
-      font-weight: bold;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .tag {
-    width: 35%;
-  }
-
-  .description {
-    width: 65%;
-  }
-}

app/assets/stylesheets/new_design/carte.scss

@@ -1,17 +0,0 @@
-.areas-title {
-  font-weight: bold;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.areas {
-  margin-bottom: 10px;
-
-  input {
-    margin-top: 5px;
-  }
-}
-
-.form [data-react-class='MapEditor'] [data-reach-combobox-input] {
-  margin-bottom: 0;
-}

app/assets/stylesheets/new_design/direct_uploads.scss

@@ -1,39 +0,0 @@
-@import "colors";
-
-.direct-upload {
-  display: inline-block;
-  position: relative;
-  padding: 4px 15px;
-  margin: 0 3px 3px 0;
-  border: 1px solid $border-grey;
-  border-radius: 3px;
-  font-size: 14px;
-}
-
-.direct-upload--pending {
-  opacity: 0.6;
-}
-
-.direct-upload__progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  opacity: 0.2;
-  background: #0076ff;
-  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
-  transform: translate3d(0, 0, 0);
-}
-
-.direct-upload--complete .direct-upload__progress {
-  opacity: 0.4;
-}
-
-.direct-upload--error {
-  border-color: red;
-}
-
-input[type=file][data-direct-upload-url][disabled],
-input[type=file][data-auto-attach-url][disabled] {
-  display: none;
-}

app/assets/stylesheets/new_design/new_application.scss

@@ -1,9 +0,0 @@
-// = require ./reset
-// = require ./custom_reset
-// = require ./common
-// = require ./utils
-// = require ./fonts
-// = require leaflet
-// = require select2
-// = require_tree .
-// = stub ./print.scss

app/assets/stylesheets/new_design/print.scss

@@ -1,63 +0,0 @@
-@import "colors";
-@import "fonts";
-
-.new-header,
-.sub-header,
-footer {
-  display: none;
-}
-
-.print-header {
-  display: block;
-  margin-top: 30px;
-  font-size: 30px;
-  line-height: 50px;
-  font-weight: bold;
-}
-
-body {
-  font-family: "Muli";
-}
-
-.subtitle {
-  margin-top: -20px;
-  color: $dark-grey;
-}
-
-th,
-td {
-  vertical-align: top;
-}
-
-th {
-  text-align: left;
-
-  &.header-section {
-    padding-top: 1.2em;
-    font-size: 1.2em;
-  }
-}
-
-.messagerie {
-  .messages-list {
-    list-style: none;
-    padding-left: 0;
-    max-height: none;
-
-    h2 {
-      font-size: 110%;
-    }
-
-    .person-icon {
-      display: none;
-    }
-  }
-}
-
-.message {
-  margin-bottom: 40px;
-}
-
-.updated-at {
-  display: none;
-}

app/assets/stylesheets/new_design/site_banner.scss

@@ -1,35 +0,0 @@
-@import "colors";
-@import "constants";
-
-.site-banner {
-  width: 100%;
-  margin: 0;
-  padding: $default-padding;
-  color: $black;
-  background-color: $yellow;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
-
-  &.warning {
-    background-color: $orange-bg;
-  }
-
-  .container {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.site-banner-icon {
-  margin-right: $default-padding;
-  font-size: 30px;
-  opacity: 0.7;
-}
-
-.site-banner-actions {
-  display: flex;
-  margin-left: auto;
-
-  .button {
-    margin-left: $default-spacer;
-  }
-}