Style Guide

Pie Chart 

<div class="pieChartWrap bg-grey">
    <div class="container">

        <div class="title-warp">
            <h2 class="title"> BlueBox Investment Strategy</h2>
            <h1 class="main-title">Funds Documents</h1>
            <p class="descWrap">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>

        <div class="pie-container">
            <div class="pieChart-contain">
                <div class="chart-container">
                    <svg viewBox="0 0 524.168 524.168" preserveAspectRatio="xMinYMin">
                        <g transform="translate(254.584,262.084)" style="filter: url(&quot;#drop-shadow&quot;);">
                            <defs>
                                <filter id="drop-shadow" height="130%">
                                    <feGaussianBlur in="SourceAlpha" stdDeviation="5.5" result="blur"></feGaussianBlur>
                                    <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
                                    <feMerge>
                                        <feMergeNode in="offsetBlur"></feMergeNode>
                                        <feMergeNode in="SourceGraphic"></feMergeNode>
                                    </feMerge>
                                </filter>
                            </defs>
                            <path d="M1.4976450636132813e-14,-244.584A244.584,244.584,0,0,1,200.95567170994806,139.42076984295983L0,0Z" style="fill: rgb(50, 38, 106);"></path>
                            <path d="M212.45838408663369,147.40122145795277A258.584,258.584,0,0,1,-130.45119676200304,223.26703813899886L0,0Z" style="fill: rgb(86, 76, 131); filter: url(&quot;#drop-shadow&quot;);"></path>
                            <path d="M-123.3884366737221,211.17913427044556A244.584,244.584,0,0,1,-243.13602137064183,26.574577476505652L0,0Z" style="fill: rgb(122, 115, 156);"></path>
                            <path d="M-243.13602137064183,26.574577476505652A244.584,244.584,0,0,1,-196.5224991533458,-145.60302326024419L0,0Z" style="fill: rgb(158, 153, 180);"></path>
                            <path d="M-196.5224991533458,-145.60302326024419A244.584,244.584,0,0,1,-116.76110951186467,-214.91434656987965L0,0Z" style="fill: rgb(194, 192, 205);"></path>
                            <path d="M-116.76110951186467,-214.91434656987965A244.584,244.584,0,0,1,1.72304878695537e-13,-244.584L0,0Z" style="fill: rgb(230, 230, 230);"></path>
                            <text transform="translate(108.35210117209915,-56.70234065354965)">35%</text>
                            <text transform="translate(26.417251485148157,119.40461501956463)">24%</text>
                            <text transform="translate(-102.59721631634359,66.55181791760013)">15%</text>
                            <text transform="translate(-118.04256140922362,-31.95758063354719)">12%</text>
                            <text transform="translate(-80.214820559089,-92.30880687493016)">7%</text>
                            <text transform="translate(-30.11794007429907,-118.52528401012559)">8%</text>
                        </g>
                    </svg>
                </div>
                <div class="pieText">
                    <div class="panel">
                        <ul class="items">
                            <li data-amount="35" class="listItem">
                                <span class="listItem1 colorWrap"></span>
                                Cash
                            </li>
                            <li data-amount="24" class="active listItem">
                                <span class="listItem2 colorWrap"></span>
                                Industrial
                            </li>
                            <li data-amount="15" class="listItem">
                                <span class="listItem3 colorWrap"></span>
                                Consumer
                            </li>
                            <li data-amount="12" class="listItem">
                                <span class="listItem4 colorWrap"></span>
                                Hardware &amp; Components
                            </li>
                            <li data-amount="7" class="listItem">
                                <span class="listItem5 colorWrap"></span>
                                Software &amp; Services
                            </li>
                            <li data-amount="8" class="listItem">
                                <span class="listItem6 colorWrap"></span>
                                Semiconductors &amp; Semi equipment
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
 
