No notes defined.
<div class="sds-preciousMetal sds-box -insetLg sds-scaleInteraction ">
<div class="sds-stackXl">
<div class="sds-stackLg">
<div class="sds-preciousMetal__img">
<img src="../../media/spuerkeess-site/components/precious-metal/gold.png" alt="" class="img-fluid">
</div>
<div class="sds-stackXs">
<h3 class="h3">LINGOT OR 5 GRAMMES / FAIRTRADE</h3>
<p>Gold</p>
</div>
</div>
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<label for="" class="sds-label">
Spuerkeess bid
</label>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">293,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Spuerkeess ask
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">334,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Type
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
Bar
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Purity
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
999,9/1000
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Weight (net)
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
5,00 g
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Weight (brut)
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
100,00 g
</div>
</div>
</td>
</tr>
</tbody>
</table>
<a href="" class="sds-preciousMetal__action">
<div class="sds-preciousMetal__actionInner">
<span class="sds-btn -btnPrimary position-static stretched-link">
<span class="sds-btn__text">Acheter sur S-Net</span>
</span>
</div>
</a>
</div>
</div>
<div class="{{ namespace }}preciousMetal {{ namespace }}box -insetLg {{ namespace }}scaleInteraction {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}stackLg">
<div class="{{ namespace }}preciousMetal__img">
{% if nopic %}
<div class="{{ namespace }}preciousMetal__noPic">
{% render "@nopic-ingot" %}
</div>
{% else %}
<img src="{{ (mediaPath + img) | path }}" alt="" class="img-fluid">
{% endif %}
</div>
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
<p>{{ description }}</p>
</div>
</div>
<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -boxSunken">
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
text: "Spuerkeess bid"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large",{
text: "293,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Spuerkeess ask"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large",{
text: "334,00"
},true %}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Type"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
Bar
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Purity"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
999,9/1000
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Weight (net)"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
5,00 g
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Weight (brut)"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
100,00 g
</div>
</div>
</td>
</tr>
</tbody>
</table>
<a href="" class="{{ namespace }}preciousMetal__action">
<div class="{{ namespace }}preciousMetal__actionInner">
{% render "@btn-primary", {
eltType: "span",
text: "Acheter sur S-Net",
classes: ["position-static","stretched-link"]
}, true %}
</div>
</a>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}preciousMetal {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
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 */
&__img {
height: 144px;
IMG {
height: 100%;
object-fit: contain;
}
}
&__noPic {
width: 144px;
border-radius: map-deep-get($token-radius-map, "16");
}
// preciousMetal__action
&__action {
// follows same logic as parent
display: block;
@media (hover: hover) {
position: absolute;
z-index: z("zero");
pointer-events: none;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: inherit;
margin-top: 0 !important;
&:focus {
#{$self}__actionInner {
transform: none;
opacity: 1;
}
}
}
}
&__actionInner {
text-align: center;
@media (hover: hover) {
opacity: 0;
pointer-events: auto;
transform: translateY(25%);
transition: opacity 0.15s linear, transform 0.15s linear;
@include opacityBg();
box-shadow: map-deep-get($token-shadow-map, "active");
padding: map-deep-get($token-spacer-inset-map, "sm");
border-radius: map-deep-get($token-radius-map, "button-small")*2;
margin-bottom: $box-lg-inset-spacing-mobile-global;
@include media-breakpoint-up("lg") {
margin-bottom: $box-lg-inset-spacing-desktop-global;
}
}
}
/* modifiers */
// preciousMetal -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover,
&:focus {
@media (hover: hover) {
#{$self}__actionInner {
transform: none;
opacity: 1;
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}