<div class="card my-commercials">
    <div class="card-section card-left">
        <h3 class="card-heading card-title">
            <div class="text">2017 Research Funding</div>
        </h3>
        <div class="overview">
            <div class="overview-section overview-left">
                <div id="dash-chart" class="chart" data-chart="" data-format="" data-array="" data-total="" data-display="percent" data-label="remaining">
                </div>
            </div>

            <div class="overview-section overview-right">

                <!-- PROJECTS KEY -->
                <div class="projects-key">
                    <h4 class="card-subheading">Projects Key</h4>

                    <ul class="projects-list">
                        <li class="list-item">Other Projects</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="funds-overview stats-overview">
            <div class="stats-row">
                <div class="row-left">
                    <div class="row-item">
                        <h4 class="card-subheading">Total awarded funds</h4>
                        <div class="amount -highlight">$2,000,000</div>
                    </div>
                </div>

                <div class="row-right">
                    <div class="row-item">
                        <h4 class="card-subheading">Approved</h4>
                        <div class="amount">$1,025,000</div>
                    </div>
                    <div class="row-item">
                        <h4 class="card-subheading">Approved ARC</h4>
                        <div class="amount">$975,000</div>
                    </div>
                </div>
            </div>

            <div class="stats-row">
                <div class="row-left">
                    <div class="row-item">
                        <h4 class="card-subheading">Total remaining</h4>
                        <div class="amount">$1,313,000</div>
                    </div>
                </div>

                <div class="row-right">
                    <div class="row-item">
                        <h4 class="card-subheading">Total requested</h4>
                        <div class="amount">$2,720,000</div>
                    </div>
                    <div class="row-item">
                        <h4 class="card-subheading">Not approved</h4>
                        <div class="amount">$720,000</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="line-chart">
            <h4 class="card-subheading">
                <span class="text">Awarded Funding</span>
            </h4>

            <div class="chart" data-unit="dollar" data-chart="line" data-array="[ [ 1000, 1000, 3000, 4000 ], [ 1000, 1000, 4250, 4500 ], [ 3000, 3500, 4500, 5000 ] ]" data-interval="10">
                <div class="axis-y">
                    <ul class="axis-list"></ul>
                </div>

                <div class="graph">
                    <svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
					</svg>

                    <div class="plot">
                        <svg x="0px" y="0px" viewBox="0 0 198 110" preserveAspectRatio="none" data-view="[ 198, 110 ]"></svg>
                    </div>
                </div>

                <div class="axis-x">
                    <ul class="axis-list">
                        <li class="axis-item">
                            <span class="text">1st Quarter</span>
                        </li>
                        <li class="axis-item">
                            <span class="text">2nd Quarter</span>
                        </li>
                        <li class="axis-item">
                            <span class="text">3rd Quarter</span>
                        </li>
                        <li class="axis-item">
                            <span class="text">4th Quarter</span>
                        </li>
                    </ul>
                </div>

                <div class="legend">
                    <h4 class="card-subheading">Legend</h4>

                    <ul class="legend-list">
                        <li class="legend-item">
                            <span class="text">Awarded 2017</span>
                        </li>

                        <li class="legend-item">
                            <span class="text">Funds Received 2017</span>
                        </li>

                        <li class="legend-item">
                            <span class="text">Awarded 2016</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="card-section card-right">
        <div class="project-budgets">
            <div class="card-heading">
                <h4 class="card-subheading">
                    <span class="text">2017 faculty funding information</span>

                    <button type="button" class="btn btn-help js-tooltip-help">
						<i class="fa fa-question-circle" aria-hidden="true"></i>

						<div class="help-text">A small amount of info about facult funding information.</div>
					</button>
                </h4>
            </div>

            <ul class="project-stats">
            </ul>

            <div class="see-all">
                <a class="link link-strong" href="projects" title="See all faculties">See all faculties</a>
            </div>
        </div>
    </div>
