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

create component tabsSidebar

Browse source 
using tabsSidebarSpace as spacer for the body
This commit is contained in:
Felix Niklas 2014-09-15 18:08:23 +02:00
parent 00ac0636a0
commit a504d4535c
11 changed files with 240 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee
View file

@ -417,15 +417,15 @@ class App.GenericHistory extends App.ControllerModal
class App.Sidebar extends App.Controller class App.Sidebar extends App.Controller
events: events:
'click .sidebar-tabs': 'toggleTab' 'click .tabsSidebar-tab': 'toggleTab'
'click .close-sidebar': 'toggleSidebar' 'click .tabsSidebar-close': 'toggleSidebar'
constructor: -> constructor: ->
super super
@render() @render()
# get first tab # get first tab
name = @el.find('.sidebar-tab').first().data('content') name = @el.find('.tabsSidebar-tab').first().data('content')
# activate first tab # activate first tab
@toggleTabAction(name) @toggleTabAction(name)
@ -439,17 +439,17 @@ class App.Sidebar extends App.Controller
item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) ) item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) )
toggleSidebar: -> toggleSidebar: ->
$('.content.active > div').toggleClass('state--sidebar-hidden') $('.content.active .tabsSidebarSpace').toggleClass('is-closed')
$('.content.active .tabsSidebar').toggleClass('is-closed')
showSidebar: -> showSidebar: ->
# show sidebar if not shown $('.content.active .tabsSidebarSpace').removeClass('is-closed')
if $('.content.active > div').hasClass('state--sidebar-hidden') $('.content.active .tabsSidebar').removeClass('is-closed')
$('.content.active > div').removeClass('state--sidebar-hidden')
toggleTab: (e) -> toggleTab: (e) ->
# get selected tab # get selected tab
name = $(e.target).closest('.sidebar-tab').data('content') name = $(e.target).closest('.tabsSidebar-tab').data('content')
if name if name
@ -466,10 +466,10 @@ class App.Sidebar extends App.Controller
return if !name return if !name
# remove active state # remove active state
@el.find('.sidebar-tab').removeClass('active') @el.find('.tabsSidebar-tab').removeClass('active')
# add active state # add active state
@el.find('.sidebar-tab[data-content=' + name + ']').addClass('active') @el.find('.tabsSidebar-tab[data-content=' + name + ']').addClass('active')
# hide all content tabs # hide all content tabs
@el.find('.sidebar-content').addClass('hide') @el.find('.sidebar-content').addClass('hide')
@ -483,7 +483,7 @@ class App.Sidebar extends App.Controller
@el.find('.sidebar h2').html(title) @el.find('.sidebar h2').html(title)
# set tab actions # set tab actions
@el.find('.sidebar-tab-actions').html('') @el.find('.tabsSidebar-tabActions').html('')
# add item acctions # add item acctions
for item in @items for item in @items
@ -491,7 +491,7 @@ class App.Sidebar extends App.Controller
if item.actions if item.actions
for action in item.actions for action in item.actions
do (action) => do (action) =>
@el.find('.sidebar-tab-actions').append("<div class='sidebar-tab-action #{action.class}'></div>").find(".sidebar-tab-action").last().bind( @el.find('.tabsSidebar-tabActions').append("<div class='tabsSidebar-tabAction #{action.class}'></div>").find(".tabsSidebar-tabAction").last().bind(
'click' 'click'
(e) => (e) =>
e.stopPropagation() e.stopPropagation()

2
app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
View file

@ -469,7 +469,7 @@ class Sidebar extends App.Controller
} }
new App.Sidebar( new App.Sidebar(
el: @el.find('.sidebar-holder') el: @el.find('.tabsSidebar')
items: items items: items
) )

22
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -43,10 +43,32 @@ App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSide
class ContentSidebarTabsRight extends App.ControllerContent class ContentSidebarTabsRight extends App.ControllerContent
elements:
'.tabsSidebar' : 'sidebar'
constructor: -> constructor: ->
super super
@render() @render()
items = [
head: 'Ticket Settings'
name: 'ticket'
icon: 'message'
,
head: 'Customer'
name: 'customer'
icon: 'person'
,
head: 'Organization'
name: 'organization'
icon: 'group'
]
new App.Sidebar(
el: sidebar
items: items
)
render: -> render: ->
@html App.view('layout_ref/content_sidebar_tabs_right')() @html App.view('layout_ref/content_sidebar_tabs_right')()

2
app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
View file

