Reference

Reference Safety Bar

Safety Bar

OtherEvergreenPublic
NovaDesign System

/*--- SAFETY-INFORMATION ---*/

.cmp-safety-information.default {
  --safety-information-background: #333333;
  --safety-information-gap: 8px;
  --safety-information-border-top: 1px solid #00000000;
  --safety-information-border-right: 1px solid #00000000;
  --safety-information-border-bottom: 1px solid #00000000;
  --safety-information-border-left: 1px solid #00000000;
  --safety-information-border-radius-top-right: 0px;
  --safety-information-border-radius-top-left: 0px;
  --safety-information-border-radius-bottom-right: 0px;
  --safety-information-border-radius-bottom-left: 0px;
  --safety-information-padding-top: 0px;
  --safety-information-padding-right: 0px;
  --safety-information-padding-bottom: 0px;
  --safety-information-padding-left: 0px;
  --safety-information-isi-title-text: 700 16px "Arial";
  --safety-information-isi-title-letter-spacing: 0%;
  --safety-information-isi-title-text-color: #cccccc;
  --safety-information-isi-title-text-case: capitalize;
  --safety-information-indication-title-text: 700 16px "Arial";
  --safety-information-indication-title-letter-spacing: 0%;
  --safety-information-indication-title-text-color: #cccccc;
  --safety-information-bottom-text-background: #222222;
  --safety-information-bottom-text: 400 12px "Arial";
  --safety-information-bottom-text-letter-spacing: 0%;
  --safety-information-bottom-text-color: #cccccc;
  --safety-information-bottom-text-border-top: 1px solid #00000000;
  --safety-information-bottom-text-border-right: 1px solid #00000000;
  --safety-information-bottom-text-border-bottom: 1px solid #00000000;
  --safety-information-bottom-text-border-left: 1px solid #00000000;
  --safety-information-bottom-text-padding-top: 8px;
  --safety-information-bottom-text-padding-right: 8px;
  --safety-information-bottom-text-padding-bottom: 8px;
  --safety-information-bottom-text-padding-left: 8px;
  --safety-information-bottom-text-border-radius-top-right: 0px;
  --safety-information-bottom-text-border-radius-top-left: 0px;
  --safety-information-bottom-text-border-radius-bottom-right: 0px;
  --safety-information-bottom-text-border-radius-bottom-left: 0px;
}
.cmp-safety-information.theme2 {
  --safety-information-background: #333333;
  --safety-information-gap: 8px;
  --safety-information-border-top: 1px solid #00000000;
  --safety-information-border-right: 1px solid #00000000;
  --safety-information-border-bottom: 1px solid #00000000;
  --safety-information-border-left: 1px solid #00000000;
  --safety-information-border-radius-top-right: 0px;
  --safety-information-border-radius-top-left: 0px;
  --safety-information-border-radius-bottom-right: 0px;
  --safety-information-border-radius-bottom-left: 0px;
  --safety-information-padding-top: 0px;
  --safety-information-padding-right: 0px;
  --safety-information-padding-bottom: 0px;
  --safety-information-padding-left: 0px;
  --safety-information-isi-title-text: 700 16px "Arial";
  --safety-information-isi-title-letter-spacing: 0%;
  --safety-information-isi-title-text-color: #cccccc;
  --safety-information-isi-title-text-case: capitalize;
  --safety-information-indication-title-text: 700 16px "Arial";
  --safety-information-indication-title-letter-spacing: 0%;
  --safety-information-indication-title-text-color: #cccccc;
  --safety-information-bottom-text-background: #222222;
  --safety-information-bottom-text: 400 12px "Arial";
  --safety-information-bottom-text-letter-spacing: 0%;
  --safety-information-bottom-text-color: #cccccc;
  --safety-information-bottom-text-border-top: 1px solid #00000000;
  --safety-information-bottom-text-border-right: 1px solid #00000000;
  --safety-information-bottom-text-border-bottom: 1px solid #00000000;
  --safety-information-bottom-text-border-left: 1px solid #00000000;
  --safety-information-bottom-text-padding-top: 8px;
  --safety-information-bottom-text-padding-right: 8px;
  --safety-information-bottom-text-padding-bottom: 8px;
  --safety-information-bottom-text-padding-left: 8px;
  --safety-information-bottom-text-border-radius-top-right: 0px;
  --safety-information-bottom-text-border-radius-top-left: 0px;
  --safety-information-bottom-text-border-radius-bottom-right: 0px;
  --safety-information-bottom-text-border-radius-bottom-left: 0px;
}
.cmp-safety-information.theme3 {
  --safety-information-background: #333333;
  --safety-information-gap: 8px;
  --safety-information-border-top: 1px solid #00000000;
  --safety-information-border-right: 1px solid #00000000;
  --safety-information-border-bottom: 1px solid #00000000;
  --safety-information-border-left: 1px solid #00000000;
  --safety-information-border-radius-top-right: 0px;
  --safety-information-border-radius-top-left: 0px;
  --safety-information-border-radius-bottom-right: 0px;
  --safety-information-border-radius-bottom-left: 0px;
  --safety-information-padding-top: 0px;
  --safety-information-padding-right: 0px;
  --safety-information-padding-bottom: 0px;
  --safety-information-padding-left: 0px;
  --safety-information-isi-title-text: 700 16px "Arial";
  --safety-information-isi-title-letter-spacing: 0%;
  --safety-information-isi-title-text-color: #cccccc;
  --safety-information-isi-title-text-case: capitalize;
  --safety-information-indication-title-text: 700 16px "Arial";
  --safety-information-indication-title-letter-spacing: 0%;
  --safety-information-indication-title-text-color: #cccccc;
  --safety-information-bottom-text-background: #222222;
  --safety-information-bottom-text: 400 12px "Arial";
  --safety-information-bottom-text-letter-spacing: 0%;
  --safety-information-bottom-text-color: #cccccc;
  --safety-information-bottom-text-border-top: 1px solid #00000000;
  --safety-information-bottom-text-border-right: 1px solid #00000000;
  --safety-information-bottom-text-border-bottom: 1px solid #00000000;
  --safety-information-bottom-text-border-left: 1px solid #00000000;
  --safety-information-bottom-text-padding-top: 8px;
  --safety-information-bottom-text-padding-right: 8px;
  --safety-information-bottom-text-padding-bottom: 8px;
  --safety-information-bottom-text-padding-left: 8px;
  --safety-information-bottom-text-border-radius-top-right: 0px;
  --safety-information-bottom-text-border-radius-top-left: 0px;
  --safety-information-bottom-text-border-radius-bottom-right: 0px;
  --safety-information-bottom-text-border-radius-bottom-left: 0px;
}


