maily_herald-webui 0.8.0

data/app/assets/images/maily_herald/webui/logo.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="513.75px" height="120px" viewBox="0 0 513.75 120" enable-background="new 0 0 513.75 120" xml:space="preserve">
+<g id="icon">
+	<path fill="#969291" d="M120.758,78.119c-18.713,13.116-27.106,24.68-31.538,28.716c-4.407,4.013-6.256,3.067-6.256,3.067
+		L14.974,75.122l14.338-40.967L120.758,78.119z"/>
+	<path fill="#CBC6BF" d="M87.928,106.178c6.267-9.393,16.18-21.831,25.289-47.585l-79.37-37.395L14.974,75.122l67.989,34.781
+		C82.963,109.903,84.813,110.848,87.928,106.178z"/>
+	<path fill="#E4554F" d="M82.963,109.903c0,0-1.85-0.946,0.005-6.243c3.72-10.628,12.584-23.5,20.672-59.064L30.055,10.351
+		c-8.042,33.817-16.193,46.269-19.747,56.421c-1.771,5.059,4.666,8.351,4.666,8.351L82.963,109.903z"/>
+	<polygon fill="#A51421" points="103.641,44.596 70.081,53.756 30.055,10.351 	"/>
+	<polygon fill="#FF7067" points="30.055,10.35 103.641,44.596 51.563,44.853 	"/>
+</g>
+<g id="type">
+	<path fill="#1F1D1C" d="M190.427,53.828l-10.924,14.565h-1.244l-10.685-14.612v24.338h-6.324V44.63h7.282l10.492,14.421
+		l10.493-14.421h7.233v33.489h-6.324V53.828z"/>
+	<path fill="#1F1D1C" d="M226.042,71.794h-17.535l-2.874,6.325h-6.853l15.044-33.5h6.899l15.043,33.5h-6.898L226.042,71.794z
+		 M217.274,51.625l-6.229,14.277h12.457L217.274,51.625z"/>
+	<path fill="#1F1D1C" d="M237.672,78.119v-33.5h6.276v33.5H237.672z"/>
+	<path fill="#1F1D1C" d="M255.512,44.619v27.655h17.248v5.845h-23.572v-33.5H255.512z"/>
+	<path fill="#1F1D1C" d="M284.081,58.428l8.911-13.809h7.618v0.287l-13.367,19.366v13.847h-6.324V64.272l-12.888-19.366v-0.287
+		h7.522L284.081,58.428z"/>
+	<path fill="#1F1D1C" d="M335.853,78.119V64.608h-16.481v13.511h-6.324V44.63h6.324v14.133h16.481V44.63h6.276v33.489H335.853z"/>
+	<path fill="#1F1D1C" d="M372.699,78.119h-25.105c0-11.163,0-22.337,0-33.5h25.105v6.096H353.87v7.713h18.158v5.893H353.87v7.569
+		h18.829V78.119z"/>
+	<path fill="#1F1D1C" d="M407.656,78.119h-7.521l-9.773-11.211h-6.085v11.211h-6.324v-33.5c5.317,0,10.636,0.048,15.953,0.048
+		c7.906,0.048,12.073,5.232,12.073,11.03c0,4.599-2.108,9.246-8.479,10.54l10.156,11.45V78.119z M384.277,50.475v10.732h9.629
+		c4.025,0,5.75-2.683,5.75-5.367c0-2.683-1.773-5.365-5.75-5.365H384.277z"/>
+	<path fill="#1F1D1C" d="M435.575,71.794H418.04l-2.874,6.325h-6.852l15.044-33.5h6.899l15.042,33.5h-6.897L435.575,71.794z
+		 M426.808,51.625l-6.229,14.277h12.456L426.808,51.625z"/>
+	<path fill="#1F1D1C" d="M453.52,44.619v27.655h17.247v5.845h-23.571v-33.5H453.52z"/>
+	<path fill="#1F1D1C" d="M503.161,61.063c0.144,8.479-5.03,17.056-16.767,17.056c-4.12,0-9.056,0-13.176,0v-33.5
+		c4.12,0,9.056,0,13.176,0C497.891,44.619,503.017,52.775,503.161,61.063z M479.495,72.034h6.899c7.618,0,10.634-5.558,10.49-11.019
+		c-0.145-5.222-3.208-10.444-10.49-10.444h-6.899V72.034z"/>
+</g>
+</svg>

