Balloon

Balloon info box for map markers. Use a theme class to apply proper colors such as t-map-purple.

Status: This would be a status message about the outage.

Customers Affected:

157

Estimated Restoration Time:

7:15 am

Wed Feb 27

<div class="balloon t-map-purple">
	<header class="balloon__header">
		<button class="balloon__close" aria-label="Close">
			<svg x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
				<path class="i-close" fill="#FFFFFF" d="M16,2.9L13.1,0L8,5.1L2.9,0L0,2.9L5.1,8L0,13.1L2.9,16L8,10.9l5.1,5.1l2.9-2.9L10.9,8L16,2.9z" />
			</svg>
		</button>

		<h1 class="balloon__title">Outage Reported</h1>
		<h2 class="balloon__subtitle">02-02-2016 at 6:43 am</h2>
	</header>
	<div class="balloon__content">
		<div class="balloon__message">
			<strong>Status:</strong> This would be a status message about the outage.
		</div>

		<div class="balloon__message">
			<div class="balloon__message-header"><strong>Customers Affected:</strong></div>
			<div class="balloon__big-em">157</div>
		</div>

		<div class="balloon__message">
			<div class="balloon__message-header"><strong>Estimated Restoration Time:</strong></div>
			<div class="balloon__big-em">7:15 am</div>
			<div class="balloon__small-em">Wed Feb 27</div>
		</div>
	</div>
</div>

Balloon Loading

Balloon info box for map markers. Use a theme class to apply proper colors such as t-map-purple.

<div class="balloon t-map-purple">
	<header class="balloon__header">
		<h1 class="balloon__title">Loading Report</h1>
		<h2 class="balloon__subtitle">
			<div class="balloon__message">
				<div class="balloon__message-header">Customers Affected: 157
		</h2>
	</header>

	<div class="balloon__content">
		<div class="loading-indicator" style="margin-top:0">
			<div class="loading-indicator__step"></div>
			<div class="loading-indicator__step"></div>
			<div class="loading-indicator__step"></div>
		</div>
	</div>
</div>

Legend

Customers Affected

<ul class="legend">
	<li class="legend__label">Customers Affected</li>
</ul>

Legend Header

Legend page headers contain the page title, page help link and legend information.

Page Title

Map Help Legend

Customers Affected

Map Help

<div class="legend-header">
	<h1 class="legend-header__title">
		Page Title
	</h1>
	<div class="legend-header__help">
		<a class="legend-header__link legend-header__link--help" href="#">Map Help</a>
		<a class="legend-header__link legend-header__link--legend js-legend__toggle" href="#">Legend</a>
	</div>
	<div class="legend-header__legend js-legend__content">
		<ul class="legend">
			<li class="legend__label">Customers Affected</li>
		</ul>
		<div class="legend-header__legend-links">
			<a class="legend-header__link" href="#">Map Help</a>
		</div>
	</div>
</div>

Outage Meter

The outage meter indicates the number of customers currently with power. The base color of the meter is light blue and the fill color darker blue. The meter fill element and the value will animate with a mix javascript and CSS transitions.

0%

Customers with Power

<div class="outage-meter" data-percentage="92.9">
	<div class="outage-meter__fill"></div>
	<div class="outage-meter__value">0%</div>
	<div class="outage-meter__label">Customers with Power</div>
</div>

Refresh Timer

Map refresh in

5:02

<div class="refresh-timer">
	<div class="refresh-timer__title">Map refresh in</div>
	<div class="refresh-timer__time">5:02</div>
</div>

Zoom Control

Zoom control component for ESRI maps. Each controls can be visually disabled by adding the disabled attribute to the control button.

<div class="zoom-control">
	<div role="button" class="zoom-control__in" title="Zoom In" tabindex="0">
		<span aria-hidden="true" role="presentation" class="zoom-control__icon-plus"></span>
		<span class="u-screen-reader-text">Zoom In</span>
	</div>
	<div role="button" class="zoom-control__out" title="Zoom Out" tabindex="0" disabled>
		<span aria-hidden="true" role="presentation" class="zoom-control__icon-minus"></span>
		<span class="u-screen-reader-text">Zoom Out</span>
	</div>
</div>

Maps