From dcf7e48f6e73a11dee1ac1c044105243bdfa69fc Mon Sep 17 00:00:00 2001
From: Kevin Granger <shipowlata@gmail.com>
Date: Fri, 11 Oct 2013 15:04:14 +0200
Subject: [PATCH] // datepicker stylesheet

---
 admin-dev/themes/default/css/admin-theme.css  | 408 ++++++++++++++++--
 admin-dev/themes/default/css/admin-theme.sass |   1 +
 .../admin-theme/_admin-date-range-picker.sass | 232 ++++++++++
 3 files changed, 598 insertions(+), 43 deletions(-)
 create mode 100644 admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass

diff --git a/admin-dev/themes/default/css/admin-theme.css b/admin-dev/themes/default/css/admin-theme.css
index 1c7f08fba..cb421e2c2 100644
--- a/admin-dev/themes/default/css/admin-theme.css
+++ b/admin-dev/themes/default/css/admin-theme.css
@@ -1,3 +1,4 @@
+@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:200,400,700);
 /*!
  * Bootstrap v3.0.0
  *
@@ -8862,6 +8863,302 @@ textarea {
   -webkit-font-smoothing: antialiased;
   *margin-right: 0.3em; }
 
+/* line 14, admin-theme/_admin-date-range-picker.sass */
+#datepicker {
+  padding: 6px;
+  background-color: #256d98; }
+/* line 18, admin-theme/_admin-date-range-picker.sass */
+#datepicker .input-selected {
+  margin: 0; }
+/* line 20, admin-theme/_admin-date-range-picker.sass */
+#datepicker #date-start.input-selected {
+  border: solid 3px #205e83; }
+/* line 22, admin-theme/_admin-date-range-picker.sass */
+#datepicker #date-end.input-selected {
+  border: solid 3px #205e83; }
+/* line 24, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepickers-container {
+  width: 60%;
+  float: left;
+  margin: 0;
+  font-size: 16px;
+  height: 16.8em; }
+/* line 30, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form {
+  width: 40%;
+  float: left;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  border: none; }
+/* line 35, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form #date-range .form-date-heading {
+  background-color: #dd7d5b; }
+/* line 37, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form #date-compare .form-date-heading {
+  background-color: #dd7d5b; }
+/* line 39, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .form-date-heading {
+  font-family: "Josefin Sans", sans-serif;
+  font-size: 1.15em;
+  padding: 6px;
+  color: #f0e9dc;
+  font-weight: 200;
+  text-transform: uppercase; }
+/* line 46, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .form-date-heading .btn-default {
+  background-color: rgba(240, 233, 220, 0.3);
+  font-weight: 700;
+  color: #f0e9dc;
+  border: none; }
+/* line 51, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .form-date-body {
+  padding: 10px; }
+/* line 53, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .form-date-group {
+  -webkit-box-shadow: #1b4f6f 0 0 4px;
+  -moz-box-shadow: #1b4f6f 0 0 4px;
+  box-shadow: #1b4f6f 0 0 4px;
+  background-color: #f0e9dc;
+  width: 100%;
+  margin: 0 auto 6px auto; }
+/* line 58, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .form-date-group label, #datepicker form#datepicker-form .form-date-group input {
+  float: left;
+  margin-right: 6px; }
+/* line 61, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .form-date-group label {
+  line-height: 3.2em;
+  font-weight: 700;
+  font-size: 0.8em;
+  margin-bottom: 0; }
+/* line 66, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .form-date-group input[type='text'] {
+  width: 35%; }
+/* line 68, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .actions {
+  -webkit-box-shadow: #1b4f6f 0 0 4px;
+  -moz-box-shadow: #1b4f6f 0 0 4px;
+  box-shadow: #1b4f6f 0 0 4px;
+  padding: 0;
+  background-color: #4fa2d4; }
+/* line 72, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .actions .btn-primary {
+  padding: 12px;
+  text-transform: uppercase;
+  background-color: #f0e9dc;
+  color: #205e83;
+  border: none; }
+/* line 78, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form .actions .btn-default {
+  padding: 12px;
+  text-transform: uppercase;
+  color: #205e83;
+  background: transparent;
+  border: none; }
+/* line 84, admin-theme/_admin-date-range-picker.sass */
+#datepicker form#datepicker-form label {
+  font-family: "Josefin Sans", sans-serif;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #666666; }
+/* line 89, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker {
+  -webkit-box-shadow: #1b4f6f 0 0 4px;
+  -moz-box-shadow: #1b4f6f 0 0 4px;
+  box-shadow: #1b4f6f 0 0 4px;
+  position: relative;
+  float: left;
+  margin-right: 1%;
+  width: 49%;
+  height: 100%;
+  background-color: #4fa2d4;
+  font-family: "Josefin Sans", sans-serif; }
+/* line 98, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker table {
+  width: 100%;
+  margin: 0; }
+/* line 102, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker thead tr th:after {
+  content: "";
+  border-top: 1px solid #2f8ac1;
+  width: 100%;
+  display: block; }
+/* line 107, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker thead tr th {
+  background-color: #3b97cf;
+  color: #b5d8ed;
+  font-size: 0.7em;
+  font-weight: 700;
+  border-bottom: solid 1px #6cb1db;
+  text-transform: uppercase; }
+/* line 114, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker thead tr:first-child th {
+  background-color: #f0e9dc;
+  font-weight: 200;
+  font-size: 1.4em;
+  color: #205e83; }
+/* line 119, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td, #datepicker .datepicker th {
+  text-align: center;
+  height: 2em;
+  line-height: 2em;
+  padding: 0;
+  color: #f0e9dc;
+  position: relative; }
+/* line 126, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td {
+  font-weight: 400;
+  padding: 0 10px;
+  border-bottom: solid 1px #4fa2d4; }
+/* line 130, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.day:after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background-color: transparent; }
+/* line 140, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.day:hover {
+  cursor: pointer; }
+/* line 142, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.day.disabled {
+  color: #2a7bac; }
+/* line 144, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.old, #datepicker .datepicker td.new {
+  color: #2a7bac; }
+/* line 146, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.start-selected:not(.old):not(.new):not(.end-selected) {
+  font-weight: 700;
+  background-color: #205e83;
+  -moz-border-radius-topleft: 15px;
+  -webkit-border-top-left-radius: 15px;
+  border-top-left-radius: 15px;
+  -moz-border-radius-bottomleft: 15px;
+  -webkit-border-bottom-left-radius: 15px;
+  border-bottom-left-radius: 15px; }
+/* line 151, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected:not(.old):not(.new):not(.start-selected) {
+  font-weight: 700;
+  background-color: #205e83;
+  -moz-border-radius-topright: 15px;
+  -webkit-border-top-right-radius: 15px;
+  border-top-right-radius: 15px;
+  -moz-border-radius-bottomright: 15px;
+  -webkit-border-bottom-right-radius: 15px;
+  border-bottom-right-radius: 15px; }
+/* line 156, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected.start-selected {
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  -ms-border-radius: 15px;
+  -o-border-radius: 15px;
+  border-radius: 15px;
+  font-weight: 700;
+  background-color: #205e83; }
+/* line 160, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.range {
+  color: #a1cde8;
+  background-color: #2a7bac; }
+/* line 163, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.today {
+  background-color: #f0e9dc; }
+/* line 166, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td span {
+  padding: 0;
+  display: block;
+  width: 33.333%;
+  height: 3em;
+  line-height: 3em;
+  font-weight: 400;
+  float: left;
+  text-transform: uppercase;
+  cursor: pointer; }
+/* line 176, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td span:hover {
+  background-color: #205e83; }
+/* line 178, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td span.active {
+  background-color: #205e83;
+  color: white; }
+/* line 181, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td span.old {
+  color: #2a7bac; }
+/* line 184, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker th.switch {
+  width: 145px; }
+/* line 186, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker th.next, #datepicker .datepicker th.prev {
+  font-size: 1.3em; }
+/* line 188, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker thead tr:first-child th {
+  cursor: pointer; }
+
+/* line 192, admin-theme/_admin-date-range-picker.sass */
+.chevron-left, #datepicker .datepicker td.start-selected:not(.old):not(.new):not(.end-selected), .chevron-right, #datepicker .datepicker td.end-selected:not(.old):not(.new):not(.start-selected) {
+  position: relative; }
+
+/* line 194, admin-theme/_admin-date-range-picker.sass */
+.chevron-left:before, #datepicker .datepicker td.start-selected:not(.end-selected):not(.new):not(.old):before, .chevron-right:before, #datepicker .datepicker td.end-selected:not(.start-selected):not(.new):not(.old):before {
+  display: block;
+  content: "";
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute; }
+
+/* line 201, admin-theme/_admin-date-range-picker.sass */
+.chevron-left:before, #datepicker .datepicker td.start-selected:not(.end-selected):not(.new):not(.old):before {
+  right: 0px;
+  top: 0;
+  border-width: 1em 0 1em 0.5em;
+  border-color: transparent transparent transparent #205e83;
+  background-color: #2a7bac; }
+
+/* line 207, admin-theme/_admin-date-range-picker.sass */
+.chevron-right:before, #datepicker .datepicker td.end-selected:not(.start-selected):not(.new):not(.old):before {
+  left: 0px;
+  top: 0;
+  border-width: 1em 0 1em 0.5em;
+  border-color: transparent transparent transparent #2a7bac;
+  background-color: #205e83; }
+
+/* line 214, admin-theme/_admin-date-range-picker.sass */
+.input-complete {
+  -webkit-animation: one 0.2s ease-in-out;
+  -moz-animation: one 0.2s ease-in-out;
+  -ms-animation: one 0.2s ease-in-out;
+  -o-animation: one 0.2s ease-in-out;
+  animation: one 0.2s ease-in-out; }
+
+@-webkit-keyframes one {
+  /* line 222, admin-theme/_admin-date-range-picker.sass */
+  0% {
+    background-color: #4fa2d4; }
+
+  /* line 224, admin-theme/_admin-date-range-picker.sass */
+  100% {
+    background-color: #f0e9dc; } }
+
+@-webkit-keyframes two {
+  /* line 228, admin-theme/_admin-date-range-picker.sass */
+  0% {
+    -webkit-box-shadow: #4fa2d4 0 0 0 20px inset;
+    -moz-box-shadow: #4fa2d4 0 0 0 20px inset;
+    box-shadow: #4fa2d4 0 0 0 20px inset; }
+
+  /* line 230, admin-theme/_admin-date-range-picker.sass */
+  100% {
+    -webkit-box-shadow: #4fa2d4 0 0 0 inset;
+    -moz-box-shadow: #4fa2d4 0 0 0 inset;
+    box-shadow: #4fa2d4 0 0 0 inset; } }
+
 /* line 1, admin-theme/_admin-carrier-wizard.sass */
 #carrier_wizard {
   position: relative;
@@ -9047,6 +9344,7 @@ textarea {
 /* line 11, admin-theme/_admin-modules.sass */
 .hook_panel {
   -webkit-box-shadow: rgba(255, 255, 255, 0.9) 0 0 0 1px inset;
+  -moz-box-shadow: rgba(255, 255, 255, 0.9) 0 0 0 1px inset;
   box-shadow: rgba(255, 255, 255, 0.9) 0 0 0 1px inset;
   padding: 10px 10px 5px 10px;
   margin-bottom: 3px !important; }
@@ -9088,6 +9386,7 @@ textarea {
   margin-bottom: 4px;
   background-color: white;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px, rgba(0, 0, 0, 0.1) 0 -2px 0 inset;
+  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px, rgba(0, 0, 0, 0.1) 0 -2px 0 inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px, rgba(0, 0, 0, 0.1) 0 -2px 0 inset;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -9124,6 +9423,7 @@ textarea {
   -o-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px inset;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px inset;
   border: solid 1px #cccccc;
   background-color: #eeeeee; }
@@ -9378,94 +9678,116 @@ li.sortable-placeholder {
   animation-duration: 0.7s;
   -webkit-animation-direction: linear;
   animation-direction: linear;
-  -webkit-transform: scale(0.7);
-  -ms-transform: scale(0.7);
-  transform: scale(0.7); }
+  -webkit-transform: scale(0.7, 0.7);
+  -moz-transform: scale(0.7, 0.7);
+  -ms-transform: scale(0.7, 0.7);
+  -o-transform: scale(0.7, 0.7);
+  transform: scale(0.7, 0.7); }
 
 @-webkit-keyframes bounceG {
   /* line 209, admin-theme/_admin-dashboard.sass */
   0% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
-    filter: alpha(opacity=0);
-    -webkit-transform: scale(0.1);
-    -ms-transform: scale(0.1);
-    transform: scale(0.1); }
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1); }
 
   /* line 212, admin-theme/_admin-dashboard.sass */
   100% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     opacity: 1;
-    filter: alpha(opacity=100);
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1); } }
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1); } }
 
 @-moz-keyframes bounceG {
   /* line 209, admin-theme/_admin-dashboard.sass */
   0% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
-    filter: alpha(opacity=0);
-    -webkit-transform: scale(0.1);
-    -ms-transform: scale(0.1);
-    transform: scale(0.1); }
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1); }
 
   /* line 212, admin-theme/_admin-dashboard.sass */
   100% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     opacity: 1;