/*--- SAFETY-BAR ---*/

.cmp-safety-bar.single {
  --safety-bar-background: #ffffff;
  --safety-bar-gap: 0px;
  --safety-bar-border-top: 1px solid #00000000;
  --safety-bar-border-right: 1px solid #00000000;
  --safety-bar-border-bottom: 1px solid #00000000;
  --safety-bar-border-left: 1px solid #00000000;
  --safety-bar-border-radius-top-right: 0px;
  --safety-bar-border-radius-top-left: 0px;
  --safety-bar-border-radius-bottom-right: 0px;
  --safety-bar-border-radius-bottom-left: 0px;
  --safety-bar-padding-top: 0px;
  --safety-bar-padding-right: 0px;
  --safety-bar-padding-bottom: 0px;
  --safety-bar-padding-left: 0px;
}
.cmp-safety-bar.double {
  --safety-bar-background: #ffffff;
  --safety-bar-gap: 0px;
  --safety-bar-border-top: 1px solid #00000000;
  --safety-bar-border-right: 1px solid #00000000;
  --safety-bar-border-bottom: 1px solid #00000000;
  --safety-bar-border-left: 1px solid #00000000;
  --safety-bar-border-radius-top-right: 0px;
  --safety-bar-border-radius-top-left: 0px;
  --safety-bar-border-radius-bottom-right: 0px;
  --safety-bar-border-radius-bottom-left: 0px;
  --safety-bar-padding-top: 0px;
  --safety-bar-padding-right: 0px;
  --safety-bar-padding-bottom: 0px;
  --safety-bar-padding-left: 0px;
}
.cmp-safety-bar.triple {
  --safety-bar-background: #ffffff;
  --safety-bar-gap: 0px;
  --safety-bar-border-top: 1px solid #00000000;
  --safety-bar-border-right: 1px solid #00000000;
  --safety-bar-border-bottom: 1px solid #00000000;
  --safety-bar-border-left: 1px solid #00000000;
  --safety-bar-border-radius-top-right: 0px;
  --safety-bar-border-radius-top-left: 0px;
  --safety-bar-border-radius-bottom-right: 0px;
  --safety-bar-border-radius-bottom-left: 0px;
  --safety-bar-padding-top: 0px;
  --safety-bar-padding-right: 0px;
  --safety-bar-padding-bottom: 0px;
  --safety-bar-padding-left: 0px;
}