@biggive/components 202309191556.0.0 → 202309201242.0.0

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

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;
@@ -110,16 +111,21 @@ a:hover {
   background-color: #F07D00;
 }
 
-.background-colour-hover-brand-6:hover,
-.background-colour-brand-6 {
-  background-color: #62CFC9;
-}
-
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
 }
 
+.background-colour-hover-brand-mhf-turquoise:hover,
+.background-colour-brand-mhf-turquoise {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-brand-grey:hover,
+.background-colour-brand-grey {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -130,11 +136,6 @@ a:hover {
   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;
@@ -155,6 +156,11 @@ a:hover {
   background-color: #4A4A4A;
 }
 
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
 .text-colour-hover-primary:hover,
 .text-colour-primary {
   color: #2C089B;
@@ -195,16 +201,21 @@ a:hover {
   color: #F07D00;
 }
 
-.text-colour-hover-brand-6:hover,
-.text-colour-brand-6 {
-  color: #CBC8C8;
-}
-
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;
 }
 
+.text-colour-hover-brand-mhf-turquoise:hover,
+.text-colour-brand-mhf-turquoise {
+  color: #62CFC9;
+}
+
+.text-colour-hover-brand-grey:hover,
+.text-colour-brand-grey {
+  color: #CBC8C8;
+}
+
 .text-colour-hover-white:hover,
 .text-colour-white {
   color: #FFFFFF;
@@ -235,6 +246,11 @@ a:hover {
   color: #4A4A4A;
 }
 
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/biggive-boxed-content/biggive-boxed-content.css

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;
@@ -49,16 +50,21 @@ a:hover {
   background-color: #F07D00;
 }
 
-.background-colour-hover-brand-6:hover,
-.background-colour-brand-6 {
-  background-color: #62CFC9;
-}
-
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
 }
 
+.background-colour-hover-brand-mhf-turquoise:hover,
+.background-colour-brand-mhf-turquoise {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-brand-grey:hover,
+.background-colour-brand-grey {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -69,11 +75,6 @@ a:hover {
   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;
@@ -94,6 +95,11 @@ a:hover {
   background-color: #4A4A4A;
 }
 
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
 :host {
   display: content;
 }

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

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-button/biggive-button.css

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;
@@ -138,13 +139,13 @@ a:hover {
 }
 
 .button-secondary {
-  color: #000000;
+  color: #FFFFFF;
   background-color: #2AF135;
   border-color: #2AF135;
 }
 .button-secondary:hover {
+  color: #2AF135;
   background-color: #FFFFFF;
-  border-color: #000000;
 }
 
 .button-tertiary {
@@ -153,6 +154,7 @@ a:hover {
   border-color: #FF7272;
 }
 .button-tertiary:hover {
+  color: #FF7272;
   background-color: #FFFFFF;
 }
 
@@ -162,6 +164,7 @@ a:hover {
   border-color: #B30510;
 }
 .button-brand-1:hover {
+  color: #B30510;
   background-color: #FFFFFF;
 }
 
@@ -171,6 +174,7 @@ a:hover {
   border-color: #6E0887;
 }
 .button-brand-2:hover {
+  color: #6E0887;
   background-color: #FFFFFF;
 }
 
@@ -180,6 +184,7 @@ a:hover {
   border-color: #50B400;
 }
 .button-brand-3:hover {
+  color: #50B400;
   background-color: #FFFFFF;
 }
 
@@ -189,7 +194,28 @@ a:hover {
   border-color: #FFE500;
 }
 .button-brand-4:hover {
-  background-color: #000000;
+  color: #FFE500;
+  background-color: #FFFFFF;
+}
+
+.button-brand-5 {
+  color: #FFFFFF;
+  background-color: #F07D00;
+  border-color: #F07D00;
+}
+.button-brand-5:hover {
+  color: #F07D00;
+  background-color: #FFFFFF;
+}
+
+.button-brand-afa-pink {
+  color: #FFFFFF;
+  background-color: #BF387D;
+  border-color: #BF387D;
+}
+.button-brand-afa-pink:hover {
+  color: #BF387D;
+  background-color: #FFFFFF;
 }
 
 .button-brand-mhf-turquoise {
@@ -198,15 +224,77 @@ a:hover {
   border-color: #62CFC9;
 }
 .button-brand-mhf-turquoise:hover {
+  color: #62CFC9;
+  background-color: #FFFFFF;
+}
+
+.button-brand-grey {
+  color: #FFFFFF;
+  background-color: #CBC8C8;
+  border-color: #CBC8C8;
+}
+.button-brand-grey:hover {
+  color: #CBC8C8;
+  background-color: #FFFFFF;
+}
+
+.button-white {
+  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #FFFFFF;
+}
+
+.button-black {
+  color: #FFFFFF;
   background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
 }
 
-.button-brand-5 {
+.button-grey-extra-light {
   color: #FFFFFF;
-  background-color: #F07D00;
-  border-color: #F07D00;
+  background-color: #D7D7D7;
+  border-color: #D7D7D7;
 }
-.button-brand-5:hover {
+.button-grey-extra-light:hover {
+  color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+
+.button-grey-light {
+  color: #FFFFFF;
+  background-color: #E8E8E8;
+  border-color: #E8E8E8;
+}
+.button-grey-light:hover {
+  color: #E8E8E8;
+  background-color: #FFFFFF;
+}
+
+.button-grey-medium {
+  color: #FFFFFF;
+  background-color: #8A8A8A;
+  border-color: #8A8A8A;
+}
+.button-grey-medium:hover {
+  color: #8A8A8A;
+  background-color: #FFFFFF;
+}
+
+.button-grey-dark {
+  color: #FFFFFF;
+  background-color: #4A4A4A;
+  border-color: #4A4A4A;
+}
+.button-grey-dark:hover {
+  color: #4A4A4A;
   background-color: #FFFFFF;
 }
 
@@ -219,19 +307,36 @@ a:hover {
   background-color: #000000;
 }
 
-.button-brand-afa-pink {
+.button-secondary {
+  color: #000000;
+}
+.button-secondary:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+  border-color: #000000;
+}
+
+.button-brand-4:hover {
+  background-color: #000000;
+}
+
+.button-brand-grey {
   color: #FFFFFF;
-  background-color: #BF387D;
-  border-color: #BF387D;
 }
+.button-brand-grey:hover {
+  background-color: #000000;
+}
+
+.button-brand-mhf-turquoise:hover {
+  background-color: #000000;
+}
+
 .button-brand-afa-pink:hover {
   background-color: #000000;
 }
 
 .button-white {
   color: #2C089B;
-  background-color: #FFFFFF;
-  border-color: #FFFFFF;
 }
 .button-white:hover {
   color: #000000;
@@ -240,51 +345,36 @@ a:hover {
 
 .button-black {
   color: #FFFFFF;
-  background-color: #000000;
-  border-color: #000000;
 }
 .button-black:hover {
-  color: #000000;
   background-color: #FFFFFF;
 }
 
 .button-grey-extra-light {
   color: #000000;
-  background-color: #D7D7D7;
-  border-color: #D7D7D7;
 }
 .button-grey-extra-light:hover {
-  color: #D7D7D7;
   background-color: #000000;
 }
 
 .button-grey-light {
   color: #000000;
-  background-color: #E8E8E8;
-  border-color: #E8E8E8;
 }
 .button-grey-light:hover {
-  color: #E8E8E8;
   background-color: #000000;
 }
 
 .button-grey-medium {
   color: #FFFFFF;
-  background-color: #8A8A8A;
-  border-color: #8A8A8A;
 }
 .button-grey-medium:hover {
-  color: #8A8A8A;
   background-color: #FFFFFF;
 }
 
 .button-grey-dark {
   color: #FFFFFF;
-  background-color: #4A4A4A;
-  border-color: #4A4A4A;
 }
 .button-grey-dark:hover {
-  color: #4A4A4A;
   background-color: #FFFFFF;
 }
 
@@ -435,6 +525,20 @@ a:hover {
   background-color: transparent;
 }
 
+.button-clear-brand-grey {
+  color: #CBC8C8;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-grey:hover {
+  color: #CBC8C8;
+  text-decoration: none;
+  background-color: transparent;
+}
+
 .button-clear-white {
   color: #FFFFFF;
   background-color: transparent;

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.css

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;
@@ -135,16 +136,21 @@ h5, .heading-5 {
   color: #F07D00;
 }
 
-.text-colour-hover-brand-6:hover,
-.text-colour-brand-6 {
-  color: #CBC8C8;
-}
-
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;
 }
 
+.text-colour-hover-brand-mhf-turquoise:hover,
+.text-colour-brand-mhf-turquoise {
+  color: #62CFC9;
+}
+
+.text-colour-hover-brand-grey:hover,
+.text-colour-brand-grey {
+  color: #CBC8C8;
+}
+
 .text-colour-hover-white:hover,
 .text-colour-white {
   color: #FFFFFF;
@@ -175,6 +181,11 @@ h5, .heading-5 {
   color: #4A4A4A;
 }
 
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
 :host {
   display: contents;
   font-family: "Euclid Triangle", sans-serif;

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

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.css

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.css

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-carousel/biggive-carousel.css

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;
@@ -105,16 +106,21 @@ a:hover {
   color: #F07D00;
 }
 
-.text-colour-hover-brand-6:hover,
-.text-colour-brand-6 {
-  color: #CBC8C8;
-}
-
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;
 }
 
+.text-colour-hover-brand-mhf-turquoise:hover,
+.text-colour-brand-mhf-turquoise {
+  color: #62CFC9;
+}
+
+.text-colour-hover-brand-grey:hover,
+.text-colour-brand-grey {
+  color: #CBC8C8;
+}
+
 .text-colour-hover-white:hover,
 .text-colour-white {
   color: #FFFFFF;
@@ -145,6 +151,11 @@ a:hover {
   color: #4A4A4A;
 }
 
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
 :host {
   display: contents;
 }

package/dist/collection/components/biggive-category-icon/biggive-category-icon.css

@@ -1,5 +1,6 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
  */
 a {
   color: inherit;
@@ -49,16 +50,21 @@ a:hover {
   background-color: #F07D00;
 }
 
-.background-colour-hover-brand-6:hover,
-.background-colour-brand-6 {
-  background-color: #62CFC9;
-}
-
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
 }
 
+.background-colour-hover-brand-mhf-turquoise:hover,
+.background-colour-brand-mhf-turquoise {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-brand-grey:hover,
+.background-colour-brand-grey {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -69,11 +75,6 @@ a:hover {
   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;
@@ -94,6 +95,11 @@ a:hover {
   background-color: #4A4A4A;
 }
 
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
 .fill-primary {
   fill: #2C089B;
 }
@@ -126,10 +132,6 @@ a:hover {
   fill: #F07D00;
 }
 
-.fill-brand-6 {
-  fill: #CBC8C8;
-}
-
 .fill-brand-afa-pink {
   fill: #BF387D;
 }
@@ -138,6 +140,10 @@ a:hover {
   fill: #62CFC9;
 }
 
+.fill-brand-grey {
+  fill: #CBC8C8;
+}
+
 .fill-white {
   fill: #FFFFFF;
 }
@@ -162,8 +168,8 @@ a:hover {
   fill: #4A4A4A;
 }
 
-.fill-red {
-  fill: red;
+.fill-brand-6 {
+  fill: #CBC8C8;
 }
 
 :host {
@@ -245,6 +251,18 @@ a:hover {
 .category-icon-item.colour-scheme-brand-5 svg {
   fill: #000000;
 }
+.category-icon-item.colour-scheme-mhf-turquoise {
+  background-color: #62CFC9;
+}
+.category-icon-item.colour-scheme-mhf-turquoise svg {
+  fill: #000000;
+}
+.category-icon-item.colour-scheme-brand-grey {
+  background-color: #CBC8C8;
+}
+.category-icon-item.colour-scheme-brand-grey svg {
+  fill: #000000;
+}
 .category-icon-item.colour-scheme-brand-6 {
   background-color: #CBC8C8;
 }