No notes defined.
<div class="sds-preciousMetal sds-box -insetLg sds-scaleInteraction ">
<div class="sds-stackXl">
<div class="sds-stackLg">
<span class="sds-skeletonUnit" style=" width: 144px; height: 144px;"></span>
<div class="sds-staticStackXs">
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH2 w-25"></span>
</div>
</div>
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken sds-skeletonUnit -floating position-relative" style="height: 112px;"></div>
<div class="sds-stackXl">
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
</div>
</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">
{% render "@skeleton-unit",{
inlineCSS: {
"width": "144px",
"height": "144px"
}
},true %}
<div class="{{ namespace }}staticStackXs">
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h2",{
classes: ["w-25"]
},true %}
</div>
</div>
<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -boxSunken {{ namespace }}skeletonUnit -floating position-relative" style="height: 112px;"></div>
<div class="{{ namespace }}stackXl">
{% render "@skeleton-unit--h3" %}
{% render "@skeleton-unit--h3" %}
{% render "@skeleton-unit--h3" %}
{% render "@skeleton-unit--h3" %}
</div>
</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 {
}
}