<div class="pieChartWrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">

    <div class="title-warp">
      <h2 class="title"> {{subTitle}}</h2>
      <h1 class="main-title">{{mainTitle}}</h1>
      <p class="descWrap">{{desc}}</p>
    </div>

    <div class="pie-container">
      <div class="pieChart-contain">
        <div class="chart-container">
          <svg viewBox="0 0 524.168 524.168" preserveAspectRatio="xMinYMin">
            <g transform="translate(254.584,262.084)" style="filter: url(&quot;#drop-shadow&quot;);">
              <defs>
                <filter id="drop-shadow" height="130%">
                  <feGaussianBlur in="SourceAlpha" stdDeviation="5.5" result="blur"></feGaussianBlur>
                  <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
                  <feMerge>
                    <feMergeNode in="offsetBlur"></feMergeNode>
                    <feMergeNode in="SourceGraphic"></feMergeNode>
                  </feMerge>
                </filter>
              </defs>
              <path d="M1.4976450636132813e-14,-244.584A244.584,244.584,0,0,1,200.95567170994806,139.42076984295983L0,0Z" style="fill: rgb(50, 38, 106);"></path>
              <path d="M212.45838408663369,147.40122145795277A258.584,258.584,0,0,1,-130.45119676200304,223.26703813899886L0,0Z"
                    style="fill: rgb(86, 76, 131); filter: url(&quot;#drop-shadow&quot;);"></path>
              <path d="M-123.3884366737221,211.17913427044556A244.584,244.584,0,0,1,-243.13602137064183,26.574577476505652L0,0Z"
                    style="fill: rgb(122, 115, 156);"></path>
              <path d="M-243.13602137064183,26.574577476505652A244.584,244.584,0,0,1,-196.5224991533458,-145.60302326024419L0,0Z"
                    style="fill: rgb(158, 153, 180);"></path>
              <path d="M-196.5224991533458,-145.60302326024419A244.584,244.584,0,0,1,-116.76110951186467,-214.91434656987965L0,0Z"
                    style="fill: rgb(194, 192, 205);"></path>
              <path d="M-116.76110951186467,-214.91434656987965A244.584,244.584,0,0,1,1.72304878695537e-13,-244.584L0,0Z" style="fill: rgb(230, 230, 230);"></path>
              <text transform="translate(108.35210117209915,-56.70234065354965)">35%</text>
              <text transform="translate(26.417251485148157,119.40461501956463)">24%</text>
              <text transform="translate(-102.59721631634359,66.55181791760013)">15%</text>
              <text transform="translate(-118.04256140922362,-31.95758063354719)">12%</text>
              <text transform="translate(-80.214820559089,-92.30880687493016)">7%</text>
              <text transform="translate(-30.11794007429907,-118.52528401012559)">8%</text>
            </g>
          </svg>
        </div>
        <div class="pieText">
          <div class="panel">
            <ul class="items">
              <li data-amount="35" class="listItem">
                <span class="listItem1 colorWrap"></span>
                Cash
              </li>
              <li data-amount="24" class="active listItem">
                <span class="listItem2 colorWrap"></span>
                Industrial
              </li>
              <li data-amount="15" class="listItem">
                <span class="listItem3 colorWrap"></span>
                Consumer
              </li>
              <li data-amount="12" class="listItem">
                <span class="listItem4 colorWrap"></span>
                Hardware &amp; Components
              </li>
              <li data-amount="7" class="listItem">
                <span class="listItem5 colorWrap"></span>
                Software &amp; Services
              </li>
              <li data-amount="8" class="listItem">
                <span class="listItem6 colorWrap"></span>
                Semiconductors &amp; Semi equipment
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
 
{
  "bgGrey": true,
  "subTitle": "BlueBox Investment Strategy",
  "mainTitle": "Funds Documents",
  "desc": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {
  $(".listItem").click(function () {
    $(".listItem").removeClass("active");
    $(this).addClass("active");
  });
});
  • URL: /components/raw/pie_chart/pie_chart.js
  • Filesystem Path: components/03-components/pie_chart/pie_chart.js
  • Size: 178 Bytes
  • Content: 
    .pieChartWrap {
  padding: 100px 0;
  @include media-breakpoint-down(lg) {
    padding: 60px 0;
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }

  .title-warp {
    padding-bottom: 90px;
    @include media-breakpoint-down(lg) {
      padding-bottom: 30px;
    }
    .title {
      font-size: 17px;
      font-family: "OpenSans_light";
      line-height: 23px;
      color: #120f29;
    }
    .main-title {
      font-size: 60px;
      font-family: "PlayfairDisplay-Bold";
      color: #120f29;
      margin-bottom: 0;
      @include media-breakpoint-down(lg) {
        font-size: 40px;
      }
    }
    .descWrap {
      max-width: 665px;
      padding-top: 25px;
    }
  }
}

.pie-container {
  transition: padding 0.7s ease;
}

.chart-container svg {
  overflow: visible;
  transition: width 0.7s ease;
  max-width: 100%;
  height: 500px;
  @include media-breakpoint-down(lg) {
    height: 400px;
    width: 400px;
  }
}

.chart-container path {
  cursor: pointer;
}

.content-wrapper {
  overflow: hidden;
  transform-style: preserve-3d;
}

.pieChart-contain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include media-breakpoint-down(md) {
    display: block;
  }
  .chart-container {
    @include media-breakpoint-down(md) {
      text-align: center;
      margin-bottom: 30px;
    }
    text {
      color: $white;
      font-size: 25px;
      font-family: "PlayfairDisplay-SemiBold";
      line-height: 33px;
      text-anchor: middle;
      @include media-breakpoint-down(lg) {
        font-size: 20px;
      }
    }
  }
  .pieText {
    min-width: 350px;

    .panel,
    .chart-panel {
      .items {
        list-style-type: none;
        padding-left: 0;
        li {
          font-size: 17px;
          line-height: 29px;
          color: #120f29;
          font-family: "OpenSans-Regular";
          padding: 7px 10px;
          cursor: pointer;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
          @include media-breakpoint-down(md) {
            font-size: 15px;
            line-height: 23px;
          }
          &.active {
            font-family: "OpenSans-SemiBold";
            background: rgba(41, 35, 92, 0.06);
          }
          .colorWrap {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 18px;
          }
          .listItem1 {
            background-color: #2c87bb;
          }
          .listItem2 {
            background-color: #64c2a6;
          }
          .listItem3 {
            background-color: #aadea7;
          }
          .listItem4 {
            background-color: #e6f59d;
          }
          .listItem5 {
            background-color: #feae65;
          }
          .listItem6 {
            background-color: #f66d44;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/pie_chart/pie_chart.scss
  • Filesystem Path: components/03-components/pie_chart/pie_chart.scss
  • Size: 2.9 KB

There are no notes for this item.