Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

userZoom layout reference

Browse source
This commit is contained in:
Felix Niklas 2014-11-07 14:37:02 +01:00
parent cfd5b52fb9
commit 3698bb24c5
8 changed files with 515 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/app/views/agent_ticket_create.jst.eco
View file

@ -65,37 +65,37 @@
<textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
</div>
<label><%- @T('Tickets') %></label>
<ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
<li class="task level-1 horizontal">
<ol class="tasks tasks--standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
<li class="task level-1">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
<div class="name">Micro-SIM doesn't work</div>
<div class="time">23 minutes ago</div>
</div>
<li class="task level-3 horizontal">
<li class="task level-3">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Superb Service!</div>
<div class="name">Superb Service!</div>
<div class="time">43 minutes ago</div>
</div>
<li class="task level-2 horizontal">
<li class="task level-2">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Print sheets strip off</div>
<div class="name">Print sheets strip off</div>
<div class="time">1 hour ago</div>
</div>
<li class="task level-3 horizontal">
<li class="task level-3">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Block not properly wrought</div>
<div class="name">Block not properly wrought</div>
<div class="time">2 hour ago</div>
</div>
</ol>

84
app/assets/javascripts/app/views/dashboard.jst.eco
View file

@ -1,4 +1,4 @@
<div class="main flex center">
<div class="dashboard main flex center">
<div class="tabs wide-tabs horizontal">
<div class="tab my-stats active">My Stats</div>
<div class="tab my-groups">My Group</div>
@ -9,69 +9,69 @@
<div class="column">
<div class="time stat-widget vertical">
<h3>∅ Waiting time today</h3>
<div class="stat-graphic flex horizontal centered">
<div class="stat-graphic">
<div class="stopwatch icon centered">
<canvas class="stat-dial"></canvas>
<div class="stat-amount"></div>
</div>
</div>
<div class="stat-label u-textTruncate">My handling time: 25 minutes</div>
<div class="stat-detail u-textTruncate">Average: 13%</div>
<div class="stat-label">My handling time: 25 minutes</div>
<div class="stat-detail">Average: 13%</div>
</div>
</div>
<div class="column">
<div class="mood stat-widget vertical">
<h3>Mood</h3>
<div class="stat-graphic flex horizontal centered">
<div class="stat-graphic">
<div class="mood icon bad-state"></div>
</div>
<div class="stat-label u-textTruncate">3% of my tickets escalated.</div>
<div class="stat-detail u-textTruncate">Average: 17%</div>
<div class="stat-label">3% of my tickets escalated.</div>
<div class="stat-detail">Average: 17%</div>
</div>
</div>
<div class="column">
<div class="channel-distribution stat-widget vertical centered">
<h3>Channel Distribution</h3>
<div class="stat-graphic flex horizontal centered">
<div class="stats-channel email-channel vertical center">
<div class="stat-graphic">
<div class="stats-row email-channel">
<div class="email channel icon"></div>
<div class="channel-bars horizontal end justify-center">
<div class="channel-bar primary" style="height: 80%"></div>
<div class="channel-bar secondary" style="height: 100%"></div>
<div class="stat-bars">
<div class="stat-bar primary" style="height: 80%"></div>
<div class="stat-bar secondary" style="height: 100%"></div>
</div>
<div class="channel-percentage">34%</div>
<div class="stat-label">34%</div>
</div>
<div class="stats-channel received-calls-channel vertical center">
<div class="stats-row received-calls-channel">
<div class="received-calls channel icon"></div>
<div class="channel-bars horizontal end justify-center">
<div class="channel-bar primary" style="height: 53%"></div>
<div class="channel-bar secondary" style="height: 47%"></div>
<div class="stat-bars">
<div class="stat-bar primary" style="height: 53%"></div>
<div class="stat-bar secondary" style="height: 47%"></div>
</div>
<div class="channel-percentage">26%</div>
<div class="stat-label">26%</div>
</div>
<div class="stats-channel outbound-calls-channel vertical center">
<div class="stats-row outbound-calls-channel">
<div class="outbound-calls channel icon"></div>
<div class="channel-bars horizontal end justify-center">
<div class="channel-bar primary" style="height: 46%"></div>
<div class="channel-bar secondary" style="height: 53%"></div>
<div class="stat-bars">
<div class="stat-bar primary" style="height: 46%"></div>
<div class="stat-bar secondary" style="height: 53%"></div>
</div>
<div class="channel-percentage">24%</div>
<div class="stat-label">24%</div>
</div>
<div class="stats-channel facebook-channel vertical center">
<div class="stats-row facebook-channel">
<div class="facebook channel icon"></div>
<div class="channel-bars horizontal end justify-center">
<div class="channel-bar primary" style="height: 24%"></div>
<div class="channel-bar secondary" style="height: 18%"></div>
<div class="stat-bars">
<div class="stat-bar primary" style="height: 24%"></div>
<div class="stat-bar secondary" style="height: 18%"></div>
</div>
<div class="channel-percentage">12%</div>
<div class="stat-label">12%</div>
</div>
<div class="stats-channel twitter-channel vertical center">
<div class="stats-row twitter-channel">
<div class="twitter channel icon"></div>
<div class="channel-bars horizontal end justify-center">
<div class="channel-bar primary" style="height: 13%"></div>
<div class="channel-bar secondary" style="height: 16%"></div>
<div class="stat-bars">
<div class="stat-bar primary" style="height: 13%"></div>
<div class="stat-bar secondary" style="height: 16%"></div>
</div>
<div class="channel-percentage">4%</div>
<div class="stat-label">4%</div>
</div>
</div>
</div>
@ -79,7 +79,7 @@
<div class="column">
<div class="status stat-widget vertical">
<h3>Status</h3>
<div class="stat-graphic flex horizontal centered">
<div class="stat-graphic">
<div class="stat-tickets vertical reverse end">
<div class="stat-ticket icon supergood-state"></div>
<div class="stat-ticket icon supergood-state"></div>
@ -90,28 +90,28 @@
</div>
<div class="stat-all-tickets icon"></div>
</div>
<div class="stat-label u-textTruncate">Tickets of my Group: 78 of 234</div>
<div class="stat-detail u-textTruncate">Average: 22%</div>
<div class="stat-label">Tickets of my Group: 78 of 234</div>
<div class="stat-detail">Average: 22%</div>
</div>
</div>
<div class="column">
<div class="in-process stat-widget vertical">
<h3>Tickets in process</h3>
<div class="stat-graphic flex horizontal centered">
<div class="stat-graphic">
<div class="in-process icon supergood-state"></div>
</div>
<div class="stat-label u-textTruncate">74% are currently in process</div>
<div class="stat-detail u-textTruncate">Average: 62%</div>
<div class="stat-label">74% are currently in process</div>
<div class="stat-detail">Average: 62%</div>
</div>
</div>
<div class="column">
<div class="reopening stat-widget vertical">
<h3>Reopening rate</h3>
<div class="stat-graphic flex horizontal centered">
<div class="stat-graphic">
<div class="reopening icon ok-state"></div>
</div>
<div class="stat-label u-textTruncate">7% are being reopened</div>
<div class="stat-detail u-textTruncate">Average: 6%</div>
<div class="stat-label">7% are being reopened</div>
<div class="stat-detail">Average: 6%</div>
</div>
</div>
</div>

