first implementation of fun stats site

1 files changed, 221 insertions, 0 deletions

diff --git a/templates/assets/bootstrap-material-design/scss/_forms.scss b/templates/assets/bootstrap-material-design/scss/_forms.scss
new file mode 100644
index 0000000..2961f0b
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/_forms.scss
@@ -0,0 +1,221 @@
+form {
+  // ensure enough room at the bottom of any form to display a one-line bmd-help
+  margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
+
+  // reverse the above for navbars (no help expected in a navbar form)
+  .navbar & {
+    margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
+
+    .bmd-form-group {
+      display: inline-block;
+      padding-top: 0;
+    }
+
+    .btn {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// -----
+// Inputs
+//
+// Reference http://www.google.com/design/spec/components/text-fields.html
+// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+.form-control {
+  background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
+  background-size: $bmd-form-control-bg-size;
+  border: 0;
+  transition: background 0s ease-out;
+
+  // The border bottom should be static in all states, the decorator will be animated over this.
+  &:focus,
+  .bmd-form-group.is-focused & {
+    background-size: $bmd-form-control-bg-size-active;
+    //border-bottom: $input-btn-border-width solid $input-border-color;
+    transition-duration: 0.3s;
+  }
+}
+
+// Help blocks (not in v4)
+//  position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
+//  FIXME: width/wrapping isn't automatic and overflows occur.  What are some solutions?
+//
+.bmd-help {
+  position: absolute;
+  display: none;
+  font-size: .8rem;
+  font-weight: normal;
+  @extend .text-muted;
+
+  .bmd-form-group.is-focused & {
+    display: block;
+  }
+
+  //--------------------------------------
+  // Multiple help blocks
+  // - absolute positioning is used above to prevent bouncing
+  // - when there is more than one, this will bounce but will at least show
+  &:nth-of-type(2) {
+    padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
+  }
+
+  + .bmd-help {
+    position: relative;
+    margin-bottom: 0;
+  }
+}
+
+// -----
+// State coloring: default, success, info, warning, danger
+//
+@include bmd-selection-color();
+@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
+
+.has-success {
+  @include bmd-form-color($brand-success, $brand-success, $brand-success);
+}
+
+.has-info {
+  @include bmd-form-color($brand-info, $brand-info, $brand-info);
+}
+
+.has-warning {
+  @include bmd-form-color($brand-warning, $brand-warning, $brand-warning);
+}
+
+.has-danger {
+  @include bmd-form-color($brand-danger, $brand-danger, $brand-danger);
+}
+
+// Reference http://www.google.com/design/spec/components/text-fields.html
+// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+//.variations(unquote(" label"), color, $bmd-input-placeholder-color);  // default label color variations
+
+// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work.  That's the only purpose.
+.bmd-form-group {
+  position: relative;
+
+  // -----
+  // Labels
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  [class^='bmd-label'],
+  [class*=' bmd-label'] {
+    position: absolute;
+    pointer-events: none;
+    transition: 0.3s ease all;
+
+    // hint to browser for optimization
+    &.bmd-label-floating {
+      will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
+    }
+  }
+
+  // hide label-placeholders when the field is filled
+  &.is-filled .bmd-label-placeholder {
+    display: none;
+  }
+
+  // Optional class to make the text field inline collapsible/expandable (collapsed by default)
+  //    This uses the BS collapse js to make the width expand.
+  //    `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
+  //    FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
+  &.bmd-collapse-inline {
+    padding: 0; // get rid of any padding as this is a width transition
+
+    // Expandable Holder.
+    .collapse {
+      &.in {
+        // This is an unfortunate hack. Animating between widths in percent (%)
+        // in many browsers (Chrome, Firefox) only animates the inner visual style
+        // of the input - the outer bounding box still 'jumps'.
+        // Thus assume a sensible maximum, and animate to/from that value.
+        max-width: 600px;
+      }
+    }
+
+    .collapsing,
+    .width:not(.collapse), // collapsing is removed and momentarily only width is present
+    .collapse.in {
+      display: inline-block;
+    }
+
+    .collapsing {
+      @include material-animation-default();
+    }
+  }
+
+  // default floating size/location with an bmd-form-group
+  @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
+
+  // sm floating size/location
+  &.bmd-form-group-sm {
+    @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
+  }
+
+  // lg floating size/location
+  &.bmd-form-group-lg {
+    @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
+  }
+}
+
+// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
+@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
+
+select {
+  &,
+  &.form-control {
+    // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this.
+    -moz-appearance: none;
+    -webkit-appearance: none;
+  }
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+//.bmd-form-group input[type=file] {
+//  opacity: 0;
+//  position: absolute;
+//  top: 0;
+//  right: 0;
+//  bottom: 0;
+//  left: 0;
+//  width: 100%;
+//  height: 100%;
+//  z-index: 100;
+//}
+
+//
+//
+//.form-horizontal {
+//
+//  // Consistent vertical alignment of radios and checkboxes
+//  .radio,
+//  .checkbox,
+//  .radio-inline,
+//  .checkbox-inline {
+//    padding-top: 0;
+//  }
+//
+//  .radio {
+//    margin-bottom: 10px;
+//  }
+//
+//  label {
+//    text-align: right;
+//  }
+//
+//  label {
+//    margin: 0;
+//  }
+//}
+
+.form-inline {
+  @include media-breakpoint-up(sm) {
+    .input-group {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+}