@biggive/components 202303201257.0.0 → 202303231047.0.0

package/dist/collection/components/biggive-biography-card/biggive-biography-card.css

@@ -70,11 +70,602 @@ a:hover {
   margin-bottom: 60px;
 }
 
+.background-colour-hover-primary:hover,
+.background-colour-primary {
+  background-color: #2C089B;
+}
+
+.background-colour-hover-secondary:hover,
+.background-colour-secondary {
+  background-color: #2AF135;
+}
+
+.background-colour-hover-tertiary:hover,
+.background-colour-tertiary {
+  background-color: #FF7272;
+}
+
+.background-colour-hover-brand-1:hover,
+.background-colour-brand-1 {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-2:hover,
+.background-colour-brand-2 {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-3:hover,
+.background-colour-brand-3 {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-4:hover,
+.background-colour-brand-4 {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-5:hover,
+.background-colour-brand-5 {
+  background-color: #F07D00;
+}
+
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-black:hover,
+.background-colour-black {
+  background-color: #000000;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-grey-extra-light:hover,
+.background-colour-grey-extra-light {
+  background-color: #D7D7D7;
+}
+
+.background-colour-hover-grey-light:hover,
+.background-colour-grey-light {
+  background-color: #E8E8E8;
+}
+
+.background-colour-hover-grey-medium:hover,
+.background-colour-grey-medium {
+  background-color: #8A8A8A;
+}
+
+.background-colour-hover-grey-dark:hover,
+.background-colour-grey-dark {
+  background-color: #4A4A4A;
+}
+
+.text-colour-hover-primary:hover,
+.text-colour-primary {
+  color: #2C089B;
+}
+
+.text-colour-hover-secondary:hover,
+.text-colour-secondary {
+  color: #2AF135;
+}
+
+.text-colour-hover-tertiary:hover,
+.text-colour-tertiary {
+  color: #FF7272;
+}
+
+.text-colour-hover-brand-1:hover,
+.text-colour-brand-1 {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-2:hover,
+.text-colour-brand-2 {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-3:hover,
+.text-colour-brand-3 {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-4:hover,
+.text-colour-brand-4 {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-5:hover,
+.text-colour-brand-5 {
+  color: #F07D00;
+}
+
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
+.text-colour-hover-white:hover,
+.text-colour-white {
+  color: #FFFFFF;
+}
+
+.text-colour-hover-black:hover,
+.text-colour-black {
+  color: #000000;
+}
+
+.text-colour-hover-grey-extra-light:hover,
+.text-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+
+.text-colour-hover-grey-light:hover,
+.text-colour-grey-light {
+  color: #E8E8E8;
+}
+
+.text-colour-hover-grey-medium:hover,
+.text-colour-grey-medium {
+  color: #8A8A8A;
+}
+
+.text-colour-hover-grey-dark:hover,
+.text-colour-grey-dark {
+  color: #4A4A4A;
+}
+
 :host {
   display: block;
 }
 
 .container {
-  background-size: contain;
+  text-align: left;
+}
+.container.background-colour-primary .image-wrap {
+  background-color: #2C089B;
+}
+.container.background-colour-secondary .image-wrap {
+  background-color: #2AF135;
+}
+.container.background-colour-tertiary .image-wrap {
+  background-color: #FF7272;
+}
+.container.background-colour-brand-1 .image-wrap {
+  background-color: #B30510;
+}
+.container.background-colour-brand-2 .image-wrap {
+  background-color: #6E0887;
+}
+.container.background-colour-brand-3 .image-wrap {
+  background-color: #50B400;
+}
+.container.background-colour-brand-4 .image-wrap {
+  background-color: #FFE500;
+}
+.container.background-colour-brand-5 .image-wrap {
+  background-color: #F07D00;
+}
+.container.background-colour-brand-6 .image-wrap {
+  background-color: #62CFC9;
+}
+.container.background-colour-white .image-wrap {
+  background-color: #FFFFFF;
+}
+.container.background-colour-black .image-wrap {
+  background-color: #000000;
+}
+.container.background-colour-grey-extra-light .image-wrap {
+  background-color: #D7D7D7;
+}
+.container.background-colour-grey-light .image-wrap {
+  background-color: #E8E8E8;
+}
+.container.background-colour-grey-medium .image-wrap {
+  background-color: #8A8A8A;
+}
+.container.background-colour-grey-dark .image-wrap {
+  background-color: #4A4A4A;
+}
+.container.text-align-center {
+  text-align: center;
+}
+.container.text-align-right {
+  text-align: right;
+}
+.container a {
+  text-decoration: none;
+}
+.container h3.full-name {
+  font-size: font-size-medium();
+  margin: 0;
+}
+.container div.job-title {
+  font-size: font-size-small();
+  margin: 0;
+}
+.container .sleeve {
+  margin-bottom: 10px;
+}
+.container .sleeve.border-width-1.border-colour-primary {
+  border: 5px solid #2C089B;
+}
+.container .sleeve.border-width-2.border-colour-primary {
+  border: 10px solid #2C089B;
+}
+.container .sleeve.border-width-3.border-colour-primary {
+  border: 15px solid #2C089B;
+}
+.container .sleeve.border-width-4.border-colour-primary {
+  border: 30px solid #2C089B;
+}
+.container .sleeve.border-width-5.border-colour-primary {
+  border: 45px solid #2C089B;
+}
+.container .sleeve.border-width-6.border-colour-primary {
+  border: 60px solid #2C089B;
+}
+.container .sleeve.border-width-1.border-colour-secondary {
+  border: 5px solid #2AF135;
+}
+.container .sleeve.border-width-2.border-colour-secondary {
+  border: 10px solid #2AF135;
+}
+.container .sleeve.border-width-3.border-colour-secondary {
+  border: 15px solid #2AF135;
+}
+.container .sleeve.border-width-4.border-colour-secondary {
+  border: 30px solid #2AF135;
+}
+.container .sleeve.border-width-5.border-colour-secondary {
+  border: 45px solid #2AF135;
+}
+.container .sleeve.border-width-6.border-colour-secondary {
+  border: 60px solid #2AF135;
+}
+.container .sleeve.border-width-1.border-colour-tertiary {
+  border: 5px solid #FF7272;
+}
+.container .sleeve.border-width-2.border-colour-tertiary {
+  border: 10px solid #FF7272;
+}
+.container .sleeve.border-width-3.border-colour-tertiary {
+  border: 15px solid #FF7272;
+}
+.container .sleeve.border-width-4.border-colour-tertiary {
+  border: 30px solid #FF7272;
+}
+.container .sleeve.border-width-5.border-colour-tertiary {
+  border: 45px solid #FF7272;
+}
+.container .sleeve.border-width-6.border-colour-tertiary {
+  border: 60px solid #FF7272;
+}
+.container .sleeve.border-width-1.border-colour-brand-1 {
+  border: 5px solid #B30510;
+}
+.container .sleeve.border-width-2.border-colour-brand-1 {
+  border: 10px solid #B30510;
+}
+.container .sleeve.border-width-3.border-colour-brand-1 {
+  border: 15px solid #B30510;
+}
+.container .sleeve.border-width-4.border-colour-brand-1 {
+  border: 30px solid #B30510;
+}
+.container .sleeve.border-width-5.border-colour-brand-1 {
+  border: 45px solid #B30510;
+}
+.container .sleeve.border-width-6.border-colour-brand-1 {
+  border: 60px solid #B30510;
+}
+.container .sleeve.border-width-1.border-colour-brand-2 {
+  border: 5px solid #6E0887;
+}
+.container .sleeve.border-width-2.border-colour-brand-2 {
+  border: 10px solid #6E0887;
+}
+.container .sleeve.border-width-3.border-colour-brand-2 {
+  border: 15px solid #6E0887;
+}
+.container .sleeve.border-width-4.border-colour-brand-2 {
+  border: 30px solid #6E0887;
+}
+.container .sleeve.border-width-5.border-colour-brand-2 {
+  border: 45px solid #6E0887;
+}
+.container .sleeve.border-width-6.border-colour-brand-2 {
+  border: 60px solid #6E0887;
+}
+.container .sleeve.border-width-1.border-colour-brand-3 {
+  border: 5px solid #50B400;
+}
+.container .sleeve.border-width-2.border-colour-brand-3 {
+  border: 10px solid #50B400;
+}
+.container .sleeve.border-width-3.border-colour-brand-3 {
+  border: 15px solid #50B400;
+}
+.container .sleeve.border-width-4.border-colour-brand-3 {
+  border: 30px solid #50B400;
+}
+.container .sleeve.border-width-5.border-colour-brand-3 {
+  border: 45px solid #50B400;
+}
+.container .sleeve.border-width-6.border-colour-brand-3 {
+  border: 60px solid #50B400;
+}
+.container .sleeve.border-width-1.border-colour-brand-4 {
+  border: 5px solid #FFE500;
+}
+.container .sleeve.border-width-2.border-colour-brand-4 {
+  border: 10px solid #FFE500;
+}
+.container .sleeve.border-width-3.border-colour-brand-4 {
+  border: 15px solid #FFE500;
+}
+.container .sleeve.border-width-4.border-colour-brand-4 {
+  border: 30px solid #FFE500;
+}
+.container .sleeve.border-width-5.border-colour-brand-4 {
+  border: 45px solid #FFE500;
+}
+.container .sleeve.border-width-6.border-colour-brand-4 {
+  border: 60px solid #FFE500;
+}
+.container .sleeve.border-width-1.border-colour-brand-5 {
+  border: 5px solid #F07D00;
+}
+.container .sleeve.border-width-2.border-colour-brand-5 {
+  border: 10px solid #F07D00;
+}
+.container .sleeve.border-width-3.border-colour-brand-5 {
+  border: 15px solid #F07D00;
+}
+.container .sleeve.border-width-4.border-colour-brand-5 {
+  border: 30px solid #F07D00;
+}
+.container .sleeve.border-width-5.border-colour-brand-5 {
+  border: 45px solid #F07D00;
+}
+.container .sleeve.border-width-6.border-colour-brand-5 {
+  border: 60px solid #F07D00;
+}
+.container .sleeve.border-width-1.border-colour-brand-6 {
+  border: 5px solid #62CFC9;
+}
+.container .sleeve.border-width-2.border-colour-brand-6 {
+  border: 10px solid #62CFC9;
+}
+.container .sleeve.border-width-3.border-colour-brand-6 {
+  border: 15px solid #62CFC9;
+}
+.container .sleeve.border-width-4.border-colour-brand-6 {
+  border: 30px solid #62CFC9;
+}
+.container .sleeve.border-width-5.border-colour-brand-6 {
+  border: 45px solid #62CFC9;
+}
+.container .sleeve.border-width-6.border-colour-brand-6 {
+  border: 60px solid #62CFC9;
+}
+.container .sleeve.border-width-1.border-colour-white {
+  border: 5px solid #FFFFFF;
+}
+.container .sleeve.border-width-2.border-colour-white {
+  border: 10px solid #FFFFFF;
+}
+.container .sleeve.border-width-3.border-colour-white {
+  border: 15px solid #FFFFFF;
+}
+.container .sleeve.border-width-4.border-colour-white {
+  border: 30px solid #FFFFFF;
+}
+.container .sleeve.border-width-5.border-colour-white {
+  border: 45px solid #FFFFFF;
+}
+.container .sleeve.border-width-6.border-colour-white {
+  border: 60px solid #FFFFFF;
+}
+.container .sleeve.border-width-1.border-colour-black {
+  border: 5px solid #000000;
+}
+.container .sleeve.border-width-2.border-colour-black {
+  border: 10px solid #000000;
+}
+.container .sleeve.border-width-3.border-colour-black {
+  border: 15px solid #000000;
+}
+.container .sleeve.border-width-4.border-colour-black {
+  border: 30px solid #000000;
+}
+.container .sleeve.border-width-5.border-colour-black {
+  border: 45px solid #000000;
+}
+.container .sleeve.border-width-6.border-colour-black {
+  border: 60px solid #000000;
+}
+.container .sleeve.border-width-1.border-colour-grey-extra-light {
+  border: 5px solid #D7D7D7;
+}
+.container .sleeve.border-width-2.border-colour-grey-extra-light {
+  border: 10px solid #D7D7D7;
+}
+.container .sleeve.border-width-3.border-colour-grey-extra-light {
+  border: 15px solid #D7D7D7;
+}
+.container .sleeve.border-width-4.border-colour-grey-extra-light {
+  border: 30px solid #D7D7D7;
+}
+.container .sleeve.border-width-5.border-colour-grey-extra-light {
+  border: 45px solid #D7D7D7;
+}
+.container .sleeve.border-width-6.border-colour-grey-extra-light {
+  border: 60px solid #D7D7D7;
+}
+.container .sleeve.border-width-1.border-colour-grey-light {
+  border: 5px solid #E8E8E8;
+}
+.container .sleeve.border-width-2.border-colour-grey-light {
+  border: 10px solid #E8E8E8;
+}
+.container .sleeve.border-width-3.border-colour-grey-light {
+  border: 15px solid #E8E8E8;
+}
+.container .sleeve.border-width-4.border-colour-grey-light {
+  border: 30px solid #E8E8E8;
+}
+.container .sleeve.border-width-5.border-colour-grey-light {
+  border: 45px solid #E8E8E8;
+}
+.container .sleeve.border-width-6.border-colour-grey-light {
+  border: 60px solid #E8E8E8;
+}
+.container .sleeve.border-width-1.border-colour-grey-medium {
+  border: 5px solid #8A8A8A;
+}
+.container .sleeve.border-width-2.border-colour-grey-medium {
+  border: 10px solid #8A8A8A;
+}
+.container .sleeve.border-width-3.border-colour-grey-medium {
+  border: 15px solid #8A8A8A;
+}
+.container .sleeve.border-width-4.border-colour-grey-medium {
+  border: 30px solid #8A8A8A;
+}
+.container .sleeve.border-width-5.border-colour-grey-medium {
+  border: 45px solid #8A8A8A;
+}
+.container .sleeve.border-width-6.border-colour-grey-medium {
+  border: 60px solid #8A8A8A;
+}
+.container .sleeve.border-width-1.border-colour-grey-dark {
+  border: 5px solid #4A4A4A;
+}
+.container .sleeve.border-width-2.border-colour-grey-dark {
+  border: 10px solid #4A4A4A;
+}
+.container .sleeve.border-width-3.border-colour-grey-dark {
+  border: 15px solid #4A4A4A;
+}
+.container .sleeve.border-width-4.border-colour-grey-dark {
+  border: 30px solid #4A4A4A;
+}
+.container .sleeve.border-width-5.border-colour-grey-dark {
+  border: 45px solid #4A4A4A;
+}
+.container .sleeve.border-width-6.border-colour-grey-dark {
+  border: 60px solid #4A4A4A;
+}
+.container .sleeve.circle-true {
+  overflow: hidden;
+  border-radius: 50%;
+}
+.container .sleeve .image-wrap {
+  position: relative;
   background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.container .sleeve .image-wrap.image-style-cover {
+  background-size: cover;
+}
+.container .sleeve .image-wrap.image-style-contain {
+  background-size: contain;
+}
+.container .sleeve .image-wrap[data-ratio="1,1"] {
+  padding-bottom: 100%;
+}
+.container .sleeve .image-wrap[data-ratio="1,1"].border-width-1 {
+  padding-bottom: calc(100% - 10px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1"].border-width-2 {
+  padding-bottom: calc(100% - 20px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1"].border-width-3 {
+  padding-bottom: calc(100% - 30px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1"].border-width-4 {
+  padding-bottom: calc(100% - 60px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1"].border-width-5 {
+  padding-bottom: calc(100% - 90px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1"].border-width-6 {
+  padding-bottom: calc(100% - 120px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1.5"] {
+  padding-bottom: 150%;
+}
+.container .sleeve .image-wrap[data-ratio="1,1.5"].border-width-1 {
+  padding-bottom: calc(150% - 10px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1.5"].border-width-2 {
+  padding-bottom: calc(150% - 20px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1.5"].border-width-3 {
+  padding-bottom: calc(150% - 30px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1.5"].border-width-4 {
+  padding-bottom: calc(150% - 60px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1.5"].border-width-5 {
+  padding-bottom: calc(150% - 90px);
+}
+.container .sleeve .image-wrap[data-ratio="1,1.5"].border-width-6 {
+  padding-bottom: calc(150% - 120px);
+}
+.container .sleeve .image-wrap[data-ratio="1,2"] {
+  padding-bottom: 200%;
+}
+.container .sleeve .image-wrap[data-ratio="1,2"].border-width-1 {
+  padding-bottom: calc(200% - 10px);
+}
+.container .sleeve .image-wrap[data-ratio="1,2"].border-width-2 {
+  padding-bottom: calc(200% - 20px);
+}
+.container .sleeve .image-wrap[data-ratio="1,2"].border-width-3 {
+  padding-bottom: calc(200% - 30px);
+}
+.container .sleeve .image-wrap[data-ratio="1,2"].border-width-4 {
+  padding-bottom: calc(200% - 60px);
+}
+.container .sleeve .image-wrap[data-ratio="1,2"].border-width-5 {
+  padding-bottom: calc(200% - 90px);
+}
+.container .sleeve .image-wrap[data-ratio="1,2"].border-width-6 {
+  padding-bottom: calc(200% - 120px);
+}
+.container .sleeve .image-wrap.rounded-true {
+  overflow: hidden;
+  border-radius: 10px;
+}
+.container .sleeve .image-wrap .circle {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  background-color: #FFFFFF;
+  bottom: 15px;
+  right: 15px;
+  border-radius: 50%;
+  text-align: center;
+  padding: 6.5px;
+  box-sizing: border-box;
+}
+.container .sleeve .image-wrap .circle svg {
+  height: 15px;
+  width: 15px;
+}
+.container .sleeve .image-wrap img {
+  display: none;
 }