From 93d8c4139c1c3225b1f5b781a4485115bf448428 Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 29 Nov 2023 20:53:35 +0100 Subject: [PATCH] css /mes-operations --- web/themes/custom/reha/css/reha.css | 27 ++++++++++++---- .../reha/scss/configuratoin/_breakpoints.scss | 16 ++++++++++ .../scss/functions/mixins/_breakpoints.scss | 30 +++++++++++++++++ .../custom/reha/scss/global/_layout.scss | 8 +++-- .../reha/scss/global/_mediaquerries.scss | 8 +++++ .../reha/scss/global/variables/_colors.scss | 8 ----- .../scss/global/variables/_typography.scss | 12 ------- .../custom/reha/scss/partials/_header.scss | 32 +++++++++++++++---- web/themes/custom/reha/scss/reha.scss | 10 +++--- 9 files changed, 110 insertions(+), 41 deletions(-) create mode 100644 web/themes/custom/reha/scss/configuratoin/_breakpoints.scss create mode 100644 web/themes/custom/reha/scss/functions/mixins/_breakpoints.scss create mode 100644 web/themes/custom/reha/scss/global/_mediaquerries.scss diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index 632fc03..ecaff3f 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -127,12 +127,11 @@ position: relative; width: 100vw; background-color: rgba(153, 147, 174, 0.1); - font-family: 'Marianne'; + font-family: "Marianne", sans-serif; font-weight: 400; font-style: normal; top: 0%; left: 0%; - width: 100%; overflow: hidden; display: flex; flex-flow: row wrap; } @@ -152,7 +151,8 @@ aside { width: 20%; order: 1; margin-top: 5rem; - margin-left: 10rem; } + margin-left: 10%; + margin-right: 1rem; } main { width: 100%; @@ -184,6 +184,10 @@ html.js body div.dialog-off-canvas-main-canvas div.layout-container { svg.mailto { display: none; } +@media (max-width: 800px) { + header #block-reha-logoministere { + padding-left: 2rem; } } + /*partials*/ header { display: block; @@ -191,6 +195,7 @@ header { background-color: white; z-index: 99; width: 100vw; + max-width: 100vw; position: -webkit-sticky; position: sticky; top: 0; @@ -201,9 +206,17 @@ header { grid-template-columns: repeat(10, 1fr); } header .region-header #block-reha-logoministere { grid-column: 1; - width: fit-content; + width: 200px; + min-width: 100px; padding-left: 4rem; - height: 150px; } + height: 100%; } + header .region-header #block-reha-logoministere img { + max-width: 100%; + object-fit: contain; } + @media (max-width: 891px) { + header .region-header #block-reha-logoministere { + width: 150px; + padding-left: 1rem; } } header .region-header #block-reha-logoreha { display: none; grid-column: 2; @@ -273,8 +286,8 @@ header { header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .request-password-link { margin-bottom: 4rem; font-size: 1rem; } - header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .request-password-link:hover { - text-decoration: #fdc300 underline; } + header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .request-password-link:hover { + text-decoration: #fdc300 underline; } header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul li p { font-style: italic; font-size: 0.9rem; diff --git a/web/themes/custom/reha/scss/configuratoin/_breakpoints.scss b/web/themes/custom/reha/scss/configuratoin/_breakpoints.scss new file mode 100644 index 0000000..43d0e02 --- /dev/null +++ b/web/themes/custom/reha/scss/configuratoin/_breakpoints.scss @@ -0,0 +1,16 @@ +// Media Device Breakpoints +$large-desktop-container: 75.000em !default; +$desktop-container: 60.000em !default; +$tablet-container: 48.000em !default; +$large-mobile-container: 30.000em !default; +$mobile-container: 100% !default; + +// Breakpoint Variables For Particles +$media: "all" !default; +$mobile-only: "#{$media} and (max-width:#{$tablet-container - 0.062})" !default; +$no-mobile: "#{$media} and (min-width:#{$tablet-container})" !default; +$small-mobile-range: "#{$media} and (max-width:#{$large-mobile-container})" !default; +$large-mobile-range: "#{$media} and (min-width:#{$large-mobile-container + 0.063}) and (max-width:#{$tablet-container - 0.062})" !default; +$tablet-range: "#{$media} and (min-width:#{$tablet-container}) and (max-width:#{$desktop-container - 0.062})" !default; +$desktop-range: "#{$media} and (min-width:#{$desktop-container}) and (max-width:#{$large-desktop-container - 0.062})" !default; +$large-desktop-range: "#{$media} and (min-width:#{$large-desktop-container})" !default; diff --git a/web/themes/custom/reha/scss/functions/mixins/_breakpoints.scss b/web/themes/custom/reha/scss/functions/mixins/_breakpoints.scss new file mode 100644 index 0000000..7e86f8b --- /dev/null +++ b/web/themes/custom/reha/scss/functions/mixins/_breakpoints.scss @@ -0,0 +1,30 @@ +// Breakpoints +@mixin breakpoint($breakpoints, $media: all) { + @each $breakpoint in $breakpoints { + @if $breakpoint == large-desktop-range { + @media only #{$media} and (min-width: $large-desktop-container) { @content; } + } + @else if $breakpoint == desktop-range { + @media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; } + } + @else if $breakpoint == tablet-range { + @media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; } + } + @else if $breakpoint == large-mobile-range { + @media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; } + } + @else if $breakpoint == small-mobile-range { + @media only #{$media} and (max-width: $large-mobile-container) { @content; } + } + @else if $breakpoint == no-mobile { + @media only #{$media} and (min-width: $tablet-container) { @content; } + } + @else if $breakpoint == mobile-only { + @media only #{$media} and (max-width: $tablet-container - 0.062) { @content; } + } + @else if $breakpoint == desktop-only { + @media only #{$media} and (max-width: $desktop-container - 0.062) { @content; } + } + } + +} diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss index f5aec70..209d7a4 100644 --- a/web/themes/custom/reha/scss/global/_layout.scss +++ b/web/themes/custom/reha/scss/global/_layout.scss @@ -6,12 +6,12 @@ $width-menu-slidedown : 550px; position: relative; width: 100vw; background-color: $background-home; - font-family: 'Marianne'; + font-family: $font-family-default; font-weight: 400; font-style: normal; top: 0%; left: 0%; - width: 100%; + // width: 100%; overflow: hidden; display: flex; flex-flow: row wrap; @@ -39,7 +39,8 @@ aside{ width: 20%; order: 1; margin-top: 5rem; - margin-left: 10rem; + margin-left: 10%; + margin-right: 1rem; } main{ width: 100%; @@ -47,6 +48,7 @@ main{ flex-direction: row; position: relative; + } .main-content{ diff --git a/web/themes/custom/reha/scss/global/_mediaquerries.scss b/web/themes/custom/reha/scss/global/_mediaquerries.scss new file mode 100644 index 0000000..bd61ace --- /dev/null +++ b/web/themes/custom/reha/scss/global/_mediaquerries.scss @@ -0,0 +1,8 @@ + +@media (max-width:800px) { + header{ + #block-reha-logoministere{ + padding-left: 2rem; + } + } +} \ No newline at end of file diff --git a/web/themes/custom/reha/scss/global/variables/_colors.scss b/web/themes/custom/reha/scss/global/variables/_colors.scss index 0f5d0d4..cdb9a11 100644 --- a/web/themes/custom/reha/scss/global/variables/_colors.scss +++ b/web/themes/custom/reha/scss/global/variables/_colors.scss @@ -9,12 +9,4 @@ $white-header:rgb(255, 255, 255); $yellow-puca: #fdc300; -// $blue-light: rgb(0,158,227); -// $blue-dark: rgb(9,57,139); -// $grey-background: rgb(153,147,174); -// $black: rgb(0,0,0); -// $white: rgb(255,255,255); -// $background-actus: rgba(0,158,227, 0.2); -// $red: rgb(225,0,15); - diff --git a/web/themes/custom/reha/scss/global/variables/_typography.scss b/web/themes/custom/reha/scss/global/variables/_typography.scss index 56b26d1..e5c6118 100644 --- a/web/themes/custom/reha/scss/global/variables/_typography.scss +++ b/web/themes/custom/reha/scss/global/variables/_typography.scss @@ -2,20 +2,8 @@ $font-family-default: "Marianne", sans-serif; $font-family-header: "Marianne", sans-serif; $font-family-chapeau: "Marianne", sans-serif; -// $font-family-mono: "Inconsolata", monospace; -// $font-family-serif: "Georgia", "Times", "Times New Roman", serif; -// Font Weight -// les deux lignes qui suivent ne marchent pas !! -$font-regular: "Marianne", 600, normal; -$font-regular-italic: 600, italic; -// à tester, pas aboutis -// $font-titre-page() { -// font-style: normal; -// font-weight: 900; -// font-family: $font-family-default; -// } diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss index c255e64..c43e3d7 100644 --- a/web/themes/custom/reha/scss/partials/_header.scss +++ b/web/themes/custom/reha/scss/partials/_header.scss @@ -2,14 +2,19 @@ header{ display: block; - height: $header-height; + height: 150px; background-color: $white-header; z-index: 99; width: 100vw; + max-width: 100vw; position: -webkit-sticky; position: sticky; top: 0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + // @media (max-width:800px) { + // height: 100px; + + // } .region-header{ display: inline-grid; align-items: center; @@ -17,9 +22,20 @@ header{ #block-reha-logoministere{ grid-column: 1; - width: fit-content; + width: 200px; + + min-width: 100px; padding-left: 4rem; - height: $header-height; + height: 100%; + img{ + max-width: 100%; + object-fit: contain; + } + @media (max-width:891px) { + width: 150px; + padding-left: 1rem; + } + } #block-reha-logoreha{ display: none; @@ -90,7 +106,6 @@ header{ flex-grow: 0; } } - } ul{ font-size: 1.2rem; @@ -107,10 +122,13 @@ header{ .request-password-link{ margin-bottom: 4rem; font-size: 1rem; + &:hover{ + text-decoration: $yellow-puca underline; + } } - .request-password-link:hover{ - text-decoration: $yellow-puca underline; - } + // .request-password-link:hover{ + // text-decoration: $yellow-puca underline; + // } li p{ font-style: italic; font-size: 0.9rem; diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss index 50b97e0..2fa1abf 100644 --- a/web/themes/custom/reha/scss/reha.scss +++ b/web/themes/custom/reha/scss/reha.scss @@ -1,7 +1,7 @@ /*reha*/ - - +// @import "configuration/_breakpoints.scss"; +// @import "functions/mixins/_breakpoints.scss"; /*global*/ @@ -12,6 +12,8 @@ @import "global/fonts"; @import "global/layout"; @import "global/reset"; +@import "global/mediaquerries"; + /*partials*/ @import "partials/header"; @@ -24,5 +26,5 @@ @import "pages/home"; @import "pages/creer-un-compte"; @import "pages/mes-operations"; -@import "pages/proposer-une-operation.scss"; -@import "pages/user--edit.scss"; \ No newline at end of file +@import "pages/proposer-une-operation"; +@import "pages/user--edit"; \ No newline at end of file