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

add twitter conversation view layout ref

Browse source
This commit is contained in:
Felix Niklas 2015-10-23 16:29:48 +02:00
parent c5e23bb635
commit 962ccebe4e
5 changed files with 581 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
app/assets/javascripts/app/controllers/layout_ref.coffee
View file

@ -2062,6 +2062,7 @@ class chatWindowRef extends Spine.Controller
scrollToBottom: ->
@scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
class AdminLoadRef extends App.ControllerContent
constructor: ->
@ -2073,4 +2074,102 @@ class AdminLoadRef extends App.ControllerContent
App.Config.set( 'layout_ref/admin_loading', AdminLoadRef, 'Routes' )
class TwitterConversationRef extends App.ControllerContent
elements:
'.js-textarea': 'textarea'
'.article-add': 'articleNewEdit'
'.article-add .textBubble': 'textBubble'
'.editControls-item': 'editControlItem'
'.js-letterCount': 'letterCount'
'.js-signature': 'signature'
events:
'input .js-textarea': 'updateLetterCount'
textareaHeight:
open: 88
closed: 20
maxTextLength: 140
warningTextLength: 10
constructor: ->
super
@render()
render: ->
@html App.view('layout_ref/twitter_conversation')()
@openTextarea null, true
@updateLetterCount()
updateLetterCount: (event) =>
textLength = @maxTextLength - @textarea.text().length - @signature.text().length - 2
className = switch
when textLength < 0 then 'label-danger'
when textLength < @warningTextLength then 'label-warning'
else ''
@letterCount
.text textLength
.removeClass 'label-danger label-warning'
.addClass className
openTextarea: (event, withoutAnimation) =>
if @articleNewEdit.hasClass('is-open')
return
duration = 300
if withoutAnimation
duration = 0
@articleNewEdit.addClass('is-open')
@textarea.velocity
properties:
minHeight: "#{ @textareaHeight.open - 38 }px"
options:
duration: duration
easing: 'easeOutQuad'
complete: => @addTextareaCatcher()
@textBubble.velocity
properties:
paddingBottom: 28
options:
duration: duration
easing: 'easeOutQuad'
# scroll to bottom
@textarea.velocity 'scroll',
container: @textarea.scrollParent()
offset: 99999
duration: 300
easing: 'easeOutQuad'
queue: false
@editControlItem
.removeClass('is-hidden')
.velocity
properties:
opacity: [ 1, 0 ]
translateX: [ 0, 20 ]
translateZ: 0
options:
duration: 300
stagger: 50
drag: true
addTextareaCatcher: =>
if @articleNewEdit.is(':visible')
@textareaCatcher = new App.ClickCatcher
holder: @articleNewEdit.offsetParent()
callback: @closeTextarea
zIndexScale: 4
App.Config.set( 'layout_ref/twitter_conversation', TwitterConversationRef, 'Routes' )
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

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

@ -4,6 +4,7 @@
<ul>
<li><a href="#layout_ref/twitter_conversation">Twitter Conversation</a></li>
<li><a href="#layout_ref/admin_loading">Admin Loading Screen</a></li>
<li><a href="#layout_ref/customer_chat">Customer Chat</a></li>
<li><a href="#layout_ref/ticket_zoom">Ticket Zoom</a></li>

451
app/assets/javascripts/app/views/layout_ref/twitter_conversation.jst.eco Normal file
View file

