@biggive/components 202303031121.0.0 → 202303061752.0.0

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

@@ -0,0 +1,733 @@
+/**
+ * @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;
+}
+
+.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: #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;
+}
+
+:host {
+  display: contents;
+}
+
+::slotted(*) {
+  display: none;
+}
+
+.container {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+  position: relative;
+}
+.container .navigation {
+  padding: 0 40px;
+}
+.container .navigation .button {
+  position: absolute;
+  top: 5px;
+  display: block;
+  width: 30px;
+  height: 30px;
+  padding: 2.5px 10px;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  cursor: pointer;
+  text-align: center;
+}
+.container .navigation .button.prev {
+  left: 0;
+}
+.container .navigation .button.next {
+  right: 0;
+}
+.container .navigation .button svg {
+  width: 10px;
+  height: 10px;
+}
+.container .navigation ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  border-bottom: 1px solid transparent;
+  display: flex;
+}
+.container .navigation ul li {
+  padding: 10px;
+  margin: 0;
+  width: calc(33.3% - 20px);
+  border-bottom: 3px solid transparent;
+  text-align: center;
+  cursor: pointer;
+}
+.container .navigation ul li.selected {
+  font-weight: bold;
+}
+.container .entry-wrap {
+  padding: 40px;
+}
+.container .entry-wrap .entry {
+  margin-bottom: 15px;
+  border-left: 15px solid transparent;
+  padding: 15px 40px 15px 40px;
+}
+.container .entry-wrap .entry .date {
+  font-size: 13px;
+  line-height: 17px;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+.container .entry-wrap .entry .title {
+  font-weight: bold;
+  margin: 0 0 5px 0;
+  padding: 0;
+}
+.container .entry-wrap .entry .content p {
+  margin: 0 0 5px 0;
+}
+.container.text-colour-primary .navigation li {
+  color: #2C089B;
+}
+.container.navigation-highlight-colour-primary .navigation ul {
+  border-color: #2C089B;
+}
+.container.selected-text-colour-primary .navigation li.selected {
+  color: #2C089B;
+  border-color: #2C089B;
+}
+.container.selected-navigation-highlight-colour-primary .navigation li.selected {
+  border-color: #2C089B;
+}
+.container.button-background-colour-primary .navigation .button {
+  background-color: #2C089B;
+}
+.container.button-icon-colour-primary .navigation .button svg path {
+  stroke: #2C089B;
+}
+.container.entry-background-colour-primary .entry {
+  background-color: #2C089B;
+}
+.container.entry-highlight-colour-primary .entry {
+  border-color: #2C089B;
+}
+.container.entry-date-colour-primary .entry .date {
+  color: #2C089B;
+}
+.container.entry-title-colour-primary .entry .title {
+  color: #2C089B;
+}
+.container.entry-text-colour-primary .entry .content {
+  color: #2C089B;
+}
+.container.text-colour-secondary .navigation li {
+  color: #2AF135;
+}
+.container.navigation-highlight-colour-secondary .navigation ul {
+  border-color: #2AF135;
+}
+.container.selected-text-colour-secondary .navigation li.selected {
+  color: #2AF135;
+  border-color: #2AF135;
+}
+.container.selected-navigation-highlight-colour-secondary .navigation li.selected {
+  border-color: #2AF135;
+}
+.container.button-background-colour-secondary .navigation .button {
+  background-color: #2AF135;
+}
+.container.button-icon-colour-secondary .navigation .button svg path {
+  stroke: #2AF135;
+}
+.container.entry-background-colour-secondary .entry {
+  background-color: #2AF135;
+}
+.container.entry-highlight-colour-secondary .entry {
+  border-color: #2AF135;
+}
+.container.entry-date-colour-secondary .entry .date {
+  color: #2AF135;
+}
+.container.entry-title-colour-secondary .entry .title {
+  color: #2AF135;
+}
+.container.entry-text-colour-secondary .entry .content {
+  color: #2AF135;
+}
+.container.text-colour-tertiary .navigation li {
+  color: #FF7272;
+}
+.container.navigation-highlight-colour-tertiary .navigation ul {
+  border-color: #FF7272;
+}
+.container.selected-text-colour-tertiary .navigation li.selected {
+  color: #FF7272;
+  border-color: #FF7272;
+}
+.container.selected-navigation-highlight-colour-tertiary .navigation li.selected {
+  border-color: #FF7272;
+}
+.container.button-background-colour-tertiary .navigation .button {
+  background-color: #FF7272;
+}
+.container.button-icon-colour-tertiary .navigation .button svg path {
+  stroke: #FF7272;
+}
+.container.entry-background-colour-tertiary .entry {
+  background-color: #FF7272;
+}
+.container.entry-highlight-colour-tertiary .entry {
+  border-color: #FF7272;
+}
+.container.entry-date-colour-tertiary .entry .date {
+  color: #FF7272;
+}
+.container.entry-title-colour-tertiary .entry .title {
+  color: #FF7272;
+}
+.container.entry-text-colour-tertiary .entry .content {
+  color: #FF7272;
+}
+.container.text-colour-brand-1 .navigation li {
+  color: #B30510;
+}
+.container.navigation-highlight-colour-brand-1 .navigation ul {
+  border-color: #B30510;
+}
+.container.selected-text-colour-brand-1 .navigation li.selected {
+  color: #B30510;
+  border-color: #B30510;
+}
+.container.selected-navigation-highlight-colour-brand-1 .navigation li.selected {
+  border-color: #B30510;
+}
+.container.button-background-colour-brand-1 .navigation .button {
+  background-color: #B30510;
+}
+.container.button-icon-colour-brand-1 .navigation .button svg path {
+  stroke: #B30510;
+}
+.container.entry-background-colour-brand-1 .entry {
+  background-color: #B30510;
+}
+.container.entry-highlight-colour-brand-1 .entry {
+  border-color: #B30510;
+}
+.container.entry-date-colour-brand-1 .entry .date {
+  color: #B30510;
+}
+.container.entry-title-colour-brand-1 .entry .title {
+  color: #B30510;
+}
+.container.entry-text-colour-brand-1 .entry .content {
+  color: #B30510;
+}
+.container.text-colour-brand-2 .navigation li {
+  color: #6E0887;
+}
+.container.navigation-highlight-colour-brand-2 .navigation ul {
+  border-color: #6E0887;
+}
+.container.selected-text-colour-brand-2 .navigation li.selected {
+  color: #6E0887;
+  border-color: #6E0887;
+}
+.container.selected-navigation-highlight-colour-brand-2 .navigation li.selected {
+  border-color: #6E0887;
+}
+.container.button-background-colour-brand-2 .navigation .button {
+  background-color: #6E0887;
+}
+.container.button-icon-colour-brand-2 .navigation .button svg path {
+  stroke: #6E0887;
+}
+.container.entry-background-colour-brand-2 .entry {
+  background-color: #6E0887;
+}
+.container.entry-highlight-colour-brand-2 .entry {
+  border-color: #6E0887;
+}
+.container.entry-date-colour-brand-2 .entry .date {
+  color: #6E0887;
+}
+.container.entry-title-colour-brand-2 .entry .title {
+  color: #6E0887;
+}
+.container.entry-text-colour-brand-2 .entry .content {
+  color: #6E0887;
+}
+.container.text-colour-brand-3 .navigation li {
+  color: #50B400;
+}
+.container.navigation-highlight-colour-brand-3 .navigation ul {
+  border-color: #50B400;
+}
+.container.selected-text-colour-brand-3 .navigation li.selected {
+  color: #50B400;
+  border-color: #50B400;
+}
+.container.selected-navigation-highlight-colour-brand-3 .navigation li.selected {
+  border-color: #50B400;
+}
+.container.button-background-colour-brand-3 .navigation .button {
+  background-color: #50B400;
+}
+.container.button-icon-colour-brand-3 .navigation .button svg path {
+  stroke: #50B400;
+}
+.container.entry-background-colour-brand-3 .entry {
+  background-color: #50B400;
+}
+.container.entry-highlight-colour-brand-3 .entry {
+  border-color: #50B400;
+}
+.container.entry-date-colour-brand-3 .entry .date {
+  color: #50B400;
+}
+.container.entry-title-colour-brand-3 .entry .title {
+  color: #50B400;
+}
+.container.entry-text-colour-brand-3 .entry .content {
+  color: #50B400;
+}
+.container.text-colour-brand-4 .navigation li {
+  color: #FFE500;
+}
+.container.navigation-highlight-colour-brand-4 .navigation ul {
+  border-color: #FFE500;
+}
+.container.selected-text-colour-brand-4 .navigation li.selected {
+  color: #FFE500;
+  border-color: #FFE500;
+}
+.container.selected-navigation-highlight-colour-brand-4 .navigation li.selected {
+  border-color: #FFE500;
+}
+.container.button-background-colour-brand-4 .navigation .button {
+  background-color: #FFE500;
+}
+.container.button-icon-colour-brand-4 .navigation .button svg path {
+  stroke: #FFE500;
+}
+.container.entry-background-colour-brand-4 .entry {
+  background-color: #FFE500;
+}
+.container.entry-highlight-colour-brand-4 .entry {
+  border-color: #FFE500;
+}
+.container.entry-date-colour-brand-4 .entry .date {
+  color: #FFE500;
+}
+.container.entry-title-colour-brand-4 .entry .title {
+  color: #FFE500;
+}
+.container.entry-text-colour-brand-4 .entry .content {
+  color: #FFE500;
+}
+.container.text-colour-brand-5 .navigation li {
+  color: #F07D00;
+}
+.container.navigation-highlight-colour-brand-5 .navigation ul {
+  border-color: #F07D00;
+}
+.container.selected-text-colour-brand-5 .navigation li.selected {
+  color: #F07D00;
+  border-color: #F07D00;
+}
+.container.selected-navigation-highlight-colour-brand-5 .navigation li.selected {
+  border-color: #F07D00;
+}
+.container.button-background-colour-brand-5 .navigation .button {
+  background-color: #F07D00;
+}
+.container.button-icon-colour-brand-5 .navigation .button svg path {
+  stroke: #F07D00;
+}
+.container.entry-background-colour-brand-5 .entry {
+  background-color: #F07D00;
+}
+.container.entry-highlight-colour-brand-5 .entry {
+  border-color: #F07D00;
+}
+.container.entry-date-colour-brand-5 .entry .date {
+  color: #F07D00;
+}
+.container.entry-title-colour-brand-5 .entry .title {
+  color: #F07D00;
+}
+.container.entry-text-colour-brand-5 .entry .content {
+  color: #F07D00;
+}
+.container.text-colour-brand-6 .navigation li {
+  color: #62CFC9;
+}
+.container.navigation-highlight-colour-brand-6 .navigation ul {
+  border-color: #62CFC9;
+}
+.container.selected-text-colour-brand-6 .navigation li.selected {
+  color: #62CFC9;
+  border-color: #62CFC9;
+}
+.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected {
+  border-color: #62CFC9;
+}
+.container.button-background-colour-brand-6 .navigation .button {
+  background-color: #62CFC9;
+}
+.container.button-icon-colour-brand-6 .navigation .button svg path {
+  stroke: #62CFC9;
+}
+.container.entry-background-colour-brand-6 .entry {
+  background-color: #62CFC9;
+}
+.container.entry-highlight-colour-brand-6 .entry {
+  border-color: #62CFC9;
+}
+.container.entry-date-colour-brand-6 .entry .date {
+  color: #62CFC9;
+}
+.container.entry-title-colour-brand-6 .entry .title {
+  color: #62CFC9;
+}
+.container.entry-text-colour-brand-6 .entry .content {
+  color: #62CFC9;
+}
+.container.text-colour-white .navigation li {
+  color: #FFFFFF;
+}
+.container.navigation-highlight-colour-white .navigation ul {
+  border-color: #FFFFFF;
+}
+.container.selected-text-colour-white .navigation li.selected {
+  color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.container.selected-navigation-highlight-colour-white .navigation li.selected {
+  border-color: #FFFFFF;
+}
+.container.button-background-colour-white .navigation .button {
+  background-color: #FFFFFF;
+}
+.container.button-icon-colour-white .navigation .button svg path {
+  stroke: #FFFFFF;
+}
+.container.entry-background-colour-white .entry {
+  background-color: #FFFFFF;
+}
+.container.entry-highlight-colour-white .entry {
+  border-color: #FFFFFF;
+}
+.container.entry-date-colour-white .entry .date {
+  color: #FFFFFF;
+}
+.container.entry-title-colour-white .entry .title {
+  color: #FFFFFF;
+}
+.container.entry-text-colour-white .entry .content {
+  color: #FFFFFF;
+}
+.container.text-colour-black .navigation li {
+  color: #000000;
+}
+.container.navigation-highlight-colour-black .navigation ul {
+  border-color: #000000;
+}
+.container.selected-text-colour-black .navigation li.selected {
+  color: #000000;
+  border-color: #000000;
+}
+.container.selected-navigation-highlight-colour-black .navigation li.selected {
+  border-color: #000000;
+}
+.container.button-background-colour-black .navigation .button {
+  background-color: #000000;
+}
+.container.button-icon-colour-black .navigation .button svg path {
+  stroke: #000000;
+}
+.container.entry-background-colour-black .entry {
+  background-color: #000000;
+}
+.container.entry-highlight-colour-black .entry {
+  border-color: #000000;
+}
+.container.entry-date-colour-black .entry .date {
+  color: #000000;
+}
+.container.entry-title-colour-black .entry .title {
+  color: #000000;
+}
+.container.entry-text-colour-black .entry .content {
+  color: #000000;
+}
+.container.text-colour-grey-extra-light .navigation li {
+  color: #D7D7D7;
+}
+.container.navigation-highlight-colour-grey-extra-light .navigation ul {
+  border-color: #D7D7D7;
+}
+.container.selected-text-colour-grey-extra-light .navigation li.selected {
+  color: #D7D7D7;
+  border-color: #D7D7D7;
+}
+.container.selected-navigation-highlight-colour-grey-extra-light .navigation li.selected {
+  border-color: #D7D7D7;
+}
+.container.button-background-colour-grey-extra-light .navigation .button {
+  background-color: #D7D7D7;
+}
+.container.button-icon-colour-grey-extra-light .navigation .button svg path {
+  stroke: #D7D7D7;
+}
+.container.entry-background-colour-grey-extra-light .entry {
+  background-color: #D7D7D7;
+}
+.container.entry-highlight-colour-grey-extra-light .entry {
+  border-color: #D7D7D7;
+}
+.container.entry-date-colour-grey-extra-light .entry .date {
+  color: #D7D7D7;
+}
+.container.entry-title-colour-grey-extra-light .entry .title {
+  color: #D7D7D7;
+}
+.container.entry-text-colour-grey-extra-light .entry .content {
+  color: #D7D7D7;
+}
+.container.text-colour-grey-light .navigation li {
+  color: #E8E8E8;
+}
+.container.navigation-highlight-colour-grey-light .navigation ul {
+  border-color: #E8E8E8;
+}
+.container.selected-text-colour-grey-light .navigation li.selected {
+  color: #E8E8E8;
+  border-color: #E8E8E8;
+}
+.container.selected-navigation-highlight-colour-grey-light .navigation li.selected {
+  border-color: #E8E8E8;
+}
+.container.button-background-colour-grey-light .navigation .button {
+  background-color: #E8E8E8;
+}
+.container.button-icon-colour-grey-light .navigation .button svg path {
+  stroke: #E8E8E8;
+}
+.container.entry-background-colour-grey-light .entry {
+  background-color: #E8E8E8;
+}
+.container.entry-highlight-colour-grey-light .entry {
+  border-color: #E8E8E8;
+}
+.container.entry-date-colour-grey-light .entry .date {
+  color: #E8E8E8;
+}
+.container.entry-title-colour-grey-light .entry .title {
+  color: #E8E8E8;
+}
+.container.entry-text-colour-grey-light .entry .content {
+  color: #E8E8E8;
+}
+.container.text-colour-grey-medium .navigation li {
+  color: #8A8A8A;
+}
+.container.navigation-highlight-colour-grey-medium .navigation ul {
+  border-color: #8A8A8A;
+}
+.container.selected-text-colour-grey-medium .navigation li.selected {
+  color: #8A8A8A;
+  border-color: #8A8A8A;
+}
+.container.selected-navigation-highlight-colour-grey-medium .navigation li.selected {
+  border-color: #8A8A8A;
+}
+.container.button-background-colour-grey-medium .navigation .button {
+  background-color: #8A8A8A;
+}
+.container.button-icon-colour-grey-medium .navigation .button svg path {
+  stroke: #8A8A8A;
+}
+.container.entry-background-colour-grey-medium .entry {
+  background-color: #8A8A8A;
+}
+.container.entry-highlight-colour-grey-medium .entry {
+  border-color: #8A8A8A;
+}
+.container.entry-date-colour-grey-medium .entry .date {
+  color: #8A8A8A;
+}
+.container.entry-title-colour-grey-medium .entry .title {
+  color: #8A8A8A;
+}
+.container.entry-text-colour-grey-medium .entry .content {
+  color: #8A8A8A;
+}
+.container.text-colour-grey-dark .navigation li {
+  color: #4A4A4A;
+}
+.container.navigation-highlight-colour-grey-dark .navigation ul {
+  border-color: #4A4A4A;
+}
+.container.selected-text-colour-grey-dark .navigation li.selected {
+  color: #4A4A4A;
+  border-color: #4A4A4A;
+}
+.container.selected-navigation-highlight-colour-grey-dark .navigation li.selected {
+  border-color: #4A4A4A;
+}
+.container.button-background-colour-grey-dark .navigation .button {
+  background-color: #4A4A4A;
+}
+.container.button-icon-colour-grey-dark .navigation .button svg path {
+  stroke: #4A4A4A;
+}
+.container.entry-background-colour-grey-dark .entry {
+  background-color: #4A4A4A;
+}
+.container.entry-highlight-colour-grey-dark .entry {
+  border-color: #4A4A4A;
+}
+.container.entry-date-colour-grey-dark .entry .date {
+  color: #4A4A4A;
+}
+.container.entry-title-colour-grey-dark .entry .title {
+  color: #4A4A4A;
+}
+.container.entry-text-colour-grey-dark .entry .content {
+  color: #4A4A4A;
+}