No notes defined.
<div class="sds-obligationCard sds-box -insetLg sds-scaleInteraction">
<div class="sds-stackXxl">
<div class="sds-staticStackXs">
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH3 w-25"></span>
<span class="sds-skeletonUnit -skeletonUnitH3 w-50"></span>
</div>
<div class="sds-stackXxl sds-box__outOfBoundsMd">
<div class="sds-obligationCard__recapArea sds-contextLoadingBlock -floating">
<div class="sds-obligationCard__recapAreaRow row row-xs no-bottom-gutter">
<div class="col-12 col-md-6">
<span class="sds-skeletonUnit" style=" height: var(--obligation-card-recap-zone-card-height);"></span>
</div>
<div class="col-12 col-md-6">
<span class="sds-skeletonUnit" style=" height: var(--obligation-card-recap-zone-card-height);"></span>
</div>
</div>
</div>
<div class="sds-obligationCard__tableWrapper sds-box -insetLg">
<div class="sds-stackXl">
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}obligationCard {{ namespace }}box -insetLg {{ namespace }}scaleInteraction{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXxl">
<div class="{{ namespace }}staticStackXs">
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h3",{
classes: ["w-25"]
},true %}
{% render "@skeleton-unit--h3",{
classes: ["w-50"]
},true %}
</div>
<div class="{{ namespace }}stackXxl {{ namespace }}box__outOfBoundsMd">
<div class="{{ namespace }}obligationCard__recapArea {{ namespace }}contextLoadingBlock -floating">
<div class="{{ namespace }}obligationCard__recapAreaRow row row-xs no-bottom-gutter">
<div class="col-12 col-md-6">
{% render "@skeleton-unit",{
inlineCSS: {
"height": "var(--obligation-card-recap-zone-card-height)"
}
},true %}
</div>
<div class="col-12 col-md-6">
{% render "@skeleton-unit",{
inlineCSS: {
"height": "var(--obligation-card-recap-zone-card-height)"
}
},true %}
</div>
</div>
</div>
<div class="{{ namespace }}obligationCard__tableWrapper {{ namespace }}box -insetLg">
<div class="{{ namespace }}stackXl">
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h2" %}
</div>
</div>
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}obligationCard {
/* Save root element context for easy access if nesting is needed */
$self: &;
--obligation-card-recap-zone-card-height: 72px;
@include media-breakpoint-up("md") {
--obligation-card-recap-zone-card-height: 144px;
}
/* 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 */
// obligationCard__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;
}
}
}
&__tableWrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
&__table {
> TBODY > TR > TD > TABLE {
@include media-breakpoint-between("xs","sm") {
width: 100%;
}
}
> TBODY > TR > TD {
@include media-breakpoint-between("xs","sm") {
display: block;
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
padding-top: 0 !important;
padding-bottom: 0 !important;
&:first-child > TABLE {
width: 100%;
> TBODY > TR > TD {
&:last-child {
@include media-breakpoint-up("md") {
padding-right: $box-lg-inset-spacing-desktop-global !important;
}
}
}
}
&:last-child > TABLE {
width: 100%;
> TBODY > TR > TD {
&:first-child {
> * {
justify-content: flex-start;
text-align: left;
}
@include media-breakpoint-up("md") {
padding-left: $box-lg-inset-spacing-mobile-global * 0.5 !important;
}
@include media-breakpoint-up("lg") {
padding-left: $box-lg-inset-spacing-desktop-global !important;
}
}
}
}
}
}
&__recapArea {
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
border-radius: $box-border-radius-global;
@include media-breakpoint-up("md") {
background-color: transparent;
}
}
&__recapAreaRow {
[class*="col"] + [class*="col"] {
@include media-breakpoint-between("xs","sm") {
margin-top: -(map-deep-get($token-spacer-grid-map, "xs"));
}
}
}
/* modifiers */
// obligationCard -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 {
}
}