@ -0,0 +1,451 @@
<div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer is-closed">
<div class="ticketZoom">
<div class="ticketZoom-controls">
<div class="highlighter">
<div class="btn btn--action btn--split--first js-highlight centered">
<%- @Icon('marker', 'js-highlight-icon') %>
</div>
<div class="dropdown dropdown--actions">
<div aria-expanded="true" class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown">
<%- @Icon('arrow-down', '') %>
</div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation">
<a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
</li>
<li role="presentation">
<a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li>
<li role="presentation">
<a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li>
<li role="presentation">
<a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li>
<li role="presentation">
<a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li>
</ul>
</div>
</div>
<div class="overview-navigator"></div>
</div>
<!-- conversation: https://twitter.com/sksk805/status/657439712068661248 -->
<div class="ticketZoom-header">
<div class="flex vertical center">
<div class="js-avatar">
<span class="avatar size-50 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
</div>
<div class="ticket-title">
<div class="ticket-title-update" contenteditable="true" data-placeholder="Enter Title...">
@DB_Bahn was sagen Sie als Arbeitgeber dazu, wenn ihre Mitarbeiter aufgrund von Verspätungen und Zugausfällen regelmäßig viel zu spät sind?
</div>
</div>
<div class="ticket-meta">
<small class="task-subline">Ticket# <span class="ticket-number">10001</span> - created <time class="humanTimeFromNow" data-time="2015-10-05T12:56:33.000Z" title="10/05/2015 14:56">10/05/2015</time></small>
</div>
</div>
</div>
<div class="ticket-article">
<div class="ticket-article-item customer" data-id="1" id="article-1">
<div class="article-meta-clip top">
<div class="article-content-meta top hide">
<div class="article-meta top">
<div class="horizontal article-meta-row">
<div class="article-meta-key u-textTruncate">
From
</div>
<div class="article-meta-value flex contain-text">
zander <span class="text-muted">&lt;@sksk805&gt;</span>
</div>
</div>
</div>
</div>
</div>
<div class="article-content zIndex-1">
<div class="js-avatar">
<span class="avatar size-40 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
</div>
<div class="bubble-gap">
<div class="internal-border">
<div class="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content" data-id="1" id="article-content-1">
<a href="#">@DB_Bahn</a> was sagen Sie als Arbeitgeber dazu, wenn ihre Mitarbeiter aufgrund von Verspätungen und Zugausfällen regelmäßig viel zu spät sind?
</div>
</div>
</div>
</div>
</div>
<div class="article-meta-clip bottom">
<div class="article-content-meta bottom hide">
<div class="article-meta bottom">
<div class="horizontal article-meta-row">
<div class="article-meta-key">
Channel
</div>
<div class="article-meta-value">
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
</div>
</div>
</div>
</div>
</div>
<div class="js-article-actions">
<div class="article-content article-actions horizontal stretch">
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="reply" href="#"><%- @Icon('reply', 'article-action-icon') %>reply</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/1"><%- @Icon('split', 'article-action-icon') %>split</a>
</div>
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-05T12:56:33.000Z" title="10/05/2015 14:56">10/05/2015</time></small>
</div>
<div class="ticket-article-item agent" data-id="3" id="article-3">
<div class="article-meta-clip top">
<div class="article-content-meta top hide">
<div class="article-meta top">
<div class="horizontal article-meta-row">
<div class="article-meta-key u-textTruncate">
From
</div>
<div class="article-meta-value flex contain-text">
Test Master Agent
</div>
</div>
</div>
</div>
</div>
<div class="article-content zIndex-1">
<div class="js-avatar">
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
</div>
<div class="bubble-gap">
<div class="internal-border">
<div class="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content" data-id="3" id="article-content-3">
<a href="#">@sksk805</a> Sorry, ich bin Mitarbeiter vom Twitter-Team und keine Führungskraft. Ich komme allerdings auch mit der DB und bin pünktlich. /je
</div>
</div>
</div>
</div>
</div>
<div class="article-meta-clip bottom">
<div class="article-content-meta bottom hide">
<div class="article-meta bottom">
<div class="horizontal article-meta-row">
<div class="article-meta-key">
Channel
</div>
<div class="article-meta-value">
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
</div>
</div>
</div>
</div>
</div>
<div class="js-article-actions">
<div class="article-content article-actions horizontal stretch">
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/3"><%- @Icon('split', 'article-action-icon') %>split</a>
</div>
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:23.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
</div>
<div class="ticket-article-item customer" data-id="4" id="article-4">
<div class="article-meta-clip top">
<div class="article-content-meta top hide">
<div class="article-meta top">
<div class="horizontal article-meta-row">
<div class="article-meta-key u-textTruncate">
From
</div>
<div class="article-meta-value flex contain-text">
Test Master Agent
</div>
</div>
</div>
</div>
</div>
<div class="article-content zIndex-1">
<div class="js-avatar">
<span class="avatar size-40 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
</div>
<div class="bubble-gap">
<div class="internal-border">
<div class="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content" data-id="4" id="article-content-4">
<a href="#">@DB_Bahn</a> ohne Witz? Das ist Ihre Antwort? Mal ganz unter uns...wie oft kommt ihre Bahn zu spät? Oder fahren Sie etwa heimlich Auto?
</div>
</div>
</div>
</div>
</div>
<div class="article-meta-clip bottom">
<div class="article-content-meta bottom hide">
<div class="article-meta bottom">
<div class="horizontal article-meta-row">
<div class="article-meta-key">
Channel
</div>
<div class="article-meta-value">
<%- @Icon('note', 'article-meta-icon') %>note
</div>
</div>
</div>
</div>
</div>
<div class="js-article-actions">
<div class="article-content article-actions horizontal stretch">
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/4"><%- @Icon('split', 'article-action-icon') %>split</a>
</div>
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:27.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
</div>
<div class="ticket-article-item agent" data-id="3" id="article-3">
<div class="article-meta-clip top">
<div class="article-content-meta top hide">
<div class="article-meta top">
<div class="horizontal article-meta-row">
<div class="article-meta-key u-textTruncate">
From
</div>
<div class="article-meta-value flex contain-text">
Test Master Agent
</div>
</div>
</div>
</div>
</div>
<div class="article-content zIndex-1">
<div class="js-avatar">
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
</div>
<div class="bubble-gap">
<div class="internal-border">
<div class="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content" data-id="3" id="article-content-3">
<a href="#">@sksk805</a> Ich darf ehrlich antworten. :) Ich wähle aber meine Verbindung auch so, dass ich nicht gleich bei +5 Min. zu spät komme. ;) /je
</div>
</div>
</div>
</div>
</div>
<div class="article-meta-clip bottom">
<div class="article-content-meta bottom hide">
<div class="article-meta bottom">
<div class="horizontal article-meta-row">
<div class="article-meta-key">
Channel
</div>
<div class="article-meta-value">
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
</div>
</div>
</div>
</div>
</div>
<div class="js-article-actions">
<div class="article-content article-actions horizontal stretch">
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/3"><%- @Icon('split', 'article-action-icon') %>split</a>
</div>
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:23.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
</div>
<div class="ticket-article-item customer" data-id="4" id="article-4">
<div class="article-meta-clip top">
<div class="article-content-meta top hide">
<div class="article-meta top">
<div class="horizontal article-meta-row">
<div class="article-meta-key u-textTruncate">
From
</div>
<div class="article-meta-value flex contain-text">
Test Master Agent
</div>
</div>
</div>
</div>
</div>
<div class="article-content zIndex-1">
<div class="js-avatar">
<span class="avatar size-40 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
</div>
<div class="bubble-gap">
<div class="internal-border">
<div class="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content" data-id="4" id="article-content-4">
<a href="#">@DB_Bahn</a> ich rede von 20min + und Zugausfällen. 5-10 Minuten plant man ja grundsätzlich ein
</div>
</div>
</div>
</div>
</div>
<div class="article-meta-clip bottom">
<div class="article-content-meta bottom hide">
<div class="article-meta bottom">
<div class="horizontal article-meta-row">
<div class="article-meta-key">
Channel
</div>
<div class="article-meta-value">
<%- @Icon('note', 'article-meta-icon') %>note
</div>
</div>
</div>
</div>
</div>
<div class="js-article-actions">
<div class="article-content article-actions horizontal stretch">
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/4"><%- @Icon('split', 'article-action-icon') %>split</a>
</div>
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:27.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
</div>
<div class="ticket-article-item agent" data-id="3" id="article-3">
<div class="article-meta-clip top">
<div class="article-content-meta top hide">
<div class="article-meta top">
<div class="horizontal article-meta-row">
<div class="article-meta-key u-textTruncate">
From
</div>
<div class="article-meta-value flex contain-text">
Test Master Agent
</div>
</div>
</div>
</div>
</div>
<div class="article-content zIndex-1">
<div class="js-avatar">
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
</div>
<div class="bubble-gap">
<div class="internal-border">
<div class="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content" data-id="3" id="article-content-3">
<a href="#">@sksk805</a> Ist bei mir echt selten der Fall & bisher auch meist nur bei der Heimreise. Ich kann Ihren Ärger aber trotzdem gut verstehen. /je
</div>
</div>
</div>
</div>
</div>
<div class="article-meta-clip bottom">
<div class="article-content-meta bottom hide">
<div class="article-meta bottom">
<div class="horizontal article-meta-row">
<div class="article-meta-key">
Channel
</div>
<div class="article-meta-value">
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
</div>
</div>
</div>
</div>
</div>
<div class="js-article-actions">
<div class="article-content article-actions horizontal stretch">
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/3"><%- @Icon('split', 'article-action-icon') %>split</a>
</div>
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:23.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
</div>
</div>
<div class="article-new">
<form class="article-add is-public" data-type="twitter status">
<input name="type" type="hidden" value="twitter status"> <input name="internal" type="hidden" value=""> <input name="form_id" type="hidden" value=""> <input name="in_reply_to" type="hidden" value="">
<div class="editControls">
<div class="js-avatar">
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
</div>
<div class="editControls-item is-hidden pop-select">
<div class="editControls-iconHolder centered js-selectedArticleType">
<div class="editControls-icon js-selectableTypes hide" data-type="note">
<%- @Icon('note', '') %>
</div>
<div class="editControls-icon js-selectableTypes hide" data-type="email">
<%- @Icon('email', '') %>
</div>
<div class="editControls-icon js-selectableTypes hide" data-type="facebook">
<%- @Icon('facebook', '') %>
</div>
<div class="editControls-icon js-selectableTypes" data-type="twitter status">
<%- @Icon('twitter', '') %>
</div>
<div class="editControls-icon js-selectableTypes hide" data-type="twitter direct-message">
<%- @Icon('twitter', '') %>
</div>
<div class="editControls-icon js-selectableTypes hide" data-type="phone">
<%- @Icon('phone', '') %>
</div>
</div>
<div class="pop-selector is-hidden js-articleTypes">
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="note">
<%- @Icon('note', 'pop-selectable-icon') %>
</div>
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="email">
<%- @Icon('email', 'pop-selectable-icon') %>
</div>
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="facebook">
<%- @Icon('facebook', 'pop-selectable-icon') %>
</div>
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="twitter status">
<%- @Icon('twitter', 'pop-selectable-icon') %>
</div>
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="twitter direct-message">
<%- @Icon('twitter', 'pop-selectable-icon') %>
</div>
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="phone">
<%- @Icon('phone', 'pop-selectable-icon') %>
</div>
</div>
</div>
<div class="editControls-item is-hidden js-toggleVisibility">
<div class="editControls-iconHolder">
<div class="editControls-icon icon-internal" title="set to public">
<%- @Icon('lock', '') %>
</div>
<div class="editControls-icon icon-public" title="set to internal">
<%- @Icon('lock-open', '') %>
</div>
</div>
</div>
</div>
<div class="article-content zIndex-5 bubble-gap">
<div class="internal-border">
<div class="input form-group hide">
<div class="formGroup-label">
<label for="">To</label>
</div>
<div class="controls">
<input class="form-control" id="" name="to" required="required" type="text" value="">
</div>
</div>
<div class="input form-group hide">
<div class="formGroup-label">
<label for="">Cc</label>
</div>
<div class="controls">
<input class="form-control" id="" name="cc" type="text" value="">
</div>
</div>
<div class="textBubble">
<div class="bubble-arrow"></div>
<div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"></div>
<div class="shortcut dropdown">
<ul class="dropdown-menu" style="width: 360px; max-height: 200px;">
<li>
<a>-</a>
</li>
</ul>
</div>
<div class="textBubble-footer">
<div class="textBubble-signatur"><span class="js-signature">/je</span></div>
<div class="textBubble-letterCount js-letterCount">140</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

