ndr_ui 4.1.1 → 5.0.0

data/app/helpers/ndr_ui/bootstrap/modal_helper.rb

@@ -50,6 +50,7 @@ module NdrUi
       #   # => <div class="modal-header">Check it out!!</div>
       def bootstrap_modal_header_tag(*args, &block)
         return bootstrap_modal_header_tag(capture(&block), *args) if block_given?
+
         options = args.extract_options!
         options.stringify_keys!
 
@@ -58,10 +59,11 @@ module NdrUi
         # end
 
         heading = content_tag(:h4, args.first, class: 'modal-title')
-        heading = button_tag(content_tag(:span, '×', "aria-hidden": 'true'),
-                             type: 'button', class: 'close', "data-dismiss": 'modal',
-                             "aria-label": 'Close') + heading if options.delete('dismissible')
-
+        if options.delete('dismissible')
+          heading = button_tag(content_tag(:span, '×', 'aria-hidden': 'true'),
+                               type: 'button', class: 'btn-close', 'data-bs-dismiss': 'modal',
+                               'aria-label': 'Close') + heading
+        end
         content_tag(:div, heading, class: 'modal-header')
       end
 
@@ -109,21 +111,21 @@ module NdrUi
       #   <%= bootstrap_modal_footer_tag('Button text', readonly: true)
       #   # =>
       #   <div class="modal-footer">
-      #     <button name="button" type="submit" class="btn btn-default" data-dismiss="modal">
+      #     <button name="button" type="submit" class="btn btn-default" data-bs-dismiss="modal">
       #       Close
       #     </button>
       #   </div>
       #
       #   <%= bootstrap_modal_footer_tag(readonly: false) do
-      #     button_tag('Non-readonly default', class: 'btn btn-default', "data-dismiss": 'modal') +
-      #       button_tag('Non-readonly primary', class: 'btn btn-primary', "data-dismiss": 'modal')
+      #     button_tag('Non-readonly default', class: 'btn btn-default', 'data-bs-dismiss': 'modal') +
+      #       button_tag('Non-readonly primary', class: 'btn btn-primary', 'data-bs-dismiss': 'modal')
       #   end %>
       #   # =>
       #   <div class="modal-footer">
-      #     <button name="button" type="submit" class="btn btn-default" data-dismiss="modal">
+      #     <button name="button" type="submit" class="btn btn-default" data-bs-dismiss="modal">
       #       Non-readonly default
       #     </button>
-      #     <button name="button" type="submit" class="btn btn-primary" data-dismiss="modal">
+      #     <button name="button" type="submit" class="btn btn-primary" data-bs-dismiss="modal">
       #       Non-readonly primary
       #     </button>
       #   </div>
@@ -131,7 +133,7 @@ module NdrUi
       #   <%= bootstrap_modal_footer_tag('Button text') %>
       #   # =>
       #   <div class="modal-footer">
-      #     <button name="button" type="submit" class="btn btn-default" data-dismiss="modal">
+      #     <button name="button" type="submit" class="btn btn-default" data-bs-dismiss="modal">
       #       Button text
       #     </button>
       #   </div>
@@ -139,7 +141,7 @@ module NdrUi
       #   <%= bootstrap_modal_footer_tag %>
       #   # =>
       #   <div class="modal-footer">
-      #     <button name="button" type="submit" class="btn btn-default" data-dismiss="modal">
+      #     <button name="button" type="submit" class="btn btn-default" data-bs-dismiss="modal">
       #       Don&#39;t save
       #     </button>
       #     <input type="submit" name="commit" value="Save" class="btn btn-primary"
@@ -189,7 +191,7 @@ module NdrUi
       #         Pear form
       #       </div>
       #       <div class="modal-footer">
-      #         <button type="button" class="btn btn-default" data-dismiss="modal">
+      #         <button type="button" class="btn btn-default" data-bs-dismiss="modal">
       #           Don't save
       #         </button>
       #         <input name="commit" class="btn-primary btn" data-disable-with="Saving&hellip;"
@@ -216,7 +218,7 @@ module NdrUi
       end
 
       def bootstrap_modal_button(label)
-        button_tag(label, class: 'btn btn-default', "data-dismiss": 'modal')
+        button_tag(label, class: 'btn btn-default', 'data-bs-dismiss': 'modal')
       end
 
       private