2
app/assets/javascripts/app/views/generic/actions.jst.eco
View file

@ -1,4 +1,4 @@
<div class="dropdown dropup actions">
<div class="dropdown dropup dropdown--actions">
<button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></button>
<ul class="dropdown-menu">
<% for item in @items: %>

1
app/assets/javascripts/app/views/generic/user_search/input.jst.eco
View file

@ -1,6 +1,7 @@
<div class="u-positionOrigin">
<input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
<input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<span class="select-arrow icon"></span>
</div>
<div class="dropdown-menu" aria-labelledby="customer_id">

2
app/assets/javascripts/app/views/layout_ref/content.jst.eco
View file

@ -71,7 +71,7 @@
<div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
<input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organisation/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<span class="caret"></span>
<span class="select-arrow icon"></span>
</div>
<div class="dropdown-menu" aria-labelledby="customer_id">

1
app/assets/javascripts/app/views/layout_ref/index.jst.eco
View file

@ -15,6 +15,7 @@
<li>Communication Reply - with content <a href="#layout_ref/communication_reply/content">Example</a></li>
<li>Communication Reply - with multiline content <a href="#layout_ref/communication_reply/mulit_line_content">Example</a></li>
<li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
<li><a href="#layout_ref/user_zoom">User Profile</a></li>
</ul>
</div>

269
app/assets/javascripts/app/views/layout_ref/user_zoom.jst.eco Normal file
View file

