@biggive/components 202307271559.0.0 → 202308021605.0.0

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #F6F6F6;
+  background-color: #E8E8E8;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -89,9 +89,72 @@ a:hover {
   background-color: #4A4A4A;
 }
 
-.image-wrap img {
-  width: 100%;
-  height: auto;
+.fill-primary {
+  fill: #2C089B;
+}
+
+.fill-secondary {
+  fill: #2AF135;
+}
+
+.fill-tertiary {
+  fill: #FF7272;
+}
+
+.fill-brand-1 {
+  fill: #B30510;
+}
+
+.fill-brand-2 {
+  fill: #6E0887;
+}
+
+.fill-brand-3 {
+  fill: #50B400;
+}
+
+.fill-brand-4 {
+  fill: #FFE500;
+}
+
+.fill-brand-5 {
+  fill: #F07D00;
+}
+
+.fill-brand-6 {
+  fill: #CBC8C8;
+}
+
+.fill-brand-mhf-turquoise {
+  fill: #62CFC9;
+}
+
+.fill-white {
+  fill: #FFFFFF;
+}
+
+.fill-black {
+  fill: #000000;
+}
+
+.fill-grey-extra-light {
+  fill: #D7D7D7;
+}
+
+.fill-grey-light {
+  fill: #E8E8E8;
+}
+
+.fill-grey-medium {
+  fill: #8A8A8A;
+}
+
+.fill-grey-dark {
+  fill: #4A4A4A;
+}
+
+.fill-red {
+  fill: red;
 }
 
 .space-above-0 {
@@ -212,7 +275,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #F6F6F6;
+  color: #E8E8E8;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -229,268 +292,77 @@ a:hover {
   display: contents;
 }
 
-.align-right {
-  text-align: right;
-}
-
 .container {
-  height: 100%;
-  width: 100%;
   font-family: "Euclid Triangle", sans-serif;
   font-size: 17px;
   line-height: 24px;
   position: relative;
-  text-align: left;
-}
-.container .sleeve {
-  height: 100%;
-  box-sizing: border-box;
+  text-align: center;
   background-size: cover;
-  padding: 15px 15px 10px 15px;
-}
-.container .sleeve .content-wrap {
+  background-position: center center;
+  padding: 10px;
   height: 100%;
-  display: flex;
-  flex-direction: column;
+  white-space: pre-wrap;
 }
-.container .meta {
-  margin-bottom: 10px;
-}
-.container .meta .slug {
-  font-size: 11px;
-  line-height: 14px;
-  margin-bottom: 5px;
-}
-.container .meta .date {
-  font-size: 11px;
-  line-height: 14px;
-  margin-bottom: 5px;
-}
-.container h3 {
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: bold;
-  padding-bottom: 10px;
-  margin-bottom: auto;
-  margin-top: 5px;
-}
-.container h3 a,
-.container h3 a:hover {
+.container a,
+.container a:hover {
   text-decoration: none;
 }
-.container .main-image-container img {
-  width: 100%;
-  height: auto;
-  display: inline-block;
-}
-.container .image-group {
-  display: flex;
-  margin-bottom: 15px;
-}
-.container .image-group .image-container {
-  margin-right: 15px;
-}
-.container .image-group .image-container .image-wrap {
-  border-radius: 50%;
-  width: 60px;
-  height: 60px;
-  background-size: cover;
-  background-position: center center;
-  margin-bottom: 5px;
-}
-.container .image-group .image-container .image-wrap img {
-  display: none;
+.container .sleeve {
+  padding: 10px;
+  height: 100%;
+  box-sizing: border-box;
+  transition: all 1s ease-in-out;
 }
-.container .image-label {
-  font-size: 11px;
-  line-height: 14px;
+.container.add-animation-true:hover .sleeve {
+  margin: -30px;
+  padding: 60px;
+  height: calc(100% + 60px);
 }
-.container .clip-bottom-left-corner-false.clip-top-right-corner-true {
+.container.clip-bottom-left-corner-false.clip-top-right-corner-true .sleeve {
   clip-path: polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%);
 }
-.container .clip-bottom-left-corner-true.clip-top-right-corner-false {
+.container.clip-bottom-left-corner-true.clip-top-right-corner-false .sleeve {
   clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px));
 }
-.container .clip-bottom-left-corner-true.clip-top-right-corner-true {
+.container.clip-bottom-left-corner-true.clip-top-right-corner-true .sleeve {
   clip-path: polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px));
 }
-.container .main-title-colour-primary h3 {
-  color: #2C089B;
-}
-.container .slug-colour-primary .slug {
-  color: #2C089B;
-}
-.container .date-colour-primary .date {
-  color: #2C089B;
-}
-.container .image-label-colour-primary .image-label {
-  color: #2C089B;
-}
-.container .main-title-colour-secondary h3 {
-  color: #2AF135;
-}
-.container .slug-colour-secondary .slug {
-  color: #2AF135;
-}
-.container .date-colour-secondary .date {
-  color: #2AF135;
-}
-.container .image-label-colour-secondary .image-label {
-  color: #2AF135;
-}
-.container .main-title-colour-tertiary h3 {
-  color: #FF7272;
-}
-.container .slug-colour-tertiary .slug {
-  color: #FF7272;
-}
-.container .date-colour-tertiary .date {
-  color: #FF7272;
-}
-.container .image-label-colour-tertiary .image-label {
-  color: #FF7272;
-}
-.container .main-title-colour-brand-1 h3 {
-  color: #B30510;
-}
-.container .slug-colour-brand-1 .slug {
-  color: #B30510;
-}
-.container .date-colour-brand-1 .date {
-  color: #B30510;
-}
-.container .image-label-colour-brand-1 .image-label {
-  color: #B30510;
-}
-.container .main-title-colour-brand-2 h3 {
-  color: #6E0887;
-}
-.container .slug-colour-brand-2 .slug {
-  color: #6E0887;
-}
-.container .date-colour-brand-2 .date {
-  color: #6E0887;
-}
-.container .image-label-colour-brand-2 .image-label {
-  color: #6E0887;
-}
-.container .main-title-colour-brand-3 h3 {
-  color: #50B400;
-}
-.container .slug-colour-brand-3 .slug {
-  color: #50B400;
-}
-.container .date-colour-brand-3 .date {
-  color: #50B400;
-}
-.container .image-label-colour-brand-3 .image-label {
-  color: #50B400;
-}
-.container .main-title-colour-brand-4 h3 {
-  color: #FFE500;
-}
-.container .slug-colour-brand-4 .slug {
-  color: #FFE500;
-}
-.container .date-colour-brand-4 .date {
-  color: #FFE500;
-}
-.container .image-label-colour-brand-4 .image-label {
-  color: #FFE500;
-}
-.container .main-title-colour-brand-5 h3 {
-  color: #F07D00;
-}
-.container .slug-colour-brand-5 .slug {
-  color: #F07D00;
-}
-.container .date-colour-brand-5 .date {
-  color: #F07D00;
-}
-.container .image-label-colour-brand-5 .image-label {
-  color: #F07D00;
-}
-.container .main-title-colour-brand-6 h3 {
-  color: #62CFC9;
-}
-.container .slug-colour-brand-6 .slug {
-  color: #62CFC9;
-}
-.container .date-colour-brand-6 .date {
-  color: #62CFC9;
-}
-.container .image-label-colour-brand-6 .image-label {
-  color: #62CFC9;
-}
-.container .main-title-colour-white h3 {
-  color: #FFFFFF;
-}
-.container .slug-colour-white .slug {
-  color: #FFFFFF;
-}
-.container .date-colour-white .date {
-  color: #FFFFFF;
-}
-.container .image-label-colour-white .image-label {
-  color: #FFFFFF;
-}
-.container .main-title-colour-black h3 {
-  color: #000000;
-}
-.container .slug-colour-black .slug {
-  color: #000000;
-}
-.container .date-colour-black .date {
-  color: #000000;
-}
-.container .image-label-colour-black .image-label {
-  color: #000000;
-}
-.container .main-title-colour-grey-extra-light h3 {
-  color: #D7D7D7;
-}
-.container .slug-colour-grey-extra-light .slug {
-  color: #D7D7D7;
-}
-.container .date-colour-grey-extra-light .date {
-  color: #D7D7D7;
-}
-.container .image-label-colour-grey-extra-light .image-label {
-  color: #D7D7D7;
-}
-.container .main-title-colour-grey-light h3 {
-  color: #F6F6F6;
-}
-.container .slug-colour-grey-light .slug {
-  color: #F6F6F6;
+.container .icon svg {
+  width: 50px;
+  height: auto;
 }
-.container .date-colour-grey-light .date {
-  color: #F6F6F6;
+.container .title {
+  font-size: 25px;
+  line-height: 32px;
+  font-weight: bold;
+  margin-bottom: 15px;
 }
-.container .image-label-colour-grey-light .image-label {
-  color: #F6F6F6;
+.container .subtitle {
+  margin-bottom: 15px;
 }
-.container .main-title-colour-grey-medium h3 {
-  color: #8A8A8A;
+.container .main-image-container {
+  margin-bottom: 15px;
 }
-.container .slug-colour-grey-medium .slug {
-  color: #8A8A8A;
+.container .main-image-container img {
+  width: 100%;
+  height: auto;
 }
-.container .date-colour-grey-medium .date {
-  color: #8A8A8A;
+.container .button-wrap {
+  text-align: center;
 }
-.container .image-label-colour-grey-medium .image-label {
-  color: #8A8A8A;
+.container .button-wrap.align-left {
+  text-align: left;
 }
-.container .main-title-colour-grey-dark h3 {
-  color: #4A4A4A;
+.container .button-wrap.align-right {
+  text-align: right;
 }
-.container .slug-colour-grey-dark .slug {
-  color: #4A4A4A;
+.container .text-align-left {
+  text-align: left;
 }
-.container .date-colour-grey-dark .date {
-  color: #4A4A4A;
+.container .text-align-center {
+  text-align: center;
 }
-.container .image-label-colour-grey-dark .image-label {
-  color: #4A4A4A;
+.container .text-align-right {
+  text-align: right;
 }