@collab-ui/core
Version:
Cisco Collab UI CSS Framework
411 lines (410 loc) • 16.4 kB
HTML
<div class="medium-4 columns">
<div class="cui-list cui-list--vertical" role="list" style="background-color: black;">
<div
aria-current="true"
class="cui-list-item cui-list-item--space"
id="cui-list-item-1"
role="listitem"
tabindex="0"
data-md-event-key="cui-list-item-1"
data-md-keyboard-key="overview-item"
title="Overview Item"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium">
<span class="cui-avatar__icon cui-avatar__icon--overview"
><i class="cui-icon icon icon-handset_24" style="font-size: 24px;"></i
></span>
</div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header cui-list-item__header--overview">Overview Item</div>
<div class="cui-list-item__subheader"></div>
</div>
<div class="cui-list-item__right"></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-2"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-2"
data-md-keyboard-key="header-only"
title="Header Only"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">Header Only</div>
<div class="cui-list-item__subheader"></div>
</div>
<div class="cui-list-item__right"></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--unread"
id="cui-list-item-3"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-3"
data-md-keyboard-key="bold-unread"
title="Bold Unread"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">Bold Unread</div>
<div class="cui-list-item__subheader"></div>
</div>
<div class="cui-list-item__right">
<i class="cui-icon icon icon-unread-badge_12" style="font-size: 12px; color: rgb(0, 160, 209);"></i>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--unread"
id="cui-list-item-4"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-4"
data-md-keyboard-key="bold-mentioned"
title="Bold Mentioned"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">Bold Mentioned</div>
<div class="cui-list-item__subheader"></div>
</div>
<div class="cui-list-item__right">
<i class="cui-icon icon icon-mention_12" style="font-size: 12px; color: rgb(0, 160, 209);"></i>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-5"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-5"
data-md-keyboard-key="is-alert-on"
title="isAlertOn"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">isAlertOn</div>
<div class="cui-list-item__subheader"></div>
</div>
<div class="cui-list-item__right">
<i class="cui-icon icon icon-alert_12" style="font-size: 12px; color: rgba(255, 255, 255, 0.6);"></i>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-6"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-6"
data-md-keyboard-key="is-muted"
title="isMuted"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">isMuted</div>
<div class="cui-list-item__subheader"></div>
</div>
<div class="cui-list-item__right">
<i class="cui-icon icon icon-alert-muted_12" style="font-size: 12px; color: rgba(255, 255, 255, 0.6);"></i>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space disabled"
id="cui-list-item-7"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-7"
data-md-keyboard-key="disabled"
title="Disabled"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">Disabled</div>
<div class="cui-list-item__subheader">subheader</div>
</div>
<div class="cui-list-item__right"></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-8"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-8"
data-md-keyboard-key="subheader-as-node"
title="Subheader as Node"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">Subheader as Node</div>
<div class="cui-list-item__subheader"><span style="color: rgb(152, 213, 202);">Marketing</span></div>
</div>
<div class="cui-list-item__right"></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--read-only cui-list-item-header cui-list-item-header--space"
id="cui-list-item-9"
role="listitem"
data-md-event-key="cui-list-item-9"
data-md-keyboard-key="list-header-type-space"
title="List Header-Type(space)"
>
<div class="cui-list-item__center"><div class="cui-list-item__header">List Header-Type(space)</div></div>
<div class="cui-list-item__right"><a href="more">More</a></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-10"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-10"
data-md-keyboard-key="header-with-search-term"
title="Header with SearchTerm"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header cui-list-item__header--overview">
Header with <span class="cui-list-item__header--highlight">Search</span>Term
</div>
<div class="cui-list-item__subheader"></div>
</div>
<div class="cui-list-item__right"></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-11"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-11"
data-md-keyboard-key="both-headers-w-search-term"
title="Both Headers w/ SearchTerm"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header cui-list-item__header--overview">
Both Headers w/ <span class="cui-list-item__header--highlight">Search</span>Term
</div>
<div class="cui-list-item__subheader">Searchable subheader</div>
</div>
<div class="cui-list-item__right"></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-12"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-12"
data-md-keyboard-key="subheader-node-search-term"
title="Subheader(node)-searchTerm"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header cui-list-item__header--overview">
Subheader(node)-<span class="cui-list-item__header--highlight">search</span>Term
</div>
<div class="cui-list-item__subheader"><span style="color: rgb(215, 171, 225);">Searching</span></div>
</div>
<div class="cui-list-item__right"></div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--space-search"
id="cui-list-item-13"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-13"
data-md-keyboard-key="type-search"
title="Type(search)"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header cui-list-item__header--overview">
<span class="cui-list-item__header-main">Type(search)</span
><span class="cui-list-item__header-secondary">16:00</span>
</div>
<div class="cui-list-item__center cui-list-item__result-container">
<div class="cui-list-item__result">
HighlightColor changes
<span class="cui-list-item__subheader--highlight" style="color: white;">search</span> color
</div>
</div>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--space-filter"
id="cui-list-item-14"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-14"
data-md-keyboard-key="type-filter"
title="Type(filter)"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header cui-list-item__header--overview">
<span class="cui-list-item__header-main">Type(filter)</span
><span class="cui-list-item__header-secondary">12/03/2018</span>
</div>
<div class="cui-list-item__center cui-list-item__result-container">
<div class="cui-list-item__result">headerSecondary=string</div>
</div>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--space-filter-search"
id="cui-list-item-15"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-15"
data-md-keyboard-key="type-filter-search"
title="Type(filter-search)"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header cui-list-item__header--overview">
<span class="cui-list-item__header-main">Type(filter-search)</span
><span class="cui-list-item__header-secondary">12/03/2018</span>
</div>
<div class="cui-list-item__center cui-list-item__result-container">
<div class="cui-list-item__result">
For search after a <span class="cui-list-item__subheader--highlight">(filter)</span>
</div>
</div>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--space-filter-summary"
id="cui-list-item-16"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-16"
data-md-keyboard-key="type-filter-summary-8"
title="Type(filter-summary) (8)"
>
<div class="cui-list-item__left"><i class="cui-icon icon icon-alert_12" style="font-size: 12px;"></i></div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">Type(filter-summary) (8)</div>
<div class="cui-list-item__subheader"></div>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--space-flag"
id="cui-list-item-17"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-17"
data-md-keyboard-key="type-flag-attachments"
title="Type(flag)-attachments"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">
<span class="cui-list-item__header-main">Type(flag)-attachments</span
><span class="cui-list-item__header-secondary">12/03/2018</span>
</div>
<div class="cui-list-item__center cui-list-item__result-container">
<div class="cui-list-item__center cui-list-item__attachment">
<div class="cui-list-item__attachment--top">
<div class="cui-list-item__center cui-list-item__attachment--top-left">
resultRight=node, attachments=[node]
</div>
<div class="cui-list-item__right cui-list-item__attachment--top-right">
<i class="cui-icon icon icon-flag-active_12" style="font-size: 12px;"></i>
</div>
</div>
<div class="cui-list-item__attachment--bottom">
<span
><i class="cui-icon icon icon-document_12" style="font-size: 12px;"></i> <span>Ideas.pdf</span></span
>
</div>
</div>
</div>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space cui-list-item--space-flag"
id="cui-list-item-18"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-18"
data-md-keyboard-key="type-flag"
title="Type(flag)"
>
<div class="cui-list-item__left">
<div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="NA"><span class="cui-avatar__letter">N</span></div>
</div>
<div class="cui-list-item__center">
<div class="cui-list-item__header">
<span class="cui-list-item__header-main">Type(flag)</span
><span class="cui-list-item__header-secondary">08/03/2018</span>
</div>
<div class="cui-list-item__center cui-list-item__result-container">
<div class="cui-list-item__center cui-list-item__attachment">
<div class="cui-list-item__attachment--top">
<div class="cui-list-item__center cui-list-item__attachment--top-left">header&subheader=node</div>
<div class="cui-list-item__right cui-list-item__attachment--top-right">
<i class="cui-icon icon icon-flag-active_12" style="font-size: 12px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div
aria-current="false"
class="cui-list-item cui-list-item--space"
id="cui-list-item-326"
role="listitem"
tabindex="-1"
data-md-event-key="cui-list-item-326"
>
<div class="cui-list-item__left"><div>People</div></div>
</div>
</div>
</div>