@biggive/components 202303201257.0.0 → 202303231047.0.0

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

@@ -0,0 +1,369 @@
+/**
+ * @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: #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;
+}
+
+.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;
+}
+
+:host {
+  display: contents;
+}
+
+.container {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+}
+.container a {
+  display: block;
+  text-decoration: none;
+}
+.container a.full-width-true {
+  display: block;
+}
+.container.centered-true {
+  text-align: center;
+}
+.container.shadow-true {
+  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
+}
+.container.rounded-true {
+  border-radius: 10px;
+}
+.container.background-padding-1 {
+  padding: 5px;
+}
+.container.background-padding-2 {
+  padding: 10px;
+}
+.container.background-padding-3 {
+  padding: 15px;
+}
+.container.background-padding-4 {
+  padding: 30px;
+}
+.container.background-padding-5 {
+  padding: 45px;
+}
+.container.background-padding-6 {
+  padding: 60px;
+}
+.container .sleeve {
+  display: flex;
+}
+.container .sleeve .text-wrap {
+  margin: auto 0;
+  text-decoration: none;
+}
+.container .sleeve .text-wrap.text-padding-1 {
+  padding: 0 5px;
+}
+.container .sleeve .text-wrap.text-padding-2 {
+  padding: 0 10px;
+}
+.container .sleeve .text-wrap.text-padding-3 {
+  padding: 0 15px;
+}
+.container .sleeve .text-wrap.text-padding-4 {
+  padding: 0 30px;
+}
+.container .sleeve .text-wrap.text-padding-5 {
+  padding: 0 45px;
+}
+.container .sleeve .text-wrap.text-padding-6 {
+  padding: 0 60px;
+}
+.container .sleeve .arrow-wrap {
+  margin: auto 0 auto auto;
+}
+.container .sleeve .arrow-wrap.arrow-colour-primary .arrow-wrap svg path {
+  stroke: #2C089B;
+}
+.container .sleeve .arrow-wrap.arrow-colour-secondary .arrow-wrap svg path {
+  stroke: #2AF135;
+}
+.container .sleeve .arrow-wrap.arrow-colour-tertiary .arrow-wrap svg path {
+  stroke: #FF7272;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-1 .arrow-wrap svg path {
+  stroke: #B30510;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-2 .arrow-wrap svg path {
+  stroke: #6E0887;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-3 .arrow-wrap svg path {
+  stroke: #50B400;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-4 .arrow-wrap svg path {
+  stroke: #FFE500;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-5 .arrow-wrap svg path {
+  stroke: #F07D00;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path {
+  stroke: #62CFC9;
+}
+.container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path {
+  stroke: #FFFFFF;
+}
+.container .sleeve .arrow-wrap.arrow-colour-black .arrow-wrap svg path {
+  stroke: #000000;
+}
+.container .sleeve .arrow-wrap.arrow-colour-grey-extra-light .arrow-wrap svg path {
+  stroke: #D7D7D7;
+}
+.container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path {
+  stroke: #E8E8E8;
+}
+.container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path {
+  stroke: #8A8A8A;
+}
+.container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path {
+  stroke: #4A4A4A;
+}
+.container .image-wrap {
+  background-position: center center;
+  background-size: cover;
+}
+.container .image-wrap.image-style-contain {
+  background-size: contain;
+}
+.container .image-wrap.circle-true {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.container .image-wrap.size-small {
+  width: 30px;
+  height: 30px;
+}
+.container .image-wrap.size-medium {
+  width: 45px;
+  height: 45px;
+}
+.container .image-wrap.size-large {
+  width: 60px;
+  height: 60px;
+}
+.container .image-wrap.size-x-large {
+  width: 75px;
+  height: 75px;
+}
+.container .image-wrap.size-xx-large {
+  width: 90px;
+  height: 90px;
+}