openaire-library/monitor/how/how.component.less

@import "~src/assets/openaire-theme/less/_import-variables";

@media only screen and (min-width: @breakpoint-small) {
  .how .first > div:first-child {
    position: relative;
  }

  .how .first > div:first-child:after {
    content: "we";
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 5%;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/1.svg");
    right: -21%;
    top: 33%;
    width: 20%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
  }

  .how .second > div:first-child {
    position: relative;
    padding: 0 10% 0 20%;
  }

  .how .second > div:first-child:after {
    content: "and";
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 5%;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg");
    right: -17%;
    top: 33%;
    width: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
  }

  .how .third {
    position:  relative;
  }

  .how .third > div:first-child {
    padding: 0 14% 0 13%;
  }

  .how .third:after {
    content: "on which";
    font-size: 20px;
    font-weight: 600;
    padding-right: 30%;
    padding-top: 5%;
    padding-bottom: 5%;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
    bottom: -6%;
    left: 13%;
    transform: translateY(100%);
    width: 140px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .how .fourth {
    padding: 10% 3% 0 3%;
  }

  .how .fourth > div:first-child {
    position:  relative;
    padding: 0 16% 0 16%;
  }

  .how .fourth> div:first-child:after {
    content: "and";
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 5%;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg");
    left: -18%;
    top: 36%;
    width: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
  }

  .how .fifth {
    padding: 11% 2% 0 2%;
  }

  .how .fifth > div:first-child {
    position:  relative;
  }

  .how .fifth > div:first-child:after {
    content: "We";
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 5%;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/5.svg");
    left: -35%;
    top: 36%;
    width: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
  }

  .how .sixth {
    padding: 10% 5% 0 0;
  }

  .how .sixth > div:first-child {
    padding: 0 15% 0 15%;
  }

  .how .final {
    padding: 10% 20% 0 20%;
  }

  .how .final > div:first-child {
    position: relative;
  }

  .how .final > div:first-child:before {
    content: "";
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
    left: -26%;
    top: -20%;
    height: 70%;
    width: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
  }

  .how .final > div:first-child:after {
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
    font-size: 20px;
    position: absolute;
    top: 30%;
    width: 250px;
    padding: 8% 0 5% 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
  }
}

@media only screen and (max-width: @breakpoint-xsmall-max) {
  .how .first {
    position: relative;
    padding-bottom: 30%;
  }

  .how .first:after {
    content: "we";
    text-align: center;
    padding: 10% 34% 10% 0;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
    left: 26%;
    top: 79%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .how .second {
    position: relative;
    padding: 0 10% 30% 10%;
  }

  .how .second:after {
    content: "and";
    text-align: center;
    padding: 10% 34% 10% 0;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
    left: 25%;
    top: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .how .third {
    position:  relative;
    padding: 0 5% 30% 5%;
  }

  .how .third:after {
    content: "on which";
    font-weight: bold;
    text-align: center;
    padding: 10% 41% 10% 0;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
    left: 15%;
    top: 83%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .how .fourth {
    position:  relative;
    padding: 0 0 30% 0;
  }

  .how .fourth > div:first-child {
    padding: 0 10% 0 10%;
  }

  .how .fourth:after {
    content: "and";
    text-align: center;
    padding: 10% 34% 10% 0;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
    left: 26%;
    top: 79%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .how .fifth {
    position:  relative;
    padding: 0 2% 30% 2%;
  }

  .how .fifth:after {
    content: "We";
    text-align: center;
    padding: 10% 34% 10% 0;
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
    left: 27%;
    top: 76%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .how .sixth {
    padding: 0 5% 30% 0;
  }

  .how .sixth > div:first-child {
    padding: 0 15% 0 15%;
  }

  .how .final {
    padding: 20% 0 20% 0;
  }

  .how .final > div:first-child {
    position: relative;
  }

  .how .final > div:first-child:before {
    content: "";
    position: absolute;
    background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
    left: 34%;
    top: -70%;
    height: 70%;
    width: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .how .final > div:first-child:after {
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
    text-align: center;
    position: absolute;
    left: -62%;
    top: 85%;
    width: 300px;
    padding: 12% 0 0 54%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}