@biggive/components 202307200905.0.0 → 202307271559.0.0

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

@@ -0,0 +1,496 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+.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: #F6F6F6;
+}
+
+.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;
+}
+
+.image-wrap img {
+  width: 100%;
+  height: auto;
+}
+
+.space-above-0 {
+  margin-top: 0;
+}
+
+.space-above-1 {
+  margin-top: 5px;
+}
+
+.space-above-2 {
+  margin-top: 10px;
+}
+
+.space-above-3 {
+  margin-top: 15px;
+}
+
+.space-above-4 {
+  margin-top: 30px;
+}
+
+.space-above-5 {
+  margin-top: 45px;
+}
+
+.space-above-6 {
+  margin-top: 60px;
+}
+
+.space-below-0 {
+  margin-bottom: 0;
+}
+
+.space-below-1 {
+  margin-bottom: 5px;
+}
+
+.space-below-2 {
+  margin-bottom: 10px;
+}
+
+.space-below-3 {
+  margin-bottom: 15px;
+}
+
+.space-below-4 {
+  margin-bottom: 30px;
+}
+
+.space-below-5 {
+  margin-bottom: 45px;
+}
+
+.space-below-6 {
+  margin-bottom: 60px;
+}
+
+.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: #F6F6F6;
+}
+
+.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: 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;
+  background-size: cover;
+  padding: 15px 15px 10px 15px;
+}
+.container .sleeve .content-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.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 {
+  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 .image-label {
+  font-size: 11px;
+  line-height: 14px;
+}
+.container .clip-bottom-left-corner-false.clip-top-right-corner-true {
+  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 {
+  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 {
+  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 .date-colour-grey-light .date {
+  color: #F6F6F6;
+}
+.container .image-label-colour-grey-light .image-label {
+  color: #F6F6F6;
+}
+.container .main-title-colour-grey-medium h3 {
+  color: #8A8A8A;
+}
+.container .slug-colour-grey-medium .slug {
+  color: #8A8A8A;
+}
+.container .date-colour-grey-medium .date {
+  color: #8A8A8A;
+}
+.container .image-label-colour-grey-medium .image-label {
+  color: #8A8A8A;
+}
+.container .main-title-colour-grey-dark h3 {
+  color: #4A4A4A;
+}
+.container .slug-colour-grey-dark .slug {
+  color: #4A4A4A;
+}
+.container .date-colour-grey-dark .date {
+  color: #4A4A4A;
+}
+.container .image-label-colour-grey-dark .image-label {
+  color: #4A4A4A;
+}