data/app/assets/javascripts/maily_herald/webui/application.js

@@ -0,0 +1,20 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require maily_herald/webui/bootstrap.min
+//= require maily_herald/webui/bootstrap-datepicker
+//= require maily_herald/webui/d3.v3.js
+//= require maily_herald/webui/rickshaw.js
+//= require smart_listing
+//= require_tree .

data/app/assets/javascripts/maily_herald/webui/dispatches.coffee

@@ -0,0 +1,58 @@
+$.fn.handleDispatchForm = () ->
+  $(this).each ->
+    form = $(this)
+    mailer_select = form.find("#item_mailer_name")
+    list_select = form.find("#item_list")
+    template_generic = form.find(".template-generic")
+    template_mailer = form.find(".template-mailer")
+    template_mailer = form.find(".template-mailer")
+    mailing_from = form.find(".mailing-from")
+    dispatch_start_at = form.find(".dispatch-start-at")
+
+    update_form = () ->
+      $.ajax(
+        method: "post",
+        url: form.data("update-form-path"),
+        data: form.find("input[name^=item], textarea[name^=item], select[name^=item]").serialize(),
+        dataType: "script"
+      )
+
+    update_from = () ->
+      from_value = mailing_from.find("input[type=radio]:checked").val()
+      from_field = mailing_from.find("input[type=text]")
+
+      if from_value == "default"
+        from_field.hide()
+      else if from_value == "specify"
+        from_field.show()
+
+    update_start_at = () ->
+      dispatch_start_at.find('[data-toggle="tooltip"]').tooltip()
+      dispatch_start_at.find('button:first-child').focus ->
+        dispatch_start_at.find("input.form-control").focus()
+        true
+      dispatch_start_at.find("input.form-control").datepicker(
+        forceParse: false,
+        format: "yyyy-mm-dd"
+      )
+
+    mailer_select.change ->
+      update_form()
+
+    list_select.change ->
+      update_form()
+
+    if mailer_select.val() == "generic"
+      template_mailer.hide()
+    else
+      template_generic.hide()
+
+    mailing_from.on "change", "input[type=radio]", ->
+      update_from()
+
+    update_from()
+    update_start_at()
+
+$ ->
+  $(".dispatch-form").handleDispatchForm()
+

data/app/assets/javascripts/maily_herald/webui/webui.coffee

