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

theme modale etape

Browse Source
This commit is contained in:
Valentin
2024-09-11 19:53:18 +02:00
parent c2d8eb99cf
commit ebb3ceb6d5
6 changed files with 270 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
web/themes/custom/caravane/assets/scss/main.scss
View File

@@ -7,6 +7,7 @@ $body-margin-bottom: 4vh;
$sm-font-size: 0.8rem;
$m-font-size: 1.4rem;
$l-font-size: 1.8rem;
$xl-font-size: 2.4rem;
$main-color: #1a1918;
$main-color-light: #635b58;
@@ -490,6 +491,16 @@ body{
}
}
}
> .user-login-form {
height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> div {
margin: 20px 0;
}
}
}
}
> #content-modale > div {
@@ -502,11 +513,118 @@ body{
img {
width: 100%;
height: auto;
object-fit: cover;
}
> div {
width: 100%;
overflow: hidden;
}
> header {
margin-bottom: 3rem;
> .cover {
max-height: 60vh;
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
z-index: 0;
}
> .cartouche {
position: absolute;
top: 2rem;
padding: 1rem 1.5rem;
background-color: $brand-color;
z-index: 1;
> p {
margin-block-start: 0;
margin-block-end: 0;
}
> p:last-of-type {
font-weight: bold;
}
}
> .brand-pattern {
display: block;
width: 100%;
height: 120px;
> .pattern {
display: block;
width: 100%;
height: 100%;
background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
background-size: 300px;
background-size: repeat;
}
}
> .locality {
position: relative;
z-index: 1;
width: 50%;
margin-left: 25%;
margin-top: -245px;
> .top-triangle {
display: block;
width: 100%;
height: 100px;
display: flex;
clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
background-color: white;
margin-bottom: -1px;
}
> .locality-title {
min-height: 115px;
display: block;
background-color: white;
padding: 1rem 2rem;
display: flex;
align-items: center;
> h1 {
width: 100%;
font-size: $xl-font-size;
margin-block-start: 0;
margin-block-end: 0;
font-family: 'Joost', sans-serif;
text-align: center;
> em {
font-style: normal;
font-weight: lighter;
}
}
}
}
}
> main {
width: 100%;
padding: 0 5vw;
box-sizing: border-box;
> .partie {
display: inline-block;
> .partie-title {
> h3 {
position: relative;
display: inline-block;
> p {
display: inline-block;
font-size: $l-font-size;
font-family: 'Joost', sans-serif;
margin: 0;
z-index: 1;
position: relative;
padding: 0 0.5rem;
}
> .underline {
z-index: 0;
left: 0;
top: 1.4rem;
position: absolute;
width: 100%;
display: inline-block;
height: 1rem;
}
}
}
}
}
}
}
}