data/app/helpers/ndr_ui/bootstrap_helper.rb

@@ -1,10 +1,23 @@
 module NdrUi
   # Provides helper methods for the Twitter Bootstrap framework
   module BootstrapHelper # rubocop:disable Metrics/ModuleLength
+    include ::NdrUi::Bootstrap::AccordionHelper
     include ::NdrUi::Bootstrap::BreadcrumbsHelper
+    include ::NdrUi::Bootstrap::CardHelper
     include ::NdrUi::Bootstrap::DropdownHelper
     include ::NdrUi::Bootstrap::ModalHelper
-    include ::NdrUi::Bootstrap::PanelHelper
+
+    TYPE_STYLE_MAP = {
+      important: :danger,
+      default: :secondary
+    }.freeze
+
+    # ensure `form-control` and `form-select` classes added to select_tag
+    def select_tag(name, option_tags = nil, options = {})
+      options = css_class_options_merge(options, %w[form-control form-select])
+
+      super(name, option_tags, options)
+    end
 
     # Creates an alert box of the given +type+. It supports the following alert box types
     # <tt>:alert</tt>, <tt>:danger</tt>, <tt>:info</tt> and <tt>:success</tt>.
@@ -29,8 +42,8 @@ module NdrUi
     # ==== Examples
     #
     #   <%= bootstrap_alert_tag(:info, 'Check it out!!') %>
-    #   # => <div class="alert alert-info"><a href="#" class="close"
-    #   data-dismiss="alert">&times;</a>Check it out!!</div>
+    #   # => <div class="alert alert-info"><a href="#" class="btn-close"
+    #   data-bs-dismiss="alert"></a>Check it out!!</div>
     #
     # You can use a block as well if your alert message is hard to fit into the message parameter.
     # ERb example:
@@ -38,8 +51,8 @@ module NdrUi
     #   <%= bootstrap_alert_tag(:info) do %>
     #     Check it out!!
     #   <% end %>
-    #   # => <div class="alert alert-info"><button type="button" class="close"
-    #   data-dismiss="alert">&times;</button>Check it out!!</div>
+    #   # => <div class="alert alert-info"><button type="button" class="btn-close"
+    #   data-bs-dismiss="alert"></button>Check it out!!</div>
     #
     # Ids for css and/or javascript are easy to produce:
     #
@@ -51,7 +64,7 @@ module NdrUi
       if block_given?
         message = capture(&block)
         options = args[1] || {}
-        return bootstrap_alert_tag(type, message, options)
+        bootstrap_alert_tag(type, message, options)
       else
         message = args[1] || ''
         options = args[2] || {}
@@ -65,10 +78,9 @@ module NdrUi
         end
         options['class'] = classes.join(' ')
 
-        message = button_tag('&times;'.html_safe,
-                             type: 'button',
-                             class: 'close',
-                             "data-dismiss": 'alert') + message if options.delete('dismissible')
+        if options.delete('dismissible')
+          message = button_tag('', type: 'button', class: 'btn-close', 'data-bs-dismiss': 'alert') + message
+        end
         content_tag(:div, message, options)
       end
     end
@@ -87,8 +99,8 @@ module NdrUi
     #   # => <span class="label label-info">Check it out!!</span>
     #
     def bootstrap_label_tag(type, message)
-      classes = ['label', "label-#{type}"]
-      content_tag(:span, message, class: classes.join(' '))
+      style = TYPE_STYLE_MAP[type] || type
+      content_tag(:span, message, class: "badge text-bg-#{style}")
     end
 
     # Creates an bootstrap badge of the given +type+. Bootstrap 3 does not support any types.
@@ -100,13 +112,11 @@ module NdrUi
     # ==== Examples
     #
     #   <%= bootstrap_badge_tag(:success, 'Check it out!!') %>
-    #   # => <span class="badge">Check it out!!</span> <%# Bootstrap 3 %>
+    #   # => <span class="badge rounded-pill text-bg-success">Check it out!!</span>
     #
-    # TODO: In bootstrap 4, these will likely need to be implemented using "pill labels",
-    #       which will once again allow the `type` argument to colour them.
-    #
-    def bootstrap_badge_tag(_type, count)
-      content_tag(:span, count, class: 'badge')
+    def bootstrap_badge_tag(type, count)
+      style = TYPE_STYLE_MAP[type] || type
+      content_tag(:span, count, class: "badge rounded-pill text-bg-#{style}")
     end
 
     # Creates a simple bootstrap navigation caret.
