From 38dcf5c74d2d76382aea0418fa44a9ac36b414d2 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Tue, 2 May 2017 18:47:46 +0200 Subject: [PATCH 1/4] Application.scss: replace require_tree by explicit import Change needed for futur new_application.scss and corresponding style --- app/assets/stylesheets/application.scss | 44 ++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index adf15f626..39db474b7 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -12,7 +12,49 @@ // defined in the other CSS/SCSS files in this directory. It is generally better to create a new // file per style scope. // -// = require_tree . +// = require _card +// = require _colors +// = require _constants +// = require _helpers +// = require _mixins +// = require _placeholders +// = require _turbolinks +// = require _typography +// = require admin_procedures_modal +// = require admin_type_de_champ +// = require backoffice +// = require carte +// = require cgu +// = require custom-mails +// = require default_data_block +// = require description +// = require dossier_show +// = require dossiers +// = 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 +// = require pref_list_menu +// = require print +// = require procedure +// = require recapitulatif +// = require search +// = require siret +// = require stats +// = require support_navigator_banner +// = require switch_menu +// = require typeahead +// = require users + // = require_self // = require bootstrap-datepicker3 // = require leaflet From e7383c7c85a05c24d2deef3e0f900b90b2dd5f65 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Wed, 3 May 2017 16:48:23 +0200 Subject: [PATCH 2/4] CSS: add Meyer's reset.scss --- .scss-lint.yml | 2 ++ app/assets/stylesheets/reset.scss | 48 +++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 app/assets/stylesheets/reset.scss diff --git a/.scss-lint.yml b/.scss-lint.yml index 918c14c70..7ee185bb3 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -1,3 +1,5 @@ +exclude: 'app/assets/stylesheets/reset.scss' + linters: BangFormat: enabled: true diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss new file mode 100644 index 000000000..e29c0f5f4 --- /dev/null +++ b/app/assets/stylesheets/reset.scss @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} From aee17c5b193b87f6cecfd4e52dcfbd058c8e7973 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Thu, 4 May 2017 14:49:18 +0200 Subject: [PATCH 3/4] CSS: CSS filenames should not contain dashes --- app/assets/stylesheets/application.scss | 2 +- app/assets/stylesheets/{custom-mails.scss => custom_mails.scss} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename app/assets/stylesheets/{custom-mails.scss => custom_mails.scss} (100%) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 39db474b7..dd8e19bbe 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -25,7 +25,7 @@ // = require backoffice // = require carte // = require cgu -// = require custom-mails +// = require custom_mails // = require default_data_block // = require description // = require dossier_show diff --git a/app/assets/stylesheets/custom-mails.scss b/app/assets/stylesheets/custom_mails.scss similarity index 100% rename from app/assets/stylesheets/custom-mails.scss rename to app/assets/stylesheets/custom_mails.scss From dc371b83b871f7c9c11aef22159e71e118b0ddcc Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Wed, 3 May 2017 16:50:36 +0200 Subject: [PATCH 4/4] 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)