@ -235,7 +235,7 @@ class App.TicketZoom extends App.Controller
} }
new App.Sidebar( new App.Sidebar(
el: @el.find('.sidebar-holder') el: @el.find('.tabsSidebar')
items: items items: items
) )

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

@ -1,174 +1,168 @@
<div class="fit ticket-zoom vertical"> <div class="main no-padding fit tabsSidebarSpace">
<div class="flex u-positionOrigin"> <div class="newTicket">
<div class="main no-padding"> <div class="box">
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing"> <div class="page-header">
<h1><%- @T( @head ) %></h1>
</div>
<div class="box"> <ul class="horizontal tabs type-tabs">
<div class="page-header">
<h1><%- @T( @head ) %></h1> <li class="tab u-textTruncate" data-type="phone-in">
<div class="gray received-calls channel icon"></div>
<%- @T( 'Received Call' ) %>
</li>
<li class="tab u-textTruncate" data-type="phone-out">
<div class="gray outbound-calls channel icon"></div>
<%- @T( 'Outbound Call' ) %>
</li>
<li class="tab u-textTruncate" data-type="email-out">
<div class="gray email channel icon"></div>
<%- @T( 'Send E-Mail' ) %>
</li>
</ul>
<form role="form" class="form-large ticket-create">
<input type="hidden" name="formSenderType"/>
<div class="ticket-form-top"></div>
<div class="article-form-top"></div>
<div class="formset-inset">
<div class="ticket-form-middle horizontal two-columns"></div>
<div class="ticket-form-bottom"></div>
</div>
<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' ) %></button>
</div>
</form>
</div>
</div>
</div>
<div class="tabsSidebar vertical"></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> </div>
<label><%- @T('Tickets') %></label>
<ul class="horizontal tabs type-tabs"> <ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
<li class="task level-1 horizontal">
<li class="tab u-textTruncate" data-type="phone-in"> <div class="icon-holder">
<div class="gray received-calls channel icon"></div> <div class="priority icon"></div>
<%- @T( 'Received Call' ) %> </div>
</li> <div class="flex">
<div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
<li class="tab u-textTruncate" data-type="phone-out"> <div class="time">23 minutes ago</div>
<div class="gray outbound-calls channel icon"></div> </div>
<%- @T( 'Outbound Call' ) %> <li class="task level-3 horizontal">
</li> <div class="icon-holder">
<div class="priority icon"></div>
<li class="tab u-textTruncate" data-type="email-out"> </div>
<div class="gray email channel icon"></div> <div class="flex">
<%- @T( 'Send E-Mail' ) %> <div class="u-highlight name u-textTruncate">Superb Service!</div>
</li> <div class="time">43 minutes ago</div>
</ul> </div>
<li class="task level-2 horizontal">
<form role="form" class="form-large ticket-create"> <div class="icon-holder">
<input type="hidden" name="formSenderType"/> <div class="priority icon"></div>
<div class="ticket-form-top"></div> </div>
<div class="article-form-top"></div> <div class="flex">
<div class="u-highlight name u-textTruncate">Print sheets strip off</div>
<div class="formset-inset"> <div class="time">1 hour ago</div>
<div class="ticket-form-middle horizontal two-columns"></div> </div>
<div class="ticket-form-bottom"></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>
<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> </div>
<p>This template saves the following attributes:</p>
<ul class="template-attributes">
<div class="form-actions horizontal"> <li class="template-attribute horizontal">
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a> <div class="key">Owner</div> | <div class="value flex u-textTruncate">Web-Dev</div>
<button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create' ) %></button> <div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Type</div> | <div class="value flex u-textTruncate">Question</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Status</div> | <div class="value flex u-textTruncate">open</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Priority</div> | <div class="value flex u-textTruncate">high</div>
<div class="delete u-clickable">&times;</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">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Tag</div> | <div class="value flex u-textTruncate">Feedback</div>
<div class="delete u-clickable">&times;</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> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="drox hide"><!-- Template Chooser, shown instead of Template Wizard Step One when there are templates there -/->
</div> <div class="drox-header">
</div> <h2>Choose Template:</h2>
</div>
<div class="sidebar-holder vertical"></div> <div class="drox-body">
<!-- <ul class="templates">
<div class="sidebar"> <li class="u-clickable u-highlight">Feedback New Website
<div class="widgets"> </ul>
<div class="customer_info"> <p>Choose attributes and then save them as a new template.</p>
<div class="drox"><!-- Customer Info -/-> <p><a class="create u-clickable">Save new template</a></p>
<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>
</div> </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">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Type</div> | <div class="value flex u-textTruncate">Question</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Status</div> | <div class="value flex u-textTruncate">open</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Priority</div> | <div class="value flex u-textTruncate">high</div>
<div class="delete u-clickable">&times;</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">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Tag</div> | <div class="value flex u-textTruncate">Feedback</div>
<div class="delete u-clickable">&times;</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 class="text_module"></div>
</div> </div>
-->
</div> </div>
-->

