marble
Version:
WeDeploy's style guide and UI components
277 lines (242 loc) • 8.13 kB
HTML
<html>
<head>
<title>DXP Cloud - Contacts</title>
<link rel="stylesheet" href="../build/marble.css">
<link rel="stylesheet" href="../build/fonts/galano/galano.css">
<link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
<link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
<style type="text/css">
.btn-dropdown:focus + .dropdown-menu {
display: block;
}
.dxp {
background: #f5f5f5;
}
.dxp .topbar {
position: fixed;
background: #41444B;
z-index: 100;
}
.dxp .topbar .logo img {
height: 36px;
}
.dxp .sidebar {
background: #464A5F;
margin-top: 60px;
height: calc(100vw - 60px);
}
.dxp .sidebar .sidebar-list {
padding-top: 24px;
}
.dxp .sidebar .sidebar-list-header-title,
.dxp .sidebar .sidebar-link {
color: #fff;
}
.dxp .sidebar .sidebar-link:hover,
.dxp .sidebar .sidebar-link:focus {
background: #41444B;
}
.dxp .sidebar-list-1 .sidebar-link-selected,
.dxp .sidebar-list-1 .sidebar-link-selected:hover,
.dxp .sidebar-list-1 .sidebar-link-selected:focus {
border-left: 4px solid #488FFF;
background: #41444B;
color: #fff;
}
.dxp .sidebar-offset {
background: #F5F5F5;
padding-top: 60px;
}
.dxp .content-body-header .content-body-title {
margin-bottom: 0;
}
.dxp .lcs-container .chart-container {
margin: 0 auto;
}
.dxp .content-body .content-link {
color: #488FFF;
}
.dxp .content-body .content-link .icon {
background: rgba(72, 143, 255, 0.1);
}
.dxp .content-body .content-link:hover .icon {
background: rgba(72, 143, 255, 0.2);
}
.dxp .chart-container {
background: rgba(70, 74, 95, 0.8);
}
.dxp .pie:before,
.dxp .pie:after {
background-color: #464A5F;
}
</style>
</head>
<body class="dxp">
<div class="content">
<nav class="topbar topbar-spacebetween">
<div class="topbar-logo">
<a class="topbar-logo-link" href="javascript:;">
<span class="logo">
<img src="images/dxp-logo.png" />
</span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item topbar-avatar">
<div class="dropdown dropdown-icon">
<button class="topbar-link btn-transparent" data-onclick="toggle">
<span class="avatar-container avatar-medium" alt="Ygor Costa">
<span class="avatar-photo avatar-medium">
<img src="images/29.jpg">
</span>
<span class="avatar-initials avatar-medium"></span>
</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="/account" rel="noreferrer">
<span class="icon-12-person"></span>My Account
</a>
</li>
<li>
<a href="/logout" rel="noreferrer">
<span class="icon-12-leave"></span>Sign Out
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="sidebar">
<ul class="sidebar-list sidebar-list-1 toggler-collapsed">
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link sidebar-link-selected" href="javascript:;">
<img src="images/Overview.png" />
<span>Overview</span>
</a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="javascript:;">
<img src="images/Contacts.png" />
<span>Contacts</span>
</a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="javascript:;">
<img src="images/Assets.png" />
<span>Assets</span>
</a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="javascript:;">
<img src="images/Touchpoints.png" />
<span>Touchpoints</span>
</a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="javascript:;">
<img src="images/Campaigns.png" />
<span>Campaigns</span>
</a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="javascript:;">
<img src="images/LCS.png" />
<span>LCS</span>
</a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="javascript:;">
<img src="images/Settings.png" />
<span>Settings</span>
</a>
</li>
</ul>
</div><!-- end sidebar -->
<div class="sidebar-offset">
<div class="container-hybrid">
<!-- header -->
<header class="content-header">
<div class="header-title">
Overview
</div>
</header><!-- end header -->
<main class="row overview">
<section class="col-xs-16 col-md-8">
<div class="content-body">
<div class="content-body-header col-flex-row-spacebetween-center">
<h3 class="content-body-title">Contacts</h3>
<a href="javascript:;" class="content-link">All Contacts<span class="icon icon-12-arrow-right-rod"></span></a>
</div>
<!-- contact 1 -->
<div class="content-table-row content-table-row--small">
<div class="row">
<div class="col-flex-row-left-center col-xs-16">
<span class="avatar-container show-tooltip avatar-small avatar-squared row-item row-avatar no-shrink" alt="Kendall Ive">
<span class="avatar-photo avatar-small avatar-squared row-item row-avatar no-shrink">
<img src="images/01.jpg">
</span>
<span class="avatar-initials avatar-small avatar-squared row-item row-avatar no-shrink">K</span>
</span>
<span class="row-item title truncate">Kendall Ive</span>
<span class="row-item subtitle no-shrink">Sr Product Manager</span>
</div>
</div><!-- end row -->
</div><!-- end content-table-row -->
<!-- end contact 1 -->
<!-- contact 2 -->
<div class="content-table-row content-table-row--small">
<div class="row">
<div class="col-flex-row-left-center col-xs-16">
<span class="avatar-container show-tooltip avatar-small avatar-squared row-item row-avatar no-shrink" alt="James Gregory Smith">
<span class="avatar-photo avatar-small avatar-squared row-item row-avatar no-shrink">
<img src="images/02.jpg">
</span>
<span class="avatar-initials avatar-small avatar-squared row-item row-avatar no-shrink">J</span>
</span>
<span class="row-item title truncate">James Gregory Smith</span>
<span class="row-item subtitle no-shrink">Lead Product Design</span>
</div>
</div><!-- end row -->
</div><!-- end content-table-row -->
<!-- end contact 2 -->
<!-- contact 3 -->
<div class="content-table-row content-table-row--small">
<div class="row">
<div class="col-flex-row-left-center col-xs-16">
<span class="avatar-container show-tooltip avatar-small avatar-squared row-item row-avatar no-shrink" alt="Jerry May">
<span class="avatar-photo avatar-small avatar-squared row-item row-avatar no-shrink">
<img src="images/03.jpg">
</span>
<span class="avatar-initials avatar-small avatar-squared row-item row-avatar no-shrink">J</span>
</span>
<span class="row-item title truncate">Jerry May</span>
<span class="row-item subtitle no-shrink">Founder & CEO</span>
</div>
</div><!-- end row -->
</div><!-- end content-table-row -->
<!-- end contact 3 -->
</div><!-- end content-body -->
</section><!-- end row-contacts -->
<section class="col-xs-16 col-md-8">
<div class="content-body">
<div class="content-body-header col-flex-row-spacebetween-center">
<h3 class="content-body-title">LCS</h3>
<a href="javascript:;" class="content-link">All LCS<span class="icon icon-12-arrow-right-rod"></span></a>
</div>
<div class="lcs-container">
<div class="chart-container">
<div class="pie big" data-start="0" data-value="230"></div>
<span class="chart__value">63%</span>
</div>
</div>
</div><!-- end content-body -->
</section>
</main>
</div><!-- end container-hybrid -->
</div><!-- end sidebar-offset -->
</div><!-- end content -->
</body>
</html>