Reference

Reference Flip Container

Flip Container

OtherEvergreenPublic
NovaDesign System
/*--- FLIPCONTAINER ---*/

.cmp-flipcontainer.default {
  --flipcontainer-background: #00000000;
  --flipcontainer-border-top: 1px solid #00000000;
  --flipcontainer-border-right: 1px solid #00000000;
  --flipcontainer-border-bottom: 1px solid #00000000;
  --flipcontainer-border-left: 1px solid #00000000;
  --flipcontainer-border-radius-top-right: 20px;
  --flipcontainer-border-radius-top-left: 20px;
  --flipcontainer-border-radius-bottom-right: 20px;
  --flipcontainer-border-radius-bottom-left: 20px;
  --flipcontainer-padding-top: 0px;
  --flipcontainer-padding-right: 0px;
  --flipcontainer-padding-bottom: 0px;
  --flipcontainer-padding-left: 0px;
  --flipcontainer-front-background: #222222;
  --flipcontainer-front-gap: 10px;
  --flipcontainer-front-title-border-top: 1px solid #00000000;
  --flipcontainer-front-title-border-right: 1px solid #00000000;
  --flipcontainer-front-title-border-bottom: 1px solid #00000000;
  --flipcontainer-front-title-border-left: 1px solid #00000000;
  --flipcontainer-front-title-border-radius-top-right: 0px;
  --flipcontainer-front-title-border-radius-top-left: 0px;
  --flipcontainer-front-title-border-radius-bottom-right: 0px;
  --flipcontainer-front-title-border-radius-bottom-left: 0px;
  --flipcontainer-front-title-padding-top: 0px;
  --flipcontainer-front-title-padding-right: 0px;
  --flipcontainer-front-title-padding-bottom: 0px;
  --flipcontainer-front-title-padding-left: 0px;
  --flipcontainer-front-icon-border-top: 2px solid #00000000;
  --flipcontainer-front-icon-border-right: 2px solid #00000000;
  --flipcontainer-front-icon-border-bottom: 2px solid #00000000;
  --flipcontainer-front-icon-border-left: 2px solid #00000000;
  --flipcontainer-front-icon-border-radius-top-right: 100px;
  --flipcontainer-front-icon-border-radius-top-left: 100px;
  --flipcontainer-front-icon-border-radius-bottom-right: 100px;
  --flipcontainer-front-icon-border-radius-bottom-left: 100px;
  --flipcontainer-back-background: #00000000;
  --flipcontainer-back-gap: 10px;
  --flipcontainer-back-title-border-top: 1px solid #00000000;
  --flipcontainer-back-title-border-right: 1px solid #00000000;
  --flipcontainer-back-title-border-bottom: 1px solid #00000000;
  --flipcontainer-back-title-border-left: 1px solid #00000000;
  --flipcontainer-back-title-border-radius-top-right: 0px;
  --flipcontainer-back-title-border-radius-top-left: 0px;
  --flipcontainer-back-title-border-radius-bottom-right: 0px;
  --flipcontainer-back-title-border-radius-bottom-left: 0px;
  --flipcontainer-back-title-padding-top: 0px;
  --flipcontainer-back-title-padding-right: 0px;
  --flipcontainer-back-title-padding-bottom: 0px;
  --flipcontainer-back-title-padding-left: 0px;
  --flipcontainer-back-icon-border-top: 2px solid #00000000;
  --flipcontainer-back-icon-border-right: 2px solid #00000000;
  --flipcontainer-back-icon-border-bottom: 2px solid #00000000;
  --flipcontainer-back-icon-border-left: 2px solid #00000000;
  --flipcontainer-back-icon-border-radius-top-right: 100px;
  --flipcontainer-back-icon-border-radius-top-left: 100px;
  --flipcontainer-back-icon-border-radius-bottom-right: 100px;
  --flipcontainer-back-icon-border-radius-bottom-left: 100px;
}