8
app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
View file

@ -1,8 +1,8 @@
<div class="sidebar bottom-form-shadow flex"> <div class="sidebar bottom-form-shadow flex">
<div class="horizontal center"> <div class="horizontal center">
<h2 class="flex u-textTruncate"></h2> <h2 class="flex u-textTruncate"></h2>
<div class="close-sidebar centered u-clickable"> <div class="tabsSidebar-close centered u-clickable">
<div class="sidebar-tab-actions"></div> <div class="tabsSidebar-tabActions"></div>
<div class="arrow-right icon"></div> <div class="arrow-right icon"></div>
</div> </div>
</div> </div>
@ -13,9 +13,9 @@
<% end %> <% end %>
</div> </div>
<div class="sidebar-tabs vertical justified"> <div class="tabsSidebar-tabs vertical justified">
<% for item in @items: %> <% for item in @items: %>
<div class="sidebar-tab centered" data-content="<%= item.name %>"> <div class="tabsSidebar-tab centered" data-content="<%= item.name %>">
<div class="dark icon <%= item.icon %>"></div> <div class="dark icon <%= item.icon %>"></div>
</div> </div>
<% end %> <% end %>

14
app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco
View file

@ -1,5 +1,4 @@
<div class="main fit"> <div class="main fit tabsSidebarSpace">
<h1>content</h1> <h1>content</h1>
<p> <p>
@ -13,10 +12,9 @@ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
<p> <p>
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</p> </p>
</div> </div>
<div class="sidebar-holder"> <div class="tabsSidebar vertical">
<!-- ticket information content --> <!-- ticket information content -->
<div class="sidebar flex" data-tab="ticket"> <div class="sidebar flex" data-tab="ticket">
@ -72,17 +70,17 @@ Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit no
</div> </div>
<div class="sidebar-tabs vertical justified"> <div class="tabsSidebar-tabs vertical justified">
<div class="sidebar-tab centered active" data-tab="ticket"> <div class="tabsSidebar-tab centered active" data-tab="ticket">
<div class="dark icon message"></div> <div class="dark icon message"></div>
</div> </div>
<div class="sidebar-tab centered" data-tab="customer"> <div class="tabsSidebar-tab centered" data-tab="customer">
<div class="dark icon person"></div> <div class="dark icon person"></div>
</div> </div>
<div class="sidebar-tab centered" data-tab="organization"> <div class="tabsSidebar-tab centered" data-tab="organization">
<div class="dark icon group"></div> <div class="dark icon group"></div>
</div> </div>

9
app/assets/javascripts/app/views/ticket_zoom.jst.eco
View file

@ -1,7 +1,7 @@
<div class="fit ticket-zoom vertical"> <div class="flex vertical">
<div class="flex u-positionOrigin"> <div class="flex u-positionOrigin">
<div class="main no-padding"> <div class="main no-padding fit tabsSidebarSpace">
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing"> <div class="ticketZoom">
<div class="page-header horizontal"> <div class="page-header horizontal">
<div class="flex vertical center"> <div class="flex vertical center">
<div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div> <div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div>
@ -26,10 +26,9 @@
<div class="ticket-edit is-public"></div> <div class="ticket-edit is-public"></div>
</div> </div>
</div> </div>
<div class="sidebar-holder vertical"> <div class="tabsSidebar vertical">
</div> </div>
</div> </div>

4
app/assets/stylesheets/application.css
View file

@ -10,9 +10,11 @@
*= require ./bootstrap-tokenfield.css *= require ./bootstrap-tokenfield.css
*= require ./noty_theme_twitter.css *= require ./noty_theme_twitter.css
*= require ./sew.css *= require ./sew.css
*= require ./layout.css
*= require ./zzz.css *= require ./zzz.css
*= require ./fonts/fira-sans.css *= require ./fonts/fira-sans.css
*= require ./layout.css
*
* layout.css after zzz.css because .fix's position absolute should overwrite others
* *
*= require_tree ./custom/ *= require_tree ./custom/
* *

4
app/assets/stylesheets/layout.css
View file