@@ -132,13 +142,15 @@ module NdrUi
     # ==== Examples
     #
     #   <%= bootstrap_dropdown_toggle_tag('Check it out!!') %>
-    #   # => <a href="#" class="dropdown-toggle" data-toggle="dropdown">Check it
-    #   out!! <b class="caret"></b></a>
+    #   # => <a href="#" role="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+    #   Check it out!! <b class="caret"></b></a>
     def bootstrap_dropdown_toggle_tag(body)
       link_to(ERB::Util.html_escape(body) + ' '.html_safe + bootstrap_caret_tag,
               '#',
-              class: 'dropdown-toggle',
-              'data-toggle': 'dropdown')
+              role: 'button',
+              class: 'nav-link dropdown-toggle',
+              'data-bs-toggle': 'dropdown',
+              'aria-expanded': 'false')
     end
 
     # Creates a simple bootstrap icon.
@@ -149,10 +161,17 @@ module NdrUi
     #
     # ==== Examples
     #
-    #   <%= bootstrap_icon_tag(:search) %>
+    #   <%= bootstrap_icon_tag(:search, :bi) %>
+    #   # => <i class="bi-search"></i>
+    #
+    #   <%= bootstrap_icon_tag(:search, :glyphicon) %>
     #   # => <span class="glyphicon glyphicon-search"></span>
-    def bootstrap_icon_tag(type)
-      content_tag(:span, '', class: "glyphicon glyphicon-#{type}")
+    def bootstrap_icon_tag(type, set = :glyphicon)
+      if set == :bi
+        content_tag(:i, '', class: "bi-#{type}")
+      else
+        content_tag(:span, '', class: "glyphicon glyphicon-#{type}")
+      end
     end
 
     # Creates a simple bootstrap icon spinner.
@@ -184,16 +203,16 @@ module NdrUi
     # ==== Examples
     #
     #   <%= bootstrap_tab_nav_tag("Fruits", "#fruits", true) %>
-    #   # => <li class="active"><a href="#fruits" data-toggle="tab">Fruits</a></li>
+    #   # => <li class="active"><a href="#fruits" data-bs-toggle="tab">Fruits</a></li>
     def bootstrap_tab_nav_tag(title, linkto, active = false)
       content_tag('li',
-                  link_to(title, linkto, "data-toggle": 'tab'),
+                  link_to(title, linkto, 'data-bs-toggle': 'tab'),
                   active ? { class: 'active' } : {})
     end
 
     # Convenience wrapper for a bootstrap_list_link_to with badge
     def bootstrap_list_badge_and_link_to(type, count, name, path)
-      html = content_tag(:div, bootstrap_badge_tag(type, count), class: 'pull-right') + name
+      html = content_tag(:div, bootstrap_badge_tag(type, count), class: 'float-end') + name
       bootstrap_list_link_to(html, path)
     end
 
@@ -219,25 +238,21 @@ module NdrUi
 
     # Identical signature to form_for, but uses NdrUi::BootstrapBuilder.
     # See ActionView::Helpers::FormHelper for details
-    def bootstrap_form_for(record_or_name_or_array, *args, &proc)
+    def bootstrap_form_for(record_or_name_or_array, *args, &_proc)
       options = args.extract_options!
       options[:html] ||= {}
 
       # :horizontal
-      if horizontal = options.delete(:horizontal)
-        # set the form html class for horizontal bootstrap forms
-        options[:html][:class] ||= ''
-        classes = (options[:html][:class].split(' ') << 'form-horizontal').uniq.join(' ')
-        options[:html][:class] = classes
-      end
+      horizontal = options.delete(:horizontal)
 
       # stimuls controller, default `form_controller`
       options[:html][:'data-controller'] ||= ''
-      controllers = (options[:html][:'data-controller'].split(' ') << 'form').uniq.join(' ')
+      controllers = (options[:html][:'data-controller'].split << 'form').uniq.join(' ')
       options[:html][:'data-controller'] = controllers
 
       # We switch autocomplete off by default
       raise 'autocomplete should be defined an html option' if options[:autocomplete]