-    filter: alpha(opacity=100);
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1); } }
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1); } }
 
 @-ms-keyframes bounceG {
   /* line 209, admin-theme/_admin-dashboard.sass */
   0% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
-    filter: alpha(opacity=0);
-    -webkit-transform: scale(0.1);
-    -ms-transform: scale(0.1);
-    transform: scale(0.1); }
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1); }
 
   /* line 212, admin-theme/_admin-dashboard.sass */
   100% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     opacity: 1;
-    filter: alpha(opacity=100);
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1); } }
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1); } }
 
 @-o-keyframes bounceG {
   /* line 209, admin-theme/_admin-dashboard.sass */
   0% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
-    filter: alpha(opacity=0);
-    -webkit-transform: scale(0.1);
-    -ms-transform: scale(0.1);
-    transform: scale(0.1); }
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1); }
 
   /* line 212, admin-theme/_admin-dashboard.sass */
   100% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     opacity: 1;
-    filter: alpha(opacity=100);
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1); } }
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1); } }
 
 @keyframes bounceG {
   /* line 209, admin-theme/_admin-dashboard.sass */
   0% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
-    filter: alpha(opacity=0);
-    -webkit-transform: scale(0.1);
-    -ms-transform: scale(0.1);
-    transform: scale(0.1); }
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1); }
 
   /* line 212, admin-theme/_admin-dashboard.sass */
   100% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     opacity: 1;