@ -0,0 +1,269 @@
<div class="flex userZoom">
<div class="userZoom-window">
<div class="userZoom-section vertical centered">
<div class="align-right userZoom-action dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
<div class="light cog icon"></div>
<label>Aktion</label>
<span class="select-arrow icon"></span>
</div>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
<li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Änderungsprotokoll</a>
<li role="presentation"><a role="menuitem" tabindex="-1">Benutzer zusammenführen</a>
<li role="presentation"><a role="menuitem" tabindex="-1">Benutzer löschen</a>
</ul>
</div>
<div class="avatar size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
<h1>Doreen Kubiak</h1>
<div class="userZoom-organisation">Steuerbüro C. Kaik</div>
</div>
<div class="userZoom-section">
<div class="userZoom-details horizontal wrap">
<div class="userZoom-detailsEntry">
<label>Email</label>
<a href="mailto:doreen.kubiak@gmail.com">doreen.kubiak@gmail.com</a>
</div>
<div class="userZoom-detailsEntry">
<label>Organisation</label>
Steuerbüro C. Kaik
</div>
<div class="userZoom-detailsEntry">
<label>Web</label>
<a href="http://ckaik.com" target="_blank">chaik.com</a>
</div>
<div class="userZoom-detailsEntry">
<label>Strasse</label>
Johannitergasse 2/2
</div>
<div class="userZoom-detailsEntry">
<label>Telefon</label>
+43 5522 36346
</div>
<div class="userZoom-detailsEntry">
<label>PLZ, ORT</label>
6800 Feldkirch
</div>
<div class="userZoom-detailsEntry">
<label>Mobile-Nr.</label>
+43 699 4565789
</div>
<div class="userZoom-detailsEntry">
<label>Land</label>
Österreich
</div>
</div>
</div>
<div class="userZoom-section">
<!-- if user has organisation -->
<div class="tabs wide-tabs horizontal">
<div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
<div class="tab js-organisationTickets">Tickets von Steuerbüro C. Kaik</div>
</div>
<!-- endif -->
<div class="userZoom-ticketLists horizontal">
<div class="userZoom-ticketList">
<label>Offene Tickets (23)</label>
<ol class="tasks tasks--standalone">
<li class="task level-2">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Micro-SIM doesn't work</div>
<div class="time">23 minutes ago</div>
</div>
<li class="task level-2">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Superb Service!</div>
<div class="time">43 minutes ago</div>
</div>
<li class="task level-2">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Print sheets strip off</div>
<div class="time">1 hour ago</div>
</div>
<li class="task level-2">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Block not properly wrought</div>
<div class="time">2 hour ago</div>
</div>
</ol>
<a href="#">Alle Tickets von Doreen Kubiak …</a>
</div>
<div class="userZoom-ticketList">
<label>Bearbeitete Tickets (12)</label>
<ol class="tasks tasks--standalone">
<li class="task level-1">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Micro-SIM doesn't work</div>
<div class="time">23 minutes ago</div>
</div>
<li class="task level-1">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Superb Service!</div>
<div class="time">43 minutes ago</div>
</div>
<li class="task level-1">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Print sheets strip off</div>
<div class="time">1 hour ago</div>
</div>
<li class="task level-1">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="name">Block not properly wrought</div>
<div class="time">2 hour ago</div>
</div>
</ol>
<a href="#">Alle Tickets von Steuerbüro C. Kaik …</a>
</div>
</div>
</div>
<div class="userZoom-section horizontal two-columns">
<div class="column status stat-widget vertical">
<h3>Status</h3>
<div class="stat-graphic">
<div class="stat-tickets vertical reverse end">
<div class="stat-ticket icon supergood-state"></div>
<div class="stat-ticket icon supergood-state"></div>
<div class="stat-ticket icon supergood-state"></div>
<div class="stat-ticket icon supergood-state"></div>
<div class="stat-ticket icon supergood-state"></div>
<div class="stat-ticket icon supergood-state"></div>
</div>
<div class="stat-all-tickets icon"></div>
</div>
<!--
Achtung: hier müssen wir schauen, dass wir das Widget genauso verwenden wie im Dashboard. Sonst gibt's Verwirrung.
-->
<div class="stat-label">Tickets of my Group: 78 of 234</div>
<div class="stat-detail">Average: 22%</div>
</div>
<div class="column mood stat-widget vertical">
<h3>Stimmung</h3>
<div class="stat-graphic">
<div class="mood icon supergood-state"></div>
</div>
<div class="stat-label">3% of my tickets escalated.</div>
<div class="stat-detail">Average: 17%</div>
</div>
</div>
<div class="userZoom-section">
<div class="frequency stat-widget vertical">
<h3>Frequency</h3>
<div class="stat-graphic">
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 80%"></div>
<div class="stat-bar secondary" style="height: 34%"></div>
</div>
<div class="stat-label">Jan</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 53%"></div>
<div class="stat-bar secondary" style="height: 47%"></div>
</div>
<div class="stat-label">Feb</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 46%"></div>
<div class="stat-bar secondary" style="height: 21%"></div>
</div>
<div class="stat-label">Mär</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 24%"></div>
<div class="stat-bar secondary" style="height: 18%"></div>
</div>
<div class="stat-label">Apr</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 13%"></div>
<div class="stat-bar secondary" style="height: 5%"></div>
</div>
<div class="stat-label">Mai</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 18%"></div>
<div class="stat-bar secondary" style="height: 10%"></div>
</div>
<div class="stat-label">Jun</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 50%"></div>
<div class="stat-bar secondary" style="height: 8%"></div>
</div>
<div class="stat-label">Jul</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 67%"></div>
<div class="stat-bar secondary" style="height: 13%"></div>
</div>
<div class="stat-label">Aug</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 34%"></div>
<div class="stat-bar secondary" style="height: 2%"></div>
</div>
<div class="stat-label">Sep</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 5%"></div>
<div class="stat-bar secondary" style="height: 0%"></div>
</div>
<div class="stat-label">Okt</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 25%"></div>
<div class="stat-bar secondary" style="height: 0%"></div>
</div>
<div class="stat-label">Nov</div>
</div>
<div class="stats-row">
<div class="stat-bars">
<div class="stat-bar primary" style="height: 80%"></div>
<div class="stat-bar secondary" style="height: 5%"></div>
</div>
<div class="stat-label">Dez</div>
</div>
</div>
<div class="stat-legend">
<div class="stat-legendEntry primary"><span class="primary stat-circle"></span>Bearbeitet</div>
<div class="stat-legendEntry secondary"><span class="secondary stat-circle"></span>Offen</div>
</div>
</div>
</div>
</div>
</div>