+
       options[:html][:autocomplete] ||= 'off'
 
       form_for(record_or_name_or_array, *(args << options.merge(builder: NdrUi::BootstrapBuilder))) do |form|
@@ -256,21 +271,14 @@ module NdrUi
       options[:builder] = NdrUi::BootstrapBuilder
       horizontal = options.delete(:horizontal)
 
-      # :horizontal
-      if horizontal
-        # set the form html class for horizontal bootstrap forms
-        options[:html][:class] ||= ''
-        classes = (options[:html][:class].split(' ') << 'form-horizontal').uniq.join(' ')
-        options[:html][:class] = classes
-      end
-
       # stimuls controller, default `form_controller`
       options[:html][:'data-controller'] ||= ''
-      controllers = (options[:html][:'data-controller'].split(' ') << 'form').uniq.join(' ')
+      controllers = (options[:html][:'data-controller'].split << 'form').uniq.join(' ')
       options[:html][:'data-controller'] = controllers
 
       # We switch autocomplete off by default
       raise 'autocomplete should be defined an html option' if options[:autocomplete]
+
       options[:html][:autocomplete] ||= 'off'
 
       form_with(**options) do |form|
@@ -331,7 +339,7 @@ module NdrUi
     #
     #   <%= bootstrap_progressbar_tag(40), type: :danger %>
     #   # => <div class="progress progress-striped active" title="40%"><div
-    #   class="progress-bar progress-bar-danger" style="width:40%"></div></div>
+    #   class="progress-bar bg-danger" style="width:40%"></div></div>
     #
     # ==== Browser compatibility
     #
@@ -349,7 +357,7 @@ module NdrUi
       classes << 'progress-striped'
 
       type = options.delete('type').to_s
-      type = " progress-bar-#{type}" unless type.blank?
+      type = " bg-#{type}" if type.present?
 
       # Animate the progress bar unless something has broken:
       classes << 'active' unless type == 'danger'
@@ -372,22 +380,18 @@ module NdrUi
     #   bootstrap_horizontal_form_group("The Label", [3, 9]) { 'This is the content' }
     #   # =>
     #     <div class="form-group">
-    #       <label class="col-sm-3 control-label">The Label</label>
+    #       <label class="col-sm-3 col-form-label">The Label</label>
     #       <div class="col-sm-9">This is the content</div>
     #     </div>
     #
     def bootstrap_horizontal_form_group(label = nil, ratio = [2, 10], &block)
-      label, ratio = nil, label if label.is_a?(Array)
-
       l, r   = ratio[0..1].map(&:to_i)
       offset = label.nil? ? " col-sm-offset-#{l}" : ''
 
       # Main content:
       content = content_tag(:div, class: "col-sm-#{r}" + offset, &block)
       # Prepend optional label:
-      unless label.nil?
-        content = content_tag(:label, label, class: "col-sm-#{l} control-label") + content
-      end
+      content = content_tag(:label, label, class: "col-sm-#{l} col-form-label") + content unless label.nil?
 
       content_tag(:div, content, class: 'form-group')
     end
@@ -454,12 +458,12 @@ module NdrUi
     # ==== Examples
     #
     #   <%= new_link('#') %>
-    #   # => <a title="New" class="btn btn-primary btn-xs" href="#">
+    #   # => <a title="New" class="btn btn-primary btn-sm" href="#">
     #          <span class="glyphicon glyphicon-plus-sign"></span>
     #        </a>
     #
     #   <%= new_link(Post.new) %>
-    #   # => <a title="New" class="btn btn-primary btn-xs" href="/posts/new">
+    #   # => <a title="New" class="btn btn-primary btn-sm" href="/posts/new">
     #          <span class="glyphicon glyphicon-plus-sign"></span>
     #        </a>
     #
@@ -469,7 +473,7 @@ module NdrUi
       path = new_polymorphic_path(path) if can_generate_polymorphic_path?(path)
 
       defaults = {
-        icon: 'plus-sign', title: 'New', path: path, class: 'btn btn-primary btn-xs'
+        icon: 'plus-sign', title: 'New', path: path, class: 'btn btn-primary btn-sm'
       }
 
       link_to_with_icon(defaults.merge(options))
@@ -484,7 +488,7 @@ module NdrUi
     # ==== Examples
     #
     #   <%= details_link('#') %>
