From aee2bb7969b2a5db3fc20ea9d54c025dd8202d54 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 16 Jun 2015 13:17:55 +0200
Subject: [PATCH] SLA layout_ref WIP

---
 .../app/controllers/layout_ref.js.coffee      |  11 +
 .../app/views/layout_ref/index.jst.eco        |   1 +
 .../app/views/layout_ref/sla.jst.eco          | 500 ++++++++++++++++++
 app/assets/stylesheets/bootstrap.css          |   9 -
 app/assets/stylesheets/zammad.css.scss        | 182 ++++++-
 5 files changed, 692 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/layout_ref/sla.jst.eco

diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index eae87ed41..03e718eaf 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -1282,5 +1282,16 @@ class userListRef extends App.ControllerContent
 
 App.Config.set( 'layout_ref/user_list', userListRef, 'Routes' )
 
+class slaRef extends App.ControllerContent
+
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html App.view('layout_ref/sla')()
+
+App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
+
 
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/index.jst.eco b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
index deb9e42c9..a29719a31 100644
--- a/app/assets/javascripts/app/views/layout_ref/index.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
@@ -4,6 +4,7 @@
 
 
   <ul>
+    <li><a href="#layout_ref/sla">Sla Modal</a></li>
     <li><a href="#layout_ref/user_list">User List</a></li>
     <li><a href="#layout_ref/admin_placeholder">Admin Placeholder (Inline Tutorials)</a></li>
     <li><a href="#layout_ref/clues">First Steps (Clues)</a></li>
