first implementation of fun stats site

1 files changed, 283 insertions, 0 deletions

diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_forms.scss b/templates/assets/bootstrap-material-design/scss/mixins/_forms.scss
new file mode 100644
index 0000000..bdb79bc
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/mixins/_forms.scss
@@ -0,0 +1,283 @@
+@mixin bmd-disabled() {
+  fieldset[disabled][disabled] &,
+  &.disabled,
+  &:disabled,
+  &[disabled] {
+    @content
+  }
+}
+
+@mixin bmd-selection-color() {
+  .radio label,
+  .radio-inline,
+  .checkbox label,
+  .checkbox-inline,
+  .switch label {
+
+    // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
+    //color: $bmd-label-color;
+
+    &,
+    .is-focused & {
+      // form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
+      color: $bmd-label-color;
+
+      // on focus just darken the specific labels, do not turn them to the brand-primary
+      @include hover-focus-active() {
+        //&:hover,
+        //&:focus {
+        color: $bmd-label-color-inner-focus;
+      }
+
+      // correct the above focus color for disabled items
+      label:has(input[type=radio][disabled]), // css 4 which is unlikely to work for a while, but no other pure css way.
+      label:has(input[type=checkbox][disabled]), // css 4
+      fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus {
+          color: $bmd-label-color;
+        }
+      }
+    }
+  }
+
+  // Style for disabled inputs  OLD, use color approach with opacity built in, see radios
+  //fieldset[disabled] &,
+  //fieldset[disabled] & input[type=checkbox],
+  //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
+  //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
+  //input[type=checkbox][disabled] + .bmd-radio-outer-circle {
+  //  opacity: 0.5;
+  //}
+}
+
+@mixin bmd-radio-color($color) {
+
+  ~ .bmd-radio-inner-circle {
+    background-color: $color;
+  }
+
+  ~ .bmd-radio-outer-circle {
+    border-color: $color;
+  }
+}
+
+@mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
+
+  [class^='bmd-label'],
+  [class*=' bmd-label'] {
+    color: $label-color;
+  }
+
+  // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
+  .form-control {
+
+    // underline animation color on focus
+    $underline-background-image:          linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image-invalid:  linear-gradient(to top, $bmd-invalid-underline 2px, fade-out($bmd-invalid-underline, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image-readonly: linear-gradient(to top, $bmd-readonly-underline 1px, fade-out($bmd-readonly-underline, 1) 1px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image-disabled: linear-gradient(to right, $input-border-color 0%, $input-border-color 30%, transparent 30%, transparent 100%);
+
+    // bg image is always there, we just need to reveal it
+    &,
+    .is-focused & {
+      background-image: $underline-background-image;
+    }
+
+    &:invalid {
+      background-image: $underline-background-image-invalid;
+    }
+
+    &:read-only {
+      background-image: $underline-background-image-readonly;
+    }
+
+    @include bmd-disabled() {
+      background-image: $underline-background-image-disabled;
+      background-repeat: repeat-x;
+      background-size: 3px 1px;
+    }
+
+    // allow underline focus image and validation images to coexist
+    &.form-control-success {
+      &,
+      .is-focused & {
+        background-image: $underline-background-image, $form-icon-success;
+      }
+    }
+    &.form-control-warning {
+      &,
+      .is-focused & {
+        background-image: $underline-background-image, $form-icon-warning;
+      }
+    }
+    &.form-control-danger {
+      &,
+      .is-focused & {
+        background-image: $underline-background-image, $form-icon-danger;
+      }
+    }
+  }
+
+  .is-focused, // may or may not be a form-group or bmd-form-group
+  &.is-focused {
+    // on focus set borders and labels to the validation color
+
+    // Use the BS provided mixin for the bulk of the color
+    @include form-control-validation($label-color);
+
+    [class^='bmd-label'],
+    [class*=' bmd-label'] {
+      color: $label-color-focus;
+    }
+
+    .bmd-label-placeholder {
+      color: $label-color; // keep the placeholder color
+    }
+
+    // Set the border and box shadow on specific inputs to match
+    .form-control {
+      border-color: $border-color;
+    }
+
+    // Set validation states also for addons
+    //.input-group-addon {
+    //  border-color: $border-color;
+    //}
+
+    .bmd-help {
+      color: $bmd-label-color-inner-focus;
+    }
+  }
+}
+
+// must be broken out for reuse - webkit selector breaks firefox
+@mixin bmd-label-static($label-top, $static-font-size) {
+  top: $label-top;
+  left: 0;
+  // must repeat because the previous (more generic) selectors
+  font-size: $static-font-size;
+}
+
+@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
+
+  $variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
+  $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
+  $help-font-size: ($bmd-help-size-ratio * $font-size);
+
+  $label-static-top: $label-top-margin;
+  $label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y;
+
+  //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
+
+  //Label height: 72dp
+  //Padding above label text: 16dp
+  //Padding between label and input text: 8dp
+  //Padding below input text (including divider): 16dp
+  //Padding below text divider: 8dp
+
+  @if $form-group-context {
+    // Create a space at the top of the bmd-form-group for the label.
+    //  The label is absolutely positioned, so we use top padding to make space.  This padding extends over the label down to the top of the input (padding).
+    padding-top: ($label-top-margin + $static-font-size);
+    // note: bottom-margin of this is determined by $spacer.  @see _spacer.scss
+    //margin-bottom: (1.5 * $help-font-size);
+  }
+
+  // TODO: remove this when known stable.  https://github.com/FezVrasta/bootstrap-material-design/issues/849
+  //@else {
+  //
+  //  // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that
+  //  //  any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups
+  //  .radio,
+  //  label.radio-inline,
+  //  .checkbox,
+  //  label.checkbox-inline,
+  //  .switch {
+  //    padding-top: $spacer-y;
+  //  }
+  //}
+
+  // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space
+  //  from the default line-height of 1.5
+  .form-control,
+  label,
+  input::placeholder {
+    line-height: $variant-line-height;
+  }
+
+  .radio label,
+  label.radio-inline,
+  .checkbox label,
+  label.checkbox-inline,
+  .switch label {
+    line-height: $line-height-base; // keep the same line height for radios and checkboxes
+  }
+
+  // Note: this may be inside or outside a form-group, may be .bmd-form-group.bmd-form-group-sm or .bmd-form-group.bmd-form-group-lg
+  input::placeholder {
+    font-size: $font-size;
+  }
+
+  // generic labels used anywhere in the form
+  .checkbox label,
+  .radio label,
+  label {
+    font-size: $font-size;
+  }
+
+  // floating/placeholder default (no focus)
+  .bmd-label-floating,
+  .bmd-label-placeholder {
+    //@debug "top: #{$label-as-placeholder-top}";
+    top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding
+  }
+
+  // floating focused/filled will look like static
+  &.is-focused,
+  .is-focused,
+  &.is-filled,
+  .is-filled {
+    .bmd-label-floating {
+      @include bmd-label-static($label-static-top, $static-font-size);
+    }
+  }
+
+  // static
+  .bmd-label-static {
+    @include bmd-label-static($label-static-top, $static-font-size);
+  }
+  // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
+  //input:-webkit-autofill ~ .bmd-label-floating {  FIXME: confirm that the autofill js generation of change event makes this unnecessary
+  //  @include bmd-label-static($label-top, $static-font-size, $static-line-height);
+  //}
+
+  .bmd-help {
+    margin-top: 0; // allow the input margin to set-off the top of the help-block
+    font-size: $help-font-size;
+  }
+
+  // validation icon placement
+  .form-control {
+    &.form-control-success,
+    &.form-control-warning,
+    &.form-control-danger {
+      $icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5);
+      background-size: $bmd-form-control-bg-size, $icon-bg-size;
+
+      &,
+      &:focus,
+      .bmd-form-group.is-focused & {
+        padding-right: ($input-padding-x * 3);
+        background-repeat: $bmd-form-control-bg-repeat-y, no-repeat;
+        background-position: $bmd-form-control-bg-position, center right ($variant-input-height * .25);
+      }
+
+      &:focus,
+      .bmd-form-group.is-focused & {
+        background-size: $bmd-form-control-bg-size-active, $icon-bg-size;
+      }
+    }
+  }
+}