-    filter: alpha(opacity=100);
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1); } }
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1); } }
 
 /* line 216, admin-theme/_admin-dashboard.sass */
 #dash_version {
diff --git a/admin-dev/themes/default/css/admin-theme.sass b/admin-dev/themes/default/css/admin-theme.sass
index b9c057ae9..9a6f49ac8 100755
--- a/admin-dev/themes/default/css/admin-theme.sass
+++ b/admin-dev/themes/default/css/admin-theme.sass
@@ -98,6 +98,7 @@ fieldset > .row
 @import "admin-theme/admin-kpi"
 @import "admin-theme/admin-switch"
 @import "admin-theme/admin-toolbar"
+@import "admin-theme/admin-date-range-picker"
 
 //page specific
 @import "admin-theme/admin-carrier-wizard"
diff --git a/admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass b/admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass
new file mode 100644
index 000000000..bf2a50a95
--- /dev/null
+++ b/admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass
@@ -0,0 +1,232 @@
+@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:200,400,700)
+@import compass
+
+$color-bright: #F0E9DC
+$font-family: 'Josefin Sans', sans-serif
+$color-calendar: #4FA2D4
+$color-calendar-compare: #E18E70
+$color-calendar-day: $color-bright
+$color-calendar-outrange: darken($color-calendar,15%)
+$color-calendar-day-selected: darken($color-calendar,25%)
+$color-calendar-range: darken($color-calendar,15%)
+
+
+#datepicker
+  input[type="text"]
+  padding: 6px
+  background-color: darken($color-calendar,20%)
+  .input-selected
+    margin: 0
+  #date-start.input-selected
+    border: solid 3px $color-calendar-day-selected
+  #date-end.input-selected
+    border: solid 3px $color-calendar-day-selected
+  .datepickers-container
+    width: 60%
+    float: left
+    margin: 0
+    font-size: 16px
+    height: 16.8em
+  form#datepicker-form
+    width: 40%
+    float: left
+    +border-radius(0)
+    border: none
+    #date-range .form-date-heading
+      background-color: darken($color-calendar-compare,5%)
+    #date-compare .form-date-heading
+      background-color: darken($color-calendar-compare,5%)
+    .form-date-heading
+      font-family: $font-family
+      font-size: 1.15em
+      padding: 6px
+      color: $color-bright
+      font-weight: 200
+      text-transform: uppercase
+      .btn-default
+        background-color: rgba($color-bright,0.3)
+        font-weight: 700
+        color: $color-bright
+        border: none
+    .form-date-body
+      padding: 10px
+    .form-date-group
+      +box-shadow(darken($color-calendar,30%) 0 0 4px)
+      background-color: $color-bright
+      width: 100%
+      margin: 0 auto 6px auto
+      label, input
+        float: left
+        margin-right: 6px
+      label
+        line-height: 3.2em
+        font-weight: 700
+        font-size: 0.8em
+        margin-bottom: 0
+      input[type='text']
+        width: 35%
+    .actions
+      +box-shadow(darken($color-calendar,30%) 0 0 4px)
+      padding: 0
+      background-color: $color-calendar
+      .btn-primary
+        padding: 12px
+        text-transform:  uppercase
+        background-color: $color-bright
+        color: $color-calendar-day-selected
+        border: none
+      .btn-default
+        padding: 12px
+        text-transform:  uppercase
+        color: $color-calendar-day-selected
+        background: transparent
+        border: none
+    label
+      font-family: $font-family
+      font-weight: 700
+      text-transform: uppercase
+      color: #666
+  .datepicker
+    +box-shadow(darken($color-calendar,30%) 0 0 4px)
+    position: relative
+    float: left
+    margin-right: 1%
+    width: 49%
+    height: 100%
+    background-color: $color-calendar
+    font-family: $font-family
+    table
+      width: 100%
+      margin: 0
+    thead
+      tr th:after
+        content: ""
+        border-top: 1px solid darken($color-calendar,10%)
+        width: 100%
+        display: block
+      tr th
+        background-color: darken($color-calendar,5%)
+        color: lighten($color-calendar,25%)
+        font-size: 0.7em
+        font-weight: 700
+        border-bottom: solid 1px lighten($color-calendar,7%)
+        text-transform: uppercase
+      tr:first-child th
+        background-color: $color-bright
+        font-weight: 200
+        font-size: 1.4em
+        color: $color-calendar-day-selected
+    td, th
+      text-align: center
+      height: 2em
+      line-height: 2em
+      padding: 0
+      color: $color-calendar-day
+      position: relative
+    td
+      font-weight: 400
+      padding: 0 10px
+      border-bottom: solid 1px $color-calendar
+      &.day:after
+        content: ""
+        position: absolute
+        display: block
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        z-index: 0
+        background-color: transparent
+      &.day:hover
+        cursor: pointer
+      &.day.disabled
+        color: $color-calendar-outrange
+      &.old, &.new
+        color: $color-calendar-outrange
+      &.start-selected:not(.old):not(.new):not(.end-selected)
+        font-weight: 700
+        background-color: $color-calendar-day-selected
+        +border-left-radius(15px)
+        @extend .chevron-left
+      &.end-selected:not(.old):not(.new):not(.start-selected)
+        font-weight: 700
+        background-color: $color-calendar-day-selected
+        @extend .chevron-right
+        +border-right-radius(15px)
+      &.end-selected.start-selected
+        +border-radius(15px)
+        font-weight: 700
+        background-color: $color-calendar-day-selected
+      &.range
+        color: lighten($color-calendar-range,35%)
+        background-color: $color-calendar-range
+      &.today
+        background-color: $color-bright
+
+      span
+        padding: 0
+        display: block
+        width: 33.333%
+        height: 3em
+        line-height: 3em
+        font-weight: 400
+        float: left
+        text-transform: uppercase
+        cursor: pointer
+        &:hover
+          background-color: $color-calendar-day-selected
+        &.active
+          background-color: $color-calendar-day-selected
+          color: #fff
+        &.old
+          color: $color-calendar-outrange
+    th
+      &.switch
+        width: 145px
+      &.next, &.prev
+        font-size: 1.3em
+    thead tr:first-child th
+      cursor: pointer
+
+
+.chevron-left, .chevron-right
+  position: relative
+.chevron-left:before, .chevron-right:before
+  display: block
+  content: ""
+  width: 0
+  height: 0
+  border-style: solid
+  position: absolute
+.chevron-left:before
+  right: 0px
+  top: 0
+  border-width: 1em 0 1em 0.5em
+  border-color: transparent transparent transparent $color-calendar-day-selected
+  background-color: $color-calendar-range
+.chevron-right:before
+  left: 0px
+  top: 0
+  border-width: 1em 0 1em 0.5em
+  border-color: transparent transparent transparent $color-calendar-range
+  background-color: $color-calendar-day-selected
+
+.input-complete
+  -webkit-animation: one 0.2s ease-in-out
+  -moz-animation: one 0.2s ease-in-out
+  -ms-animation: one 0.2s ease-in-out
+  -o-animation: one 0.2s ease-in-out
+  animation: one 0.2s ease-in-out
+    
+@-webkit-keyframes one
+  0%
+    background-color: $color-calendar
+  100%
+    background-color: $color-bright
+
+@-webkit-keyframes two
+  0%
+    +box-shadow($color-calendar 0 0 0 20px inset)
+  100%
+    +box-shadow($color-calendar 0 0 0 inset)
+      
\ No newline at end of file