-    #   # => <a title="Details" class="btn btn-default btn-xs" href="#">
+    #   # => <a title="Details" class="btn btn-default btn-sm" href="#">
     #          <span class="glyphicon glyphicon-share-alt"></span>
     #        </a>
     #
@@ -503,7 +507,7 @@ module NdrUi
     # ==== Examples
     #
     #   <%= edit_link(#) %>
-    #   # => <a title="Edit" class="btn btn-default btn-xs" href="#">
+    #   # => <a title="Edit" class="btn btn-default btn-sm" href="#">
     #          <span class="glyphicon glyphicon-pencil"></span>
     #        </a>
     #
@@ -524,7 +528,7 @@ module NdrUi
     # ==== Examples
     #
     #   <%= delete_link('#') %>
-    #   # => <a title="Delete" class="btn btn-xs btn-danger" rel="nofollow" href="#"
+    #   # => <a title="Delete" class="btn btn-sm btn-outline-danger" rel="nofollow" href="#"
     #           data-method="delete" data-confirm="Are you sure?">
     #          <span class="glyphicon glyphicon-trash icon-white"></span>
     #        </a>'
@@ -533,8 +537,8 @@ module NdrUi
 
       defaults = {
         icon: 'trash icon-white', title: 'Delete', path: path,
-        class: 'btn btn-xs btn-danger', method: :delete,
-        'data-confirm': I18n.translate(:'ndr_ui.confirm_delete', locale: options[:locale])
+        class: 'btn btn-sm btn-outline-danger', method: :delete,
+        'data-confirm': I18n.t(:'ndr_ui.confirm_delete', locale: options[:locale])
       }
 
       link_to_with_icon(defaults.merge(options))
@@ -575,13 +579,13 @@ module NdrUi
     # ==== Examples
     #
     #   <%= link_to_with_icon( { icon: 'trash icon-white', title: 'Delete', path: '#' } ) %>
-    #   # => <a title="Delete" class="btn btn-default btn-xs" href="#">
+    #   # => <a title="Delete" class="btn btn-default btn-sm" href="#">
     #          <span class="glyphicon glyphicon-trash icon-white"></span>
     #        </a>'
     def link_to_with_icon(options = {})
-      options[:class] ||= 'btn btn-default btn-xs'
+      options[:class] ||= 'btn btn-default btn-sm'
       icon = bootstrap_icon_tag(options.delete(:icon))
-      content = options.delete(:text) ? icon + ' ' + options[:title] : icon
+      content = options.delete(:text) ? "#{icon} #{options[:title]}" : icon
       link_to content, options.delete(:path), options
     end
 

data/app/helpers/ndr_ui/css_helper.rb

@@ -6,10 +6,7 @@ module NdrUi
       options = options.symbolize_keys
       css_classes += options[:class].split(' ') if options.include?(:class)
       yield(css_classes) if block_given?
-      options[:class] = css_classes.join(' ') unless css_classes.empty?
-      unless css_classes == css_classes.uniq
-        fail "Multiple css class definitions: #{css_classes.inspect}"
-      end
+      options[:class] = css_classes.uniq.join(' ') unless css_classes.empty?
 
       options
     end

data/lib/ndr_ui/engine.rb

@@ -1,6 +1,7 @@
-require 'bootstrap-sass/engine'
+require 'bootstrap/engine'
 require 'jquery-rails'
 require 'sprockets/railtie'
+require 'popper_js'
 
 module NdrUi
   # This is where we define the base class for the engine

data/lib/ndr_ui/version.rb

@@ -2,5 +2,5 @@
 
 # This stores the current version of the NdrUi gem. Use semantic versioning http://semver.org
 module NdrUi
-  VERSION = '4.1.1'
+  VERSION = '5.0.0'
 end

data/vendor/assets/{bootstrap-datepicker-1.6.0-dist → bootstrap-datepicker-1.7.1-dist}/css/bootstrap-datepicker.css

@@ -1,10 +1,9 @@
 /*!
- * Datepicker for Bootstrap v1.6.0 (https://github.com/eternicode/bootstrap-datepicker)
+ * Datepicker for Bootstrap v1.7.1 (https://github.com/uxsolutions/bootstrap-datepicker)
  *
- * Copyright 2012 Stefan Petre
- * Improvements by Andrew Rowls
  * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  */
