Style Guide

Footer Rating Element 

<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="star" viewBox="0 0 28 28" preserveAspectRatio="xMaxYMax meet">
        <title>
            Star Rating
        </title>
        <path class="star" d="M13.996,22.501 L22.649,27.997 L20.352,17.637 L27.996,10.667 L17.930,9.768 L13.996,-0.003 L10.063,9.768 L-0.003,10.667 L7.641,17.637 L5.345,27.997 L13.996,22.501 Z" />
    </symbol>
</svg>

<div class="footer_rating_element">
    <div class="footerLink-content">

        <div class="copyright-wrap">
            <p class="">
                © BlueBox Technology Fund - 2022
            </p>
            <a class="linkedin-icon" href="#">
                <img src="/images/linkedin-brands.svg" alt="linkedin" />
            </a>
        </div>

        <div class="footer-link">
            <a class="" href="#"> Imprimt </a>
            <a class="" href="#"> Legal mentions </a>
            <a class="btn btn-outline" href="#">Contact us</a>
        </div>
    </div>

    <div class="footerStar-content">
        <div class="starRating-wrap">
            <div class="textWrap">
                <img class="footer-mor-logo" src="/images/footer-mor-logo.png" alt="footer-img" />

            </div>
            <div class="globRate_wrap">
                <div class="rating">
                    <fieldset class="rating-fieldset">
                        <span>
                            <label class="half"><svg role="img" aria-label="rating">
                                    <use xlink:href="#star"></use>
                                </svg></label>
                        </span>
                        <span>
                            <label class="full"><svg role="img" aria-label="rating">
                                    <use xlink:href="#star"></use>
                                </svg></label>
                        </span>
                        <span>
                            <label class="full"><svg role="img" aria-label="rating">
                                    <use xlink:href="#star"></use>
                                </svg></label>
                        </span>
                        <span>
                            <label class="full"><svg role="img" aria-label="rating">
                                    <use xlink:href="#star"></use>
                                </svg></label>
                        </span>
                    </fieldset>
                </div>
                <div class="globes_wrap">
                    <img src="/images/globe-transparent.png" class="full" />
                    <img src="/images/globe-transparent.png" class="full" />
                    <img src="/images/globe-transparent.png" class="full" />
                    <img src="/images/globe-transparent.png" class="full" />
                    <img src="/images/globe-transparent.png" class="half" />
                </div>
            </div>
        </div>
    </div>
</div>
 
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="star" viewBox="0 0 28 28" preserveAspectRatio="xMaxYMax meet">
    <title>
      Star Rating
    </title>
    <path class="star"
          d="M13.996,22.501 L22.649,27.997 L20.352,17.637 L27.996,10.667 L17.930,9.768 L13.996,-0.003 L10.063,9.768 L-0.003,10.667 L7.641,17.637 L5.345,27.997 L13.996,22.501 Z"/>
  </symbol>
</svg>

