create ticket sidebar: customer info & templates
This commit is contained in:
Felix Niklas
parent
3d0864e1ba
commit
5124c4ff0a
8 changed files with 372 additions and 173 deletions
|
|
@ -185,10 +185,10 @@ class App.TicketCreate extends App.Controller
|
|||
)
|
||||
|
||||
# show template UI
|
||||
new App.WidgetTemplate(
|
||||
el: @el.find('.ticket_template')
|
||||
template_id: template['id']
|
||||
)
|
||||
# new App.WidgetTemplate(
|
||||
# el: @el.find('.ticket_template')
|
||||
# template_id: template['id']
|
||||
# )
|
||||
|
||||
@formDefault = @formParam( @el.find('.ticket-create') )
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ class App.WidgetTemplate extends App.ControllerDrox
|
|||
# insert data
|
||||
@html @template(
|
||||
file: 'widget/template'
|
||||
header: 'Templates'
|
||||
header: 'Select Template:'
|
||||
params:
|
||||
template: template
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,96 +1,211 @@
|
|||
<div class="create-new main flex">
|
||||
<div class="box">
|
||||
<div class="page-header">
|
||||
<h1><%- @T( 'Create New Ticket' ) %></h1>
|
||||
</div>
|
||||
|
||||
<ul class="horizontal tabs type-tabs">
|
||||
|
||||
<li class="tab u-textTruncate active">
|
||||
<div class="white email channel icon"></div>
|
||||
<%- @T( 'E-Mail' ) %>
|
||||
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray received-calls channel icon"></div>
|
||||
<%- @T( 'Received Call' ) %>
|
||||
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray outbound-calls channel icon"></div>
|
||||
<%- @T( 'Outbound Call' ) %>
|
||||
|
||||
</ul>
|
||||
|
||||
<form role="form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer"><%- @T('Customer') %></label>
|
||||
<input class="form-control" id="customer" placeholder="<%- @T('Enter Person or Organisation/Company') %>">
|
||||
<div class="create-new horizontal flex">
|
||||
<div class="create-new main flex">
|
||||
<div class="box">
|
||||
<div class="page-header">
|
||||
<h1><%- @T( 'Create New Ticket' ) %></h1>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject"><%- @T('Subject') %></label>
|
||||
<input class="form-control" id="subject">
|
||||
</div>
|
||||
<ul class="horizontal tabs type-tabs">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="text"><%- @T('Text') %></label>
|
||||
<textarea class="form-control" id="text" rows="4"></textarea>
|
||||
</div>
|
||||
<li class="tab u-textTruncate active">
|
||||
<div class="white email channel icon"></div>
|
||||
<%- @T( 'E-Mail' ) %>
|
||||
|
||||
<div class="formset-inset">
|
||||
<div class="horizontal two-columns">
|
||||
<div class="form-group column">
|
||||
<label for="owner"><%- @T('Owner') %></label>
|
||||
<select class="form-control" id="owner">
|
||||
<option>Support -> Oliver Ruhm</option>
|
||||
<option>Engineering -> Web-Dev</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="type"><%- @T('Type') %></label>
|
||||
<select class="form-control" id="type">
|
||||
<option>Inquiry</option>
|
||||
<option>Support</option>
|
||||
<option selected>Question</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="status"><%- @T('Status') %></label>
|
||||
<select class="form-control" id="status">
|
||||
<option selected>open</option>
|
||||
<option>closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="proprity"><%- @T('Priority') %></label>
|
||||
<select class="form-control" id="proprity">
|
||||
<option>low</option>
|
||||
<option selected>normal</option>
|
||||
<option>high</option>
|
||||
</select>
|
||||
</div>
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray received-calls channel icon"></div>
|
||||
<%- @T( 'Received Call' ) %>
|
||||
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray outbound-calls channel icon"></div>
|
||||
<%- @T( 'Outbound Call' ) %>
|
||||
|
||||
</ul>
|
||||
|
||||
<form role="form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer"><%- @T('Customer') %></label>
|
||||
<input class="form-control" id="customer" placeholder="<%- @T('Enter Person or Organisation/Company') %>">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tags"><%- @T('Tags') %></label>
|
||||
<input class="form-control" id="tags" placeholder="<%- @T('Tag hinzufügen') %>" value="New Website, Feedback">
|
||||
<label for="subject"><%- @T('Subject') %></label>
|
||||
<input class="form-control" id="subject">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="text"><%- @T('Text') %></label>
|
||||
<textarea class="form-control" id="text" rows="4"></textarea>
|
||||
</div>
|
||||
|
||||
<input type="hidden" value="" name="article_type"/>
|
||||
<div class="form-actions horizontal">
|
||||
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
||||
<button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create Ticket' ) %></button>
|
||||
<div class="formset-inset">
|
||||
<div class="horizontal two-columns">
|
||||
<div class="form-group column">
|
||||
<label for="owner"><%- @T('Owner') %></label>
|
||||
<select class="form-control" id="owner">
|
||||
<option>Support -> Oliver Ruhm</option>
|
||||
<option>Engineering -> Web-Dev</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="type"><%- @T('Type') %></label>
|
||||
<select class="form-control" id="type">
|
||||
<option>Inquiry</option>
|
||||
<option>Support</option>
|
||||
<option selected>Question</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="status"><%- @T('Status') %></label>
|
||||
<select class="form-control" id="status">
|
||||
<option selected>open</option>
|
||||
<option>closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="proprity"><%- @T('Priority') %></label>
|
||||
<select class="form-control" id="proprity">
|
||||
<option>low</option>
|
||||
<option selected>normal</option>
|
||||
<option>high</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tags"><%- @T('Tags') %></label>
|
||||
<input class="form-control" id="tags" placeholder="<%- @T('Tag hinzufügen') %>" value="New Website, Feedback">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="hidden" value="" name="article_type"/>
|
||||
<div class="form-actions horizontal">
|
||||
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
||||
<button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create Ticket' ) %></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="widgets">
|
||||
<div class="customer_info">
|
||||
<div class="drox"><!-- Customer Info -->
|
||||
<div class="drox-header">
|
||||
<h2>Customer Info</h2>
|
||||
</div>
|
||||
<div class="drox-body">
|
||||
<p>
|
||||
<span class="customer-name">Benjamin Wahlers</span>
|
||||
<span class="customer-email u-highlight">benjamin@wahlers.de</span>
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<label for="customer-info-note"><%- @T('Note') %></label>
|
||||
<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">
|
||||
<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="time">23 minutes ago</div>
|
||||
</div>
|
||||
<li class="task level-3 horizontal">
|
||||
<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="time">43 minutes ago</div>
|
||||
</div>
|
||||
<li class="task level-2 horizontal">
|
||||
<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="time">1 hour ago</div>
|
||||
</div>
|
||||
<li class="task level-3 horizontal">
|
||||
<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="time">2 hour ago</div>
|
||||
</div>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="widgets">
|
||||
<div class="customer_info"></div>
|
||||
<div class="ticket_template"></div>
|
||||
<div class="text_module"></div>
|
||||
<div class="ticket_template">
|
||||
<div class="drox hide"><!-- Template Wizard Step One -->
|
||||
<div class="drox-header">
|
||||
<h2>Choose Template:</h2>
|
||||
</div>
|
||||
<div class="drox-body">
|
||||
<p>No template created yet.</p>
|
||||
<p>With templates you can pre-fill ticket attributes.</p>
|
||||
<p>Choose attributes and then save them as a new template.</p>
|
||||
<p><a class="create u-clickable">Save new template</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drox hide"><!-- Template Wizard Step Two -->
|
||||
<div class="drox-header">
|
||||
<h2>Create Template:</h2>
|
||||
</div>
|
||||
<div class="drox-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="template-title"><%- @T('Template Title') %>:</label>
|
||||
<input class="form-control" id="template-title" placeholder="<%- @T('Enter Template Name') %>">
|
||||
</div>
|
||||
<p>This template saves the following attributes:</p>
|
||||
<ul class="template-attributes">
|
||||
<li class="template-attribute horizontal">
|
||||
<div class="key">Owner</div> | <div class="value flex u-textTruncate">Web-Dev</div>
|
||||
<div class="delete u-clickable">×</div>
|
||||
<li class="template-attribute horizontal">
|
||||
<div class="key">Type</div> | <div class="value flex u-textTruncate">Question</div>
|
||||
<div class="delete u-clickable">×</div>
|
||||
<li class="template-attribute horizontal">
|
||||
<div class="key">Status</div> | <div class="value flex u-textTruncate">open</div>
|
||||
<div class="delete u-clickable">×</div>
|
||||
<li class="template-attribute horizontal">
|
||||
<div class="key">Priority</div> | <div class="value flex u-textTruncate">high</div>
|
||||
<div class="delete u-clickable">×</div>
|
||||
<li class="template-attribute horizontal">
|
||||
<div class="key">Tag</div> | <div class="value flex u-textTruncate">New Website</div>
|
||||
<div class="delete u-clickable">×</div>
|
||||
<li class="template-attribute horizontal">
|
||||
<div class="key">Tag</div> | <div class="value flex u-textTruncate">Feedback</div>
|
||||
<div class="delete u-clickable">×</div>
|
||||
</ul>
|
||||
<div class="horizontal">
|
||||
<button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
|
||||
<a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drox hide"><!-- Template Chooser, shown instead of Template Wizard Step One when there are templates there -->
|
||||
<div class="drox-header">
|
||||
<h2>Choose Template:</h2>
|
||||
</div>
|
||||
<div class="drox-body">
|
||||
<ul class="templates">
|
||||
<li class="u-clickable u-highlight">Feedback New Website
|
||||
</ul>
|
||||
<p>Choose attributes and then save them as a new template.</p>
|
||||
<p><a class="create u-clickable">Save new template</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text_module"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<div class="drox">
|
||||
<div class="drox-header">
|
||||
<h3>
|
||||
<h2>
|
||||
<%- @T( @header ) %>
|
||||
<% if @edit: %>
|
||||
<a href="" data-type="edit" class="pull-right glyphicon glyphicon-edit" title="<%- @Ti( 'edit' ) %>"></a>
|
||||
<% end %>
|
||||
</h3>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="drox-body">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<ul class="nav navbar-nav navbar-items-menu"></ul>
|
||||
|
||||
<div class="tasks flex"></div>
|
||||
<div class="tasks tasks-navigation flex"></div>
|
||||
|
||||
<% if !_.isEmpty(@user): %>
|
||||
<!--<a href="#bell" class="glyphicon glyphicon-bell"></a>-->
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
<!-- .text-bubble grows with textarea (and expanding clone) -->
|
||||
<div class="article-attachment js-attachment u-unclickable">
|
||||
<span class="bubble-placeholder-hint">Antwort eingeben oder</span>
|
||||
<span class="highlight u-clickable edit-upload-button js-attachment-text">
|
||||
<span class="u-highlight u-clickable edit-upload-button js-attachment-text">
|
||||
Dateien wählen..
|
||||
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<div class="">
|
||||
<form>
|
||||
<div id="form-template"></div>
|
||||
<!--<button type="submit" class="btn btn-default" data-type="template_edit"><%- @T( 'Edit' ) %></button>-->
|
||||
<button type="submit" class="btn btn-default" data-type="template_delete"><%- @T( 'Delete' ) %></button>
|
||||
<button type="submit" class="btn btn-default" data-type="template_select"><%- @T( 'Apply' ) %></button>
|
||||
</form>
|
||||
<br>
|
||||
<form>
|
||||
<fieldset>
|
||||
<label class="" for="template_name"><%- @T( 'Save as Template' ) %></label>
|
||||
<input type="text" name="template_name" id="template_name" class="form-control" value="<%= @template.name %>"/>
|
||||
</fieldset>
|
||||
<button type="submit" class="btn btn-default" data-type="template_save"><%- @T( 'Save' ) %></button>
|
||||
</form>
|
||||
</div>
|
||||
<!--<form>
|
||||
<div id="form-template"></div>
|
||||
<button type="submit" class="btn btn-default" data-type="template_delete"><%- @T( 'Delete' ) %></button>
|
||||
<button type="submit" class="btn btn-default" data-type="template_select"><%- @T( 'Apply' ) %></button>
|
||||
</form>
|
||||
<br>
|
||||
<form>
|
||||
<fieldset>
|
||||
<label class="" for="template_name"><%- @T( 'Save as Template' ) %></label>
|
||||
<input type="text" name="template_name" id="template_name" class="form-control" value="<%= @template.name %>"/>
|
||||
</fieldset>
|
||||
<button type="submit" class="btn btn-default" data-type="template_save"><%- @T( 'Save' ) %></button>
|
||||
</form>-->
|
||||
<p>No template created yet.</p>
|
||||
<p>With templates you can pre-fill ticket attributes.</p>
|
||||
<p>Choose attributes and then save them as a new template.</p>
|
||||
<p><a class="create u-clickable">Save new template</a></p>
|
||||
|
|
@ -5,13 +5,24 @@ body {
|
|||
background: #2c2d36;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.create {
|
||||
color: hsl(145,51%,45%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #c6c6c5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: hsl(202,68%,54%);
|
||||
.u-highlight {
|
||||
color: hsl(194,90%,45%);
|
||||
}
|
||||
|
||||
.u-unclickable {
|
||||
|
|
@ -622,7 +633,7 @@ label {
|
|||
font-weight: normal;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0 2px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-group + .form-group {
|
||||
|
|
@ -822,13 +833,7 @@ label {
|
|||
color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol.tabs {
|
||||
padding: 0;
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
|
|
@ -1488,6 +1493,10 @@ form a.standalone {
|
|||
margin: 0 5px;
|
||||
}
|
||||
|
||||
form a.standalone.align-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
|
@ -1505,36 +1514,6 @@ form a.standalone {
|
|||
padding: 14px 20px 20px;
|
||||
}
|
||||
|
||||
.drox {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.drox-header {
|
||||
padding: 8px 13px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333333;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.drox-header .glyphicon {
|
||||
display: none;
|
||||
}
|
||||
.drox-header:hover .glyphicon, .drox-header:focus .glyphicon {
|
||||
display: inline-block;
|
||||
color: #005580;
|
||||
text-decoration: none;
|
||||
}
|
||||
.drox-header h3 {
|
||||
font-size: 13px;
|
||||
font-weight: 200;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.drox-body {
|
||||
padding: 8px 13px;
|
||||
}
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
padding-top: 10px;
|
||||
|
|
@ -1773,39 +1752,68 @@ footer {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.tasks.tasks-standalone {
|
||||
background: none;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tasks-standalone .task {
|
||||
padding: 0;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.tasks-standalone .icon-holder {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.tasks-standalone .icon-holder .icon {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tasks-standalone .time {
|
||||
color: hsl(198,19%,72%);
|
||||
}
|
||||
|
||||
.tasks-standalone .task .priority.icon:after {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.task {
|
||||
height: 38px;
|
||||
padding: 10px 15px 7px 0;
|
||||
border-bottom: 1px solid #33363e;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.task .name {
|
||||
color: #808080;
|
||||
}
|
||||
.tasks-navigation .task {
|
||||
height: 38px;
|
||||
border-bottom: 1px solid #33363e;
|
||||
}
|
||||
|
||||
.tasks-navigation .task:hover {
|
||||
background: #26272e;
|
||||
}
|
||||
|
||||
.tasks-navigation .name {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.tasks-navigation .icon-holder {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.tasks-navigation .icon-holder .icon {
|
||||
margin-right: 3px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.task:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.task .icon-holder {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.task .icon-holder .icon {
|
||||
margin-right: 3px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.task .modified.priority.icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.task:hover {
|
||||
background: #26272e;
|
||||
}
|
||||
|
||||
.task.active {
|
||||
background: #389ed9;
|
||||
}
|
||||
|
|
@ -3166,15 +3174,26 @@ footer {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.create-new {
|
||||
.create-new .main {
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.create-new .sidebar {
|
||||
width: 290px;
|
||||
}
|
||||
.create-new .form-control:not(:focus):not(.focus) {
|
||||
border-color: hsl(0,0%,90%);
|
||||
}
|
||||
.create-new .subtle-link {
|
||||
color: hsl(0,0%,89%);
|
||||
}
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 12px 24px 20px;
|
||||
max-width: 658px;
|
||||
}
|
||||
|
||||
.box .page-header {
|
||||
|
|
@ -3188,14 +3207,6 @@ footer {
|
|||
color: hsl(60,1%,34%);
|
||||
}
|
||||
|
||||
.box .subtle-link {
|
||||
color: hsl(0,0%,89%);
|
||||
}
|
||||
|
||||
.box .form-control:not(:focus):not(.focus) {
|
||||
border-color: hsl(0,0%,90%);
|
||||
}
|
||||
|
||||
.box .two-columns {
|
||||
margin-left: -4px;
|
||||
margin-right: -4px;
|
||||
|
|
@ -3268,6 +3279,78 @@ footer {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
.drox {
|
||||
color: hsl(60,1%,74%);
|
||||
}
|
||||
|
||||
.drox .drox-header {
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid hsl(240,4%,95%);
|
||||
}
|
||||
|
||||
.drox a.create {
|
||||
margin-top: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.drox .form-group {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.drox .drox-body p:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.create-new .templates {
|
||||
border-bottom: 1px solid hsl(240,4%,95%);
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.template-attributes {
|
||||
margin: 17px 0 19px;
|
||||
}
|
||||
|
||||
.template-attribute {
|
||||
height: 24px;
|
||||
line-height: 25px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 2px;
|
||||
font-size: 13px;
|
||||
color: hsl(198,11%,59%);
|
||||
background: hsl(197,20%,93%);
|
||||
border: 1px solid hsl(0,0%,90%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.template-attribute .key {
|
||||
text-transform: uppercase;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.template-attribute .value {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.template-attribute .delete {
|
||||
padding: 0 7px;
|
||||
margin-top: 4px;
|
||||
line-height: 19px;
|
||||
font-size: 28px;
|
||||
font-weight: lighter;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
color: hsl(60,1%,34%);
|
||||
}
|
||||
|
||||
.customer-email {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
----------------
|
||||
|
|
|
|||
Loading…
Reference in a new issue