67
app/assets/stylesheets/bootstrap.css vendored
View file

@ -3369,73 +3369,6 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
cursor: not-allowed;
background-color: #fff;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
a.label:hover,
a.label:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.label:empty {
display: none;
}
.btn .label {
position: relative;
top: -1px;
}
.label-default {
background-color: #777;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #5e5e5e;
}
.label-primary {
background-color: #337ab7;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #286090;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
.jumbotron {
padding: 30px 15px;
margin-bottom: 30px;

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

@ -976,9 +976,9 @@ label,
/* circumventing the label:not(.inline-label) selector because it's too strong */
.inline-label,
.label.label-success,
.label.label-warning,
.label.label-danger {
.label-success,
.label-warning,
.label-danger {
font-size: inherit;
font-weight: inherit;
text-align: inherit;
@ -995,24 +995,28 @@ label,
cursor: pointer;
}
.label.label-success,
.label.label-warning,
.label.label-danger {
.label-success,
.label-warning,
.label-danger {
background: none;
}
.label.label-success {
.label-success {
color: $supergood-color;
}
.label.label-warning {
.label-warning {
color: $ok-color;
}
.label.label-danger {
.label-danger {
color: $superbad-color;
}
.label-subtle {
color: hsl(0,0%,80%);
}
fieldset {
margin: 0 -4px;
@extend .clearfix;
@ -3917,6 +3921,23 @@ footer {
position: relative;
}
.textBubble-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 -12px -28px;
padding: 6px 12px;
border-radius: 0 0 4px 4px;
}
.textBubble-control {
display: flex;
}
.textBubble-letterCount:not(.label-danger):not(.label-warning) {
color: hsl(0,0%,80%);
}
.textBubble-overflowContainer {
position: absolute;
bottom: 0;