bachir/drupal-reha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css /mes-operations

Browse Source
This commit is contained in:
ouidade
2023-11-29 20:53:35 +01:00
parent 728ff43323
commit 93d8c4139c
9 changed files with 110 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/css/reha.css
+20 -7
View File
@@ -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;
web/themes/custom/reha/scss/configuratoin/_breakpoints.scss
+16
View File
@@ -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;
web/themes/custom/reha/scss/functions/mixins/_breakpoints.scss
+30
View File
@@ -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; }
}
}
}
web/themes/custom/reha/scss/global/_layout.scss
+5 -3
View File
@@ -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{
web/themes/custom/reha/scss/global/_mediaquerries.scss
+8
View File
@@ -0,0 +1,8 @@
@media (max-width:800px) {
header{
#block-reha-logoministere{
padding-left: 2rem;
}
}
}
web/themes/custom/reha/scss/global/variables/_colors.scss
-8
View File
@@ -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);
web/themes/custom/reha/scss/global/variables/_typography.scss
-12
View File
@@ -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;
// }
web/themes/custom/reha/scss/partials/_header.scss
+25 -7
View File
@@ -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;
web/themes/custom/reha/scss/reha.scss
+6 -4
View File
@@ -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";
@import "pages/proposer-une-operation";
@import "pages/user--edit";