+
 .datepicker {
   padding: 4px;
   -webkit-border-radius: 4px;
@@ -15,10 +14,13 @@
 .datepicker-inline {
   width: 220px;
 }
-.datepicker.datepicker-rtl {
+.datepicker-rtl {
   direction: rtl;
 }
-.datepicker.datepicker-rtl table tr td span {
+.datepicker-rtl.dropdown-menu {
+  left: auto;
+}
+.datepicker-rtl table tr td span {
   float: right;
 }
 .datepicker-dropdown {
@@ -30,7 +32,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #999999;
+  border-bottom: 7px solid #999;
   border-top: 0;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   position: absolute;
@@ -40,7 +42,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
+  border-bottom: 6px solid #fff;
   border-top: 0;
   position: absolute;
 }
@@ -65,15 +67,12 @@
 .datepicker-dropdown.datepicker-orient-top:before {
   bottom: -7px;
   border-bottom: 0;
-  border-top: 7px solid #999999;
+  border-top: 7px solid #999;
 }
 .datepicker-dropdown.datepicker-orient-top:after {
   bottom: -6px;
   border-bottom: 0;
-  border-top: 6px solid #ffffff;
-}
-.datepicker > div {
-  display: none;
+  border-top: 6px solid #fff;
 }
 .datepicker table {
   margin: 0;
@@ -100,17 +99,17 @@
 }
 .datepicker table tr td.day:hover,
 .datepicker table tr td.day.focused {
-  background: #eeeeee;
+  background: #eee;
   cursor: pointer;
 }
 .datepicker table tr td.old,
 .datepicker table tr td.new {
-  color: #999999;
+  color: #999;
 }
 .datepicker table tr td.disabled,
 .datepicker table tr td.disabled:hover {
   background: none;
-  color: #999999;
+  color: #999;
   cursor: default;
 }
 .datepicker table tr td.highlighted {
@@ -177,7 +176,7 @@
 .datepicker table tr td.range:hover,
 .datepicker table tr td.range.disabled,
 .datepicker table tr td.range.disabled:hover {
-  background: #eeeeee;
+  background: #eee;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
@@ -290,14 +289,14 @@
 .datepicker table tr td.active.disabled,
 .datepicker table tr td.active.disabled:hover {
   background-color: #006dcc;
-  background-image: -moz-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: -ms-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
-  background-image: -webkit-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: -o-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
+  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
+  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: linear-gradient(to bottom, #08c, #0044cc);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
   border-color: #0044cc #0044cc #002a80;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
@@ -350,12 +349,12 @@
 }
 .datepicker table tr td span:hover,
 .datepicker table tr td span.focused {
-  background: #eeeeee;
+  background: #eee;
 }
 .datepicker table tr td span.disabled,
 .datepicker table tr td span.disabled:hover {
   background: none;
-  color: #999999;
+  color: #999;
   cursor: default;
 }
 .datepicker table tr td span.active,
@@ -363,14 +362,14 @@
 .datepicker table tr td span.active.disabled,
 .datepicker table tr td span.active.disabled:hover {
   background-color: #006dcc;
-  background-image: -moz-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: -ms-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
-  background-image: -webkit-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: -o-linear-gradient(to bottom, #0088cc, #0044cc);
-  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
+  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
+  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: linear-gradient(to bottom, #08c, #0044cc);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
   border-color: #0044cc #0044cc #002a80;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
@@ -411,7 +410,7 @@
 }
 .datepicker table tr td span.old,
 .datepicker table tr td span.new {
-  color: #999999;
+  color: #999;
 }
 .datepicker .datepicker-switch {
   width: 145px;
@@ -426,7 +425,11 @@
 .datepicker .prev:hover,
 .datepicker .next:hover,
 .datepicker tfoot tr th:hover {
-  background: #eeeeee;
+  background: #eee;
+}
+.datepicker .prev.disabled,
+.datepicker .next.disabled {
+  visibility: hidden;
 }
 .datepicker .cw {
   font-size: 10px;
@@ -464,9 +467,9 @@
   font-weight: normal;
   line-height: 18px;
   text-align: center;
-  text-shadow: 0 1px 0 #ffffff;
+  text-shadow: 0 1px 0 #fff;
   vertical-align: middle;
-  background-color: #eeeeee;
+  background-color: #eee;
   border: 1px solid #ccc;
   margin-left: -5px;
   margin-right: -5px;