cpq-card-mixin (template)

The cpq-card-mixin template displays the bundle hierarchy in Industries Cart.

In Salesforce Industries Communications, Media, and Energy Summer '18, cpq-card-mixin includes the #{$namespace}-product-name-block.

Template Type

Mixin

Code

CSS/SCSS

Image

The Cart tab with a top-level product and child products.

Upgrade from Vlocity CME Winter '18 to Vlocity CME Summer '18

When upgrading from Salesforce Industries Communications, Media, and Energy Winter '18 to Salesforce Industries Communications, Media, and Energy Summer '18, you must make the following changes to the CSS in the Card Designer.

First Change

In CME Winter '18, keep the following in the CSS:

.comp-#{$namespace}-product-item-child, .comp-#{$namespace}-product-item {
position:relative; /* needed for selected border */
input.ng-invalid {

In CME Summer '18, replace the CSS statements above with the following CSS statements:

.comp-#{$namespace}-product-item-child, .comp-#{$namespace}-product-item {
position:relative; /* needed for selected border */
padding-top: 20px;
input.ng-invalid {

Second Change

.slds-button__icon {
float: left;
margin: 0.3rem 0.5rem 0 0;
.slds-button__icon {
margin: 0.3rem 0.5rem 0 0;

Third Change

In CME Summer '18 , add the following :

.#{$namespace}-product-name-block {
display: inline-flex;
.#{$namespace}-product-icon-block {
display: inherit;
div {
margin: auto
}
}
}  "