integral 1.0.0

data/app/assets/stylesheets/integral/support/date_picker/_default.scss

@@ -0,0 +1,201 @@
+/* ==========================================================================
+   $BASE-PICKER
+   ========================================================================== */
+/**
+ * Note: the root picker element should *NOT* be styled more than what's here.
+ */
+.picker {
+  font-size: 16px;
+  text-align: left;
+  line-height: 1.2;
+  color: #000000;
+  position: absolute;
+  z-index: 10000;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/**
+ * The picker input element.
+ */
+.picker__input {
+  cursor: default;
+}
+/**
+ * When the picker is opened, the input element is "activated".
+ */
+.picker__input.picker__input--active {
+  border-color: #0089ec;
+}
+/**
+ * The holder is the only "scrollable" top-level container element.
+ */
+.picker__holder {
+  width: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/*!
+ * Default mobile-first, responsive styling for pickadate.js
+ * Demo: http://amsul.github.io/pickadate.js
+ */
+/**
+ * Note: the root picker element should *NOT* be styled more than what's here.
+ */
+/**
+ * Make the holder and frame fullscreen.
+ */
+.picker__holder,
+.picker__frame {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 100%;
+}
+/**
+ * The holder should overlay the entire screen.
+ */
+.picker__holder {
+  position: fixed;
+  -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
+  -moz-transition: background 0.15s ease-out, top 0s 0.15s;
+  transition: background 0.15s ease-out, top 0s 0.15s;
+  -webkit-backface-visibility: hidden;
+}
+/**
+ * The frame that bounds the box contents of the picker.
+ */
+.picker__frame {
+  position: absolute;
+  margin: 0 auto;
+  min-width: 256px;
+
+//  picker width
+  width: 300px;
+  max-height: 350px;
+
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -moz-opacity: 0;
+  opacity: 0;
+  -webkit-transition: all 0.15s ease-out;
+  -moz-transition: all 0.15s ease-out;
+  transition: all 0.15s ease-out;
+}
+@media (min-height: 28.875em) {
+  .picker__frame {
+    overflow: visible;
+    top: auto;
+    bottom: -100%;
+    max-height: 80%;
+  }
+}
+@media (min-height: 40.125em) {
+  .picker__frame {
+    margin-bottom: 7.5%;
+  }
+}
+/**
+ * The wrapper sets the stage to vertically align the box contents.
+ */
+.picker__wrap {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+@media (min-height: 28.875em) {
+  .picker__wrap {
+    display: block;
+  }
+}
+/**
+ * The box contains all the picker contents.
+ */
+.picker__box {
+  background: #ffffff;
+  display: table-cell;
+  vertical-align: middle;
+}
+//@media (min-height: 26.5em) {
+//  .picker__box {
+////    font-size: 1.25em;
+//  }
+//}
+@media (min-height: 28.875em) {
+  .picker__box {
+    display: block;
+
+//    picker header font-size
+//    font-size: 1rem;
+
+    border: 1px solid #777777;
+    border-top-color: #898989;
+    border-bottom-width: 0;
+    -webkit-border-radius: 5px 5px 0 0;
+    -moz-border-radius: 5px 5px 0 0;
+    border-radius: 5px 5px 0 0;
+    -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
+    -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
+    box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
+  }
+}
+//@media (min-height: 40.125em) {
+//  .picker__box {
+//    font-size: 1.1rem;
+//    border-bottom-width: 1px;
+//    -webkit-border-radius: 5px;
+//    -moz-border-radius: 5px;
+//    border-radius: 5px;
+//  }
+//}
+/**
+ * When the picker opens...
+ */
+.picker--opened .picker__holder {
+  top: 0;
+  background: transparent;
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
+  zoom: 1;
+  background: rgba(0, 0, 0, 0.32);
+  -webkit-transition: background 0.15s ease-out;
+  -moz-transition: background 0.15s ease-out;
+  transition: background 0.15s ease-out;
+}
+.picker--opened .picker__frame {
+  top: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: alpha(opacity=100);
+  -moz-opacity: 1;
+  opacity: 1;
+}
+@media (min-height: 35.875em) {
+  .picker--opened .picker__frame {
+    top: 10%;
+    bottom: auto;
+  }
+}
+/**
+ * For `large` screens, transform into an inline picker.
+ */
+
+/* ==========================================================================
+   CUSTOM MATERIALIZE STYLES
+   ========================================================================== */
+
+.picker__input.picker__input--active {
+  border-color: color("blue", "lighten-5");
+}
+
+.picker__frame {
+  margin: 0 auto;
+  max-width: 325px;
+}
+
+@media (min-height: 38.875em) {
+  .picker--opened .picker__frame {
+    top: 10%;
+    bottom: auto;
+  }
+}

data/app/assets/stylesheets/integral/support/date_picker/_default.time.scss

@@ -0,0 +1,125 @@
+/* ==========================================================================
+   $BASE-TIME-PICKER
+   ========================================================================== */
+/**
+ * The list of times.
+ */
+.picker__list {
+  list-style: none;
+  padding: 0.75em 0 4.2em;
+  margin: 0;
+}
+/**
+ * The times on the clock.
+ */
+.picker__list-item {
+  border-bottom: 1px solid #dddddd;
+  border-top: 1px solid #dddddd;
+  margin-bottom: -1px;
+  position: relative;
+  background: #ffffff;
+  padding: .75em 1.25em;
+}
+@media (min-height: 46.75em) {
+  .picker__list-item {
+    padding: .5em 1em;
+  }
+}
+/* Hovered time */
+.picker__list-item:hover {
+  cursor: pointer;
+  color: #000000;
+  background: #b1dcfb;
+  border-color: #0089ec;
+  z-index: 10;
+}
+/* Highlighted and hovered/focused time */
+.picker__list-item--highlighted {
+  border-color: #0089ec;
+  z-index: 10;
+}
+.picker__list-item--highlighted:hover,
+.picker--focused .picker__list-item--highlighted {
+  cursor: pointer;
+  color: #000000;
+  background: #b1dcfb;
+}
+/* Selected and hovered/focused time */
+.picker__list-item--selected,
+.picker__list-item--selected:hover,
+.picker--focused .picker__list-item--selected {
+  background: #0089ec;
+  color: #ffffff;
+  z-index: 10;
+}
+/* Disabled time */
+.picker__list-item--disabled,
+.picker__list-item--disabled:hover,
+.picker--focused .picker__list-item--disabled {
+  background: #f5f5f5;
+  border-color: #f5f5f5;
+  color: #dddddd;
+  cursor: default;
+  border-color: #dddddd;
+  z-index: auto;
+}
+/**
+ * The clear button
+ */
+.picker--time .picker__button--clear {
+  display: block;
+  width: 80%;
+  margin: 1em auto 0;
+  padding: 1em 1.25em;
+  background: none;
+  border: 0;
+  font-weight: 500;
+  font-size: .67em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #666;
+}
+.picker--time .picker__button--clear:hover,
+.picker--time .picker__button--clear:focus {
+  color: #000000;
+  background: #b1dcfb;
+  background: #ee2200;
+  border-color: #ee2200;
+  cursor: pointer;
+  color: #ffffff;
+  outline: none;
+}
+.picker--time .picker__button--clear:before {
+  top: -0.25em;
+  color: #666;
+  font-size: 1.25em;
+  font-weight: bold;
+}
+.picker--time .picker__button--clear:hover:before,
+.picker--time .picker__button--clear:focus:before {
+  color: #ffffff;
+}
+
+/* ==========================================================================
+   $DEFAULT-TIME-PICKER
+   ========================================================================== */
+/**
+ * The frame the bounds the time picker.
+ */
+.picker--time .picker__frame {
+  min-width: 256px;
+  max-width: 320px;
+}
+/**
+ * The picker box.
+ */
+.picker--time .picker__box {
+  font-size: 1em;
+  background: #f2f2f2;
+  padding: 0;
+}
+@media (min-height: 40.125em) {
+  .picker--time .picker__box {
+    margin-bottom: 5em;
+  }
+}

data/app/assets/stylesheets/integral/support/date_picker/materialize_clockpicker.sass

@@ -0,0 +1,220 @@
+.clockpicker-display
+  vertical-align: middle
+  display: inline-block
+  margin: auto
+  height: 85px
+  font-size: 70px
+  padding: 10px
+  padding-bottom: 0px
+  color: $datepicker-selected-outfocus
+
+.clockpicker-display-column
+  float: left
+
+.clockpicker-display-am-pm
+  padding-left: 5px
+  vertical-align: bottom
+  height: 85px
+
+.clockpicker-span-am-pm
+  display: inline-block
+  font-size: 23px
+  line-height: 25px
+  color: #b2dfdb
+
+.clockpicker-span-hours, .clockpicker-span-minutes
+  animation-duration: 500ms
+  animation-duration: 500ms
+  animation-fill-mode: both
+  animation-fill-mode: both
+  transition: color 500ms
+  cursor: pointer
+
+@-webkit-keyframes pulse
+  from
+    transform: scale3d(1, 1, 1)
+
+  50%
+    transform: scale3d(1.1, 1.1, 1.1)
+
+  to
+    transform: scale3d(1, 1, 1)
+
+@-moz-keyframes pulse
+  from
+    transform: scale3d(1, 1, 1)
+
+  50%
+    transform: scale3d(1.1, 1.1, 1.1)
+
+  to
+    transform: scale3d(1, 1, 1)
+
+@-ms-keyframes pulse
+  from
+    transform: scale3d(1, 1, 1)
+
+  50%
+    transform: scale3d(1.1, 1.1, 1.1)
+
+  to
+    transform: scale3d(1, 1, 1)
+
+@-o-keyframes pulse
+  from
+    transform: scale3d(1, 1, 1)
+
+  50%
+    transform: scale3d(1.1, 1.1, 1.1)
+
+  to
+    transform: scale3d(1, 1, 1)
+
+@keyframes pulse
+  from
+    transform: scale3d(1, 1, 1)
+
+  50%
+    transform: scale3d(1.1, 1.1, 1.1)
+
+  to
+    transform: scale3d(1, 1, 1)
+
+#click-am, #click-pm
+  cursor: pointer
+
+.clockpicker-span-hours.text-primary, .clockpicker-span-minutes.text-primary, #click-am.text-primary, #click-pm.text-primary
+  -webkit-animation-name: pulse
+  animation-name: pulse
+  color: white
+
+.clockpicker-moving
+  cursor: move
+
+.clockpicker-plate
+  background-color: #eeeeee
+  border-radius: 50%
+  width: 270px
+  height: 270px
+  overflow: visible
+  position: relative
+  margin: auto
+  margin-top: 20px
+
+  /* Disable text selection highlighting. Thanks to Hermanya
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+.clockpicker-canvas, .clockpicker-dial
+  width: 270px
+  height: 270px
+  position: absolute
+  left: -1px
+  top: -1px
+
+.clockpicker-minutes
+  visibility: hidden
+
+.clockpicker-tick
+  border-radius: 50%
+  color: #666
+  line-height: 40px
+  text-align: center
+  width: 40px
+  height: 40px
+  position: absolute
+  cursor: pointer
+  transition: background-color 300ms
+
+  &.active, &:hover
+    background-color: $datepicker-selected
+
+.clockpicker-dial
+  transition: transform 350ms, opacity 350ms
+
+.clockpicker-dial-out
+  opacity: 0
+
+.clockpicker-hours.clockpicker-dial-out
+  transform: scale(1.2, 1.2)
+
+.clockpicker-minutes.clockpicker-dial-out
+  transform: scale(0.8, 0.8)
+
+.clockpicker-canvas
+  transition: opacity 300ms
+
+.clockpicker-canvas-out
+  opacity: 0.25
+
+.clockpicker-canvas-bearing
+  stroke: none
+  fill: $datepicker-selected
+
+.clockpicker-canvas-fg
+  stroke: none
+  fill: $datepicker-selected-outfocus
+
+  &.active
+    fill: $datepicker-selected-outfocus
+
+.clockpicker-canvas-bg
+  stroke: none
+  fill: $datepicker-selected-outfocus
+
+.clockpicker-canvas-bg-trans
+  fill: $datepicker-selected-outfocus
+
+.clockpicker-canvas line
+  stroke: $datepicker-selected-outfocus
+  stroke-width: 1
+  stroke-linecap: round
+
+  /*shape-rendering: crispEdges;
+
+.clockpicker-am-pm-block
+  margin-top: -10px
+  width: 100%
+  height: 50px
+
+.clockpicker-button
+  &.am-button
+    height: 45px
+    width: 45px
+    float: left
+
+  &.pm-button
+    height: 45px
+    width: 45px
+    float: right
+
+.btn-flat
+  cursor: pointer
+
+.btn-floating.btn-flat
+  &:focus, &:visited
+    background-color: transparent
+
+  &:hover
+    box-shadow: none
+    background-color: transparent
+
+  &.active
+    background-color: $datepicker-selected-outfocus
+
+  &:active
+    background-color: $datepicker-selected-outfocus
+
+.picker__footer .clockpicker-button
+  margin: auto
+  margin-top: 15px
+
+  &:focus
+    background-color: transparent
+
+  &:active
+    background-color: $datepicker-selected-outfocus