@@ -0,0 +1,209 @@
+$.rails.allowAction = (link) ->
+  return true unless link.attr('data-confirm')
+  $.rails.showConfirmDialog(link) # look bellow for implementations
+  false # always stops the action since code runs asynchronously
+
+$.rails.confirmed = (link) ->
+  confirm = link.attr("data-confirm")
+  link.removeAttr('data-confirm')
+  link.trigger('click.rails')
+  link.popover('destroy')
+  link.attr("data-confirm", confirm)
+
+$.rails.showConfirmDialog = (link) ->
+  message = link.attr 'data-confirm'
+  link.popover('destroy')
+  
+  content = $("#popover-confirmation").clone().removeClass("fade")
+  content.find(".popover-msg").html(message)
+  content.find('.confirm').unbind "click"
+  content.find('.confirm').click ->
+    $.rails.confirmed(link)
+  content.find('.cancel').click ->
+    link.popover('hide')
+
+  link.popover(content: content, html: true, trigger: 'manual', title: $("#popover-confirmation").data("title"))
+  link.popover('show')
+
+# Bootstrap tabs
+$('.btn-default a').click  (e) ->
+  e.preventDefault()
+  $(this).tab('show')
+ $.fn.observeField = (opts = {}) ->
+   field = $(this)
+   key_timeout = null
+   last_value = null
+   options =
+     onFilled: () ->
+     onEmpty: () ->
+     onChange: () ->
+   options = $.extend(options, opts)
+ 
+   keyChange = () ->
+     if field.val().length > 0
+       options.onFilled()
+     else
+       options.onEmpty()
+ 
+     if field.val() == last_value && field.val().length != 0
+       return
+     lastValue = field.val()
+ 
+     options.onChange()
+ 
+   field.data('observed', true)
+ 
+   field.bind 'keydown', (e) ->
+     if(key_timeout)
+       clearTimeout(key_timeout)
+
+     key_timeout = setTimeout(->
+       keyChange()
+     , 400)
+
+$.fn.editable = (v) ->
+  if v == "cancel"
+    if $(this).data("edit-bkp")
+      $(this).html("")
+      $(this).append($(this).data("edit-bkp"))
+      $(this).removeData("edit-bkp")
+  else
+    $(this).editable("cancel")
+    children = $(this).children()
+    children.detach()
+    $(this).data("edit-bkp", children)
+    $(this).html(v)
+
+$.fn.historyGraph = () ->
+  createSeries = (obj) ->
+    series = []
+    for date of obj
+      value = obj[date]
+      point =
+        x: Date.parse(date) / 1000
+        y: value
+
+      series.unshift point
+    series
+
+  $(this).each ->
+    container = $(this)
+
+    delivered = createSeries(container.data("delivered"))
+    skipped = createSeries(container.data("skipped"))
+    failed = createSeries(container.data("failed"))
+
+    if !container.data("graph")
+      graph = new Rickshaw.Graph(
+        element: container[0]
+        width: container.width()
+        height: 200
+        renderer: "line"
+        interpolation: "linear"
+        series: [
+          {
+            color: "#a94442"
+            data: failed
+            name: "Failed"
+          }
+          {
+            color: "#3c763d"
+            data: delivered
+            name: "Delivered"
+          }
+          {
+            color: "#006f68"
+            data: skipped
+            name: "Skipped"
+          }
+        ]
+      )
+      x_axis = new Rickshaw.Graph.Axis.Time(graph: graph)
+      y_axis = new Rickshaw.Graph.Axis.Y(
+        graph: graph
+        tickFormat: Rickshaw.Fixtures.Number.formatKMBT
+        ticksTreatment: "glow"
+      )
+      graph.render()
+      hoverDetail = new Rickshaw.Graph.HoverDetail(
+        graph: graph
+        yFormatter: (y) ->
+          Math.floor(y)
+      )
+
+      container.data("graph", graph)
+    else
+      graph = container.data("graph")
+      graph.series[0]["data"] = failed
+      graph.series[1]["data"] = delivered
+      graph.series[2]["data"] = skipped
+      graph.update()
+
+$ ->
+  SmartListing.config.merge()
+  
+  $(document).on "click", ".resource-editable button.cancel", ->
+    $(this).closest(".resource-editable").editable("cancel")
+    false
+
+  $(document).tooltip
+    selector: 'a[data-toggle=tooltip]'
+
+  $(document).on 'hidden.bs.modal', (e) ->
+    $(e.target).removeData('bs.modal')
+
+
+  # form ui
+  $('input[type=radio]').on 'change', ->
+    $("input[type=radio][name=#{$(this).attr("name")}]").each ->
+      if $(this).is(":checked")
+        $(this).parent().addClass("radio-checked")
+      else
+        $(this).parent().removeClass("radio-checked")
+
+  $('input[type=checkbox]').on 'change', ->
+    if $(this).is(":checked")
+      $(this).parent().addClass("checkbox-checked")
+    else
+      $(this).parent().removeClass("checkbox-checked")
+
+  $('input[type="radio"]:checked').parent().addClass 'radio-checked'
+  $('input[type="checkbox"]:checked').parent().addClass 'checkbox-checked'
+
+  $(".select-wrap").click ->
+    $(this).toggleClass "select-btn"
+  # end form ui
+
+  $(document).on "ajax:before", "a", (e) ->
+    dummy = () ->
+      false
+
+    target = $(e.target)
+    target.addClass("disabled")
+    target.bind "click", dummy
+    if target.find("i.fa").length == 0
+      target.prepend("<i class='fa fa-spinner fa-spin'></i> ")
+
+    target.on "ajax:success", (e) ->
+      target.removeClass("disabled")
+      target.find("i.fa-spinner").remove()
+      target.unbind "click", dummy
+
+    target.on "ajax:error", (e) ->
+      target.removeClass("disabled")
+      target.addClass("error")
+
+  $(document).on "ajax:before", "form", (e) ->
+    target = $(e.target)
+    button = target.find("button[type='submit']")
+    button.attr("disabled", "disabled")
+    button.prepend("<i class='fa fa-spinner fa-spin'></i>")
+
+    button.on "ajax:success", (e) ->
+      button.removeAttr("disabled")
+      button.find("i.fa-spinner").remove()
+
+  $(".history-graph").historyGraph()
+
+  return
+