211
app/assets/stylesheets/zammad.css.scss
View file

@ -15,8 +15,13 @@ p {
margin: 14px 0;
}
.u-highlight {
color: hsl(194,90%,45%);
}
a {
outline: none !important;
@extend .u-highlight;
}
a.create {
@ -29,10 +34,6 @@ small {
font-size: 12px;
}
.u-highlight {
color: hsl(194,90%,45%);
}
.u-unclickable {
pointer-events: none;
}
@ -528,7 +529,7 @@ textarea,
padding-right: 10px;
}
select.form-control + .select-arrow {
.form-control + .select-arrow {
position: absolute;
right: 12px;
top: 50%;
@ -759,7 +760,6 @@ ol.tabs li {
}
.wide-tabs {
width: 60%;
margin: 25px auto 20px;
font-size: 15px;
font-weight: 300;
@ -767,6 +767,10 @@ ol.tabs li {
border-radius: 8px;
}
.dashboard .wide-tabs {
width: 60%;
}
.wide-tabs .tab:first-child {
border-radius: 8px 0 0 8px;
}
@ -1304,6 +1308,7 @@ ol.tabs li {
width: 12px;
height: 7px;
background-position: -81px -308px;
margin-top: -2px;
}
.dark.group.icon {
@ -1690,29 +1695,35 @@ footer {
overflow: auto;
}
.tasks.tasks-standalone {
.tasks.tasks--standalone {
background: none;
margin-top: 8px;
}
.tasks-standalone .task {
.tasks--standalone .task {
padding: 0;
margin-bottom: 9px;
@extend .horizontal;
}
.tasks-standalone .icon-holder {
.tasks-standalone .name {
@extend .u-highlight;
@extend .u-textTruncate;
}
.tasks--standalone .icon-holder {
width: 20px;
}
.tasks-standalone .icon-holder .icon {
.tasks--standalone .icon-holder .icon {
margin-top: 4px;
}
.tasks-standalone .time {
.tasks--standalone .time {
color: hsl(198,19%,72%);
}
.tasks-standalone .task .priority.icon:after {
.tasks--standalone .task .priority.icon:after {
background: white;
}
@ -2322,10 +2333,13 @@ footer {
.stat-widget {
height: 200px;
margin: 7px;
padding: 13px;
text-align: center;
line-height: 20px;
}
.dashboard .stat-widget {
margin: 7px;
background: white;
border: 1px solid #e5f0f5;
border-radius: 1px;
@ -2341,16 +2355,22 @@ footer {
.stat-widget .stat-label {
color: #444a4f;
@extend .u-textTruncate;
}
.stat-widget .stat-detail {
color: #b4b7b9;
@extend .u-textTruncate;
}
.channel-distribution.stat-widget {
color: #a1a4a7;
}
.stat-graphic {
@extend .flex, .horizontal, .centered;
}
.time.stat-widget .stat-graphic .icon {
position: relative;
}
@ -2370,17 +2390,18 @@ footer {
left: 14px;
}
.stats-channel {
.stats-row {
padding: 8px 0 7px;
margin-bottom: -7px;
border-radius: 3px;
@extend .vertical, .center;
}
.stats-channel:hover {
.stats-row:hover {
background: rgba(0,8,14,.03);
}
.stats-channel .channel-bars {
.stats-row .stat-bars {
height: 73px;
margin: 16px 0 15px;
padding: 2px 12px;
@ -2388,18 +2409,62 @@ footer {
background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px);
background-position: center bottom;
background-size: 100% 12px;
@extend .horizontal, .end;
}
.channel-bars .channel-bar {
.stat-bars .stat-bar {
border-radius: 5px;
width: 10px;
color: #a9bcc4;
background: #a9bcc4;
}
.channel-bars .channel-bar.secondary {
.stat-widget .secondary {
opacity: .38;
color: #a9bcc4;
background: #a9bcc4;
}
.stat-legend {
margin-top: 30px;
@extend .align-right, .horizontal;
}
.stat-legendEntry {
font-size: 11px;
line-height: 1;
margin-left: 20px;
background: none !important;
}
.stat-circle {
margin-bottom: -1px;
margin-right: 7px;
width: 10px;
height: 10px;
border-radius: 100%;
display: inline-block;
}
.frequency.stat-widget {
.stat-bars {
margin-top: 0;
}
.stats-row {
margin-bottom: 0;
}
.stat-label {
color: #a1a4a7;
}
.primary {
color: hsl(145,51%,45%);
background: hsl(145,51%,45%);
}
}
.activity.sidebar {
width: 370px;
padding: 0;
@ -3550,7 +3615,7 @@ footer {
.dropdown-menu {
margin: 0;
padding: 0;
width: 100%;
min-width: 100%;
color: white;
background: none;
border-radius: 0;
@ -3559,6 +3624,10 @@ footer {
overflow-x: hidden;
}
.dropdown-toggle {
@extend .u-clickable;
}
.dropdown ul {
margin: 0;
background: hsl(234,10%,19%);
@ -3598,10 +3667,14 @@ footer {
display: block;
}
.dropdown.actions li {
.dropdown.dropdown--actions li {
padding: 0;
}
.dropdown.dropdown--actions a {
@extend .u-clickable;
}
.recipientList,
.recipientList-organisationMembers {
list-style: none;
@ -3622,6 +3695,7 @@ footer {
}
.recipientList-name {
color: white;
margin-left: 10px;
margin-top: 2px;
}
@ -4083,6 +4157,103 @@ footer {
left: 0 !important;
}
.userZoom {
padding: 60px;
overflow: auto;
h1 {
margin: 18px 0 0;
}
.tabs {
margin-top: 2px;
margin-bottom: 25px;
}
}
.userZoom-window {
background: white;
max-width: 660px;
margin: 0 auto;
border: 1px solid #e6e6e6;
}
.userZoom-section {
padding: 20px 50px;
}
.userZoom-section:not(:last-child) {
border-bottom: 1px solid #f2f2f2;
}
.userZoom-action {
margin-right: -20px;
.dropdown-toggle {
margin-top: -20px;
margin-right: -30px;
margin-bottom: 8px;
padding: 26px 40px 2px;
}
label {
margin: 0 10px;
padding: 0;
opacity: 0.8;
cursor: inherit;
}
.cog.icon {
opacity: 0.55;
}
}
.userZoom-organisation {
font-size: 16px;
@extend .u-highlight;
}
.userZoom-details {
margin-left: -50px;
}
.userZoom-detailsEntry {
margin: 8px 0;
padding-left: 50px;
width: 50%;
}
.userZoom-detailsEntry label {
padding: 0;
margin-bottom: 2px;
display: block;
}
.userZoom-ticketList {
@extend .flex;
&:not(:last-child) {
margin-right: 50px;
}
}
.userZoom-ticketList {
ol {
padding: 0;
}
.name {
@extend .u-highlight;
}
}
.userZoom .frequency.stat-widget {
height: 230px;
.stat-bars {
height: 100px;
}
}
/*