DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor(scss): remove legacy reset + generic rules, refactor imports

Browse source
This commit is contained in:
Colin Darie 2022-10-05 13:59:38 +02:00
parent 5a50383a27
commit 08c207e0e4
20 changed files with 46 additions and 435 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/assets/stylesheets/01_common.scss Normal file
View file

@ -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 <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 .page-wrapper {
cursor: pointer;
}
.container {
@extend %container;
}

0
app/assets/stylesheets/utils.scss → app/assets/stylesheets/02_utils.scss
View file

0
app/assets/stylesheets/fonts.scss → app/assets/stylesheets/_fonts.scss
View file

3
app/assets/stylesheets/_mixins.scss
View file

@ -1,3 +1,5 @@
@import "constants";
@mixin horizontal-padding($value) { @mixin horizontal-padding($value) {
padding-left: $value; padding-left: $value;
padding-right: $value; padding-right: $value;
@ -20,3 +22,4 @@
background-image: image-url($image-url); background-image: image-url($image-url);
} }
} }

8
app/assets/stylesheets/_placeholders.scss
View file

@ -1,4 +1,5 @@
@import "colors"; @import "colors";
@import "mixins";
@import "constants"; @import "constants";
%horizontal-list { %horizontal-list {
@ -25,3 +26,10 @@
outline: 3px solid $blue-france-500; 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;
}

12
app/assets/stylesheets/_typography.scss
View file

@ -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;
}

5
app/assets/stylesheets/application.scss
View file

@ -1,6 +1 @@
// = require ./reset
// = require ./custom_reset
// = require ./common
// = require ./utils
// = require ./fonts
// = require_tree . // = require_tree .

1
app/assets/stylesheets/avis.scss
View file

@ -1,5 +1,4 @@
@import "colors"; @import "colors";
@import "common";
@import "constants"; @import "constants";
.give-avis { .give-avis {

3
app/assets/stylesheets/avis_sign_up.scss
View file

@ -1,6 +1,3 @@
@import "typography";
@import "colors";
.avis-sign-up { .avis-sign-up {
.left { .left {
p { p {

5
app/assets/stylesheets/card_admin.scss
View file

@ -2,7 +2,6 @@
@import "constants"; @import "constants";
.card-admin { .card-admin {
color: $black;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
width: 236px; width: 236px;
@ -45,6 +44,10 @@
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
p {
margin-bottom: 0;
}
&:hover { &:hover {
color: $blue-france-500; color: $blue-france-500;

86
app/assets/stylesheets/common.scss
View file

@ -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 <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 .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;
}

28
app/assets/stylesheets/custom_reset.scss
View file

@ -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;
}

1
app/assets/stylesheets/dossier_annotations_privees.scss
View file

@ -1,5 +1,4 @@
@import "colors"; @import "colors";
@import "common";
@import "constants"; @import "constants";
#dossier-annotations-privees { #dossier-annotations-privees {

2
app/assets/stylesheets/dsfr.scss
View file

@ -17,7 +17,7 @@ select {
.fr-footer__bottom-link { .fr-footer__bottom-link {
// re-apply color unsetted by our common "a" rule setting a blue // 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 // with Marianne font, weight of font is less bolder, so bold it up

4
app/assets/stylesheets/layouts.scss
View file

@ -1,6 +1,6 @@
@import "colors"; @import "colors";
@import "common";
@import "constants"; @import "constants";
@import "placeholders";
.two-columns { .two-columns {
background-color: $white; background-color: $white;
@ -10,7 +10,7 @@
} }
.columns-container { .columns-container {
@extend .container; @extend %container;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

2
app/assets/stylesheets/merci.scss
View file

@ -1,5 +1,3 @@
@import "colors";
@import "common";
@import "constants"; @import "constants";
.merci .monavis { .merci .monavis {

244
app/assets/stylesheets/new_header.scss
View file

@ -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. // No drop shadow when a notice is shown.
.fr-header.fr-header__with-notice-info { .fr-header.fr-header__with-notice-info {
&, &,
@ -19,233 +5,3 @@ $header-mobile-breakpoint: 550px;
filter: none; 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;
}
}
}
}

1
app/assets/stylesheets/procedure_show.scss
View file

@ -1,5 +1,4 @@
@import "colors"; @import "colors";
@import "common";
@import "constants"; @import "constants";
.procedure-header { .procedure-header {

48
app/assets/stylesheets/reset.scss
View file

@ -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;
}

0
app/assets/stylesheets/_tabs.scss → app/assets/stylesheets/tabs.scss
View file