data/app/assets/stylesheets/maily_herald/webui/application.css

@@ -0,0 +1,18 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require maily_herald/webui/bootstrap.min
+ *= require maily_herald/webui/bootstrap-datepicker
+ *= require maily_herald/webui/font-awesome.min
+ *= require maily_herald/webui/rickshaw
+ *= require_tree .
+ */
+

data/app/assets/stylesheets/maily_herald/webui/webui.sass

@@ -0,0 +1,846 @@
+@font-face
+  font-family: 'Nexa Free'
+  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.eot')
+  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype')
+  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.woff') format('woff')
+  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+@font-face
+  font-family: 'Open Sans'
+  src: asset-url('maily_herald/webui/opensans-regular-webfont.eot')
+  src: asset-url('maily_herald/webui/opensans-regular-webfont.eot?#iefix') format('embedded-opentype')
+  src: asset-url('maily_herald/webui/opensans-regular-webfont.woff') format('woff')
+  src: asset-url('maily_herald/webui/opensans-regular-webfont.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Open Sans'
+  src: asset-url('maily_herald/webui/opensans-italic-webfont.eot')
+  src: asset-url('maily_herald/webui/opensans-italic-webfont.eot?#iefix') format('embedded-opentype')
+  src: asset-url('maily_herald/webui/opensans-italic-webfont.woff') format('woff')
+  src: asset-url('maily_herald/webui/opensans-italic-webfont.ttf') format('truetype')
+  src: asset-url('maily_herald/webui/opensans-italic-webfont.svg#nexa_boldregular') format('svg')
+  font-weight: normal
+  font-style: italic
+
+@font-face
+  font-family: 'Open Sans'
+  src: asset-url('maily_herald/webui/opensans-bold-webfont.eot')
+  src: asset-url('maily_herald/webui/opensans-bold-webfont.eot?#iefix') format('embedded-opentype')
+  src: asset-url('maily_herald/webui/opensans-bold-webfont.woff') format('woff')
+  src: asset-url('maily_herald/webui/opensans-bold-webfont.ttf') format('truetype')
+  src: asset-url('maily_herald/webui/opensans-bold-webfont.svg#nexa_boldregular') format('svg')
+  font-weight: normal
+  font-style: italic
+
+@font-face
+  font-family: 'FontAwesome'
+  src: asset-url('maily_herald/webui/fontawesome-webfont.eot?v=4.2.0')
+  src: asset-url('maily_herald/webui/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), asset-url('maily_herald/webui/fontawesome-webfont.woff?v=4.2.0') format('woff'), asset-url('maily_herald/webui/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), asset-url('maily_herald/webui/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg')
+  font-weight: normal
+  font-style: normal
+
+// Variable
+$font_open: 'Open Sans', sans-serif
+
+$font_nexa: 'Nexa Free', sans-serif
+
+// General
+body 
+  font-family: $font_open
+  //font-size: 14px
+  //line-height: 1.5
+  color: #4b4847
+  background-color: #e7e2db
+
+// Headlines 
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 
+  text-transform: uppercase
+  margin: 0 0 20px
+  font-family: $font_nexa
+  font-weight: bold
+  &.border 
+    border-bottom: 2px solid #cbc6bf
+    padding-bottom: 5px
+  small 
+
+  &.red
+    color: #a51421
+  a.link 
+    position: relative
+    display: inline-block
+    padding: 0 0 0 10px
+    margin: 0 0 0 10px
+    &:before
+      content: '·'
+      color: #969291
+      font-family: $font_nexa
+      position: absolute
+      left: -3px
+      top: 0
+    &.link-sm 
+      font-size: 70%
+    &.link-help 
+      color: #bbb
+      &:hover
+        color: #000
+h1, .h1
+  a.link 
+    &.link-sm 
+      font-size: 60%
+
+span.translation_missing
+  color: #f00
+
+.hero
+  .logo
+    height: 50px
+    margin: 0 auto
+  .breadcrumb
+    margin: 0
+    li
+      line-height: 50px
+
+h1, .h2
+  font-size: 21px
+h2, .h2
+  font-size: 17px
+h3, .h3
+  font-size: 14px
+h4, .h4
+  font-size: 12px  
+
+
+// Links 
+a
+  color: #e4554f
+  &:hover, &:focus
+    color: #ff7067
+    text-decoration: none
+  &:active 
+    color: #a51421
+
+  &.alternative
+    color: #634a4d
+    &:hover
+      color: #957a7c
+    &:active 
+      color: #4a3335
+.btn-link
+  color: #e4554f
+  &:hover, &:focus
+    color: #ff7067
+    text-decoration: none
+  &:active 
+    color: #a51421
+
+a.disabled
+  color: #c8c8c8 !important
+  i.fa
+    animation: 2s linear 0s normal none infinite fa-spin
+  i.fa:before
+    content: "" !important
+a.error
+  color: #f00 !important
+  i.fa:before
+    content: "" !important
+
+em 
+  font-style: italic
+
+strong
+  font-weight: 700
+
+hr
+  border-top: 2px solid #cbc6bf
+
+p 
+  margin: 0 0 20px
+
+pre
+  background: #e7e2db
+  font-size: 12px
+  border: 1px solid #cbc6bf
+  border-radius: 0
+  max-height: 400px
+  white-space: pre-wrap
+
+.no-margin 
+  margin-bottom: 0
+
+// Breadcrumbs
+.breadcrumb
+  background: none
+  padding: 0
+  > li 
+    + li 
+      &:before 
+        content: '>'
+        font-family: $font_nexa
+        color: #969291
+    a 
+      color: #e4554f
+      &:hover 
+        color: #ff7067
+  > .active 
+    color: #1f1d1c
+
+// Pagination 
+.pagination-wrapper
+  text-align: right
+.pagination
+  border: 1px solid #e7e2db
+  > li
+    > a
+      border: 1px solid #e7e2db
+      color: #634a4d
+      &:hover 
+        color: #957a7c
+
+    &:first-child
+      > a, > span
+        border-bottom-left-radius: 2px
+        border-top-left-radius: 2px
+
+    &:last-child 
+      > a, > span 
+        border-top-right-radius: 2px
+        border-bottom-right-radius: 2px
+
+  > .active 
+    > a, > span
+      background: #e7e2db
+      color: #4a3335
+      border-color: #e7e2db
+  span 
+    position: relative
+    float: left
+    margin-left: -1px
+    line-height: 1.428571429
+    text-decoration: none
+    background-color: #fff
+    border: 1px solid #e7e2db
+    color: #634a4d
+    font-weight: 700
+    &.first 
+      margin-left: 0
+    &.current 
+      background: #e7e2db
+      padding: 10px 15px
+      color: #4a3335
+    a
+      color: #634a4d
+      padding: 10px 15px
+      display: inline-block
+      &:hover 
+        color: #957a7c
+
+
+
+// Buttons
+button i
+  margin-right: 5px
+
+.btn
+  border-radius: 2px
+  position: relative
+
+.btn-webui
+  text-transform: uppercase
+  color: #fff
+  font-weight: bold
+  background: #e4554f
+  padding: 6px 20px
+  box-shadow: 0px 5px 0 #a51421
+  &:hover
+    background: #ff7067 !important
+    color: #fff
+  &:active 
+    background: #e4554f !important
+    box-shadow: 0px -5px 0 #a51421
+    color: #fff
+    top: 5px
+  .glyphicon 
+    color: #cbc6bf
+
+.btn-webui-alternative 
+  text-transform: uppercase
+  color: #fff
+  font-weight: bold
+  background: #634a4d
+  padding: 6px 20px
+  box-shadow: 0px 5px 0 #4a3335
+  &:hover 
+    background: #957a7c
+    color: #fff
+  &:active 
+    background: #634a4d
+    box-shadow: 0px -5px 0 #4a3335
+    color: #fff
+    top: 5px
+
+// Nav
+.context-menu
+  text-align: right
+  margin: 0 0 20px
+  form
+    display: inline-block
+
+.nav 
+  &.nav-main 
+    > li 
+      float: left
+      font-family: $font_nexa
+      font-weight: bold
+      > a 
+        border-radius: 0
+        text-transform: uppercase
+        color: #634a4d
+        font-weight: bold
+        padding: 15px 20px
+        color: #e4554f
+        &:hover 
+          background: none
+          color: #ff7067
+      &.active 
+        > a 
+          background: #fff
+          color: #634a4d
+
+  &.nav-secondary 
+    border-radius: 2px
+    border: 2px solid #cbc6bf
+    display: inline-block
+    background: #fff
+    > li 
+      float: left
+      position: relative
+      margin: 0 1px 0 0
+      &:after 
+        content: '·'
+        color: #969291
+        font-family: $font_nexa
+        position: absolute
+        right: -2px
+        top: 28%
+      &:last-child 
+        margin: 0
+        &:after 
+          display: none
+      a 
+        text-transform: uppercase
+        font-weight: bold
+        float: left
+        padding: 5px 15px
+        &:hover 
+          background: none
+          color: #ff7067
+      &.active 
+        > a
+          background: none
+          color: #634a4d
+
+      strong 
+        display: block
+        padding: 10px 0 10px 15px
+        float: left
+
+  &.nav-justified 
+    > li 
+      float: none
+
+.glyphicon 
+  color: #634a4d
+  font-size: 12px
+
+// Dropdown
+.dropdown 
+  background: #fff
+  display: inline-block
+  > a 
+    text-decoration: none
+    color: #634a4d
+    outline: none
+    line-height: 38px
+    span 
+      display: inline-block
+      padding: 0 50px 0 20px
+      background: asset-url('maily_herald/webui/sprite-dropdown.png') no-repeat
+      background-position: 100% 0
+      min-height: 40px
+  &.open
+    > a 
+      span 
+        background-position: 100% 100%
+
+.dropdown-menu 
+  border-radius: 0
+  width: 100%
+  border: none
+  margin: 20px 0 0
+  padding: 20px 0
+  box-shadow: none
+  //left: 0 !important
+  &:before 
+    content: ''
+    position: absolute
+    top: -10px
+    left: 50%
+    margin-left: -5px
+    width: 0
+    height: 0
+    border-left: 10px solid transparent
+    border-right: 10px solid transparent
+    border-bottom: 10px solid white
+  > li 
+    a 
+      font-size: 12px
+      line-height: 20px
+      color: #e4554f
+      padding: 0 20px
+
+
+// Table
+.table-listing
+  > thead 
+    > tr
+      > th
+        border-bottom: 3px solid #cbc6bf
+        padding: 10px 20px 10px 0
+  > tbody
+    > tr
+      > td
+        border-bottom: 1px solid #cbc6bf
+        padding: 10px 20px 10px 0
+      &:last-child 
+        > td 
+          border-bottom: 3px solid #cbc6bf
+
+
+// Forms
+
+form, .form-horizontal
+  ::-webkit-input-placeholder
+    color:    #b0b0b0
+  \:-moz-placeholder
+    color:    #b0b0b0
+    opacity:  1
+  ::-moz-placeholder
+    color:    #b0b0b0
+    opacity:  1
+  \:-ms-input-placeholder
+    color:    #b0b0b0
+
+  label
+    font-weight: normal
+  input
+    &[type='text'], &[type='email'], &[type='password']
+      //line-height: 22px
+      //height: 30px
+      border: 2px solid #969291
+      //padding: 0 10px
+      //min-width: 180px
+      //outline: none
+      //background-color: #fff
+      //border-radius: 3px
+      &:focus 
+        border-color: #ff7067 
+    &[type='submit']
+
+  textarea 
+    border: 2px solid #969291
+    background-color: #fff
+    border-radius: 3px
+    outline: none
+    padding: 5px 10px
+    &:focus 
+      border-color: #ff7067
+  .select-wrap
+    position: relative
+    display: inline-block
+    background: asset-url('maily_herald/webui/sprite-dropdown.png') no-repeat
+    background-position: 100% 0
+    height: 40px
+    min-width: 202px
+    overflow: hidden
+    border: 2px solid #969291
+    border-radius: 3px
+    &.select-btn 
+      background-position: 100% 95%
+  select
+    height: 38px
+    border: none
+    padding: 7px 0 6px 10px
+    width: 107%
+    outline: none
+    border-radius: 0
+    overflow: hidden
+    outline: none
+    -webkit-appearance: none
+    -moz-appearance: none
+    appearance: none
+    background-color: transparent
+    background-image: none
+  .field_with_errors, .has-error
+    input
+      &[type='text'], &[type='email'], &[type='password']
+        border-color: #a51421
+    select, .select-wrap
+      border-color: #a51421
+
+.radio, .checkbox 
+  padding-left: 0
+  display: inline-block
+  padding-right: 21px
+  .webui-input, .radio-btn, .check-box 
+    display: inline-block
+    float: left
+  > label
+    padding-left: 2px
+
+.checkbox 
+  color: #4b4847
+  font-size: 14px
+  cursor: pointer
+  input[type='checkbox'] 
+    visibility: hidden
+  .checkbox-wrap
+    display: inline-block
+    width: 20px
+    height: 20px
+    margin: 0 10px 0 0
+    vertical-align: middle
+    background: asset-url('maily_herald/webui/sprite-form.png') no-repeat 0 0
+    cursor: pointer
+    outline: none
+    &.checkbox-checked
+      background-position: -29px 0
+  &.field_with_errors, &.has-error
+    .check-box
+      background-position: -60px 0
+      &.checkbox-checked
+        background-position: -29px 0  
+
+.radio
+  color: #4b4847
+  font-size: 14px
+  cursor: pointer
+  position: relative
+
+  input[type='radio']
+    visibility: hidden
+  > .radio-btn
+    display: inline-block
+    width: 20px
+    height: 20px
+    margin: 0 10px 0 0
+    vertical-align: middle
+    background: asset-url('maily_herald/webui/sprite-form.png') no-repeat 0 -45px
+    cursor: pointer
+    outline: none
+    &.radio-checked 
+      background: asset-url('maily_herald/webui/sprite-form.png') no-repeat -29px -45px
+  &.field_with_errors, &.has-error
+    > .radio-btn
+      background-position: -60px -45px
+      &.radio-checked 
+        background: asset-url('maily_herald/webui/sprite-form.png') no-repeat -29px -45px
+
+.input-group
+  .input-group-btn
+    .btn
+      border: 2px solid #969291
+      padding: 5px 12px
+      i
+        margin: 0
+    &:last-child > .btn, &:last-child > .btn-group
+      margin-left: -2px
+  .input-group-addon
+    border: 2px solid #969291
+    border-left: none
+
+
+// Modal
+.modal
+  background: rgba(#634a4d, .6)
+.modal-dialog
+  width: 800px
+
+.modal-content
+  border-radius: 0
+  top: 30px
+  .modal-header
+    background: #fff
+    border-bottom: 2px solid #cbc6bf
+    h3
+      margin: 0
+    .close  
+      color: #e4554f
+      font-family: $font_nexa
+      font-size: 30px
+      opacity: 1
+      &:hover
+        opacity: .5
+  .modal-footer
+    border-top: none
+#modal-confirmation
+  .modal-dialog
+    width: 400px
+
+// Tooltip
+.tooltip
+  position: absolute
+  z-index: 1030
+  display: block
+  font-size: 12px
+  line-height: 1.4
+  opacity: 0
+  filter: alpha(opacity = 0)
+  visibility: visible
+  &.in
+    opacity: 1
+    filter: alpha(opacity = 1)
+  &.top
+    padding: 5px 0 8px
+    margin-top: -4px
+  &.right
+    padding: 0 5px 0 8px
+    margin-left: 4px
+  &.bottom
+    padding: 8px 0 5px
+    margin-top: 4px
+  &.left
+    padding: 0 8px 0 5px
+    margin-left: -4px
+
+.tooltip-inner
+  font-family: $font_open
+  font-weight: normal
+  text-transform: none
+  max-width: 400px
+  min-width: 200px
+  padding: 15px 15px
+  color: #4b4847
+  text-align: left
+  text-decoration: none
+  background-color: #fff
+  border-radius: 0
+  border: 2px solid #634a4d
+  white-space: normal
+
+.tooltip-arrow
+  position: absolute
+  width: 20px 
+  height: 10px
+  border: none !important
+
+.tooltip
+  &.top .tooltip-arrow
+    bottom: 0
+    left: 50%
+    margin-left: -10px
+    background: asset-url('maily_herald/webui/arrow-top.png') no-repeat
+  &.top-left .tooltip-arrow
+    width: 10px
+    height: 20px
+    bottom: 0
+    left: 10px
+    background: asset-url('maily_herald/webui/arrow-left.png') no-repeat
+  &.top-right .tooltip-arrow
+    width: 10px
+    height: 20px
+    right: 10px
+    bottom: 0
+    background: asset-url('maily_herald/webui/arrow-right.png') no-repeat
+  &.right .tooltip-arrow
+    width: 10px
+    height: 20px
+    top: 50%
+    left: 0
+    margin-top: -10px
+    background: asset-url('maily_herald/webui/arrow-right.png') no-repeat
+  &.left .tooltip-arrow
+    width: 10px
+    height: 20px
+    top: 50%
+    right: 0
+    margin-top: -10px
+    background: asset-url('maily_herald/webui/arrow-left.png') no-repeat
+  &.bottom .tooltip-arrow
+    top: 0
+    left: 50%
+    background: asset-url('maily_herald/webui/arrow-bottom.png') no-repeat
+    margin-left: -10px
+  &.bottom-left .tooltip-arrow
+    width: 10px
+    height: 20px
+    top: 0
+    left: 10px
+    background: asset-url('maily_herald/webui/arrow-left.png') no-repeat
+  &.bottom-right .tooltip-arrow
+    width: 10px
+    height: 20px
+    top: 0
+    right: 10px
+    background: asset-url('maily_herald/webui/arrow-right.png') no-repeat
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 
+  .tooltip.right .tooltip-inner, .popover-content
+    font-family: $font_open
+    text-transform: none
+    text-align: left
+    font-weight: normal
+    font-size: 14px
+.popover-content
+  p
+    margin-bottom: 10px
+  .btn.btn-webui
+    padding: 3px 10px
+  
+
+
+// Box
+.box 
+  border: 2px solid #cbc6bf
+  padding: 15px
+  background: #fff
+  margin: 0 0 20px
+  &.darken 
+    background: #e7e2db
+  &.noborder 
+    border: none
+  
+// dl-horizontal
+.dl-horizontal 
+  &:last-child 
+    margin-bottom: 0
+  dt
+    color: #969291
+    font-weight: 400
+    margin: 0 0 5px
+    &:last-of-type
+      margin: 0
+
+// Custom
+.hero
+  padding: 20px 0
+  h1 
+    margin: 0
+    line-height: 38px
+
+.content-container 
+  padding: 40px
+  background: #fff
+  margin: 0 0 20px
+  .breadcrumb 
+    line-height: 45px
+
+.smart-listing 
+  margin-bottom: 30px
+  .pagination 
+    margin: 0 0 5px
+  .pagination-per-page 
+    text-align: right !important
+  tr
+    td.actions
+      &:after
+        content: '·'
+        padding: 0 7px
+        //color: #b1b1b1
+        color: #e4554f
+        //margin-left: -10px
+        margin-left: -22px
+      .text-muted
+        color: #aaa
+    &:hover
+      td.actions
+        &:after
+          display: none
+      td
+        background-color: #f3f3f3 !important
+      td.actions
+        .action-group
+          visibility: visible
+          &:before
+            visibility: visible
+    td.actions
+      white-space: nowrap
+      text-align: right
+      a.show
+        display: inline !important
+      .action-group
+        display: inline-block
+        visibility: hidden
+        &:before
+          content: '·'
+          color: #e4554f
+          font-family: $font_nexa
+          padding: 0 5px
+          visibility: hidden
+        &:first-child:before
+          display: none
+
+// Search
+.filter-search 
+  position: relative
+  display: inline-block
+  input[type='text']
+    padding-right: 36px
+    max-width: 200px
+  input[type='submit'], button
+    position: absolute
+    top: 0 
+    right: 0
+    bottom: 0
+    background: none
+    color: #4b4847
+    outline: none !important
+    &.disabled
+      color: #969291
+    &:active 
+      box-shadow: none
+
+.footer 
+  margin: 0 0 20px
+  font-size: 13px
+  padding: 0 40px
+  color: #777
+  strong
+    color: #4b4847
+    font-weight: normal
+  a
+    color: #4b4847
+    &:hover
+      color: #000
+  span
+    display: inline-block
+    &:after 
+      content: '·'
+      color: #969291
+      font-family: $font_nexa
+      padding: 0 5px
+    &:last-child 
+      margin: 0
+      &:after 
+        display: none
+
+
+.mailing-mailer
+  white-space: nowrap
+  i
+    margin-right: -5px
+
+.datepicker-dropdown
+  width: auto
+
+.statusbox
+  text-align: center
+
+.dashboard-periods
+  a
+    color: #777
+    &.active, &:hover
+      color: #4b4847