From 08c207e0e499d9c184fedcc610cd9144b13120dc Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Wed, 5 Oct 2022 13:59:38 +0200 Subject: [PATCH] refactor(scss): remove legacy reset + generic rules, refactor imports --- app/assets/stylesheets/01_common.scss | 28 ++ .../stylesheets/{utils.scss => 02_utils.scss} | 0 .../stylesheets/{fonts.scss => _fonts.scss} | 0 app/assets/stylesheets/_mixins.scss | 3 + app/assets/stylesheets/_placeholders.scss | 8 + app/assets/stylesheets/_typography.scss | 12 - app/assets/stylesheets/application.scss | 5 - app/assets/stylesheets/avis.scss | 1 - app/assets/stylesheets/avis_sign_up.scss | 3 - app/assets/stylesheets/card_admin.scss | 5 +- app/assets/stylesheets/common.scss | 86 ------ app/assets/stylesheets/custom_reset.scss | 28 -- .../dossier_annotations_privees.scss | 1 - app/assets/stylesheets/dsfr.scss | 2 +- app/assets/stylesheets/layouts.scss | 4 +- app/assets/stylesheets/merci.scss | 2 - app/assets/stylesheets/new_header.scss | 244 ------------------ app/assets/stylesheets/procedure_show.scss | 1 - app/assets/stylesheets/reset.scss | 48 ---- .../stylesheets/{_tabs.scss => tabs.scss} | 0 20 files changed, 46 insertions(+), 435 deletions(-) create mode 100644 app/assets/stylesheets/01_common.scss rename app/assets/stylesheets/{utils.scss => 02_utils.scss} (100%) rename app/assets/stylesheets/{fonts.scss => _fonts.scss} (100%) delete mode 100644 app/assets/stylesheets/_typography.scss delete mode 100644 app/assets/stylesheets/common.scss delete mode 100644 app/assets/stylesheets/custom_reset.scss delete mode 100644 app/assets/stylesheets/reset.scss rename app/assets/stylesheets/{_tabs.scss => tabs.scss} (100%) diff --git a/app/assets/stylesheets/01_common.scss b/app/assets/stylesheets/01_common.scss new file mode 100644 index 000000000..7ed530f6c --- /dev/null +++ b/app/assets/stylesheets/01_common.scss @@ -0,0 +1,28 @@ +@import "placeholders"; + +turbo-events { + display: none; +} + +.page-wrapper { + position: relative; + min-height: 100%; +} + +// 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 , 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 .page-wrapper { + cursor: pointer; +} + +.container { + @extend %container; +} diff --git a/app/assets/stylesheets/utils.scss b/app/assets/stylesheets/02_utils.scss similarity index 100% rename from app/assets/stylesheets/utils.scss rename to app/assets/stylesheets/02_utils.scss diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/_fonts.scss similarity index 100% rename from app/assets/stylesheets/fonts.scss rename to app/assets/stylesheets/_fonts.scss diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss index 52d5594a6..f561d6d63 100644 --- a/app/assets/stylesheets/_mixins.scss +++ b/app/assets/stylesheets/_mixins.scss @@ -1,3 +1,5 @@ +@import "constants"; + @mixin horizontal-padding($value) { padding-left: $value; padding-right: $value; @@ -20,3 +22,4 @@ background-image: image-url($image-url); } } + diff --git a/app/assets/stylesheets/_placeholders.scss b/app/assets/stylesheets/_placeholders.scss index b30eb5a17..3b41efb99 100644 --- a/app/assets/stylesheets/_placeholders.scss +++ b/app/assets/stylesheets/_placeholders.scss @@ -1,4 +1,5 @@ @import "colors"; +@import "mixins"; @import "constants"; %horizontal-list { @@ -25,3 +26,10 @@ outline: 3px solid $blue-france-500; } } + +%container { + @include horizontal-padding($default-padding); + max-width: $page-width + 2 * $default-padding; + margin-left: auto; + margin-right: auto; +} diff --git a/app/assets/stylesheets/_typography.scss b/app/assets/stylesheets/_typography.scss deleted file mode 100644 index 14b206e2b..000000000 --- a/app/assets/stylesheets/_typography.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "colors"; - -%new-type { - font-family: "Marianne", system-ui, -apple-system, sans-serif; - color: $black; -} - -ol { - line-height: 28px; - list-style-type: decimal; - list-style-position: inside; -} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 82fb5fc2a..e6aa30c35 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,6 +1 @@ -// = require ./reset -// = require ./custom_reset -// = require ./common -// = require ./utils -// = require ./fonts // = require_tree . diff --git a/app/assets/stylesheets/avis.scss b/app/assets/stylesheets/avis.scss index 642d11537..c825a4538 100644 --- a/app/assets/stylesheets/avis.scss +++ b/app/assets/stylesheets/avis.scss @@ -1,5 +1,4 @@ @import "colors"; -@import "common"; @import "constants"; .give-avis { diff --git a/app/assets/stylesheets/avis_sign_up.scss b/app/assets/stylesheets/avis_sign_up.scss index f202205c9..f998f836e 100644 --- a/app/assets/stylesheets/avis_sign_up.scss +++ b/app/assets/stylesheets/avis_sign_up.scss @@ -1,6 +1,3 @@ -@import "typography"; -@import "colors"; - .avis-sign-up { .left { p { diff --git a/app/assets/stylesheets/card_admin.scss b/app/assets/stylesheets/card_admin.scss index 6ca1e9431..5d09b7cbb 100644 --- a/app/assets/stylesheets/card_admin.scss +++ b/app/assets/stylesheets/card_admin.scss @@ -2,7 +2,6 @@ @import "constants"; .card-admin { - color: $black; padding-top: 10px; padding-bottom: 10px; width: 236px; @@ -45,6 +44,10 @@ margin: auto auto 0 auto; } + p { + margin-bottom: 0; + } + &:hover { color: $blue-france-500; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss deleted file mode 100644 index 1c675ac6a..000000000 --- a/app/assets/stylesheets/common.scss +++ /dev/null @@ -1,86 +0,0 @@ -@import "colors"; -@import "constants"; -@import "mixins"; -@import "placeholders"; -@import "typography"; - -body, -input, -textarea, -select { - @extend %new-type; - font-size: 16px; - line-height: 1.42857143; -} - -dt { - margin-bottom: 0.5em; -} - -.page-wrapper { - position: relative; - min-height: 100%; -} - -// 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 , 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 .page-wrapper { - cursor: pointer; -} - -h1 { - font-size: 36px; - font-weight: bold; -} - -strong { - font-weight: bold; -} - -a[target="_blank"]:not([class^="fr-"])::after { - content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); - margin: 0 3px 0 5px; -} - -a:not([class^="fr-"]) { - color: $blue-france-500; -} - -em { - font-style: italic; -} - -strong { - font-weight: bold; -} - -sup { - vertical-align: super; - font-size: 0.83em; -} - -small { - font-size: small; -} - -.container { - @include horizontal-padding($default-padding); - max-width: $page-width + 2 * $default-padding; - margin-left: auto; - margin-right: auto; -} - -.small-container { - @include horizontal-padding($default-padding); - max-width: $small-page-width + 2 * $default-padding; - margin-left: auto; - margin-right: auto; -} diff --git a/app/assets/stylesheets/custom_reset.scss b/app/assets/stylesheets/custom_reset.scss deleted file mode 100644 index e3486d5c1..000000000 --- a/app/assets/stylesheets/custom_reset.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "colors"; -@import "placeholders"; - -html, -body { - height: 100%; - background-color: $white; -} - -html { - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -a { - @extend %outline; - - text-decoration: none; -} - -turbo-events { - display: none; -} diff --git a/app/assets/stylesheets/dossier_annotations_privees.scss b/app/assets/stylesheets/dossier_annotations_privees.scss index f92b704a0..84273ddf5 100644 --- a/app/assets/stylesheets/dossier_annotations_privees.scss +++ b/app/assets/stylesheets/dossier_annotations_privees.scss @@ -1,5 +1,4 @@ @import "colors"; -@import "common"; @import "constants"; #dossier-annotations-privees { diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss index 09e157743..34b9ec6fd 100644 --- a/app/assets/stylesheets/dsfr.scss +++ b/app/assets/stylesheets/dsfr.scss @@ -17,7 +17,7 @@ select { .fr-footer__bottom-link { // re-apply color unsetted by our common "a" rule setting a blue - color: var(--text-mention-grey); + // color: var(--text-mention-grey); } // with Marianne font, weight of font is less bolder, so bold it up diff --git a/app/assets/stylesheets/layouts.scss b/app/assets/stylesheets/layouts.scss index c214c1cc2..d0343b0e4 100644 --- a/app/assets/stylesheets/layouts.scss +++ b/app/assets/stylesheets/layouts.scss @@ -1,6 +1,6 @@ @import "colors"; -@import "common"; @import "constants"; +@import "placeholders"; .two-columns { background-color: $white; @@ -10,7 +10,7 @@ } .columns-container { - @extend .container; + @extend %container; display: flex; flex-direction: column; justify-content: center; diff --git a/app/assets/stylesheets/merci.scss b/app/assets/stylesheets/merci.scss index b40f676a2..b73c2d8e6 100644 --- a/app/assets/stylesheets/merci.scss +++ b/app/assets/stylesheets/merci.scss @@ -1,5 +1,3 @@ -@import "colors"; -@import "common"; @import "constants"; .merci .monavis { diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index d8ce97ae2..176b1432e 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -1,17 +1,3 @@ -@import "colors"; -@import "common"; -@import "constants"; -@import "mixins"; -@import "utils"; - -$header-landing-breakpoint: 1040px; -$header-mobile-breakpoint: 550px; - -// FIXME: Rename when the header is generalized -.new-header { - background-color: #FFFFFF; -} - // No drop shadow when a notice is shown. .fr-header.fr-header__with-notice-info { &, @@ -19,233 +5,3 @@ $header-mobile-breakpoint: 550px; filter: none; } } - -.header-inner-content { - @extend .container; - display: flex; - justify-content: space-between; - min-height: 72px; -} - -.header-logo { - display: flex; - flex-wrap: wrap; - align-items: center; - color: $blue-france-500; - - img { - margin-right: 10px; - } - - .site-title { - font-size: 24px; - font-weight: bold; - - &.small { - @media (min-width: $header-mobile-breakpoint) { - display: none; - } - } - - &.big { - @media (max-width: $header-mobile-breakpoint) { - display: none; - } - } - } -} - -.header-tabs { - li { - @include horizontal-padding($default-padding); - display: inline-block; - } - - .tab-link { - display: inline-block; - height: 72px; - line-height: 72px; - font-size: 18px; - color: $black; - - &.active, - &:hover { - color: $blue-france-500; - border-bottom: 2px solid $blue-france-500; - - &.contact-link { - position: relative; - border-bottom: none; - - .contact-details { - display: block; - } - } - } - } -} - -.contact-details { - display: none; - position: absolute; - left: -165px; - background: #FFFFFF; - border: 2px solid $blue-france-500; - border-radius: 5px; - padding: 15px; - width: 400px; - color: $black; - z-index: 100; - font-size: initial; - line-height: 1.6; - - &::after, - &::before { - bottom: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - &::after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #FFFFFF; - border-width: 15px; - margin-left: -15px; - } - - &::before { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: $blue-france-500; - border-width: 18px; - margin-left: -18px; - } - - ul { - list-style-type: disc; - } -} - -.header-right-content { - display: flex; - align-items: center; - - > li { - @include horizontal-padding(8px); - - &:last-child { - padding-right: 0; - } - } -} - -.header-search { - position: relative; - - .form input[type=text] { - padding: 9px; - padding-right: 42px; - float: right; - max-width: 300px; - min-width: 90px; - margin: 0; - } - - label.hidden { - @extend .hidden; - } - - button { - @extend %outline; - - padding: 9px; - border: none; - background: none; - cursor: pointer; - position: absolute; - right: 0; - - &:hover { - opacity: 0.8; - } - } -} - -.header-menu-opener { - position: relative; - - img { - cursor: pointer; - - &:hover { - opacity: 0.8; - } - } -} - -.header-menu-button { - border: none; - padding: 0; - line-height: 14px; - vertical-align: middle; - - &:hover { - background: none; - } - -} - -.header-menu { - display: none; - position: absolute; - right: 0; - top: 34px; - font-size: 14px; - background: #FFFFFF; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); - border: 1px solid $border-grey; - min-width: 270px; - max-width: 340px; - z-index: 20; - - &.open { - display: block; - } - - li { - border-bottom: 1px solid $border-grey; - - &:last-child { - border-bottom: none; - } - - .menu-item { - align-items: center; - padding: 14px; - color: $dark-grey; - overflow: hidden; - text-overflow: ellipsis; - - img { - margin-right: 14px; - } - } - - .menu-link { - display: flex; - color: $black; - - &.active { - font-weight: bold; - } - - &:hover { - background: $light-grey; - } - } - } -} diff --git a/app/assets/stylesheets/procedure_show.scss b/app/assets/stylesheets/procedure_show.scss index 660a77d14..dda16de7e 100644 --- a/app/assets/stylesheets/procedure_show.scss +++ b/app/assets/stylesheets/procedure_show.scss @@ -1,5 +1,4 @@ @import "colors"; -@import "common"; @import "constants"; .procedure-header { diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss deleted file mode 100644 index 02fb6ffef..000000000 --- a/app/assets/stylesheets/reset.scss +++ /dev/null @@ -1,48 +0,0 @@ -/* - 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-spacing: 0; -} diff --git a/app/assets/stylesheets/_tabs.scss b/app/assets/stylesheets/tabs.scss similarity index 100% rename from app/assets/stylesheets/_tabs.scss rename to app/assets/stylesheets/tabs.scss