diff --git a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
new file mode 100644
index 000000000..04dfba7be
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
@@ -0,0 +1,500 @@
+<div class="modal modal--local">
+  <div class="modal-backdrop"></div>
+  <div class="modal-dialog">
+    <form>
+      <div class="modal-content">
+        <div class="modal-header">
+          <div class="modal-close js-close">
+            <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+          </div>
+          <h1 class="modal-title">New Service Level Agreement (SLA)</h1>
+        </div>
+        <div class="modal-body">
+          <h2>Define Selector</h2>
+          <p>Create rules that single out the tickets for the Service Level Agreement.</p>
+          <div class="horizontal-filters">
+            <div class="horizontal-filter">
+              <div class="horizontal-filter-body">
+                <div class="controls">
+                  <div class="u-positionOrigin">
+                    <select class="form-control" name="filter_attribute_1">
+                      <optgroup label="Ticket">
+                        <option>Number</option>
+                        <option>Title</option>
+                        <option>Group</option>
+                        <option>State</option>
+                        <option>Priority</option>
+                        <option>Owner</option>
+                      </optgroup>
+                      <optgroup label="Customer">
+                        <option>Email</option>
+                        <option>Country</option>
+                        <option>Group</option>
+                        <option>Organization</option>
+                        <option>Department</option>
+                        <option>VIP</option>
+                      </optgroup>
+                      <optgroup label="Organization">
+                        <option>Country</option>
+                        <option>VIP</option>
+                      </optgroup>
+                    </select>
+                    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
+                  </div>
+                </div>
+                <div class="controls">
+                  <div class="u-positionOrigin">
+                    <select class="form-control" name="filter_operator_1">
+                      <option>equals to</option>
+                      <option>contains</option>
+                      <option>begins with</option>
+                      <option>ends with</option>
+                      <option>is</option>
+                      <option>is not</option>
+                    </select>
+                    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
+                  </div>
+                </div>
+                <input id="filter_value_1" type="text" class="form-control">
+              </div>
+              <div class="filter-controls">
+                <div class="filter-control filter-control-remove js-remove is-disabled" title="Remove rule">
+                  <svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
+                </div>
+                <div class="filter-control filter-control-add js-add" title="Add new rule">
+                  <svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="filter-preview">
+            <table class="table table-hover ">
+              <thead>
+                <tr>
+                  <th style="width: 28px"></th>
+                  <th>Customer</th>
+                  <th style="width: 42%">Title</th>
+                  <th>Group</th>
+                  <th style="width: 25%">Created</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="item" data-id="1" data-position="1" style="cursor: pointer;">
+                  <td>
+                    <svg class="icon-priority level-1">
+                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
+                    </svg>
+                  </td>
+                  <td> <span class="user-popover" data-id="2" data-original-title="" title="">
+                      Nicole Braun (Zammad Foundation)
+                    </span> </td>
+                  <td>
+                    <a href="#ticket/zoom/1"> <span title="Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
+                        Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf
+                      </span> </a>
+                  </td>
+                  <td> <span>
+                      Users
+                    </span> </td>
+                  <td class="noTruncate"> <span>
+                      <span class="humanTimeFromNow undefined" data-time="2015-01-12T12:58:42.000Z" data-tooltip="01/12/2015 13:58">01/12/2015</span> </span>
+                  </td>
+                </tr>
+                <tr class="item" data-id="3" data-position="3" style="cursor: pointer;">
+                  <td>
+                    <svg class="icon-priority level-2">
+                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
+                    </svg>
+                  </td>
+                  <td> <span class="user-popover" data-id="4" data-original-title="" title="">
+                      Hans Huber
+                    </span> </td>
+                  <td>
+                    <a href="#ticket/zoom/3"> <span title="Noch mehr Tickets bitte">
+                        Noch mehr Tickets bitte
+                      </span> </a>
+                  </td>
+                  <td> <span>
+                      Users
+                    </span> </td>
+                  <td class="noTruncate"> <span>
+                      <span class="humanTimeFromNow undefined" data-time="2015-01-20T11:47:43.000Z" data-tooltip="01/20/2015 12:47">01/20/2015</span> </span>
+                  </td>
+                </tr>
+                <tr class="item" data-id="4" data-position="4" style="cursor: pointer;">
+                  <td>
+                    <svg class="icon-priority level-3">
+                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
+                    </svg>
+                  </td>
+                  <td> <span class="user-popover" data-id="2" data-original-title="" title="">
+                      Nicole Braun (Zammad Foundation)
+                    </span> </td>
+                  <td>
+                    <a href="#ticket/zoom/4"> <span title="Welcome to Zammad!">
+                        Welcome to Zammad!
+                      </span> </a>
+                  </td>
+                  <td> <span>
+                      Users
+                    </span> </td>
+                  <td class="noTruncate"> <span>
+                      <span class="humanTimeFromNow undefined" data-time="2015-05-04T14:26:51.000Z" data-tooltip="05/04/2015 16:26">05/04/2015</span> </span>
+                  </td>
+                </tr>
+                <tr class="item" data-id="5" data-position="5" style="cursor: pointer;">
+                  <td>
+                    <svg class="icon-priority level-3">
+                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
+                    </svg>
+                  </td>
+                  <td> <span class="user-popover" data-id="2" data-original-title="" title="">
+                      Nicole Braun (Zammad Foundation)
+                    </span> </td>
+                  <td>
+                    <a href="#ticket/zoom/5"> <span title="das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge">
+                        das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge
+                      </span> </a>
+                  </td>
+                  <td> <span>
+                      Users
+                    </span> </td>
+                  <td class="noTruncate"> <span>
+                      <span class="humanTimeFromNow undefined" data-time="2015-06-10T13:41:29.000Z" data-tooltip="06/10/2015 15:41">5 days 21 hours ago</span> </span>
+                  </td>
+                </tr>
+                <tr class="item" data-id="6" data-position="6" style="cursor: pointer;">
+                  <td>
+                    <svg class="icon-priority level-2">
+                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
+                    </svg>
+                  </td>
+                  <td> <span class="user-popover" data-id="2" data-original-title="" title="">
+                      Nicole Braun (Zammad Foundation)
+                    </span> </td>
+                  <td>
+                    <a href="#ticket/zoom/6"> <span title="script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler">
+                        script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler
+                      </span> </a>
+                  </td>
+                  <td> <span>
+                      Users
+                    </span> </td>
+                  <td class="noTruncate"> <span>
+                      <span class="humanTimeFromNow undefined" data-time="2015-06-11T07:26:31.000Z" data-tooltip="06/11/2015 09:26">5 days 3 hours ago</span> </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <h2>Auto Attributes</h2>
+          <div class="horizontal-filters">
+            <div class="horizontal-filter">
+              <div class="horizontal-filter-body">
+                <div class="horizontal-filter-text">Set</div>
+                <div class="controls">
+                  <div class="u-positionOrigin">
+                    <select class="form-control" name="filter_attribute_2">
+                      <option>Owner</option>
+                      <option>Group</option>
+                      <option>State</option>
+                      <option>Priority</option>
+                    </select>
+                    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
+                  </div>
+                </div>
+                <div class="horizontal-filter-text">to</div>
+                <div class="controls">
+                  <div class="u-positionOrigin">
+                    <select class="form-control" name="filter_operator_2">
+                      <option>Max Reuter</option>
+                      <option>Caroline Blank</option>
+                      <option>Joe Noes</option>
+                      <option>Fizz Buzz</option>
+                      <option>Captain Chunk</option>
+                      <option>Marele Moon</option>
+                    </select>
+                    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
+                  </div>
+                </div>
+                <div class="horizontal-filter-text">or</div>
+                <div class="controls">
+                  <div class="u-positionOrigin">
+                    <select class="form-control" name="filter_operator_2">
+                      <option>-</option>
+                      <option>Caroline Blank</option>
+                      <option>Joe Noes</option>
+                      <option>Fizz Buzz</option>
+                      <option>Captain Chunk</option>
+                      <option>Marele Moon</option>
+                    </select>
+                    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
+                  </div>
+                </div>
+              </div>
+              <div class="filter-controls">
+                <div class="filter-control filter-control-remove js-remove" title="Remove rule">
+                  <svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
+                </div>
+                <div class="filter-control filter-control-add js-add" title="Add new rule">
+                  <svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
+                </div>
+              </div>
+            </div>
+            <div class="horizontal-filter">
+              <div class="horizontal-filter-body">
+                <div class="horizontal-filter-text">Set</div>
+                <div class="controls">
+                  <div class="u-positionOrigin">
+                    <select class="form-control" name="filter_attribute_2">
+                      <option>Owner</option>
+                      <option>Group</option>
+                      <option>State</option>
+                      <option selected>Priority</option>
+                    </select>
+                    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
+                  </div>
+                </div>
+                <div class="horizontal-filter-text">to</div>
+                <div class="controls">
+                  <div class="u-positionOrigin">
+                    <select class="form-control" name="filter_operator_2">
+                      <option>High</option>
+                      <option>Normal</option>
+                      <option>Low</option>
+                    </select>
+                    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
+                  </div>
+                </div>
+              </div>
+              <div class="filter-controls">
+                <div class="filter-control filter-control-remove js-remove" title="Remove rule">
+                  <svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
+                </div>
+                <div class="filter-control filter-control-add js-add" title="Add new rule">
+                  <svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <h2>Schedule</h2>
+          <h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3>
+          <div class="week">
+            <div class="day">
+              <label class="day-name" for="day-monday">Mo</label>
+              <input class="day-checkbox" type="checkbox" id="day-monday" checked>
+              <div class="day-times">
+                <div class="form-group">
+                  <label for="monday_start_time">from</label>
+                  <input type="time" id="monday_start_time" value="07:00">
+                </div>
+                <div class="form-group">
+                  <label for="monday_end_time">till</label>
+                  <input type="time" id="monday_end_time" value="18:00">
+                </div>
+              </div>
+            </div>
+            <div class="day">
+              <label class="day-name" for="day-tuesday">Tu</label>
+              <input class="day-checkbox" type="checkbox" id="day-tuesday" checked>
+              <div class="day-times">
+                <div class="form-group">
+                  <label for="tuesday_start_time">from</label>
+                  <input type="time" id="tuesday_start_time" value="07:00">
+                </div>
+                <div class="form-group">
+                  <label for="tuesday_end_time">till</label>
+                  <input type="time" id="tuesday_end_time" value="18:00">
+                </div>
+              </div>
+            </div>
+            <div class="day">
+              <label class="day-name" for="day-wednesday">We</label>
+              <input class="day-checkbox" type="checkbox" id="day-wednesday" checked>
+              <div class="day-times">
+                <div class="form-group">
+                  <label for="wednesday_start_time">from</label>
+                  <input type="time" id="wednesday_start_time" value="07:00">
+                </div>
+                <div class="form-group">
+                  <label for="wednesday_end_time">till</label>
+                  <input type="time" id="wednesday_end_time" value="18:00">
+                </div>
+              </div>
+            </div>
+            <div class="day">
+              <label class="day-name" for="day-thursday">Th</label>
+              <input class="day-checkbox" type="checkbox" id="day-thursday" checked>
+              <div class="day-times">
+                <div class="form-group">
+                  <label for="thursday_start_time">from</label>
+                  <input type="time" id="thursday_start_time" value="07:00">
+                </div>
+                <div class="form-group">
+                  <label for="thursday_end_time">till</label>
+                  <input type="time" id="thursday_end_time" value="18:00">
+                </div>
+              </div>
+            </div>
+            <div class="day">
+              <label class="day-name" for="day-friday">Fr</label>
+              <input class="day-checkbox" type="checkbox" id="day-friday" checked>
+              <div class="day-times">
+                <div class="form-group">
+                  <label for="friday_start_time">from</label>
+                  <input type="time" id="friday_start_time" value="07:00">
+                </div>
+                <div class="form-group">
+                  <label for="friday_end_time">till</label>
+                  <input type="time" id="friday_end_time" value="13:00">
+                </div>
+              </div>
+            </div>
+            <div class="day">
+              <label class="day-name" for="day-saturday">Sa</label>
+              <input class="day-checkbox" type="checkbox" id="day-saturday">
+              <div class="day-times">
+                <div class="form-group">
+                  <label for="saturday_start_time">from</label>
+                  <input type="time" id="saturday_start_time" value="09:00">
+                </div>
+                <div class="form-group">
+                  <label for="saturday_end_time">till</label>
+                  <input type="time" id="saturday_end_time" value="16:00">
+                </div>
+              </div>
+            </div>
+            <div class="day">
+              <label class="day-name" for="day-sunday">Su</label>
+              <input class="day-checkbox" type="checkbox" id="day-sunday">
+              <div class="day-times">
+                <div class="form-group">
+                  <label for="sunday_start_time">from</label>
+                  <input type="time" id="sunday_start_time">
+                </div>
+                <div class="form-group">
+                  <label for="sunday_end_time">till</label>
+                  <input type="time" id="sunday_end_time">
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <h3>Response Times <span class="subtitle">in Business Hours</span></h3>
+          <div>
+            <input type="checkbox" checked id="first_response_time"> 
+            <label class="inline-label" for="first_response_time">First Response Time</label> 
+            <input type="time">
+          </div>
+          <div>
+            <input type="checkbox" checked id="update_time"> 
+            <label class="inline-label" for="update_time">Update Time</label> 
+            <input type="time">
+          </div>
+          <div>
+            <input type="checkbox" id="solution_time"> <label 
+            class="inline-label" for="solution_time">Solution Time</label> 
+            <input type="time">
+          </div>
+        </div>
+        <div class="modal-footer horizontal">
+          <a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
+          <button type="submit" class="btn btn--success js-submit align-right">Create SLA</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+<div class="sidebar NavBarAdmin">
+  <h2>Manage</h2>
+
+  <ul class="nav nav-pills nav-stacked">
+    <li class="">
+      <a href="#manage/users">Users</a>
+    <li>
+      <a href="#manage/groups">Groups</a>
+    <li>
+      <a href="#manage/organizations">Organizations</a>
+    <li>
+      <a href="#manage/overviews">Overviews</a>
+    <li>
+      <a href="#manage/text_modules">TextModules</a>
+
+    <li class="active">
+      <a href="#manage/slas">SLAs</a>
+    <li>
+      <a href="#manage/schedulers">Schedulers</a>
+    <li>
+      <a href="#manage/triggers">Triggers</a>
+  </ul>
+
+  <h2>Channels</h2>
+
+  <ul class="nav nav-pills nav-stacked">
+    <li>
+      <a href="#channels/web">Web</a>
+    <li>
+      <a href="#channels/email">Email</a>
+    <li>
+      <a href="#channels/chat">Chat</a>
+    <li>
+      <a href="#channels/twitter">Twitter</a>
+    <li>
+      <a href="#channels/facebook">Facebook</a>
+  </ul>
+
+  <h2>Settings</h2>
+
+  <ul class="nav nav-pills nav-stacked">
+    <li>
+      <a href="#settings/system">System</a>
+    <li>
+      <a href="#settings/security">Security</a>
+    <li>
+      <a href="#settings/import">Import</a>
+    <li>
+      <a href="#settings/ticket">Ticket</a>
+  </ul>
+
+  <h2>System</h2>
+
+  <ul class="nav nav-pills nav-stacked">
+    <li>
+      <a href="#system/package">Packages</a>
+    <li>
+      <a href="#system/object_manager">Objects</a>
+    <li>
+      <a href="#system/translation">Translations</a>
+    <li>
+      <a href="#system/maintenance">Maintenance</a>
+    <li>
+      <a href="#system/sessions">Sessions</a>
+  </ul>
+</div>
+
+<div class="main flex">
+  <div class="page-header">
+    <div class="page-header-title">
+      <h1>SLAs <small>Management</small></h1>
+    </div>
+
+    <div class="page-header-meta">
+      <a class="btn btn--success" data-type="new">New SLA</a>
+    </div>
+  </div>
+
+  <div class="table-overview">
+    <p>
+      <strong>Service-Level-Agreements</strong>, abgekürzt <b>SLAs</b>, unterstützen Sie gegenüber Kunden gewisse zeitliche Reaktionen einzuhalten. Somit können Sie z. B. sagen Kunden sollen immer nach spätestens 8 Stunden eine Reaktion von Ihnen bekommen. Falls es zu einer drohenden Unterschreitung oder einer Unterschreitung kommt, weißt Zammad Sie auf solche Ereignisse hin.
+    </p>
+    <p>
+      Es können <strong>Reaktionszeit</strong> (Zeit zwischen Erstellung eines Tickets und erster Reaktion eines Agenten), <strong>Aktualisierungszeit</strong> (Zeit zwischen Nachfrage eines Kunden und Reaktion eines Agenten) und <strong>Lösungszeit</strong> (Zeit zwischen Erstellung und schließen eines Tickets) definiert werden.
+    </p>
+    <p>
+      Drohenden Unterschreitungen oder Unterschreitungen werden in einer eigenen Ansicht in den Übersichten angezeigt. Zudem können <strong>E-Mail Benachrichtigungen</strong> konfiguriert werden.
+    </p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css
index 1ee4f9807..b0541219a 100644
--- a/app/assets/stylesheets/bootstrap.css
+++ b/app/assets/stylesheets/bootstrap.css
@@ -233,9 +233,6 @@ th {
   .dropup > .btn > .caret {
     border-top-color: #000 !important;
   }
-  .label {
-    border: 1px solid #000;
-  }
   .table {
     border-collapse: collapse !important;
   }
@@ -1658,12 +1655,6 @@ legend {
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 }
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
 input[type="search"] {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 80688ef8e..7d3c3fb7e 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -350,11 +350,12 @@ span[data-tooltip]:hover:before {
   }
 
   &.btn--text {
-    padding-left: 0;
-    padding-right: 0;
+    font-size: inherit;
+    padding: 0;
     color: hsl(203,65%,55%);
     border: none;
     background: none;
+    vertical-align: baseline;
     &:active {
       color: hsl(203,65%,45%);
     }
@@ -670,6 +671,13 @@ h3 {
   font-weight: 200;
   text-transform: uppercase;
   letter-spacing: 0.07em;
+  
+  .subtitle {
+    font-size: 12px;
+    text-transform: none;
+    color: hsl(0,0%,60%);
+    letter-spacing: initial;
+  }
 }
 
 h4 {
@@ -693,6 +701,18 @@ label,
   padding: 0;
 }
 
+/* circumventing the label:not(.inline-label) selector because it's too strong */
+.inline-label {
+  font-size: inherit;
+  font-weight: inherit;
+  text-align: inherit;
+  color: inherit;
+  letter-spacing: 0;
+  margin: 0;
+  text-transform: none;
+  display: inline;
+}
+
 fieldset {
   margin: 0 -4px;
   @extend .clearfix;
@@ -785,6 +805,7 @@ input[type="checkbox"] {
 input[type=text],
 input[type=password],
 input[type=email],
+input[type=time],
 textarea,
 .form-control,
 .checkbox.form-group .checkbox {
@@ -805,6 +826,12 @@ textarea,
   appearance: none;
 }
 
+input[type=time] {
+  width: auto;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
   .form-control:focus,
   .form-control.focus,
   .tokenfield.focus {
@@ -5171,6 +5198,157 @@ label + .wizard-buttonList {
   }
 }
 
+.horizontal-filters {
+  margin-bottom: 20px;
+}
+
+.horizontal-filter {
+  display: flex;
+  align-items: center;
+  background: hsl(197,20%,93%);
+  padding: 14px 10px;
+  border: 1px solid hsl(198,19%,86%);
+  
+  &:first-child {
+    border-radius: 5px 5px 0 0;
+  }
+  
+  &:last-child {
+    border-radius: 0 0 5px 5px;
+  }
+
+  &:only-child {
+    border-radius: 5px;
+  }
+  
+  & + .horizontal-filter {
+    border-top: 1px solid hsl(198,19%,87%);
+  }
+  
+  .horizontal-filter-body {
+    display: flex;
+    align-items: center;
+  }
+  
+  .controls,
+  input {
+    margin-right: 5px;
+  }
+
+  select, 
+  input {
+    border-color: hsl(198,19%,86%);
+  }
+  
+  input[type=text] {
+    width: auto;
+  }
+}
+
+.horizontal-filter-text {
+  margin-right: 5px;
+}
+
+.filter-controls {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.filter-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid hsl(198,19%,86%);
+  border-radius: 100%;
+  background: white;
+  cursor: pointer;
+  
+  &:hover:not(.is-disabled) {
+    border-color: hsl(198,19%,83%);
+    
+    .icon {
+      fill: black;
+    }
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  
+  &:not(:last-child) {
+    margin-right: 7px;
+  }
+  
+  .icon {
+    width: 13px;
+    height: 13px;
+    fill: hsl(0,0%,61%);
+  }
+}
+
+.filter-preview {
+  margin: 20px 0;
+}
+
+.week {
+  display: flex;
+  margin: 0 0 20px;
+}
+
+.day {
+  text-align: center;
+  border: 1px solid hsl(198,19%,86%);
+  
+  &:not(:last-child) {
+    border-right: none;
+  }
+
+  &:first-child {
+    border-radius: 5px 0 0 5px;
+  }
+
+  &:last-child {
+    border-radius: 0 5px 5px 0;
+  }
+  
+  label {
+    text-align: center;
+  }
+}
+
+.day-name {
+  color: hsl(0,0%,33%);
+  text-transform: none;
+  font-size: 16px;
+  margin-top: 5px;
+}
+
+.day-checkbox:not(:checked) + .day-times * {
+  visibility: hidden;
+}
+
+.day-times {
+  margin-top: 5px;
+  background: hsl(197,20%,93%);
+  
+  label {
+    color: hsl(0,0%,60%);
+  }
+  
+  .form-group {
+    padding: 7px;
+    margin: 0;
+    
+    &:not(:last-child) {
+      padding-bottom: 0;
+    }
+  }
+}
+
 /*
 
   ----------------