gitea_admin/aduzuki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
julliechaumard
2023-02-28 01:15:30 +01:00
parent e09ebe2d92
commit dd49ba357b
151 changed files with 17859 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/scss/app.scss Normal file
View File

@@ -0,0 +1,36 @@
@charset 'utf-8';
// création du app.css
//base
@import "base/reset";
@import "base/colors";
@import "base/fonts";
@import "base/space";
//Global
@import "global/mediaqueries";
@import "global/main";
// vendors
// Components
@import "components/header_tunnel";
@import "components/header_inscription";
@import "components/savoirplus";
@import "components/titrepage";
@import "components/footer";
@import "components/inputs";
@import "components/check_mail";
// Modules
// Templates
@import "templates/adhesion_mail";
@import "templates/adhesion";
@import "templates/paiement";
@import "templates/adhesion_end";
@import "templates/stageformulaire";

35
src/scss/base/_colors.scss Normal file
View File

@@ -0,0 +1,35 @@
/* SCSS */
/* VARIABLES */
/* COLORS */
// /////////////////////////////////
// VARIABLES DES COULEURS
// /////////////////////////////////
// NOIR
$color_noir: #343434;
$color_noir_fonce: #454343;
$color_noir_clair: #1c1c1c;
$color_gris_fonce: #707070;
$color_gris_clair: #A2A0A0;
$color_rouge: #E73058;
$color_rouge_tres_clair: #e7305821;
$color_blanc: white;
$color_bleu: #3644AC;
$color_bleu_clair: #7984D1;
$color_bleu_clair2: #525EBB;
$color_bleu_fonce_1: #1B299A;
$color_bleu_fonce_2: #101D77;
// /////////////////////////////////
// CSS COULEURS
// /////////////////////////////////
.rouge {
color: $color_rouge !important;
}
.bg_green {
background-color: green !important;
}

171
src/scss/base/_fonts.scss Normal file
View File

