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

add blicking and clickable status-field classes

Browse source
This commit is contained in:
Felix Niklas 2015-11-03 15:20:03 +01:00
parent 8bd1ce4748
commit 8a075294c6
2 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/views/layout_ref/customer_chat.jst.eco
View file

@ -5,8 +5,8 @@
</div> </div>
<div class="page-header-center"> <div class="page-header-center">
<div class="status-fields"> <div class="status-fields">
<div class="status-field"> <div class="status-field is-clickable is-blinking">
<span class="badge">0</span> Waiting Customers <span class="badge">1</span> Waiting Customers
</div> </div>
<div class="status-field"> <div class="status-field">
<span class="badge">15</span> Chatting Customers <span class="badge">15</span> Chatting Customers

20
app/assets/stylesheets/zammad.scss
View file

@ -601,6 +601,19 @@ blockquote {
padding: 8px 10px 6px; padding: 8px 10px 6px;
border: 1px solid hsl(0,0%,90%); border: 1px solid hsl(0,0%,90%);
&.is-clickable {
background: hsl(203,65%,55%);
color: white;
cursor: pointer;
border-color: hsl(203,65%,45%);
box-shadow: 1px 0 hsl(203,65%,45%);
position: relative;
}
&.is-blinking {
animation: pulsate 667ms ease-in-out infinite alternate;
}
&:not(:last-child):not(:only-child) { &:not(:last-child):not(:only-child) {
border-right: none; border-right: none;
} }
@ -618,10 +631,14 @@ blockquote {
} }
.badge { .badge {
background: hsl(210,5%,77%); background: hsla(210,50%,10%,.24);
} }
} }
@keyframes pulsate {
to { filter: brightness(1.2); }
}
.badge { .badge {
display: inline-block; display: inline-block;
min-width: 18px; min-width: 18px;
@ -7099,7 +7116,6 @@ output {
fill: hsl(0,0%,90%); fill: hsl(0,0%,90%);
margin-left: -4px; margin-left: -4px;
vertical-align: middle; vertical-align: middle;
animation: fadeInDown 300ms both;
animation: ease-in-out load-fade 600ms infinite alternate; animation: ease-in-out load-fade 600ms infinite alternate;
} }