No notes defined.
<!-- Default -->
<div class="sds-document sds-box -rowBig sds-scaleInteraction">
<div class="sds-document__imgContainer">
<img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">
</div>
<div class="sds-document__body">
<div class="sds-stackXs">
<h3 class="h3">Brochure 'Guide du Prêt au Logement'</h3>
<p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
</div>
<div class="sds-document__actionZone">
<span class="sds-document__meta sds-textHelperSmall">{Size}</span>
<a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">
<span class="sds-btn__text">Télécharger</span>
<span class="sds-icon sds-icon-download"></span>
</a>
</div>
</div>
</div>
<!-- Nopic -->
<div class="sds-document sds-box -rowBig sds-scaleInteraction">
<div class="sds-document__imgContainer">
<div class="sds-noPic sds-document__noPic">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity="0.32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M334.169 219.472L334.708 219.502L335.95 219.664C337.397 219.969 338.834 220.611 340.047 221.552L340.912 222.313L362.448 243.849L388.507 274.19C389.952 275.195 390.931 276.657 391.382 278.294L391.573 279.296L391.669 280.326V401.555C391.669 406.682 388.157 410.551 383.236 411.077L382.086 411.138H247.919C242.792 411.138 238.924 407.636 238.397 402.715L238.336 401.555V229.055C238.336 223.928 241.838 220.059 246.759 219.533L247.919 219.472H334.169ZM324.586 238.159H257.503V391.493H372.503V290.868H334.169C329.119 290.868 325.185 287.038 324.648 282.374L324.586 281.284V238.159ZM343.753 251.643V271.691H363.801L343.753 251.643Z" fill="#4D6E90" />
</g>
</svg>
</div>
</div>
<div class="sds-document__body">
<div class="sds-stackXs">
<h3 class="h3">Brochure 'Guide du Prêt au Logement'</h3>
<p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
</div>
<div class="sds-document__actionZone">
<span class="sds-document__meta sds-textHelperSmall">{Size}</span>
<a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">
<span class="sds-btn__text">Télécharger</span>
<span class="sds-icon sds-icon-download"></span>
</a>
</div>
</div>
</div>
<!-- Row -->
<a href="" class="sds-document sds-box sds-scaleInteraction">
<h3 class="h4">Brochure 'Guide du Prêt au Logement'</h3>
<div class="sds-document__actionZone">
<span class="sds-btn -iconBtn -btnSecondary">
<span class="sds-icon sds-icon-download"></span>
</span>
</div>
</a>
<!-- Row Small -->
<a href="" class="sds-document -inverted">
<h3 class="h4">Brochure 'Guide du Prêt au Logement'</h3>
<div class="sds-document__actionZone">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
</span>
</div>
</a>
<!-- Column -->
<div class="sds-document sds-box -column sds-scaleInteraction">
<div class="sds-document__imgContainer">
<img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">
</div>
<div class="sds-document__body">
<div class="sds-stackXs">
<h3 class="h3">Brochure 'Guide du Prêt au Logement'</h3>
<p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
</div>
<div class="sds-document__actionZone">
<span class="sds-document__meta sds-textHelperSmall">{Size}</span>
<a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">
<span class="sds-btn__text">Télécharger</span>
<span class="sds-icon sds-icon-download"></span>
</a>
</div>
</div>
</div>
<!-- Column Nopic -->
<div class="sds-document sds-box -column sds-scaleInteraction">
<div class="sds-document__imgContainer">
<div class="sds-noPic sds-document__noPic">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity="0.32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M334.169 219.472L334.708 219.502L335.95 219.664C337.397 219.969 338.834 220.611 340.047 221.552L340.912 222.313L362.448 243.849L388.507 274.19C389.952 275.195 390.931 276.657 391.382 278.294L391.573 279.296L391.669 280.326V401.555C391.669 406.682 388.157 410.551 383.236 411.077L382.086 411.138H247.919C242.792 411.138 238.924 407.636 238.397 402.715L238.336 401.555V229.055C238.336 223.928 241.838 220.059 246.759 219.533L247.919 219.472H334.169ZM324.586 238.159H257.503V391.493H372.503V290.868H334.169C329.119 290.868 325.185 287.038 324.648 282.374L324.586 281.284V238.159ZM343.753 251.643V271.691H363.801L343.753 251.643Z" fill="#4D6E90" />
</g>
</svg>
</div>
</div>
<div class="sds-document__body">
<div class="sds-stackXs">
<h3 class="h3">Brochure 'Guide du Prêt au Logement'</h3>
<p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
</div>
<div class="sds-document__actionZone">
<span class="sds-document__meta sds-textHelperSmall">{Size}</span>
<a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">
<span class="sds-btn__text">Télécharger</span>
<span class="sds-icon sds-icon-download"></span>
</a>
</div>
</div>
</div>
<!-- Default -->
<div class="{{ namespace }}document{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}document__imgContainer">
{% if nopic %}
{% render "@nopic-document",{
classes: [namespace + "document__noPic"]
},true %}
{% else %}
<img class="{{ namespace }}document__img" src="{{ (mediaPath + img ) | path }}" alt="">
{% endif %}
</div>
<div class="{{ namespace }}document__body">
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
{% if description %}<p class="{{ namespace }}document__description">{{ description }}</p>{% endif %}
</div>
<div class="{{ namespace }}document__actionZone">
<span class="{{ namespace }}document__meta {{ namespace }}textHelperSmall">{{ meta }}</span>
{% render "@btn-primary--icon-right", {
eltType: "a",
text: "Télécharger",
icon: "icon-download",
classes: [namespace+ "document__action", "stretched-link"]
},true %}
</div>
</div>
</div>
<!-- Nopic -->
<div class="{{ namespace }}document{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}document__imgContainer">
{% if nopic %}
{% render "@nopic-document",{
classes: [namespace + "document__noPic"]
},true %}
{% else %}
<img class="{{ namespace }}document__img" src="{{ (mediaPath + img ) | path }}" alt="">
{% endif %}
</div>
<div class="{{ namespace }}document__body">
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
{% if description %}<p class="{{ namespace }}document__description">{{ description }}</p>{% endif %}
</div>
<div class="{{ namespace }}document__actionZone">
<span class="{{ namespace }}document__meta {{ namespace }}textHelperSmall">{{ meta }}</span>
{% render "@btn-primary--icon-right", {
eltType: "a",
text: "Télécharger",
icon: "icon-download",
classes: [namespace+ "document__action", "stretched-link"]
},true %}
</div>
</div>
</div>
<!-- Row -->
<a href="" class="{{ namespace }}document{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<h3 class="h4">{{ title }}</h3>
<div class="{{ namespace }}document__actionZone">
{% render "@icon-btn-secondary",{
eltType: "span",
icon: "icon-download"
},true %}
</div>
</a>
<!-- Row Small -->
<a href="" class="{{ namespace }}document{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<h3 class="h4">{{ title }}</h3>
<div class="{{ namespace }}document__actionZone">
{% render "@icon-btn-secondary-inverse",{
eltType: "span",
icon: "icon-download"
},true %}
</div>
</a>
<!-- Column -->
<div class="{{ namespace }}document{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}document__imgContainer">
{% if nopic %}
{% render "@nopic-document",{
classes: [namespace + "document__noPic"]
},true %}
{% else %}
<img class="{{ namespace }}document__img" src="{{ (mediaPath + img ) | path }}" alt="">
{% endif %}
</div>
<div class="{{ namespace }}document__body">
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
{% if description %}<p class="{{ namespace }}document__description">{{ description }}</p>{% endif %}
</div>
<div class="{{ namespace }}document__actionZone">
<span class="{{ namespace }}document__meta {{ namespace }}textHelperSmall">{{ meta }}</span>
{% render "@btn-primary--icon-right", {
eltType: "a",
text: "Télécharger",
icon: "icon-download",
classes: [namespace+ "document__action", "stretched-link"]
},true %}
</div>
</div>
</div>
<!-- Column Nopic -->
<div class="{{ namespace }}document{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}document__imgContainer">
{% if nopic %}
{% render "@nopic-document",{
classes: [namespace + "document__noPic"]
},true %}
{% else %}
<img class="{{ namespace }}document__img" src="{{ (mediaPath + img ) | path }}" alt="">
{% endif %}
</div>
<div class="{{ namespace }}document__body">
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
{% if description %}<p class="{{ namespace }}document__description">{{ description }}</p>{% endif %}
</div>
<div class="{{ namespace }}document__actionZone">
<span class="{{ namespace }}document__meta {{ namespace }}textHelperSmall">{{ meta }}</span>
{% render "@btn-primary--icon-right", {
eltType: "a",
text: "Télécharger",
icon: "icon-download",
classes: [namespace+ "document__action", "stretched-link"]
},true %}
</div>
</div>
</div>
/* variables specific to current element */
$document-padding: map-deep-get($token-spacer-inline-map, "md");
$document-padding-desktop: map-deep-get($token-spacer-inline-map, "lg");
.#{$namespace}document {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
border-radius: map-deep-get($token-radius-map, "16");
display: flex;
align-items: center;
justify-content: space-between;
padding: $document-padding;
position: relative;
z-index: z("zero");
@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-primary-heading-text-color");
@include media-breakpoint-up(lg) {
padding: $document-padding-desktop;
}
/* Pseudo Elements */
//&::before,
//&::after {
//
// content: "";
// position: absolute;
// z-index: z("negative");
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// border-radius: inherit;
// transition: opacity 0.15s linear;
//
//}
&::before {
//box-shadow: map-deep-get($token-shadow-map, "hover");
//opacity: 0;
}
&::after {
//opacity: 1;
//box-shadow: map-deep-get($token-shadow-map, "active");
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// document__imgContainer
&__imgContainer {
border-radius: inherit;
aspect-ratio: 7/5;
}
&__img {
border-radius: inherit;
object-fit: contain;
width: 100%;
height: 100%;
max-width: 100%;
}
&__noPic {
height: 100%;
}
// document__meta
&__meta {
// follows same logic as parent
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
margin-right: map-deep-get($token-spacer-inline-map, "lg");
}
&__body {
padding: $document-padding;
@include media-breakpoint-up(lg) {
padding: $document-padding-desktop;
}
}
&__actionZone {
margin-left: map-deep-get($token-spacer-inline-map, "lg");
}
/* modifiers */
// document -inverted
&.-inverted {
// follows same logic as base element
@include custom-prop-fallback("background-color", "comp-alert-banner-primary-background-color");
transition: background-color 0.15s linear;
&:hover,
&:focus {
@media (hover: hover) {
@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
}
}
}
&.-rowBig {
padding: 0;
flex-direction: column;
justify-content: flex-start;
@include media-breakpoint-up(md) {
flex-direction: row;
align-items: stretch;
}
#{$self}__imgContainer {
margin-top: map-deep-get($token-spacer-stack-max-map, "md");
flex-basis: 200px;
width: 200px;
height: 280px;
@include media-breakpoint-up(md) {
margin-top: 0;
}
}
#{$self}__body {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
width: 100%;
@include media-breakpoint-up("lg") {
width: auto;
}
}
#{$self}__actionZone {
margin-top: map-deep-get($token-spacer-stack-max-map, "lg");
margin-left: auto;
}
}
&.-column {
padding: 0;
width: max-content;
#{$self}__imgContainer {
width: $document-column-width-mobile-global;
height: $document-column-height-mobile-global;
transition: transform $box-scale-shadow-speed-global linear;
@include media-breakpoint-up(lg) {
width: $document-column-width-desktop-global;
height: $document-column-height-desktop-global;
}
}
#{$self}__body {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
align-items: flex-start;
position: absolute;
z-index: z("zero");
border-radius: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: $document-padding * 3;
opacity: 0;
transition: opacity $box-scale-shadow-speed-global linear;
&::before {
content: "";
position: inherit;
z-index: z("negative");
border-radius: inherit;
top: inherit;
left: inherit;
width: inherit;
height: inherit;
@include custom-prop-fallback("background-color", "comp-box-background-color");
opacity: 0.9;
backdrop-filter: blur(8px);
transition: transform $box-scale-shadow-speed-global linear;
}
@include media-breakpoint-up(lg) {
padding-top: $document-padding-desktop * 2.3333333;
}
}
#{$self}__description {
@extend %lineClampBase;
@extend %textEllipsisLg;
}
#{$self}__actionZone {
@include custom-prop-fallback("background-color", "comp-box-raised-background-color");
border-radius: map-deep-get($token-radius-map, "32");
box-shadow: map-deep-get($token-shadow-map, "active");
padding: map-deep-get($token-spacer-inset-map, "sm");
margin: 0 auto;
}
#{$self}__meta {
position: absolute;
top: $document-padding;
left: $document-padding;
@include media-breakpoint-up(lg) {
top: $document-padding-desktop;
left: $document-padding-desktop;
}
}
&__action {
transform: translateY(200%);
opacity: 0;
transition: opacity 0.15s 0.15s linear, transform 0.15s 0.3s linear;
}
&:hover {
#{$self}__body {
opacity: 1;
}
#{$self}__imgContainer,
#{$self}__body::before {
transform: scale($box-scale-shadow-scale-global);
}
#{$self}__action {
transform: translateY(0);
opacity: 1;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover,
&:focus {
@media (hover: hover) {
&::before {
opacity: 1;
}
&::after {
opacity: 0;
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}