@@ -0,0 +1,171 @@
/* CSS */
/* fonts */
@font-face {
font-family: 'cabin_semibolditalic';src: url('../fonts/cabin_semibolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'cabin_mediumitalic';src: url('../fonts/cabin_mediumitalic.ttf') format('truetype');
}
@font-face {
font-family: 'cabin_bolditalic';src: url('../fonts/cabin_bolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'cabin_semibold';src: url('../fonts/cabin_semibold.ttf') format('truetype');
}
@font-face {
font-family: 'cabin_regular';src: url('../fonts/cabin_regular.ttf') format('truetype');
}
@font-face {
font-family: 'cabin_medium';src: url('../fonts/cabin_medium.ttf') format('truetype');
}
@font-face {
font-family: 'cabin_italic';src: url('../fonts/cabin_italic.ttf') format('truetype');
}
@font-face {
font-family: 'cabin_bold';src: url('../fonts/cabin_bold.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_semibolditalic';src: url('../fonts/sourceserifpro_semibolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_extralightitalic';src: url('../fonts/sourceserifpro_extralightitalic.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_regular';src: url('../fonts/sourceserifpro_regular.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_lightitalic';src: url('../fonts/sourceserifpro_lightitalic.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_bold';src: url('../fonts/sourceserifpro_bold.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_blackitalic';src: url('../fonts/sourceserifpro_blackitalic.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_italic';src: url('../fonts/sourceserifpro_italic.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_light';src: url('../fonts/sourceserifpro_light.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_black';src: url('../fonts/sourceserifpro_black.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_semibold';src: url('../fonts/sourceserifpro_semibold.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_bolditalic';src: url('../fonts/sourceserifpro_bolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'sourceserifpro_extralight';src: url('../fonts/sourceserifpro_extralight.ttf') format('truetype');
}
@font-face {
font-family: 'playfairdisplay_blackitalic';src: url('../fonts/playfairdisplay_blackitalic.ttf') format('truetype');
}
@font-face {
font-family: 'playfairdisplay_bolditalic';src: url('../fonts/playfairdisplay_bolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'playfairdisplay_regular';src: url('../fonts/playfairdisplay_regular.ttf') format('truetype');
}
@font-face {
font-family: 'playfairdisplay_italic';src: url('../fonts/playfairdisplay_italic.ttf') format('truetype');
}
@font-face {
font-family: 'playfairdisplay_black';src: url('../fonts/playfairdisplay_black.ttf') format('truetype');
}
@font-face {
font-family: 'playfairdisplay_bold';src: url('../fonts/playfairdisplay_bold.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_extrabolditalic';src: url('../fonts/montserrat_extrabolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_semibolditalic';src: url('../fonts/montserrat_semibolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_italic';src: url('../fonts/montserrat_italic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_regular';src: url('../fonts/montserrat_regular.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_black';src: url('../fonts/montserrat_black.ttf') format('truetype');
}
@font-face {
font-family: 'montsermontserrat_extraboldrat_regular';src: url('../fonts/montserrat_extrabold.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_extralightitalic';src: url('../fonts/montserrat_extralightitalic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_semibold';src: url('../fonts/montserrat_semibold.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_blackitalic';src: url('../fonts/montserrat_blackitalic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_mediumitalic';src: url('../fonts/montserrat_mediumitalic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_bold';src: url('../fonts/montserrat_bold.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_thin';src: url('../fonts/montserrat_thin.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_extralight';src: url('../fonts/montserrat_extralight.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_thinitalic';src: url('../fonts/montserrat_thinitalic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_light';src: url('../fonts/montserrat_light.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_bolditalic';src: url('../fonts/montserrat_bolditalic.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_medium';src: url('../fonts/montserrat_medium.ttf') format('truetype');
}
@font-face {
font-family: 'montserrat_lightitalic';src: url('../fonts/montserrat_lightitalic.ttf') format('truetype');
}
@font-face {
font-family: 'ubuntu_bold';src: url('../fonts/ubuntu_bold.ttf') format('truetype');
}
@font-face {
font-family: 'ubuntu_courant';src: url('../fonts/ubuntu_courant.ttf') format('truetype');
}
@font-face {
font-family: 'ubuntu_fin';src: url('../fonts/ubuntu_fin.ttf') format('truetype');
}
@font-face {
font-family: 'ubuntu_fin_italic';src: url('../fonts/ubuntu_leger_italic.ttf') format('truetype');
}
@font-face {
font-family: 'ubuntu_leger';src: url('../fonts/ubuntu_leger.ttf') format('truetype');
}
@font-face {
font-family: 'ubuntu_moyen';src: url('../fonts/ubuntu_moyen.ttf') format('truetype');
}
@font-face {
font-family: 'ubuntu_moyen_italique';src: url('../fonts/ubuntu-moyen_italique.ttf') format('truetype');
}
.gras {
font-family: cabin_bold;
}

21
src/scss/base/_reset.scss Normal file
View File

@@ -0,0 +1,21 @@
/* CSS de base */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote, main, article, aside, section {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
li, ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
body {
font-family: cabin_regular;
}

10
src/scss/base/_space.scss Normal file
View File

@@ -0,0 +1,10 @@
/* ***************************************** */
/* ***************************************** */
/* ESPACE ENTRE LES BLOCS */
/* ***************************************** */
/* ***************************************** */
.space30 {
height: 30px;
}

145
src/scss/components/_check_mail.scss Normal file
View File

@@ -0,0 +1,145 @@
.erreur {
max-width: 500px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
margin-bottom: 70px;
@include media_max(phone){
margin-left: 10px;
margin-right: 10px;
}
@include media_minmax(phone,desktop){
margin-left: auto;
margin-right: auto;
}
text-align: center;
p {
margin-bottom: 15px;
color: $color_rouge;
}
.souligne {
text-decoration: underline;
}
}
.form_check_mail {
display: grid;
grid-template-columns: 2fr 1fr 2fr;
grid-template-rows: auto auto auto;
grid-template-areas:
". input ."
". checkbox checkbox"
". button .";
.input_email {
grid-area: input;
}
.input_checkbox {
grid-area: checkbox;
margin-top: 5px;
margin-left: 5px;
margin-bottom: 35px;
.gras {
font-family: cabin_semibold;
color: $color_noir;
}
}
button {
grid-area: button;
justify-self: center;
}
}
.open_modal {
display: grid;
justify-content: center;
margin-top: 150px;
text-decoration: underline;
p {
&:hover {
cursor: pointer;
}
}
}
.prelude {
/*display: grid;*/
/*justify-content: center;*/
/*margin-top: 150px;*/
/* **************************************************************** */
/* ** POUR FENETRE MODALE ** */
/* **************************************************************** */
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 150px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
/* **************************************************************** */
font-family: cabin_regular;
font-size: 15px;
.prelude_content {
/*max-width: 700px;*/
/* **************************************************************** */
/* ** POUR FENETRE MODALE ** */
/* **************************************************************** */
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 5px solid $color_rouge;
border-radius: 20px;
width: 80%;
/* **************************************************************** */
}
ol {
margin-left: 20px;
li {
list-style-type: decimal;
}
}
ul {
margin-left: 20px;
li {
list-style-type: circle;
}
}
.gras {
font-family: cabin_semibold;
}
}
.prelude_close {
float: right;
margin-top: -25px;
font-size: 50px;
color: $color_rouge;
}
.prelude_close:hover,
.prelude_close:focus {
cursor: pointer;
color: $color_rouge;
text-decoration: none;
}

23
src/scss/components/_footer.scss Normal file
View File

@@ -0,0 +1,23 @@
/* ***************************************** */
/* ***************************************** */
/* LE FOOTER */
/* ***************************************** */
/* ***************************************** */
footer{
min-height: 300px;
margin-top: 100px;
background-color: $color_noir;
padding: 15px;
display: grid;
.version {
align-self: end;
color: white;
text-align: end;
font-size: 11px;
}
}

13
src/scss/components/_header_inscription.scss Normal file
View File

@@ -0,0 +1,13 @@
header {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
.logo {
margin-top: 30px;
margin-bottom: 70px;
img {
max-width: 100%;
}
}
}

13
src/scss/components/_header_tunnel.scss Normal file
View File

@@ -0,0 +1,13 @@
.header_tunnel {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
.logo {
margin-top: 30px;
margin-bottom: 70px;
img {
max-width: 100%;
}
}
}

302
src/scss/components/_inputs.scss Normal file
View File

@@ -0,0 +1,302 @@
/* ***************************************** */
/* ***************************************** */
/* INPUT */
/* ***************************************** */
/* ***************************************** */
/* FORMAT DE LA STRUCTURE DU CHAMP DE SAISIE */
/* ***************************************** */
.input_box {
position: relative;
label {
position: absolute;
top: -12px;
left: 6px;
margin-left: 6px;
padding-left: 7px;
padding-right: 10px;
background-color: $color_blanc;
}
.labeltextarea {
top: -28px;
}
input[type=email] {
padding-top: 19px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 13px;
background-color: $color_blanc;
border: 2px solid $color_noir_fonce;
outline: none;
&:focus-visible, &:focus, &:focus-within, &:hover, &:focus, &:active, &:visited, &:target {
background-color: $color_blanc !important;
border: 2px solid $color_noir_fonce;
outline: none;
}
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:visited, &:target {
box-shadow: 0 0 0 30px white inset !important;
}
border-radius: 5px;
color: $color_noir_fonce;
}
input,input[type=text],input[type=tel],input[type=date], textarea {
@include media_max(phone){
min-width: 240px;
}
@include media_minmax(phone,desktop){
min-width: 250px;
}
@include media_min(desktop){
min-width: 330px;
}
max-width: 500px;
padding-top: 14px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 8px;
background-color: $color_blanc;
border-radius: 5px;
outline: none;
&:focus-visible, &:focus, &:focus-within, &:hover, &:focus, &:active, &:visited, &:target {
background-color: $color_blanc !important;
border: 2px solid $color_noir_fonce;
outline: none;
}
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:visited, &:target {
box-shadow: 0 0 0 30px white inset !important;
}
}
select {
@include media_max(phone){
min-width: 261px;
max-width: 261px;
}
@include media_minmax(phone,desktop){
min-width: 272px;
}
@include media_min(desktop){
min-width: 350px;
}
max-width: 500px;
padding-top: 14px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 8px;
background-color: $color_blanc;
border-radius: 5px;
outline: none;
&:focus-visible, &:focus, &:focus-within, &:hover, &:focus, &:active, &:visited, &:target {
background-color: $color_blanc !important;
border: 2px solid $color_noir_fonce;
outline: none;
}
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:visited, &:target {
box-shadow: 0 0 0 30px white inset !important;
}
}
}
.input_box_gris {
label {
color: $color_gris_fonce;
}
input,input[type=text],input[type=tel],input[type=date], select, textarea {
border: 1.8px solid $color_gris_fonce;
}
}
.input_box_bleu {
label {
color: $color_bleu_clair;
}
input,input[type=text],input[type=tel],input[type=date], select, textarea {
border: 1.8px solid $color_bleu_fonce_1;
}
}
/* FORMAT DU CONTENUE DU CHAMP DE SAISIE */
/* ***************************************** */
.input_email {
margin-bottom: 11px;
input[type="email"],input[type=text] {
@include media_max(phone){
min-width: 240px;
}
@include media_min(phone){
min-width: 330px;
}
max-width: 500px;
font-family: montserrat_light;
font-size: 15px;
@include media_max(phone){
font-size: 12px;
}
&::placeholder {
font-family: cabin_italic;
font-size: 12px;
color: $color_gris_clair;
}
}
}
.input_identifiant {
margin-bottom: 11px;
.inputbox_identifiant {
@include media_max(phone){
min-width: 240px;
}
@include media_min(phone){
min-width: 330px;
}
max-width: 500px;
padding-top: 19px !important;
padding-bottom: 16px !important;
padding-left: 16px !important;
padding-right: 13px !important;
background-color: $color_blanc !important;
border: 2px solid $color_noir_fonce !important;
outline: none;
&:focus-visible, &:focus, &:focus-within, &:hover, &:focus, &:active, &:visited, &:target {
background-color: $color_blanc !important;
border: 2px solid $color_noir_fonce;
outline: none;
}
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:visited, &:target {
box-shadow: 0 0 0 30px white inset !important;
}
color: $color_noir_fonce;
@include media_max(phone){
font-size: 12px;
}
&::placeholder {
font-family: cabin_italic;
font-size: 12px;
color: $color_gris_clair;
}
}
}
.input_text {
label {
font-size: 14px;
@include media_max(phone){
font-size: 13px;
}
}
input,input[type=text],input[type=tel],input[type=date], select, textarea {
font-family: cabin_regular;
font-size: 14px;
@include media_max(phone){
font-size: 13px;
}
color: $color_noir_clair;
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:visited, &:target {
-webkit-text-fill-color: $color_noir_clair;
}
&::placeholder {
font-family: cabin_italic;
font-size: 12px;
color: $color_gris_clair;
}
}
}
/* ***************************************** */
/* ***************************************** */
/* CHECKBOX */
/* ***************************************** */
/* ***************************************** */
.input_checkbox {
//max-width: 300px;
label {
margin-left: 5px;
font-size: 14px;
@include media_max(phone){
font-size: 13px;
}
color: $color_gris_fonce;
}
input[type="checkbox"] {
appearance: none;
width: 17px;
height: 17px;
margin: 0;
transform: translateY(3.9px);
border: 0.15em solid $color_rouge;
border-radius: 3px;
font: inherit;
&:checked {
background-color: $color_rouge;
}
}
}
/* ***************************************** */
/* ***************************************** */
/* BUTTONS */
/* ***************************************** */
/* ***************************************** */
.button_icone {
appearance: none;
width: 170px;
height: 60px;
margin: 0;
box-shadow: -10px 16px 24px -18px rgb(0 0 0 / 60%);
border: none;
border-radius: 28px;
font: inherit;
background-color: $color_rouge;
color: $color_blanc;
.btn_icone {
font-family: montserrat_regular;
font-size: 36px;
}
.btn_texte {
display: inline-block;
transform: translateY(-7px);
padding-left: 10px;
font-size: 17px;
}
}
.button_text {
appearance: none;
width: 100px;
height: 35px;
margin: 0;
box-shadow: -10px 16px 24px -18px rgb(0 0 0 / 60%);
border: none;
border-radius: 20px;
font: inherit;
background-color: $color_rouge;
color: $color_blanc;
font-size: 15px;
}
.button_sansicone {
.btn_texte {
transform: translateY(0px);
padding-left: 00px;
}
}

81
src/scss/components/_savoirplus.scss Normal file
View File

@@ -0,0 +1,81 @@
.displaynone {
display: none;
}
.ouvrir {
display: block !important;
}
.savoirplus_icone {
width: 14px;
margin-bottom: -2px;
}
.close_icone {
width: 18px;
margin-bottom: 10px;
}
.savoirplus_content {
margin-top: 30px;
background-color: #fefefe;
padding: 20px;
@include media_max(phone){
padding: 10px;
}
border: 5px solid $color_rouge;
border-radius: 20px;
ol {
margin-left: 20px;
li {
list-style-type: decimal;
}
}
ul {
margin-left: 20px;
li {
list-style-type: circle;
}
}
.gras {
font-family: cabin_semibold;
}
.souligne {
text-decoration: underline;
}
.rouge {
color: $color_rouge;
}
}
.savoirplus_accueil{
width: 80%;
@include media_max(phone){
width: 95%;
}
margin-top: 150px;
margin-right: auto;
margin-left: auto;
.savoirplus_button {
text-align: center;
text-decoration: underline;
&:hover {
cursor: pointer;
}
}
}
.savoirplus_stage {
width: 80%;
@include media_max(phone){
width: 95%;
}
margin-top: 15px;
margin-bottom: 48px;
margin-right: auto;
margin-left: auto;
}

29
src/scss/components/_titrepage.scss Normal file
View File

@@ -0,0 +1,29 @@
.titre {
@include media_max(phone){
margin-left: 10px;
margin-right: 10px;
}
@include media_minmax(phone,desktop){
margin-left: 20px;
margin-right: 20px;
}
margin-bottom: 100px;
h1 {
margin-bottom: 9px;
text-align: center;
font-family: cabin_semibold;
font-size: 24px;
}
p {
text-align: center;
font-family: cabin_bold;
font-size: 24px;
color: $color_noir_clair;
.soft {
font-family: cabin_semibold;
color: #707070;
}
}
}

16
src/scss/global/_main.scss Normal file
View File

@@ -0,0 +1,16 @@
main {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
@include media_min("desktop"){
min-height: 400px;
}
@include media_max("desktop"){
min-height: 340px;
}
@include media_max("phone"){
min-height: 230px;
}
}

23
src/scss/global/_mediaqueries.scss Normal file
View File

@@ -0,0 +1,23 @@
$breakpoints: (
"phone": 600px,
"desktop": 1200px
);
@mixin media_min($key) {
@media (min-width: map-get($breakpoints,$key)) {
&{ @content; }
}
}
@mixin media_max($key) {
@media (max-width: map-get($breakpoints,$key)) {
&{ @content; }
}
}
@mixin media_minmax($key_min, $key_max) {
@media (min-width: map-get($breakpoints,$key_min)) and (max-width: map-get($breakpoints,$key_max)) {
&{ @content; }
}
}

88
src/scss/templates/_adhesion.scss Normal file
View File

@@ -0,0 +1,88 @@
.form_adhesion {
display: grid;
justify-content: center;
@include media_min("phone"){
margin-left: 30px;
margin-right: 30px;
}
@include media_max("phone"){
margin-left: 11px;
margin-right: 10px;
}
.input_checkbox {
margin-bottom: 37px;
}
.explication {
max-width: 300px;
margin-bottom: 35px;
color: $color_bleu_fonce_2;
}
.ajout_ecole_button {
margin-top: -35px;
margin-bottom: 30px;
text-decoration: underline;
font-family: montserrat_light;
font-size: 12px;
&:hover {
cursor: pointer;
}
}
}
.grid_3inputs {
display: grid;
grid-template-columns: minmax(auto,350px) minmax(auto,350px) minmax(auto,350px);
@include media_max(phone){
grid-template-columns: minmax(auto,350px);
}
@include media_minmax(phone,desktop){
grid-template-columns: minmax(auto,350px) minmax(auto,350px);
}
grid-template-rows: auto;
column-gap: 20px;
row-gap: 30px;
margin-bottom: 50px;
margin-top: 10px;
}
.grid_2inputs {
display: grid;
grid-template-columns: minmax(auto,350px) minmax(auto,350px);
@include media_max(phone){
grid-template-columns: minmax(auto,350px);
}
grid-template-rows: auto;
column-gap: 20px;
row-gap: 30px;
//margin-bottom: 50px; mdifie le 14 janvier 2023
margin-bottom: 35px;
}
.paiement_explication {
max-width: 500px;
@include media_max(phone){
max-width: 242px;
}
margin-top: 20px;
padding: 11px;
border-radius: 16px;
background-color: $color_rouge_tres_clair;
font-size: 12px;
color: $color_gris_fonce;
}
.hidden {
display: none;
}
.identifiant {
padding-left: 5px;
@include media_max(phone){
display: block;
margin-top: 5px;
}
font-family: cabin_regular;
color: $color_gris_fonce;
}

153
src/scss/templates/_adhesion_end.scss Normal file
View File

@@ -0,0 +1,153 @@
.adhesion_fin_container {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 1fr 3fr 1fr;
@include media_max(phone){
grid-template-columns: minmax(3px, auto) minmax(auto, 600px) minmax(3px, auto);
}
@include media_minmax(phone,desktop){
grid-template-columns: minmax(10px, auto) minmax(400px, 600px) minmax(10px, auto);
}
grid-template-areas: ". adhesion_fin .";
.adhesion_fin {
grid-area: adhesion_fin;
display: grid;
grid-template-rows: auto auto auto;
row-gap: 30px;
grid-template-areas:
"adhesion_fin_adresse"
"adhesion_fin_description"
"adhesion_fin_card";
.adhesion_fin_adresse {
grid-area: adhesion_fin_adresse;
justify-self: end;
.adhesion_fin_adresse_titre {
font-family: montserrat_semibold;
}
.adhesion_fin_adresse_infos {
margin-top: 10px;
font-family: montserrat_regular;
}
.adhesion_fin_adresse_identifiant {
margin-top: 15px;
font-family: montserrat_thin;
.adhesion_fin_adresse_identifiant_bold {
font-family: montserrat_regular;
}
}
.adhesion_fin_date {
margin-top: 15px;
font-family: montserrat_thin;
}
}
.adhesion_fin_description {
grid-area: adhesion_fin_description;
margin-top: 60px;
text-align: center;
.adhesion_fin_description_identifiant{
margin-top: 20px;
font-family: montserrat_thin;
font-size: 13px;
}
}
.adhesion_fin_card {
grid-area: adhesion_fin_card;
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
@include media_max(phone){
grid-template-columns: 5px minmax(auto, auto) minmax(auto, auto) minmax(5px, auto);
}
grid-template-rows: auto auto auto auto;
@include media_max(phone){
grid-template-rows: auto auto auto auto auto;
}
row-gap: 30px;
grid-template-areas:
"logo logo . adhesion_fin_card_description"
". adhesion_fin_card_identifiant adhesion_fin_card_identifiant adhesion_fin_card_identifiant"
". adhesion_fin_card_profil adhesion_fin_card_profil adhesion_fin_card_profil"
". adhesion_fin_paiement adhesion_fin_paiement adhesion_fin_paiement";
@include media_max(phone){
grid-template-areas:
"logo logo logo ."
"adhesion_fin_card_description adhesion_fin_card_description adhesion_fin_card_description adhesion_fin_card_description"
". adhesion_fin_card_identifiant adhesion_fin_card_identifiant adhesion_fin_card_identifiant"
". adhesion_fin_card_profil adhesion_fin_card_profil adhesion_fin_card_profil"
". adhesion_fin_paiement adhesion_fin_paiement adhesion_fin_paiement";
}
margin: 10%;
@include media_max(phone){
margin: 0;
}
padding: 20px;
@include media_max(phone){
padding: 8px;
}
background-color: $color_rouge_tres_clair;
border: 4px dashed $color_rouge;
.logo {
grid-area: logo;
img {
width: 100%;
}
}
.adhesion_fin_card_description {
grid-area: adhesion_fin_card_description;
justify-self: end;
@include media_max(phone){
justify-self: center;
}
text-align: center;
.adhesion_fin_card_description_assoc {
margin-top: 5px;
font-family: montserrat_regular;
font-size: 14px;
}
.adhesion_fin_card_description_annee {
margin-top: 5px;
font-family: montserrat_light;
font-size: 12px;
}
}
.adhesion_fin_card_identifiant {
grid-area: adhesion_fin_card_identifiant;
margin-top: 14px;
font-family: montserrat_thin;
.adhesion_fin_card_identifiant_mail {
padding-left: 10px;
font-family: montserrat_regular;
color: $color_rouge;
}
}
.adhesion_fin_card_profil {
grid-area: adhesion_fin_card_profil;
font-family: montserrat_regular;
ul {
li {
&:before {
content: '- ';
}
}
}
}
.adhesion_fin_paiement {
grid-area: adhesion_fin_paiement;
font-family: montserrat_thin;
font-size: 13px;
}
}
}
}

12
src/scss/templates/_adhesion_mail.scss Normal file
View File

@@ -0,0 +1,12 @@
/* ***************************************** */
/* ***************************************** */
/* ADHESION */
/* PAGE ACCUEIL SAISIE DU MAIL */
/* ***************************************** */
/* ***************************************** */
/* **************************************************************** */
/* ** OUVRIR EN SAVOIR PLUS ** */
/* **************************************************************** */

237
src/scss/templates/_paiement.scss Normal file
View File

@@ -0,0 +1,237 @@
.paiement_container {
display: grid;
grid-column-gap: 20px;
@include media_max(phone){
grid-column-gap: unset;
}
grid-template-columns: 1fr 2fr 1fr;
@include media_max(phone){
grid-template-columns: minmax(5px, 300px) minmax(277px, 600px) minmax(10px, 300px);
}
@include media_minmax(phone,desktop){
grid-template-columns: minmax(10px, 300px) minmax(300px, 600px) minmax(10px, 300px);
}
grid-template-areas: ". paiement .";
.paiement {
grid-area: paiement;
border: 2px solid $color_rouge;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 15px;
@include media_max(phone){
grid-column-gap: unset;
}
grid-template-columns: 1fr 3fr 4fr;
@include media_max(phone){
grid-template-columns: 10px 4fr 3fr;
}
@include media_minmax(phone,desktop){
grid-template-columns: 0px 3fr 4fr;
}
grid-template-rows: auto auto auto auto auto auto auto auto auto;
grid-template-areas:
"paiement_titre paiement_titre paiement_titre"
". montant_cotisation_label montant_cotisation_euros_box"
". montant_don_label montant_don_euros_box"
". . don"
". montant_total_label montant_total_euros_box"
". paiement_mode ."
". paiement_mode_choix paiement_mode_choix_nocb"
". paiement_cb paiement_cb"
". paiement_nocb_form paiement_nocb_form";
@include media_max(phone){
grid-template-areas:
"paiement_titre paiement_titre paiement_titre"
". montant_cotisation_label montant_cotisation_euros_box"
". montant_don_label montant_don_euros_box"
". don don"
". montant_total_label montant_total_euros_box"
". paiement_mode ."
". paiement_mode_choix paiement_mode_choix_nocb"
". paiement_cb paiement_cb"
". paiement_nocb_form paiement_nocb_form";
}
@include media_minmax(phone,desktop){
grid-template-areas:
"paiement_titre paiement_titre paiement_titre"
". montant_cotisation_label montant_cotisation_euros_box"
". montant_don_label montant_don_euros_box"
". don don"
". montant_total_label montant_total_euros_box"
". paiement_mode ."
". paiement_mode_choix paiement_mode_choix_nocb"
". paiement_cb paiement_cb"
". paiement_nocb_form paiement_nocb_form";
}
.paiement_titre {
grid-area: paiement_titre;
margin-bottom: 30px;
padding-bottom: 5px;
padding-top: 5px;
background-color: $color_rouge;
color: $color_blanc;
text-align: center;
}
.montant_cotisation_label {
grid-area: montant_cotisation_label;
align-self: center;
color: $color_gris_clair;
@include media_max(phone){
font-size: 15px;
}
@include media_minmax(phone,desktop){
font-size: 15px;
}
}
.montant_cotisation_euros_box {
grid-area: montant_cotisation_euros_box;
}
.input_text_don {
label {
font-size: 14px;
@include media_max(phone){
font-size: 13px;
}
@include media_minmax(phone,desktop){
font-size: 13px;
}
}
input,input[type=text],input[type=tel],input[type=date], select {
min-height: 22px;
font-size: 14px;
@include media_max(phone){
font-size: 15px;
}
@include media_minmax(phone,desktop){
font-size: 15px;
}
@include media_max(phone){
font-size: 15px;
}
color: $color_noir_clair;
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:visited, &:target {
-webkit-text-fill-color: $color_noir_clair;
}
&::placeholder {
font-family: cabin_italic;
font-size: 12px;
color: $color_gris_clair;
}
}
}
.don {
grid-area: don;
margin-top: 22px;
margin-right: 15px;
}
.montant_don_label {
grid-area: montant_don_label;
align-self: center;
color: $color_gris_clair;
}
.montant_don_euros_box {
grid-area: montant_don_euros_box;
}
.montant_total_label {
grid-area: montant_total_label;
align-self: center;
}
.montant_total_euros_box {
grid-area: montant_total_euros_box;
}
.paiement_mode {
grid-area: paiement_mode;
margin-top: 40px;
}
.paiement_mode_choix {
grid-area: paiement_mode_choix;
}
.paiement_mode_choix_nocb {
grid-area: paiement_mode_choix_nocb;
}
#paiement_cb {
grid-area: paiement_cb;
}
.paiement_nocb {
grid-area: paiement_cb;
}
.paiement_nocb_choix {
display: flex;
}
.paiement_nocb_choix_cheque {
margin-left: 20px;
}
.open_modal_don {
display: grid;
margin-top: 6px;
margin-bottom: 45px;
text-decoration: underline;
font-size: 12px;
p {
&:hover {
cursor: pointer;
}
}
}
.montant_cotisation_euros {
display: inline-block;
padding-top: 8px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 8px;
@include media_max(phone){
font-size: 15px;
}
@include media_minmax(phone,desktop){
font-size: 15px;
}
}
.montant_total_label {
color: $color_rouge;
}
.montant_total_euros {
display: inline-block;
padding-top: 8px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 8px;
color: $color_rouge;
}
.paiement_nocb_form {
grid-area: paiement_nocb_form;
margin-bottom: 25px;
font-size: 13px;
.paiement_description {
margin-bottom: 3px;
font-family: montserrat_light;
}
}
.paiement_nocb_infos {
display: grid;
grid-template-rows: auto auto auto auto;
grid-row-gap: 25px;
.nom_banque {
margin-top: 15px;
}
}
.euro_label {
padding-left: 8px;
color: $color_gris_clair;
}
}
}

132
src/scss/templates/_stageformulaire.scss Normal file
View File

@@ -0,0 +1,132 @@
.stage_formulaire_cont {
//max-width: 1000px;
//margin-right: auto;
//margin-left: auto;
.stage_formulaire {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin-bottom: 35px;
.icone_titre {
width: 45px;
margin-bottom: -13px;
margin-right: 19px;
}
@include media_max("phone"){
font-size: 16px;
}
}
.titre_personne {
margin-top: 50px;
}
h2 {
margin-bottom: 47px;
font-size: 16px;
.icone_titre {
width: 42px;
margin-bottom: -17px;
margin-right: 13px;
}
.numero {
padding-left: 5px;
font-family: cabin_bold;
}
.remove_personne {
margin-left: 10px;
@media (max-width: 340px){
display: block;
margin-top: 2px;
margin-left: 56px;
}
}
.input_suppr {
display: none;
width: 10px;
}
.label_suppr {
font-size: 12px;
font-family: cabin_regular;
color: $color_gris_fonce;
}
}
.icone_hebergement {
display: flex;
align-items: end;
flex-wrap: wrap;
column-gap: 2px;
row-gap: 20px;
.icone {
width: 45px;
margin-right: 15px;
}
}
.personne {
margin-bottom: 45px;
}
.commentaire {
//align-self: flex-start;
margin-top: 130px;
.textarea_commentaire {
padding-top: 26px;
}
}
.button_icone {
margin-top: 43px;
}
.recap_personne {
margin-top: 40px;
}
.recap_personne, .tarifs {
p{
margin-left: 27px;
margin-bottom: 5px;
font-size: 14px;
}
}
.buttons {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 20px;
justify-content: center;
margin-top: 30px;
.button_icone_recap {
width: 206px !important;
}
}
.savoirplus_accueil {
margin-top: 62px !important;
}
hr {
width: 80%;
margin-top: 50px;
margin-bottom: 40px;
}
.description {
margin-top: 30px;
margin-bottom: 60px;
background-color: #fefefe;
padding: 20px;
border: 5px solid #E73058;
border-radius: 20px;
font-family: montserrat_light;
}
}