</div>
<div class="card my-commercials">
	<div class="card-section card-left">
		<h3 class="card-heading card-title">
			<div class="text">2017 Research Funding</div>
		</h3>
		<div class="overview">
			<div class="overview-section overview-left">
				{{> '@chart--pie-expanded' }}
			</div>

			<div class="overview-section overview-right">

				<!-- PROJECTS KEY -->
				<div class="projects-key">
					<h4 class="card-subheading">Projects Key</h4>

					<ul class="projects-list">
						{{#each projects }}
							<li class="list-item">{{ title }}</li>
						{{/each}}
						<li class="list-item">Other Projects</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="funds-overview stats-overview">
			<div class="stats-row">
				<div class="row-left">
					<div class="row-item">
						<h4 class="card-subheading">Total awarded funds</h4>
						<div class="amount -highlight">$2,000,000</div>
					</div>
				</div>

				<div class="row-right">
					<div class="row-item">
						<h4 class="card-subheading">Approved</h4>
						<div class="amount">$1,025,000</div>
					</div>
					<div class="row-item">
						<h4 class="card-subheading">Approved ARC</h4>
						<div class="amount">$975,000</div>
					</div>
				</div>
			</div>

			<div class="stats-row">
				<div class="row-left">
					<div class="row-item">
						<h4 class="card-subheading">Total remaining</h4>
						<div class="amount">$1,313,000</div>
					</div>
				</div>

				<div class="row-right">
					<div class="row-item">
						<h4 class="card-subheading">Total requested</h4>
						<div class="amount">$2,720,000</div>
					</div>
					<div class="row-item">
						<h4 class="card-subheading">Not approved</h4>
						<div class="amount">$720,000</div>
					</div>
				</div>
			</div>
		</div>

		<div class="line-chart">
			<h4 class="card-subheading">
				<span class="text">Awarded Funding</span>
			</h4>

			<div class="chart" data-unit="dollar" data-chart="line" data-array="[ [ 1000, 1000, 3000, 4000 ], [ 1000, 1000, 4250, 4500 ], [ 3000, 3500, 4500, 5000 ] ]" data-interval="10">
				<div class="axis-y">
					<ul class="axis-list"></ul>
				</div>

				<div class="graph">
					<svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
					</svg>

					<div class="plot">
						<svg x="0px" y="0px" viewBox="0 0 198 110" preserveAspectRatio="none" data-view="[ 198, 110 ]"></svg>
					</div>
				</div>

				<div class="axis-x">
					<ul class="axis-list">
						<li class="axis-item">
							<span class="text">1st Quarter</span>
						</li>
						<li class="axis-item">
							<span class="text">2nd Quarter</span>
						</li>
						<li class="axis-item">
							<span class="text">3rd Quarter</span>
						</li>
						<li class="axis-item">
							<span class="text">4th Quarter</span>
						</li>
					</ul>
				</div>

				<div class="legend">
					<h4 class="card-subheading">Legend</h4>

					<ul class="legend-list">
						<li class="legend-item">
							<span class="text">Awarded 2017</span>
						</li>

						<li class="legend-item">
							<span class="text">Funds Received 2017</span>
						</li>

						<li class="legend-item">
							<span class="text">Awarded 2016</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="card-section card-right">
		<div class="project-budgets">
			<div class="card-heading">
				<h4 class="card-subheading">
					<span class="text">2017 faculty funding information</span>

					<button type="button" class="btn btn-help js-tooltip-help">
						<i class="fa fa-question-circle" aria-hidden="true"></i>

						<div class="help-text">A small amount of info about facult funding information.</div>
					</button>
				</h4>
			</div>

			<ul class="project-stats">
				{{#each projects }}
					{{> @project-budget }}
				{{/each}}
			</ul>

			<div class="see-all">
				<a class="link link-strong" href="{{ basePath }}projects" title="See all faculties">See all faculties</a>
			</div>
		</div>
	</div>
</div>
/* No context defined for this component. */
  • Content:
    .my-commercials {
    	.card-left, .card-right {
    		width: 50%;
    	}
    
    	.card-left {
    		padding-bottom: 0;
    
    		background: $color-irma-white;
    	}
    
    	.overview {
    		margin-top: 6rem;
    		padding-bottom: 7.5rem;
    	}
    
    	.overview-section {
    		display: inline-block;
    		width: 49.5%;
    
    		vertical-align: top;
    	}
    
    	.overview-left {
    		.chart {
    			width: 60rem;
    			max-width: 100%;
    		}
    	}
    
    	.overview-right {
    		padding-left: 5rem;
    	}
    
    	.stats-overview {
    		padding: 7.5rem 0;
    
    		border-top: 1px solid $color-irma-silver;
    
    		.stats-row {
    			display: flex;
    
    			&:not(:first-child) {
    				margin-top: 4rem;
    			}
    
    			.row-right {
    				display: flex;
    				justify-content: flex-end;
    				text-align: right;
    
    				.row-item {
    					width: 30rem;
    				}
    			}
    
    			.row-item {
    				display: inline-block;
    
    				p {
    					opacity: 0.8;
    				}
    			}
    
    			.amount {
    				margin-top: 1.5rem;
    
    				@include font-size;
    				@include font-primary-bold;
    
    				&.-highlight {
    					margin-top: 0.5rem;
    
    					font-size: 8rem;
    				}
    
    				&.-students {
    					&::before {
    						content: '\f007';
    
    						display: inline-block;
    						vertical-align: middle;
    						margin-right: 1rem;
    
    						font-weight: normal;
    						@include font-icon;
    					}
    				}
    			}
    		}
    	}
    
    	.funds-overview {
    		.row-left {
    			width: 35%;
    		}
    
    		.row-right {
    			width: 65%;
    		}
    	}
    
    	.students-overview {
    		.row-left {
    			display: flex;
    			width: 65%;
    
    			.row-item {
    				&:first-child {
    					min-width: 33%;
    				}
    
    				&:last-child {
    					padding-left: 4rem;
    				}
    			}
    		}
    
    		.row-right {
    			width: 35%;
    		}
    	}
    
    	.line-chart {
    		position: relative;
    
    		padding: 7.5rem 0 10rem;
    
    		&::before {
    			content: '';
    
    			position: absolute;
    			left: -10rem;
    			top: 0;
    
    			display: block;
    			width: calc(100% + 20rem);
    			height: 100%;
    
    			background: rgba($color-irma-fog, 0.08);
    		}
    
    		.chart {
    			margin-top: 7.5rem;
    		}
    	}
    
    	.project-budgets {
    		.card-heading {
    			.card-subheading {
    				padding-top: 1rem;
    			}
    		}
    
    		.project-stats {
    			margin: 0;
    			padding: 0;
    
    			list-style-type: none;
    
    			.project-item {
    				margin-top: 6rem;
    				padding-bottom: 5rem;
    
    				border-bottom: 1px solid $color-irma-silver;
    
    				$projects: $color-project-1, $color-project-2, $color-project-3, $color-project-4, $color-project-5, $color-project-6;
    
    				@for $i from 1 through 6 {
    					&:nth-child(6n + #{$i}) {
    						.chart {
    							.meter {
    								color: nth($projects, $i);
    
    								transition-delay: #{$i * 0.2}s;
    							}
    						}
    					}
    				}
    			}
    
    			.project-title {
    				display: flex;
    
    				.text {
    					width: 60%;
    					padding-right: 4rem;
    
    					@include font-size;
    					@include font-primary-bold;
    					line-height: 1.2em;
    				}
    
    				.card-subheading {
    					width: calc(40% - 1.5rem);
    					max-width: 52rem;
    
    					text-align: center;
    				}
    			}
    
    			.stats-container {
    				display: flex;
    				margin-top: 3rem;
    			}
    
    			.stats-section {
    				display: inline-block;
    				vertical-align: top;
    			}
    
    			.stats-left {
    				width: 60%;
    				padding-right: 3rem;
    
    				.chart {
    					&:nth-last-child(3) {
    						.meter {
    							&::before {
    								background: $color-irma-gray;
    							}
    						}
    
    						.amount {
    							opacity: 0.7;
    						}
    					}
    
    					&:nth-last-child(2) {
    						.meter {
    							&::before {
    								opacity: 0.33;
    							
    								background: currentColor;
    							}
    						}
    					}
    
    					&:last-child {
    						.meter {
    							&::before {
    								background: currentColor;
    							}
    						}
    					}
    				}
    			}
    
    			.stats-right {
    				display: flex;
    				flex-direction: column;
    				align-items: center;
    				width: calc(40% - 1.5rem);
    
    				line-height: 4.5rem;
    
    				// .status-notes {
    				// 	margin-top: 0.25em;
    
    				// 	color: rgba($color-irma-slate, 0.7);
    
    				// 	text-transform: capitalize;;
    
    				// 	a {
    				// 		@extend .link;
    				// 	}
    				// }
    			}
    		}
    
    		.see-all {
    			margin-top: 5rem;
    
    			@include font-size;
    			@include font-primary-bold;
    		}
    	}
    
    	.applications-stats {
    		width: 100%;
    		max-width: 52rem;
    	}
    
    	@mixin commercials-tablet {
    		$max-width: 160rem;
    
    		display: block;
    
    		.card-section {
    			width: 100% !important;
    			margin: 0 auto;
    		}
    
    		.card-left {
    			padding-bottom: 7.5rem;
    		}
    
    		.overview {
    			max-width: $max-width;
    			margin: 0 auto;
    			margin-top: 6rem;
    		}
    
    		.stats-overview {
    			.stats-row {
    				max-width: $max-width;
    				margin: 0 auto;
    			}
    		}
    
    		.line-chart {
    			max-width: $max-width;
    			margin: 0 auto;
    		}
    
    		.project-budgets {
    			.card-heading {
    				.card-subheading {
    					max-width: $max-width;
    					margin: 0 auto;
    				}
    			}
    		}
    
    		.project-item {
    			display: flex;
    			flex-direction: column;
    			align-items: center;
    			
    
    			& > * {
    				max-width: $max-width;
    				width: 100%;
    			}
    		}
    
    		.see-all {
    			max-width: $max-width;
    			margin: 0 auto;
    			margin-top: 5rem;
    		}
    	}
    
    	@media screen and (max-width: #{$bp-tablet + 180}) {
    		body:not(.-nav-collapsed) & {
    			@include commercials-tablet;
    		}
    	}
    
    	@media screen and (max-width: $bp-tablet) {
    		@include commercials-tablet;
    	}
    }
  • URL: /components/raw/my-commercials/_my-commercials.scss
  • Filesystem Path: components/02-sections/my-commercials/_my-commercials.scss
  • Size: 4.9 KB

There are no notes for this item.