@ -59,8 +59,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; bottom: 0;
width: 100%; right: 0;
} }
body.fit { body.fit {

72
app/assets/stylesheets/zzz.css.erb
View file

@ -2322,31 +2322,11 @@ footer {
appearance: none; appearance: none;
} }
.ticket-zoom { .ticketZoom {
overflow: hidden;
background: #f8f9fa; background: #f8f9fa;
} }
.ticket-zoom .main { .ticketZoom .page-header {
right: 0;
left: 0;
top: 0;
bottom: 0;
margin-right: 280px;
position: absolute;
transition: 500ms;
}
.ticket-zoom .flex-overflow {
overflow: hidden;
min-height: 100%;
}
.ticket-zoom.state--sidebar-hidden .main {
margin-right: 0;
}
.ticket-zoom .page-header {
margin-top: 62px; margin-top: 62px;
margin-bottom: 46px; margin-bottom: 46px;
border-bottom: none; border-bottom: none;
@ -2811,16 +2791,26 @@ footer {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.ticket-zoom .sidebar { .tabsSidebarSpace {
padding-right: 62px !important;
margin-right: 280px;
transition: 500ms;
}
.tabsSidebarSpace.is-closed {
margin-right: 0;
}
.tabsSidebar .sidebar {
width: 280px; width: 280px;
border-left: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6;
} }
.ticket-zoom .sidebar h2 { .tabsSidebar .sidebar h2 {
margin: 5px 0 0; margin: 5px 0 0;
} }
.close-sidebar { .tabsSidebar-close {
padding: 20px; padding: 20px;
margin: -15px; margin: -15px;
} }
@ -2833,7 +2823,7 @@ footer {
0 -4px rgba(0,0,0,.005) inset; 0 -4px rgba(0,0,0,.005) inset;
} }
.sidebar-holder { .tabsSidebar {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -2841,28 +2831,24 @@ footer {
transition: 500ms; transition: 500ms;
} }
.ticket-zoom.state--sidebar-hidden .sidebar-holder { .tabsSidebar.is-closed {
-webkit-transform: translateX(280px); -webkit-transform: translateX(280px);
transform: translateX(280px); transform: translateX(280px);
} }
.sidebar-tabs { .tabsSidebar-tabs {
position: absolute; position: absolute;
left: -55px; left: -55px;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
.sidebar-tabs--spacing {
padding-right: 62px;
}
.test { .test {
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
.sidebar-tab { .tabsSidebar-tab {
width: 56px; width: 56px;
height: 60px; height: 60px;
background: hsl(197,20%,93%); background: hsl(197,20%,93%);
@ -2871,7 +2857,7 @@ footer {
border-top: 1px solid hsl(202,12%,87%); border-top: 1px solid hsl(202,12%,87%);
} }
.sidebar-tab.is-changed:before { .tabsSidebar-tab.is-changed:before {
position: absolute; position: absolute;
content: ''; content: '';
left: -3px; left: -3px;
@ -2884,20 +2870,20 @@ footer {
box-shadow: 0 0 0 2px hsl(210,17%,98%); box-shadow: 0 0 0 2px hsl(210,17%,98%);
} }
.sidebar-tab:first-child { .tabsSidebar-tab:first-child {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top: none; border-top: none;
} }
.sidebar-tab:last-child { .tabsSidebar-tab:last-child {
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
} }
.sidebar-tab .icon { .tabsSidebar-tab .icon {
opacity: 0.3; opacity: 0.3;
} }
.sidebar-tab.active .icon { .tabsSidebar-tab.active .icon {
opacity: 1; opacity: 1;
} }
@ -2937,17 +2923,17 @@ footer {
opacity: 0.5; opacity: 0.5;
} }
.create-new .main { .newTicket {
padding: 34px; padding: 34px;
} }
.create-new .sidebar { .newTicket .sidebar {
width: 290px; width: 290px;
} }
.create-new .form-control:not(:focus):not(.focus) { .newTicket .form-control:not(:focus):not(.focus) {
border-color: hsl(0,0%,90%); border-color: hsl(0,0%,90%);
} }
.create-new .subtle-link { .newTicket .subtle-link {
color: hsl(0,0%,89%); color: hsl(0,0%,89%);
} }
@ -3065,7 +3051,7 @@ footer {
margin-top: 20px; margin-top: 20px;
} }
.create-new .templates { .newTicket .templates {
border-bottom: 1px solid hsl(240,4%,95%); border-bottom: 1px solid hsl(240,4%,95%);
padding-bottom: 14px; padding-bottom: 14px;
} }