marble
Version:
WeDeploy's style guide and UI components
344 lines (309 loc) • 10.7 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 .content-table-row .dropdown .btn.btn-icon:hover,
.dxp .content-body .content-table-row .dropdown .btn.btn-icon:focus {
background: rgba(72, 143, 255, 0.1);
}
.dxp .btn-icon:hover,
.dxp .btn-icon:focus,
.dxp .btn-icon.focus {
color: #488FFF;
}
</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-list-header">
<img src="images/dxp-logo.png" />
</li> -->
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="javascript:;">
<img src="images/Overview.png" />
<span>Overview</span>
</a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link sidebar-link-selected" 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-half">
<!-- header -->
<header class="content-header">
<div class="header-title">
Contacts
</div>
</header><!-- end header -->
<main class="content-body">
<h3 class="content-body-title">All contacts</h3>
<div class="content-table-header">
<div class="row">
<div class="col-xs-16 col-md-10">
<span>Contact</span>
</div>
<div class="hidden-xs hidden-sm col-md-6">
<span>Company</span>
</div>
</div>
</div><!-- end content-table-header -->
<!-- contact 1 -->
<div class="content-table-row content-table-row--small">
<div class="row">
<div class="col-flex-row-left-center col-xs-16 col-md-10">
<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 class="col-flex-row-spacebetween-start hidden-xs hidden-sm col-md-6">
<div class="box box--small box-label">Nike International</div>
<div class="dropdown dropdown-icon">
<button class="btn btn-icon icon-16-ellipsis btn-dropdown" type="button" data-onclick="toggle"></button>
<ul class="dropdown-menu">
<li>
<a href="javascript:;">
<span class="icon-12-camera"></span>item 1
</a>
</li>
<li>
<a href="javascript:;">
<span class="icon-12-briefcase"></span>item 2
</a>
</li>
</ul>
</div>
</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 col-md-10">
<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 class="col-flex-row-spacebetween-start hidden-xs hidden-sm col-md-6">
<div class="box box--small box-label">Nike International</div>
<div class="dropdown dropdown-icon">
<button class="btn btn-icon icon-16-ellipsis btn-dropdown" type="button" data-onclick="toggle"></button>
<ul class="dropdown-menu">
<li>
<a href="javascript:;">
<span class="icon-12-camera"></span>item 1
</a>
</li>
<li>
<a href="javascript:;">
<span class="icon-12-briefcase"></span>item 2
</a>
</li>
</ul>
</div>
</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 col-md-10">
<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 class="col-flex-row-spacebetween-start hidden-xs hidden-sm col-md-6">
<div class="box box--small box-label">American Airlines</div>
<div class="dropdown dropdown-icon">
<button class="btn btn-icon icon-16-ellipsis btn-dropdown" type="button" data-onclick="toggle"></button>
<ul class="dropdown-menu">
<li>
<a href="javascript:;">
<span class="icon-12-camera"></span>item 1
</a>
</li>
<li>
<a href="javascript:;">
<span class="icon-12-briefcase"></span>item 2
</a>
</li>
</ul>
</div>
</div>
</div><!-- end row -->
</div><!-- end content-table-row -->
<!-- end contact 3 -->
<!-- contact 4 -->
<div class="content-table-row content-table-row--small">
<div class="row">
<div class="col-flex-row-left-center col-xs-16 col-md-10">
<span class="avatar-container show-tooltip avatar-small avatar-squared row-item row-avatar no-shrink" alt="Tobias Garcia">
<span class="avatar-photo avatar-small avatar-squared row-item row-avatar no-shrink">
<img src="images/04.jpg">
</span>
<span class="avatar-initials avatar-small avatar-squared row-item row-avatar no-shrink">T</span>
</span>
<span class="row-item title truncate">Tobias Garcia</span>
<span class="row-item subtitle no-shrink">Vice President of Sales</span>
</div>
<div class="col-flex-row-spacebetween-start hidden-xs hidden-sm col-md-6">
<div class="box box--small box-label">Lexicon</div>
<div class="dropdown dropdown-icon">
<button class="btn btn-icon icon-16-ellipsis btn-dropdown" type="button" data-onclick="toggle"></button>
<ul class="dropdown-menu">
<li>
<a href="javascript:;">
<span class="icon-12-camera"></span>item 1
</a>
</li>
<li>
<a href="javascript:;">
<span class="icon-12-briefcase"></span>item 2
</a>
</li>
</ul>
</div>
</div>
</div><!-- end row -->
</div><!-- end content-table-row -->
<!-- end contact 4 -->
</main><!-- end content-body -->
</div><!-- end container-hybrid -->
</div><!-- end sidebar-offset -->
</div><!-- end content -->
</body>
</html>