<div class="footer_rating_element">
  <div class="footerLink-content">

    <div class="copyright-wrap">
      <p class="">
        {{ copyrightText }}
      </p>
      <a class="linkedin-icon" href="{{ linkedinUrl }}">
        <img src="{{ linkedinImg }}" alt="linkedin"/>
      </a>
    </div>

    <div class="footer-link">
      {% for item in footerLinks %}
        <a class="" href="{{ item.link }}">{{ item.title }}</a>
      {% endfor %}
      <a class="btn btn-outline" href="{{ btnlink }}">{{ btnText }}</a>
    </div>
  </div>

  <div class="footerStar-content">
    <div class="starRating-wrap">
      <div class="textWrap">
        <img class="footer-mor-logo" src="{{ imgSrc }}" alt="footer-img"/>
        {# <p class="rate-us">
          {{ rate_us }}
        </p> #}
      </div>
      <div class="globRate_wrap">
        <div class="rating">
          <fieldset class="rating-fieldset">
            {% set stars_left = stars %}
            {% for i in 0..10 if stars_left > 0 %}
              {% if stars_left|round(0, 'floor') != stars_left %}
                <span>
                  <label class="half"><svg role="img" aria-label="rating"><use xlink:href="#star"></use></svg></label>
                </span>
                {% set stars_left = stars_left - 0.5 %}
              {% else %}
                <span>
                  <label class="full"><svg role="img" aria-label="rating"><use xlink:href="#star"></use></svg></label>
                </span>
                {% set stars_left = stars_left - 1 %}
              {% endif %}
            {% endfor %}
          </fieldset>
        </div>
        <div class="globes_wrap">
          {% set globes_left = globes %}
          {% for i in 0..10 if globes_left > 0 %}
            {% if globes_left == 0.5 %}
              <img src="/images/globe-transparent.png" class="half"/>
            {% else %}
              <img src="/images/globe-transparent.png" class="full"/>
            {% endif %}
            {% set globes_left = globes_left - 1 %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "copyrightText": "© BlueBox Technology Fund - 2022",
  "copyrightLink": "#",
  "linkedinImg": "/images/linkedin-brands.svg",
  "linkedinUrl": "#",
  "btnText": "Contact us",
  "btnlink": "#",
  "rate_us": "rate us",
  "imgSrc": "/images/footer-mor-logo.png",
  "img": "/images/globes-transparent.png",
  "stars": 3.5,
  "globes": 4.5,
  "footerLinks": [
    {
      "title": " Imprimt ",
      "link": "#"
    },
    {
      "title": " Legal mentions ",
      "link": "#"
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function() {
  const ratingElem = $('.rating input[name="star"]');

  ratingElem.change(function() {
    if (this.checked) {
      $(this)
        .parent()
        .addClass("active");
    }
  });
});
  • URL: /components/raw/footer_rating_element/footer_rating_element.js
  • Filesystem Path: components/02-layout/footer_rating_element/footer_rating_element.js
  • Size: 245 Bytes
  • Content: 
    .footer_rating_element {
  background-color: #29235c;
  padding: 47px 65px;

  @include media-breakpoint-down(xl) {
    padding: 35px;
  }
  @include media-breakpoint-down(md) {
    padding: 53px 30px;
  }

  .footerLink-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 35px;
    border-bottom: 1px solid #ffffff33;
    @include media-breakpoint-down(md) {
      align-items: flex-start;
      flex-direction: column-reverse;
      padding-bottom: 45px;
    }
    .footer-link {
      @include media-breakpoint-down(md) {
        width: 100%;
      }
      a {
        font-size: 14px;
        font-family: "OpenSans-Regular";
        line-height: 32px;
        color: #fff;
        text-decoration: none;
        margin-right: 52px;
        border-radius: 0;
        &:last-child {
          margin-right: 0;
        }
        &:hover {
          color: $secondary;
        }
        @include media-breakpoint-down(xl) {
          margin-right: 25px;
        }
        @include media-breakpoint-down(md) {
          display: flex;
          flex-direction: column;
          margin-right: 0;
          margin-bottom: 30px;
          font-size: 15px;
          &:last-child {
            margin-bottom: 0px;
          }
        }
      }
    }
    .copyright-wrap {
      display: flex;
      align-items: baseline;
      @include media-breakpoint-down(md) {
        margin-top: 35px;
      }
      p {
        font-size: 15px;
        font-family: "OpenSans-Regular";
        line-height: 23px;
        color: #fff;
        text-decoration: none;
        opacity: 0.5;
        margin-bottom: 0;
      }
      .linkedin-icon {
        margin-left: 20px;
        transition: all 0.5s ease-in-out;
        &:hover {
          img {
            transition: all 0.5s ease-in-out;
            transform: scale(1.1);
          }
        }
        img {
          margin-top: -3px;
        }
      }
      .linkedin-icon {
        margin-left: 20px;
        transition: all 0.5s ease-in-out;
        &:hover {
          img {
            transition: all 0.5s ease-in-out;
            transform: scale(1.1);
          }
        }
        img {
          margin-top: -3px;
        }
      }
    }
  }
  .footerStar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 35px;
    @include media-breakpoint-down(md) {
      align-items: flex-start;
      flex-direction: column;
    }
    .starRating-wrap {
      display: flex;
      align-items: center;
      @include media-breakpoint-down(md) {
        align-items: flex-start;
        flex-direction: column;
      }
      .textWrap {
        display: flex;
        align-items: center;
      }
      .footer-mor-logo {
        max-width: 100%;
        height: 27px;
        // @include media-breakpoint-down(sm) {
        //   height: 20px;
        // }
      }
      .rate-us {
        color: #fff;
        font-size: 11px;
        font-family: "OpenSans_light";
        line-height: 15px;
        margin-left: 20px;
        @include media-breakpoint-down(md) {
          font-size: 14px;
        }
      }
      p {
        margin-bottom: 0;
      }
    }
  }
}

.globes_wrap {
  margin-left: 20px;
  display: flex;
  @include media-breakpoint-down(md) {
    margin-left: 0px;
  }
  img {
    display: block;
    margin-right: 1px;
    width: 26px;

    &.half {
      width: 13px;
      object-fit: cover;
      object-position: left;
    }
  }
}

fieldset {
  display: inline-block;
  overflow: hidden;
  padding: 0;
  border: 0;
}

small {
  display: block;
  text-align: right;
}

.rating {
  margin-left: 20px;

  @include media-breakpoint-down(md) {
    margin-left: 0px;
    margin-top: 20px;
  }

  input[name="star"] {
    display: none;
    width: 0;
    opacity: 0;
    margin-left: -2px;

    // &:focus ~ label svg {
    //   fill: $secondary;
    // }

    // &:checked ~ label svg {
    //   fill: $secondary;
    // }
  }
  span {
    display: inline-block;
    position: relative;
    float: right;
    margin-right: 4px;
    label {
      float: right;
      // cursor: pointer;

      svg {
        fill: $secondary;
        color: transparent;
        transition: color 0.2s ease-in-out;
        width: 23px;
        height: 23px;
      }

      // &:hover {
      //   svg {
      //     fill: $secondary;
      //   }

      //   ~ label {
      //     svg {
      //       fill: $secondary;
      //     }

      //     &.half {
      //       svg {
      //         fill: $secondary;
      //       }
      //     }
      //   }
      // }

      &.half {
        overflow: hidden;
        width: 12.5px;

        // &:hover {
        //   svg {
        //     fill: $secondary;
        //   }
        // }
      }
    }

    // &:hover {
    //   ~ span label svg {
    //     fill: $secondary;
    //   }
    // }

    // &.active ~ span {
    //   label svg {
    //     fill: $secondary;
    //   }
    // }
  }
}
  • URL: /components/raw/footer_rating_element/footer_rating_element.scss
  • Filesystem Path: components/02-layout/footer_rating_element/footer_rating_element.scss
  • Size: 5 KB
  • Handle: @footer_rating_element
  • Preview:
  • Filesystem Path: components/02-layout/footer_rating_element/footer_rating_element.twig

There are no notes for this item.