@biggive/components 202309200915.0.0 → 202309210829.0.0

package/dist/collection/components/biggive-icon-button/biggive-icon-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;
@@ -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;
+}
+
 .space-above-0 {
   margin-top: 0;
 }

package/dist/collection/components/biggive-icon-group/biggive-icon-group.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-image/biggive-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-image-button/biggive-image-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;
@@ -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;
+}
+
 .text-colour-hover-primary:hover,
 .text-colour-primary {
   color: #2C089B;

package/dist/collection/components/biggive-image-card/biggive-image-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;
@@ -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;
 }
 
 .space-above-0 {

package/dist/collection/components/biggive-image-feature/biggive-image-feature.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-main-menu/biggive-main-menu.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-misc-icon/biggive-misc-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 {
@@ -227,6 +233,18 @@ a:hover {
 .misc-icon-item.colour-scheme-brand-5 svg {
   fill: #000000;
 }
+.misc-icon-item.colour-scheme-mhf-turquoise {
+  background-color: #62CFC9;
+}
+.misc-icon-item.colour-scheme-mhf-turquoise svg {
+  fill: #000000;
+}
+.misc-icon-item.colour-scheme-brand-grey {
+  background-color: #CBC8C8;
+}
+.misc-icon-item.colour-scheme-brand-grey svg {
+  fill: #000000;
+}
 .misc-icon-item.colour-scheme-brand-6 {
   background-color: #CBC8C8;
 }
@@ -353,6 +371,18 @@ a:hover {
   .misc-icon-item.colour-scheme-brand-5 svg {
     fill: #000000;
   }
+  .misc-icon-item.colour-scheme-mhf-turquoise {
+    background-color: #62CFC9;
+  }
+  .misc-icon-item.colour-scheme-mhf-turquoise svg {
+    fill: #000000;
+  }
+  .misc-icon-item.colour-scheme-brand-grey {
+    background-color: #CBC8C8;
+  }
+  .misc-icon-item.colour-scheme-brand-grey svg {
+    fill: #000000;
+  }
   .misc-icon-item.colour-scheme-brand-6 {
     background-color: #CBC8C8;
   }

package/dist/collection/components/biggive-nav-group/biggive-nav-group.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-nav-item/biggive-nav-item.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-page-column/biggive-page-column.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-page-columns/biggive-page-columns.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-page-section/biggive-page-section.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;
@@ -249,8 +250,8 @@ a:hover {
 
 .container.background-color-primary:before,
 .container.background-color-primary:after,
-.container.background-color-primary .sleeve,
-.container.background-color-primary .sleeve:before {
+.container.background-color-primary .sleeve:before,
+.container.background-color-primary .sleeve {
   background-color: #2C089B;
   color: #FFFFFF;
 }
@@ -311,14 +312,30 @@ a:hover {
   color: #FFFFFF;
 }
 
-.container.background-color-brand-6:before,
-.container.background-color-brand-6:after,
-.container.background-color-brand-6 .sleeve:before,
-.container.background-color-brand-6 .sleeve {
+.container.background-color-brand-afa-pink:before,
+.container.background-color-brand-afa-pink:after,
+.container.background-color-brand-afa-pink .sleeve:before,
+.container.background-color-brand-afa-pink .sleeve {
+  background-color: #BF387D;
+  color: #FFFFFF;
+}
+
+.container.background-color-brand-mhf-turquoise:before,
+.container.background-color-brand-mhf-turquoise:after,
+.container.background-color-brand-mhf-turquoise .sleeve:before,
+.container.background-color-brand-mhf-turquoise .sleeve {
   background-color: #62CFC9;
   color: #FFFFFF;
 }
 
+.container.background-color-brand-grey:before,
+.container.background-color-brand-grey:after,
+.container.background-color-brand-grey .sleeve:before,
+.container.background-color-brand-grey .sleeve {
+  background-color: #CBC8C8;
+  color: #FFFFFF;
+}
+
 .container.background-color-white:before,
 .container.background-color-white:after,
 .container.background-color-white .sleeve:before,
@@ -365,4 +382,12 @@ a:hover {
 .container.background-color-grey-dark .sleeve {
   background-color: #4A4A4A;
   color: #FFFFFF;
+}
+
+.container.background-color-brand-6:before,
+.container.background-color-brand-6:after,
+.container.background-color-brand-6 .sleeve:before,
+.container.background-color-brand-6 .sleeve {
+  background-color: #62CFC9;
+  color: #FFFFFF;
 }

package/dist/collection/components/biggive-popup/biggive-popup.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-progress-bar/biggive-progress-bar.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-quote/biggive-quote.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-sheet/biggive-sheet.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;
+}
+
 .text-colour-hover-primary:hover,
 .text-colour-primary {
   color: #2C089B;
@@ -216,10 +222,6 @@ a:hover {
   fill: #F07D00;
 }
 
-.fill-brand-6 {
-  fill: #CBC8C8;
-}
-
 .fill-brand-afa-pink {
   fill: #BF387D;
 }
@@ -228,6 +230,10 @@ a:hover {
   fill: #62CFC9;
 }
 
+.fill-brand-grey {
+  fill: #CBC8C8;
+}
+
 .fill-white {
   fill: #FFFFFF;
 }
@@ -252,8 +258,8 @@ a:hover {
   fill: #4A4A4A;
 }
 
-.fill-red {
-  fill: red;
+.fill-brand-6 {
+  fill: #CBC8C8;
 }
 
 :host {