From fca551453c8945669325f48168fbe21848729602 Mon Sep 17 00:00:00 2001
From: Brad Heller <brad.heller@gmail.com>
Date: Fri, 8 Jan 2016 17:08:11 -0800
Subject: [PATCH 1/3] Ignore Vim droppings.

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index be44f6b5..e312bef5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@ bower_components
 node_modules
 npm-debug.log
 *.sublime-workspace
-*.sublime-project
\ No newline at end of file
+*.sublime-project
+*.sw[onp]

From d44f3ea23ac65ba7b1b785b175f558c946ea7d4d Mon Sep 17 00:00:00 2001
From: Brad Heller <brad.heller@gmail.com>
Date: Fri, 8 Jan 2016 17:08:19 -0800
Subject: [PATCH 2/3] SASS-ify the stylesheets.

---
 daterangepicker.css  | 575 ++++++++++++++++---------------------------
 daterangepicker.scss | 540 ++++++++++++++++++++++++++++++++++++++++
 package.json         |   4 +
 3 files changed, 760 insertions(+), 359 deletions(-)
 create mode 100644 daterangepicker.scss

diff --git a/daterangepicker.css b/daterangepicker.css
index 0b5ab918..bad38b7c 100644
--- a/daterangepicker.css
+++ b/daterangepicker.css
@@ -1,375 +1,232 @@
-/**
-* A stylesheet for use with Bootstrap 3.x
-* @author: Dan Grossman http://www.dangrossman.info/
-* @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
-* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
-* @website: https://www.improvely.com/
-*/
-
-/* Container Appearance */
-
 .daterangepicker {
   position: absolute;
+  color: inherit;
   background: #fff;
-  top: 100px;
-  left: 20px;
-  padding: 4px;
-  margin-top: 1px;
   border-radius: 4px;
-  width:278px;
-}
-
-.daterangepicker.opensleft:before {
-  position: absolute;
-  top: -7px;
-  right: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker.opensleft:after {
-  position: absolute;
-  top: -6px;
-  right: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.daterangepicker.openscenter:before {
-  position: absolute;
-  top: -7px;
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker.openscenter:after {
-  position: absolute;
-  top: -6px;
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.daterangepicker.opensright:before {
-  position: absolute;
-  top: -7px;
-  left: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker.opensright:after {
-  position: absolute;
-  top: -6px;
-  left: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.daterangepicker.dropup{
-  margin-top: -5px;
-}
-.daterangepicker.dropup:before{
-  top: initial;
-  bottom:-7px;
-  border-bottom: initial;
-  border-top: 7px solid #ccc;
-}
-.daterangepicker.dropup:after{
-  top: initial;
-  bottom:-6px;
-  border-bottom: initial;
-  border-top: 6px solid #fff;
-}
-
-.daterangepicker.dropdown-menu {
-  max-width: none;
-  z-index: 3000;
-}
-
-.daterangepicker.single .ranges, .daterangepicker.single .calendar {
-  float: none;
-}
-
-.daterangepicker .calendar {
-  display: none;
-  max-width: 270px;
-  margin: 4px;
-}
-
-.daterangepicker.show-calendar .calendar {
-  display: block;
-}
-
-.daterangepicker .calendar.single .calendar-table {
-  border: none;
-}
-
-/* Calendars */
-
-.daterangepicker .calendar th, .daterangepicker .calendar td {
-  white-space: nowrap;
-  text-align: center;
-  min-width: 32px;
-}
-
-.daterangepicker .calendar-table {
-  border: 1px solid #ddd;
+  width: 278px;
   padding: 4px;
-  border-radius: 4px;
-  background: #fff;
-}
-
-.daterangepicker table {
-  width: 100%;
-  margin: 0;
-}
-
-.daterangepicker td, .daterangepicker th {
-  text-align: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
-  color: #999;
-  background: #fff;
-}
-
-.daterangepicker td.disabled, .daterangepicker option.disabled {
-  color: #999;
-  cursor: not-allowed;
-  text-decoration: line-through;
-}
-
-.daterangepicker td.available:hover, .daterangepicker th.available:hover {
-  background: #eee;
-}
-
-.daterangepicker td.in-range {
-  background: #ebf4f8;
-  border-radius: 0;
-}
-
-.daterangepicker td.start-date {
-  border-radius: 4px 0 0 4px;
-}
-
-.daterangepicker td.end-date {
-  border-radius: 0 4px 4px 0;
-}
-
-.daterangepicker td.start-date.end-date {
-  border-radius: 4px;
-}
-
-.daterangepicker td.active, .daterangepicker td.active:hover {
-  background-color: #357ebd;
-  border-color: #3071a9;
-  color: #fff;
-}
-
-.daterangepicker td.week, .daterangepicker th.week {
-  font-size: 80%;
-  color: #ccc;
-}
-
-.daterangepicker select.monthselect, .daterangepicker select.yearselect {
-  font-size: 12px;
-  padding: 1px;
-  height: auto;
-  margin: 0;
-  cursor: default;
-}
-
-.daterangepicker select.monthselect {
-  margin-right: 2%;
-  width: 56%;
-}
-
-.daterangepicker select.yearselect {
-  width: 40%;
-}
-
-.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
-  width: 50px;
-  margin-bottom: 0;
-}
-
-.daterangepicker th.month {
-  width: auto;
-}
-
-/* Text Input Above Each Calendar */
-
-.daterangepicker .input-mini {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #555;
-  display: block;
-  height: 30px;
-  line-height: 30px;
-  vertical-align: middle;
-  margin: 0 0 5px 0;
-  padding: 0 6px 0 28px;
-  width: 100%;
-}
-
-.daterangepicker .input-mini.active {
-  border: 1px solid #357ebd;
-}
-
-.daterangepicker .daterangepicker_input i {
-  position: absolute;
-  left: 8px;
-  top: 8px;
-}
-
-.daterangepicker .daterangepicker_input {
-  position: relative;
-}
-
-/* Time Picker */
-
-.daterangepicker .calendar-time {
-  text-align: center;
-  margin: 5px auto;
-  line-height: 30px;
-  position: relative;
-  padding-left: 28px;
-}
-
-.daterangepicker .calendar-time select.disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-/* Predefined Ranges */
-
-.daterangepicker .ranges {
+  margin-top: 1px;
+  top: 100px;
+  left: 20px;
+  /* Calendars */ }
+  .daterangepicker:before, .daterangepicker:after {
+    position: absolute;
+    display: inline-block;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    content: ''; }
+  .daterangepicker:before {
+    top: -7px;
+    border-right: 7px solid transparent;
+    border-left: 7px solid transparent;
+    border-bottom: 7px solid #ccc; }
+  .daterangepicker:after {
+    top: -6px;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent; }
+  .daterangepicker.opensleft:before {
+    right: 9px; }
+  .daterangepicker.opensleft:after {
+    right: 10px; }
+  .daterangepicker.openscenter:before {
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto; }
+  .daterangepicker.openscenter:after {
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto; }
+  .daterangepicker.opensright:before {
+    left: 9px; }
+  .daterangepicker.opensright:after {
+    left: 10px; }
+  .daterangepicker.dropup {
+    margin-top: -5px; }
+    .daterangepicker.dropup:before {
+      top: initial;
+      bottom: -7px;
+      border-bottom: initial;
+      border-top: 7px solid #ccc; }
+    .daterangepicker.dropup:after {
+      top: initial;
+      bottom: -6px;
+      border-bottom: initial;
+      border-top: 6px solid #fff; }
+  .daterangepicker.dropdown-menu {
+    max-width: none;
+    z-index: 3001; }
+  .daterangepicker.single .ranges, .daterangepicker.single .calendar {
+    float: none; }
+  .daterangepicker.show-calendar .calendar {
+    display: block; }
+  .daterangepicker .calendar {
+    display: none;
+    max-width: 270px;
+    margin: 4px; }
+    .daterangepicker .calendar.single .calendar-table {
+      border: none; }
+    .daterangepicker .calendar th, .daterangepicker .calendar td {
+      white-space: nowrap;
+      text-align: center;
+      min-width: 32px; }
+  .daterangepicker .calendar-table {
+    border: 1px solid #fff;
+    padding: 4px;
+    border-radius: 4px;
+    background: #fff; }
+  .daterangepicker table {
+    width: 100%;
+    margin: 0; }
+  .daterangepicker td, .daterangepicker th {
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    cursor: pointer; }
+    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
+      background: #eee; }
+    .daterangepicker td.week, .daterangepicker th.week {
+      font-size: 80%;
+      color: #ccc; }
+  .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+    background-color: #fff;
+    border-color: transparent;
+    color: #999; }
+  .daterangepicker td.in-range {
+    background-color: #ebf4f8;
+    border-color: transparent;
+    color: #000;
+    border-radius: 0; }
+  .daterangepicker td.start-date {
+    border-radius: 4px 0 0 4px; }
+  .daterangepicker td.end-date {
+    border-radius: 0 4px 4px 0; }
+  .daterangepicker td.start-date.end-date {
+    border-radius: 4px; }
+  .daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #357ebd;
+    border-color: transparent;
+    color: #fff; }
+  .daterangepicker th.month {
+    width: auto; }
+  .daterangepicker td.disabled, .daterangepicker option.disabled {
+    color: #999;
+    cursor: not-allowed;
+    text-decoration: line-through; }
+  .daterangepicker select.monthselect, .daterangepicker select.yearselect {
+    font-size: 12px;
+    padding: 1px;
+    height: auto;
+    margin: 0;
+    cursor: default; }
+  .daterangepicker select.monthselect {
+    margin-right: 2%;
+    width: 56%; }
+  .daterangepicker select.yearselect {
+    width: 40%; }
+  .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+    width: 50px;
+    margin-bottom: 0; }
+  .daterangepicker .input-mini {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: #555;
+    height: 30px;
+    line-height: 30px;
+    display: block;
+    vertical-align: middle;
+    margin: 0 0 5px 0;
+    padding: 0 6px 0 28px;
+    width: 100%; }
+    .daterangepicker .input-mini.active {
+      border: 1px solid transparent;
+      border-radius: 4px; }
+  .daterangepicker .daterangepicker_input {
+    position: relative; }
+    .daterangepicker .daterangepicker_input i {
+      position: absolute;
+      left: 8px;
+      top: 8px; }
+  .daterangepicker .calendar-time {
+    text-align: center;
+    margin: 5px auto;
+    line-height: 30px;
+    position: relative;
+    padding-left: 28px; }
+    .daterangepicker .calendar-time select.disabled {
+      color: #ccc;
+      cursor: not-allowed; }
+
+.ranges {
   font-size: 11px;
   float: none;
   margin: 4px;
-  text-align: left;
-}
-
-.daterangepicker .ranges ul {
-  list-style: none;
-  margin: 0 auto;
-  padding: 0;
-  width: 100%;
-}
-
-.daterangepicker .ranges li {
-  font-size: 13px;
-  background: #f5f5f5;
-  border: 1px solid #f5f5f5;
-  color: #08c;
-  padding: 3px 12px;
-  margin-bottom: 8px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
-  background: #08c;
-  border: 1px solid #08c;
-  color: #fff;
-}
+  text-align: left; }
+  .ranges ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%; }
+  .ranges li {
+    font-size: 13px;
+    background: #f5f5f5;
+    border: 1px solid #f5f5f5;
+    border-radius: 4px;
+    color: #08c;
+    padding: 3px 12px;
+    margin-bottom: 8px;
+    cursor: pointer; }
+    .ranges li:hover {
+      background: #08c;
+      border: 1px solid #08c;
+      color: #fff; }
+    .ranges li.active {
+      background: #08c;
+      border: 1px solid #08c;
+      color: #fff; }
 
 /*  Larger Screen Styling */
 @media (min-width: 564px) {
-  .daterangepicker{
-    width: auto;
-  }
-
-  .daterangepicker .ranges ul {
-    width: 160px;
-  }
-  .daterangepicker.single .ranges ul {
-    width: 100%;
-  }
-  .daterangepicker .calendar.left .calendar-table {
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .daterangepicker .calendar.right .calendar-table {
-    border-left: none;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .daterangepicker .calendar.left {
-    clear: left;
-    margin-right: 0;
-  }
-  .daterangepicker.single .calendar.left {
-    clear: none;
-  }
-  .daterangepicker.single .ranges,
-  .daterangepicker.single .calendar{
-    float:left;
-  }
-
-  .daterangepicker .calendar.right {
-    margin-left: 0;
-  }
-
-  .daterangepicker .left .daterangepicker_input {
-    padding-right: 12px;
-  }
-
-  .daterangepicker .calendar.left .calendar-table {
-    padding-right: 12px;
-  }
-
-  .daterangepicker .ranges,
-  .daterangepicker .calendar {
-    float: left;
-  }
-}
+  .daterangepicker {
+    width: auto; }
+    .daterangepicker .ranges ul {
+      width: 160px; }
+    .daterangepicker.single .ranges ul {
+      width: 100%; }
+    .daterangepicker.single .calendar.left {
+      clear: none; }
+    .daterangepicker.single .ranges, .daterangepicker.single .calendar {
+      float: left; }
+    .daterangepicker .calendar.left {
+      clear: left;
+      margin-right: 0; }
+      .daterangepicker .calendar.left .calendar-table {
+        border-right: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0; }
+    .daterangepicker .calendar.right {
+      margin-left: 0; }
+      .daterangepicker .calendar.right .calendar-table {
+        border-left: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0; }
+    .daterangepicker .left .daterangepicker_input {
+      padding-right: 12px; }
+    .daterangepicker .calendar.left .calendar-table {
+      padding-right: 12px; }
+    .daterangepicker .ranges, .daterangepicker .calendar {
+      float: left; } }
 
 @media (min-width: 730px) {
   .daterangepicker .ranges {
     width: auto;
-    float: left;
-  }
+    float: left; }
   .daterangepicker .calendar.left {
-    clear: none;
-  }
-}
+    clear: none; } }
+
diff --git a/daterangepicker.scss b/daterangepicker.scss
new file mode 100644
index 00000000..4fd74213
--- /dev/null
+++ b/daterangepicker.scss
@@ -0,0 +1,540 @@
+//
+// A stylesheet for use with Bootstrap 3.x
+// @author: Dan Grossman http://www.dangrossman.info/
+// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
+// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
+// @website: https://www.improvely.com/
+//
+
+//
+// VARIABLES
+//
+
+//
+// Settings
+
+// The class name to contain everything within.
+$prefix-class: daterangepicker;
+
+//
+// Colors
+$datepicker-color:                      inherit !default;
+$datepicker-bg-color:                   #fff !default;
+
+$datepicker-cell-color:                 $datepicker-color !default;
+$datepicker-cell-border-color:          transparent !default;
+$datepicker-cell-bg-color:              $datepicker-bg-color !default;
+
+$datepicker-cell-hover-color:           $datepicker-color !default;
+$datepicker-cell-hover-border-color:    $datepicker-cell-border-color !default;
+$datepicker-cell-hover-bg-color:        #eee !default;
+
+$datepicker-in-range-color:             #000 !default;
+$datepicker-in-range-border-color:      transparent !default;
+$datepicker-in-range-bg-color:          #ebf4f8 !default;
+
+$datepicker-active-color:               #fff !default;
+$datepicker-active-bg-color:            #357ebd !default;
+$datepicker-active-border-color:        transparent !default;
+
+$datepicker-unselected-color:           #999 !default;
+$datepicker-unselected-border-color:    transparent !default;
+$datepicker-unselected-bg-color:        #fff !default;
+
+//
+// Datepicker
+$datepicker-width:          278px !default;
+$datepicker-padding:        4px !default;
+$datepicker-z-index:        3000 !default;
+
+$datepicker-border-size:    1px !default;
+$datepicker-border-color:   #ccc !default;
+$datepicker-border-radius:  4px !default;
+
+$datepicker-arrow-size:     7px !default;
+
+//
+// Calendar
+$datepicker-calendar-margin:              $datepicker-padding !default;
+$datepicker-calendar-bg-color:            $datepicker-bg-color !default;
+
+$datepicker-calendar-border-size:         1px !default;
+$datepicker-calendar-border-color:        $datepicker-bg-color !default;
+$datepicker-calendar-border-radius:       $datepicker-border-radius !default;
+
+//
+// Calendar Cells
+$datepicker-cell-size:           20px !default;
+$datepicker-cell-width:          $datepicker-cell-size !default;
+$datepicker-cell-height:         $datepicker-cell-size !default;
+
+$datepicker-cell-border-radius:  $datepicker-calendar-border-radius !default;
+$datepicker-cell-border-size:    1px !default;
+
+//
+// Dropdowns
+$datepicker-dropdown-z-index: $datepicker-z-index + 1 !default;
+
+//
+// Controls
+$datepicker-control-height:               30px !default;
+$datepicker-control-line-height:          $datepicker-control-height !default;
+$datepicker-control-color:                #555 !default;
+
+$datepicker-control-border-size:          1px !default;
+$datepicker-control-border-color:         #ccc !default;
+$datepicker-control-border-radius:        4px !default;
+
+$datepicker-control-active-border-size:   1px !default;
+$datepicker-control-active-border-color:  $datepicker-active-border-color !default;
+$datepicker-control-active-border-radius: $datepicker-control-border-radius !default;
+
+$datepicker-control-disabled-color:       #ccc !default;
+
+//
+// Ranges
+$datepicker-ranges-color:                #08c !default;
+$datepicker-ranges-bg-color:             #f5f5f5 !default;
+
+$datepicker-ranges-border-size:          1px !default;
+$datepicker-ranges-border-color:         $datepicker-ranges-bg-color !default;
+$datepicker-ranges-border-radius:        $datepicker-border-radius !default;
+
+$datepicker-ranges-hover-color:          #fff !default;
+$datepicker-ranges-hover-bg-color:       $datepicker-ranges-color !default;
+$datepicker-ranges-hover-border-size:    $datepicker-ranges-border-size !default;
+$datepicker-ranges-hover-border-color:   $datepicker-ranges-hover-bg-color !default;
+$datepicker-ranges-hover-border-radius:  $datepicker-border-radius !default;
+
+$datepicker-ranges-active-border-size:   $datepicker-ranges-border-size !default;
+$datepicker-ranges-active-border-color:  $datepicker-ranges-bg-color !default;
+$datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
+
+//
+// STYLESHEETS
+//
+.#{$prefix-class} {
+  position: absolute;
+  color: $datepicker-color;
+  background: $datepicker-bg-color;
+  border-radius: $datepicker-border-radius;
+  width: $datepicker-width;
+  padding: $datepicker-padding;
+  margin-top: $datepicker-border-size;
+
+  // TODO: Should these be parameterized??
+  top: 100px;
+  left: 20px;
+
+  $arrow-prefix-size: $datepicker-arrow-size;
+  $arrow-suffix-size: ($datepicker-arrow-size - $datepicker-border-size);
+
+  &:before, &:after {
+    position: absolute;
+    display: inline-block;
+
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    content: '';
+  }
+
+  &:before {
+    top: -$arrow-prefix-size;
+
+    border-right: $arrow-prefix-size solid transparent;
+    border-left: $arrow-prefix-size solid transparent;
+    border-bottom: $arrow-prefix-size solid $datepicker-border-color;
+  }
+
+  &:after {
+    top: -$arrow-suffix-size;
+
+    border-right: $arrow-suffix-size solid transparent;
+    border-bottom: $arrow-suffix-size solid $datepicker-bg-color;
+    border-left: $arrow-suffix-size solid transparent;
+  }
+
+  &.opensleft {
+    &:before {
+      // TODO: Make this relative to prefix size.
+      right: $arrow-prefix-size + 2px;
+    }
+
+    &:after {
+      // TODO: Make this relative to suffix size.
+      right: $arrow-suffix-size + 4px;
+    }
+  }
+
+  &.openscenter {
+    &:before {
+      left: 0;
+      right: 0;
+      width: 0;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &:after {
+      left: 0;
+      right: 0;
+      width: 0;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  &.opensright {
+    &:before {
+      // TODO: Make this relative to prefix size.
+      left: $arrow-prefix-size + 2px;
+    }
+
+    &:after {
+      // TODO: Make this relative to suffix size.
+      left: $arrow-suffix-size + 4px;
+    }
+  }
+
+  &.dropup {
+    margin-top: -5px;
+
+    // NOTE: Note sure why these are special-cased.
+    &:before {
+      top: initial;
+      bottom: -$arrow-prefix-size;
+      border-bottom: initial;
+      border-top: $arrow-prefix-size solid $datepicker-border-color;
+    }
+
+    &:after {
+      top: initial;
+      bottom:-$arrow-suffix-size;
+      border-bottom: initial;
+      border-top: $arrow-suffix-size solid $datepicker-bg-color;
+    }
+  }
+
+  &.dropdown-menu {
+    max-width: none;
+    z-index: $datepicker-dropdown-z-index;
+  }
+
+  &.single {
+    .ranges, .calendar {
+      float: none;
+    }
+  }
+
+  /* Calendars */
+  &.show-calendar {
+    .calendar {
+      display: block;
+    }
+  }
+
+  .calendar {
+    display: none;
+    max-width: $datepicker-width - ($datepicker-calendar-margin * 2);
+    margin: $datepicker-calendar-margin;
+
+    &.single {
+      .calendar-table {
+        border: none;
+      }
+    }
+
+    th, td {
+      white-space: nowrap;
+      text-align: center;
+
+      // TODO: Should this actually be hard-coded?
+      min-width: 32px;
+    }
+  }
+
+  .calendar-table {
+    border: $datepicker-calendar-border-size solid $datepicker-calendar-border-color;
+    padding: $datepicker-calendar-margin;
+    border-radius: $datepicker-calendar-border-radius;
+    background: $datepicker-calendar-bg-color;
+  }
+
+  table {
+    width: 100%;
+    margin: 0;
+  }
+
+  td, th {
+    text-align: center;
+    width: $datepicker-cell-width;
+    height: $datepicker-cell-height;
+    border-radius: $datepicker-cell-border-radius;
+    border: $datepicker-cell-border-size solid $datepicker-cell-border-color;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &.available {
+      &:hover {
+        background: $datepicker-cell-hover-bg-color;
+      }
+    }
+
+    &.week {
+      font-size: 80%;
+      color: #ccc;
+    }
+  }
+
+  td {
+    &.off {
+      &, &.in-range, &.start-date, &.end-date {
+        background-color: $datepicker-unselected-bg-color;
+        border-color: $datepicker-unselected-border-color;
+        color: $datepicker-unselected-color;
+      }
+    }
+
+    //
+    // Date Range
+    &.in-range {
+      background-color: $datepicker-in-range-bg-color;
+      border-color: $datepicker-in-range-border-color;
+      color: $datepicker-in-range-color;
+
+      // TODO: Should this be static or should it be parameterized?
+      border-radius: 0;
+    }
+
+    &.start-date {
+      border-radius: $datepicker-cell-border-radius 0 0 $datepicker-cell-border-radius;
+    }
+
+    &.end-date {
+      border-radius: 0 $datepicker-cell-border-radius $datepicker-cell-border-radius 0;
+    }
+
+    &.start-date.end-date {
+      border-radius: $datepicker-cell-border-radius;
+    }
+
+    &.active {
+      &, &:hover {
+        background-color: $datepicker-active-bg-color;
+        border-color: $datepicker-active-border-color;
+        color: $datepicker-active-color;
+      }
+    }
+  }
+
+  th {
+    &.month {
+      width: auto;
+    }
+  }
+
+  //
+  // Disabled Controls
+  //
+  td, option {
+    &.disabled {
+      color: #999;
+      cursor: not-allowed;
+      text-decoration: line-through;
+    }
+  }
+
+  select {
+    &.monthselect, &.yearselect {
+      font-size: 12px;
+      padding: 1px;
+      height: auto;
+      margin: 0;
+      cursor: default;
+    }
+
+    &.monthselect {
+      margin-right: 2%;
+      width: 56%;
+    }
+
+    &.yearselect {
+      width: 40%;
+    }
+
+    &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
+      width: 50px;
+      margin-bottom: 0;
+    }
+  }
+
+  //
+  // Text Input Controls (above calendar)
+  //
+  .input-mini {
+    border: $datepicker-control-border-size solid $datepicker-control-border-color;
+    border-radius: $datepicker-control-border-radius;
+    color: $datepicker-control-color;
+    height: $datepicker-control-line-height;
+    line-height: $datepicker-control-height;
+    display: block;
+    vertical-align: middle;
+
+    // TODO: Should these all be static, too??
+    margin: 0 0 5px 0;
+    padding: 0 6px 0 28px;
+    width: 100%;
+
+    &.active {
+      border: $datepicker-control-active-border-size solid $datepicker-control-active-border-color;
+      border-radius: $datepicker-control-active-border-radius;
+    }
+  }
+
+  .daterangepicker_input {
+    position: relative;
+
+    i {
+      position: absolute;
+
+      // NOTE: These appear to be eyeballed to me...
+      left: 8px;
+      top: 8px;
+    }
+  }
+
+  //
+  // Time Picker
+  //
+  .calendar-time {
+    text-align: center;
+    margin: 5px auto;
+    line-height: $datepicker-control-line-height;
+    position: relative;
+    padding-left: 28px;
+
+    select {
+      &.disabled {
+        color: $datepicker-control-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+//
+// Predefined Ranges
+//
+
+.ranges {
+  font-size: 11px;
+  float: none;
+  margin: 4px;
+  text-align: left;
+
+  ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+  }
+
+  li {
+    font-size: 13px;
+    background: $datepicker-ranges-bg-color;
+    border: $datepicker-ranges-border-size solid $datepicker-ranges-border-color;
+    border-radius: $datepicker-ranges-border-radius;
+    color: $datepicker-ranges-color;
+    padding: 3px 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background: $datepicker-ranges-hover-bg-color;
+      border: $datepicker-ranges-hover-border-size solid $datepicker-ranges-hover-border-color;
+      color: $datepicker-ranges-hover-color;
+    }
+
+    &.active {
+      background: $datepicker-ranges-hover-bg-color;
+      border: $datepicker-ranges-hover-border-size solid $datepicker-ranges-hover-border-color;
+      color: $datepicker-ranges-hover-color;
+    }
+  }
+}
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .#{$prefix-class} {
+    width: auto;
+
+    .ranges {
+      ul {
+        width: 160px;
+      }
+    }
+
+    &.single {
+      .ranges {
+        ul {
+          width: 100%;
+        }
+      }
+
+      .calendar.left {
+        clear: none;
+      }
+
+      .ranges, .calendar {
+        float:left;
+      }
+    }
+
+    .calendar{
+      &.left {
+        clear: left;
+        margin-right: 0;
+
+        .calendar-table {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &.right {
+        margin-left: 0;
+
+        .calendar-table {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+
+    .left .daterangepicker_input {
+      padding-right: 12px;
+    }
+
+    .calendar.left .calendar-table {
+      padding-right: 12px;
+    }
+
+    .ranges, .calendar {
+      float: left;
+    }
+  }
+}
+
+@media (min-width: 730px) {
+  .#{$prefix-class} {
+    .ranges {
+      width: auto;
+      float: left;
+    }
+
+    .calendar.left {
+      clear: none;
+    }
+  }
+}
diff --git a/package.json b/package.json
index 094cf957..f46ea650 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "main": "daterangepicker.js",
   "style": "daterangepicker.css",
   "scripts": {
+    "scss": "node-sass daterangepicker.scss > daterangepicker.css",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -24,5 +25,8 @@
   "dependencies": {
     "jquery": "^1.10",
     "moment": "^2.9.0"
+  },
+  "devDependencies": {
+    "node-sass": "^3.4.2"
   }
 }

From 5aa37bc1dc29cc2c02ab1fdf910ca66dd5c96e45 Mon Sep 17 00:00:00 2001
From: Brad Heller <brad.heller@gmail.com>
Date: Fri, 8 Jan 2016 17:17:19 -0800
Subject: [PATCH 3/3] %s/datepicker/daterangepicker/g

---
 daterangepicker.scss | 228 +++++++++++++++++++++----------------------
 1 file changed, 114 insertions(+), 114 deletions(-)

diff --git a/daterangepicker.scss b/daterangepicker.scss
index 4fd74213..74761b25 100644
--- a/daterangepicker.scss
+++ b/daterangepicker.scss
@@ -15,119 +15,119 @@
 
 // The class name to contain everything within.
 $prefix-class: daterangepicker;
+$arrow-size:     7px !default;
 
 //
 // Colors
-$datepicker-color:                      inherit !default;
-$datepicker-bg-color:                   #fff !default;
+$daterangepicker-color:                      inherit !default;
+$daterangepicker-bg-color:                   #fff !default;
 
-$datepicker-cell-color:                 $datepicker-color !default;
-$datepicker-cell-border-color:          transparent !default;
-$datepicker-cell-bg-color:              $datepicker-bg-color !default;
+$daterangepicker-cell-color:                 $daterangepicker-color !default;
+$daterangepicker-cell-border-color:          transparent !default;
+$daterangepicker-cell-bg-color:              $daterangepicker-bg-color !default;
 
-$datepicker-cell-hover-color:           $datepicker-color !default;
-$datepicker-cell-hover-border-color:    $datepicker-cell-border-color !default;
-$datepicker-cell-hover-bg-color:        #eee !default;
+$daterangepicker-cell-hover-color:           $daterangepicker-color !default;
+$daterangepicker-cell-hover-border-color:    $daterangepicker-cell-border-color !default;
+$daterangepicker-cell-hover-bg-color:        #eee !default;
 
-$datepicker-in-range-color:             #000 !default;
-$datepicker-in-range-border-color:      transparent !default;
-$datepicker-in-range-bg-color:          #ebf4f8 !default;
+$daterangepicker-in-range-color:             #000 !default;
+$daterangepicker-in-range-border-color:      transparent !default;
+$daterangepicker-in-range-bg-color:          #ebf4f8 !default;
 
-$datepicker-active-color:               #fff !default;
-$datepicker-active-bg-color:            #357ebd !default;
-$datepicker-active-border-color:        transparent !default;
+$daterangepicker-active-color:               #fff !default;
+$daterangepicker-active-bg-color:            #357ebd !default;
+$daterangepicker-active-border-color:        transparent !default;
 
-$datepicker-unselected-color:           #999 !default;
-$datepicker-unselected-border-color:    transparent !default;
-$datepicker-unselected-bg-color:        #fff !default;
+$daterangepicker-unselected-color:           #999 !default;
+$daterangepicker-unselected-border-color:    transparent !default;
+$daterangepicker-unselected-bg-color:        #fff !default;
 
 //
-// Datepicker
-$datepicker-width:          278px !default;
-$datepicker-padding:        4px !default;
-$datepicker-z-index:        3000 !default;
+// daterangepicker
+$daterangepicker-width:          278px !default;
+$daterangepicker-padding:        4px !default;
+$daterangepicker-z-index:        3000 !default;
 
-$datepicker-border-size:    1px !default;
-$datepicker-border-color:   #ccc !default;
-$datepicker-border-radius:  4px !default;
+$daterangepicker-border-size:    1px !default;
+$daterangepicker-border-color:   #ccc !default;
+$daterangepicker-border-radius:  4px !default;
 
-$datepicker-arrow-size:     7px !default;
 
 //
 // Calendar
-$datepicker-calendar-margin:              $datepicker-padding !default;
-$datepicker-calendar-bg-color:            $datepicker-bg-color !default;
+$daterangepicker-calendar-margin:              $daterangepicker-padding !default;
+$daterangepicker-calendar-bg-color:            $daterangepicker-bg-color !default;
 
-$datepicker-calendar-border-size:         1px !default;
-$datepicker-calendar-border-color:        $datepicker-bg-color !default;
-$datepicker-calendar-border-radius:       $datepicker-border-radius !default;
+$daterangepicker-calendar-border-size:         1px !default;
+$daterangepicker-calendar-border-color:        $daterangepicker-bg-color !default;
+$daterangepicker-calendar-border-radius:       $daterangepicker-border-radius !default;
 
 //
 // Calendar Cells
-$datepicker-cell-size:           20px !default;
-$datepicker-cell-width:          $datepicker-cell-size !default;
-$datepicker-cell-height:         $datepicker-cell-size !default;
+$daterangepicker-cell-size:           20px !default;
+$daterangepicker-cell-width:          $daterangepicker-cell-size !default;
+$daterangepicker-cell-height:         $daterangepicker-cell-size !default;
 
-$datepicker-cell-border-radius:  $datepicker-calendar-border-radius !default;
-$datepicker-cell-border-size:    1px !default;
+$daterangepicker-cell-border-radius:  $daterangepicker-calendar-border-radius !default;
+$daterangepicker-cell-border-size:    1px !default;
 
 //
 // Dropdowns
-$datepicker-dropdown-z-index: $datepicker-z-index + 1 !default;
+$daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1 !default;
 
 //
 // Controls
-$datepicker-control-height:               30px !default;
-$datepicker-control-line-height:          $datepicker-control-height !default;
-$datepicker-control-color:                #555 !default;
+$daterangepicker-control-height:               30px !default;
+$daterangepicker-control-line-height:          $daterangepicker-control-height !default;
+$daterangepicker-control-color:                #555 !default;
 
-$datepicker-control-border-size:          1px !default;
-$datepicker-control-border-color:         #ccc !default;
-$datepicker-control-border-radius:        4px !default;
+$daterangepicker-control-border-size:          1px !default;
+$daterangepicker-control-border-color:         #ccc !default;
+$daterangepicker-control-border-radius:        4px !default;
 
-$datepicker-control-active-border-size:   1px !default;
-$datepicker-control-active-border-color:  $datepicker-active-border-color !default;
-$datepicker-control-active-border-radius: $datepicker-control-border-radius !default;
+$daterangepicker-control-active-border-size:   1px !default;
+$daterangepicker-control-active-border-color:  $daterangepicker-active-border-color !default;
+$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius !default;
 
-$datepicker-control-disabled-color:       #ccc !default;
+$daterangepicker-control-disabled-color:       #ccc !default;
 
 //
 // Ranges
-$datepicker-ranges-color:                #08c !default;
-$datepicker-ranges-bg-color:             #f5f5f5 !default;
+$daterangepicker-ranges-color:                #08c !default;
+$daterangepicker-ranges-bg-color:             #f5f5f5 !default;
 
-$datepicker-ranges-border-size:          1px !default;
-$datepicker-ranges-border-color:         $datepicker-ranges-bg-color !default;
-$datepicker-ranges-border-radius:        $datepicker-border-radius !default;
+$daterangepicker-ranges-border-size:          1px !default;
+$daterangepicker-ranges-border-color:         $daterangepicker-ranges-bg-color !default;
+$daterangepicker-ranges-border-radius:        $daterangepicker-border-radius !default;
 
-$datepicker-ranges-hover-color:          #fff !default;
-$datepicker-ranges-hover-bg-color:       $datepicker-ranges-color !default;
-$datepicker-ranges-hover-border-size:    $datepicker-ranges-border-size !default;
-$datepicker-ranges-hover-border-color:   $datepicker-ranges-hover-bg-color !default;
-$datepicker-ranges-hover-border-radius:  $datepicker-border-radius !default;
+$daterangepicker-ranges-hover-color:          #fff !default;
+$daterangepicker-ranges-hover-bg-color:       $daterangepicker-ranges-color !default;
+$daterangepicker-ranges-hover-border-size:    $daterangepicker-ranges-border-size !default;
+$daterangepicker-ranges-hover-border-color:   $daterangepicker-ranges-hover-bg-color !default;
+$daterangepicker-ranges-hover-border-radius:  $daterangepicker-border-radius !default;
 
-$datepicker-ranges-active-border-size:   $datepicker-ranges-border-size !default;
-$datepicker-ranges-active-border-color:  $datepicker-ranges-bg-color !default;
-$datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
+$daterangepicker-ranges-active-border-size:   $daterangepicker-ranges-border-size !default;
+$daterangepicker-ranges-active-border-color:  $daterangepicker-ranges-bg-color !default;
+$daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius !default;
 
 //
 // STYLESHEETS
 //
 .#{$prefix-class} {
   position: absolute;
-  color: $datepicker-color;
-  background: $datepicker-bg-color;
-  border-radius: $datepicker-border-radius;
-  width: $datepicker-width;
-  padding: $datepicker-padding;
-  margin-top: $datepicker-border-size;
+  color: $daterangepicker-color;
+  background: $daterangepicker-bg-color;
+  border-radius: $daterangepicker-border-radius;
+  width: $daterangepicker-width;
+  padding: $daterangepicker-padding;
+  margin-top: $daterangepicker-border-size;
 
   // TODO: Should these be parameterized??
   top: 100px;
   left: 20px;
 
-  $arrow-prefix-size: $datepicker-arrow-size;
-  $arrow-suffix-size: ($datepicker-arrow-size - $datepicker-border-size);
+  $arrow-prefix-size: $arrow-size;
+  $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);
 
   &:before, &:after {
     position: absolute;
@@ -142,14 +142,14 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
 
     border-right: $arrow-prefix-size solid transparent;
     border-left: $arrow-prefix-size solid transparent;
-    border-bottom: $arrow-prefix-size solid $datepicker-border-color;
+    border-bottom: $arrow-prefix-size solid $daterangepicker-border-color;
   }
 
   &:after {
     top: -$arrow-suffix-size;
 
     border-right: $arrow-suffix-size solid transparent;
-    border-bottom: $arrow-suffix-size solid $datepicker-bg-color;
+    border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color;
     border-left: $arrow-suffix-size solid transparent;
   }
 
@@ -203,20 +203,20 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
       top: initial;
       bottom: -$arrow-prefix-size;
       border-bottom: initial;
-      border-top: $arrow-prefix-size solid $datepicker-border-color;
+      border-top: $arrow-prefix-size solid $daterangepicker-border-color;
     }
 
     &:after {
       top: initial;
       bottom:-$arrow-suffix-size;
       border-bottom: initial;
-      border-top: $arrow-suffix-size solid $datepicker-bg-color;
+      border-top: $arrow-suffix-size solid $daterangepicker-bg-color;
     }
   }
 
   &.dropdown-menu {
     max-width: none;
-    z-index: $datepicker-dropdown-z-index;
+    z-index: $daterangepicker-dropdown-z-index;
   }
 
   &.single {
@@ -234,8 +234,8 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
 
   .calendar {
     display: none;
-    max-width: $datepicker-width - ($datepicker-calendar-margin * 2);
-    margin: $datepicker-calendar-margin;
+    max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
+    margin: $daterangepicker-calendar-margin;
 
     &.single {
       .calendar-table {
@@ -253,10 +253,10 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
   }
 
   .calendar-table {
-    border: $datepicker-calendar-border-size solid $datepicker-calendar-border-color;
-    padding: $datepicker-calendar-margin;
-    border-radius: $datepicker-calendar-border-radius;
-    background: $datepicker-calendar-bg-color;
+    border: $daterangepicker-calendar-border-size solid $daterangepicker-calendar-border-color;
+    padding: $daterangepicker-calendar-margin;
+    border-radius: $daterangepicker-calendar-border-radius;
+    background: $daterangepicker-calendar-bg-color;
   }
 
   table {
@@ -266,16 +266,16 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
 
   td, th {
     text-align: center;
-    width: $datepicker-cell-width;
-    height: $datepicker-cell-height;
-    border-radius: $datepicker-cell-border-radius;
-    border: $datepicker-cell-border-size solid $datepicker-cell-border-color;
+    width: $daterangepicker-cell-width;
+    height: $daterangepicker-cell-height;
+    border-radius: $daterangepicker-cell-border-radius;
+    border: $daterangepicker-cell-border-size solid $daterangepicker-cell-border-color;
     white-space: nowrap;
     cursor: pointer;
 
     &.available {
       &:hover {
-        background: $datepicker-cell-hover-bg-color;
+        background: $daterangepicker-cell-hover-bg-color;
       }
     }
 
@@ -288,40 +288,40 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
   td {
     &.off {
       &, &.in-range, &.start-date, &.end-date {
-        background-color: $datepicker-unselected-bg-color;
-        border-color: $datepicker-unselected-border-color;
-        color: $datepicker-unselected-color;
+        background-color: $daterangepicker-unselected-bg-color;
+        border-color: $daterangepicker-unselected-border-color;
+        color: $daterangepicker-unselected-color;
       }
     }
 
     //
     // Date Range
     &.in-range {
-      background-color: $datepicker-in-range-bg-color;
-      border-color: $datepicker-in-range-border-color;
-      color: $datepicker-in-range-color;
+      background-color: $daterangepicker-in-range-bg-color;
+      border-color: $daterangepicker-in-range-border-color;
+      color: $daterangepicker-in-range-color;
 
       // TODO: Should this be static or should it be parameterized?
       border-radius: 0;
     }
 
     &.start-date {
-      border-radius: $datepicker-cell-border-radius 0 0 $datepicker-cell-border-radius;
+      border-radius: $daterangepicker-cell-border-radius 0 0 $daterangepicker-cell-border-radius;
     }
 
     &.end-date {
-      border-radius: 0 $datepicker-cell-border-radius $datepicker-cell-border-radius 0;
+      border-radius: 0 $daterangepicker-cell-border-radius $daterangepicker-cell-border-radius 0;
     }
 
     &.start-date.end-date {
-      border-radius: $datepicker-cell-border-radius;
+      border-radius: $daterangepicker-cell-border-radius;
     }
 
     &.active {
       &, &:hover {
-        background-color: $datepicker-active-bg-color;
-        border-color: $datepicker-active-border-color;
-        color: $datepicker-active-color;
+        background-color: $daterangepicker-active-bg-color;
+        border-color: $daterangepicker-active-border-color;
+        color: $daterangepicker-active-color;
       }
     }
   }
@@ -371,11 +371,11 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
   // Text Input Controls (above calendar)
   //
   .input-mini {
-    border: $datepicker-control-border-size solid $datepicker-control-border-color;
-    border-radius: $datepicker-control-border-radius;
-    color: $datepicker-control-color;
-    height: $datepicker-control-line-height;
-    line-height: $datepicker-control-height;
+    border: $daterangepicker-control-border-size solid $daterangepicker-control-border-color;
+    border-radius: $daterangepicker-control-border-radius;
+    color: $daterangepicker-control-color;
+    height: $daterangepicker-control-line-height;
+    line-height: $daterangepicker-control-height;
     display: block;
     vertical-align: middle;
 
@@ -385,8 +385,8 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
     width: 100%;
 
     &.active {
-      border: $datepicker-control-active-border-size solid $datepicker-control-active-border-color;
-      border-radius: $datepicker-control-active-border-radius;
+      border: $daterangepicker-control-active-border-size solid $daterangepicker-control-active-border-color;
+      border-radius: $daterangepicker-control-active-border-radius;
     }
   }
 
@@ -408,13 +408,13 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
   .calendar-time {
     text-align: center;
     margin: 5px auto;
-    line-height: $datepicker-control-line-height;
+    line-height: $daterangepicker-control-line-height;
     position: relative;
     padding-left: 28px;
 
     select {
       &.disabled {
-        color: $datepicker-control-disabled-color;
+        color: $daterangepicker-control-disabled-color;
         cursor: not-allowed;
       }
     }
@@ -440,24 +440,24 @@ $datepicker-ranges-active-border-radius: $datepicker-border-radius !default;
 
   li {
     font-size: 13px;
-    background: $datepicker-ranges-bg-color;
-    border: $datepicker-ranges-border-size solid $datepicker-ranges-border-color;
-    border-radius: $datepicker-ranges-border-radius;
-    color: $datepicker-ranges-color;
+    background: $daterangepicker-ranges-bg-color;
+    border: $daterangepicker-ranges-border-size solid $daterangepicker-ranges-border-color;
+    border-radius: $daterangepicker-ranges-border-radius;
+    color: $daterangepicker-ranges-color;
     padding: 3px 12px;
     margin-bottom: 8px;
     cursor: pointer;
 
     &:hover {
-      background: $datepicker-ranges-hover-bg-color;
-      border: $datepicker-ranges-hover-border-size solid $datepicker-ranges-hover-border-color;
-      color: $datepicker-ranges-hover-color;
+      background: $daterangepicker-ranges-hover-bg-color;
+      border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
+      color: $daterangepicker-ranges-hover-color;
     }
 
     &.active {
-      background: $datepicker-ranges-hover-bg-color;
-      border: $datepicker-ranges-hover-border-size solid $datepicker-ranges-hover-border-color;
-      color: $datepicker-ranges-hover-color;
+      background: $daterangepicker-ranges-hover-bg-color;
+      border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
+      color: $daterangepicker-ranges-hover-color;
     }
   }
 }