montpellier 2023 improvements (#81632) #395
|
|
@ -38,8 +38,11 @@ h3, .h3 {
|
|||
}
|
||||
|
||||
body {
|
||||
background: url(img/bgd-solid.jpg) no-repeat;
|
||||
background: url(/assets/portal:background-mobile) no-repeat;
|
||||
background-size: 100% auto;
|
||||
@media ($min-desktop-viewport){
|
||||
background-image: url(/assets/portal:background-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -199,7 +202,7 @@ div#header {
|
|||
@media ($min-desktop-viewport) {
|
||||
&--list {
|
||||
background-color: $blue;
|
||||
border-radius: $button-border-radius;
|
||||
border-radius: $cell-border-radius;
|
||||
padding: 1em;
|
||||
white-space: nowrap;
|
||||
// icon
|
||||
|
|
@ -278,12 +281,14 @@ div#main-content {
|
|||
.theme-page-title--wrapper {
|
||||
position: relative;
|
||||
--square-size: 2.6em;
|
||||
--line-height: 1.1em;
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
border: 1px solid #000;
|
||||
background-color: white;
|
||||
margin-left: calc(var(--square-size) / 2);
|
||||
transform: translateY(-1.4em);
|
||||
margin-right: calc(var(--square-size) / 2);
|
||||
transform: translateY(calc(var(--square-size) / -2));
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
|
|
@ -291,14 +296,16 @@ div#main-content {
|
|||
height: var(--square-size);
|
||||
background-color: $blue;
|
||||
position: absolute;
|
||||
top: calc(-0.5 * var(--square-size));
|
||||
top: calc(-0.3 * var(--square-size));
|
||||
left: calc(-0.5 * var(--square-size));
|
||||
}
|
||||
h1 {
|
||||
line-height: var(--line-height);
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
padding: calc((var(--square-size) - var(--line-height)) / 2);
|
||||
padding-left: calc(.75em + var(--square-size) / 2);
|
||||
padding-right: 1.5em;
|
||||
display: inline-block;
|
||||
@media ($min-desktop-viewport) {
|
||||
font-size: $fz-3;
|
||||
|
|
@ -310,6 +317,78 @@ div#main-content {
|
|||
// CELLS
|
||||
//
|
||||
|
||||
// Links list
|
||||
%cell-links-list {
|
||||
& > li {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
background: url("img/links-list-item-arrow.svg") no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: 100% auto;
|
||||
margin: 0 0.5em;
|
||||
width: 1.5em;
|
||||
height: 1.1em;
|
||||
display: inline-block;
|
||||
padding-top: 1em;
|
||||
box-sizing: content-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
& > li > a,
|
||||
li div.description {
|
||||
padding-left: 2.5rem;
|
||||
p {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// foldable icon to left
|
||||
div.cell.foldable > div > h2:first-child {
|
||||
display: flex;
|
||||
&::after {
|
||||
position: static;
|
||||
order: -1;
|
||||
text-align: left;
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
// cell with picture (to the right of title)
|
||||
.gru-content .cell.has-asset-picture {
|
||||
$image-size: 3rem;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> * {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
> h2:first-child {
|
||||
flex: 1 0 50%;
|
||||
margin-right: -1 * ($image-size + 1);
|
||||
padding-right: $image-size + 2;
|
||||
}
|
||||
> picture {
|
||||
display: block;
|
||||
// order: -1;
|
||||
flex: 0 0 $image-size;
|
||||
align-self: center;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
img {
|
||||
padding: 0;
|
||||
height: $image-size;
|
||||
width: $image-size;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom classes
|
||||
.shadow-blue {
|
||||
.gru-content &.cell {
|
||||
|
|
@ -345,7 +424,7 @@ div#main-content {
|
|||
padding: 1.5rem Max(1.5rem, 3.5%);
|
||||
display: grid;
|
||||
grid-template-columns: 30% 1fr;
|
||||
grid-gap: 2rem;
|
||||
grid-gap: 0 2rem;
|
||||
grid-template-areas:
|
||||
"picture label";
|
||||
align-items: center;
|
||||
|
|
@ -367,7 +446,7 @@ div#main-content {
|
|||
}
|
||||
&--picture {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-position: center;
|
||||
}
|
||||
&--input {
|
||||
display: none;
|
||||
|
|
@ -388,20 +467,34 @@ div#main-content {
|
|||
}
|
||||
}
|
||||
}
|
||||
.reporting-links {
|
||||
--shadow-color: #{$green};
|
||||
}
|
||||
.reporting-categories {
|
||||
--shadow-color: #{$yellow};
|
||||
}
|
||||
.reporting-categories .item-with-image--label,
|
||||
.reporting-link--title {
|
||||
@extend .h2;
|
||||
margin-bottom: 0.3em;
|
||||
hyphens: none;
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $fz-3;
|
||||
}
|
||||
}
|
||||
|
||||
.reporting-categories {
|
||||
--shadow-color: #{$yellow};
|
||||
.content {
|
||||
@media ($min-grid-tablet-viewport) {
|
||||
--nb-cols: 2;
|
||||
}
|
||||
@media ($min-grid-desktop-viewport) {
|
||||
--nb-cols: 3;
|
||||
}
|
||||
}
|
||||
.item-with-image--label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.reporting-links {
|
||||
--shadow-color: #{$green};
|
||||
}
|
||||
.reporting-link--description {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -428,6 +521,7 @@ div#main-content {
|
|||
// Steps
|
||||
.wcs-steps--list {
|
||||
justify-content: center;
|
||||
margin-bottom: 3.5em;
|
||||
}
|
||||
@media ($mq-min--wcs-steps-horizontal-layout) {
|
||||
.wcs-steps {
|
||||
|
|
@ -449,9 +543,9 @@ div#main-content {
|
|||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: $fz-xsmall;
|
||||
left: -1.6rem;
|
||||
left: -1.85rem;
|
||||
top: calc(100% + .5em);
|
||||
width: 6rem;
|
||||
width: 6.5rem;
|
||||
}
|
||||
}
|
||||
// wcs tracking code
|
||||
|
|
@ -525,9 +619,15 @@ label {
|
|||
.comment-field.categories-breadcrumb {
|
||||
color: $blue;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: $fz-xsmall;
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
+ * {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// test to enlarge native radio & checkbox
|
||||
|
|
@ -568,7 +668,7 @@ label {
|
|||
li a {
|
||||
@extend .pwa-label;
|
||||
padding-top: 52px;
|
||||
background-size: 40px auto;
|
||||
background-size: auto 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ $fz-xsmall: 12rem / $base-font;
|
|||
|
||||
// Core vars
|
||||
$width: 1600em / $base-font;
|
||||
$mobile-limit: 64em;
|
||||
$mobile-limit: 70em;
|
||||
$very-small-limit: 35em;
|
||||
$columns-gutter: 80em / $base-font;
|
||||
|
||||
|
|
@ -59,6 +59,8 @@ $title-transform: uppercase;
|
|||
|
||||
$cell-border: none;
|
||||
$cell-border-radius: 10px;
|
||||
$cell-entry-color: $font-color;
|
||||
$cell-entry-hover-background: #F8F8F8;
|
||||
|
||||
$button-border-radius: 5px;
|
||||
$button-background: $green;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:logo": { "label": "Têtière : logo" },
|
||||
"header:logo-mobile": { "label": "Têtière : logo mobile" },
|
||||
"emails:logo": {"label": "Emails : logo"}
|
||||
"emails:logo": {"label": "Emails : logo"},
|
||||
"portal:background-mobile": { "label": "Portail : image arrière plan mobile"},
|
||||
"portal:background-desktop": { "label": "Portail : image arrière plan desktop"}
|
||||
},
|
||||
"JSON_CELL_TYPES.update" : {
|
||||
"montpellier_reporting_links" : {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="12" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Line 60" d="M23.4303 6.53033C23.7232 6.23744 23.7232 5.76257 23.4303 5.46967L18.6574 0.696701C18.3645 0.403808 17.8896 0.403808 17.5967 0.696701C17.3038 0.989595 17.3038 1.46447 17.5967 1.75736L21.8393 6L17.5967 10.2426C17.3038 10.5355 17.3038 11.0104 17.5967 11.3033C17.8896 11.5962 18.3645 11.5962 18.6574 11.3033L23.4303 6.53033ZM2.40302e-08 6.75L22.9 6.75L22.9 5.25L-2.40306e-08 5.25L2.40302e-08 6.75Z" fill="#0356F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 537 B |
Loading…
Reference in New Issue