first implementation of fun stats site

1 files changed, 233 insertions, 0 deletions

diff --git a/templates/assets/bootstrap-material-design/scss/_buttons.scss b/templates/assets/bootstrap-material-design/scss/_buttons.scss
new file mode 100644
index 0000000..ee3defc
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/_buttons.scss
@@ -0,0 +1,233 @@
+// specification: https://www.google.com/design/spec/components/buttons.html
+
+// bmd default buttons are flat by default
+.btn {
+  position: relative;
+  margin-bottom: $bmd-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
+  font-size: $bmd-btn-font-size;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  transition: box-shadow 0.2s $bmd-animation-curve-fast-out-linear-in, background-color 0.2s $bmd-animation-curve-default, color 0.2s $bmd-animation-curve-default;
+  will-change: box-shadow, transform;
+
+  @include undo-bs-tab-focus();
+
+  //--
+  // Colors
+
+  // flat removes bg, add color variations to text
+  @include bmd-flat-button-color();
+
+  // fab and raised
+  //  - colored, add their text and bg
+  //  - hover color contrasted
+  //  - shared shadow state on hover/active/focus
+  &.bmd-btn-fab,
+  &.btn-raised,
+  .btn-group-raised & {
+    @include bmd-raised-button-color();
+
+    // enlarged shadow on hover, focus
+    @include hover-focus() {
+      //border: 1px solid $blue;
+      z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
+      @include box-shadow($bmd-shadow-4dp);
+    }
+
+    // :active - momentary press: big shadow, release and it is gone
+    // .active - persistent big shadow
+    &.active,
+    &:active {
+      z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
+      @include box-shadow($bmd-shadow-focus);
+      //border: 1px solid $green;
+    }
+  }
+
+  //---
+  // btn-raised
+  &.btn-raised,
+  .btn-group-raised & {
+
+    // baseline shadow
+    @include box-shadow($bmd-shadow-2dp);
+
+    // reverse any of the above for links
+    &.btn-link {
+      box-shadow: none;
+      @include bmd-hover-focus-active() {
+        box-shadow: none;
+      }
+    }
+
+    @include bmd-disabled() {
+      box-shadow: none;
+    }
+  }
+
+  //---
+  // btn-outline
+  @include bmd-outline-button-color();
+
+  // https://www.google.com/design/spec/components/buttons-floating-action-button.html
+  &.bmd-btn-fab,
+  &.bmd-btn-icon {
+    overflow: hidden;
+    font-size: $bmd-btn-fab-font-size;
+    line-height: normal;
+
+    .btn-group-lg &,
+    .btn-group-sm &,
+    & {
+      padding: 0; // need specificity
+      border-radius: 50%;
+    }
+
+    .material-icons {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $bmd-btn-fab-font-size;
+      line-height: $bmd-btn-fab-font-size;
+      transform: translate(-($bmd-btn-fab-font-size / 2), -($bmd-btn-fab-font-size / 2));
+    }
+  }
+
+  &.bmd-btn-fab {
+    // see above for color variations
+    width: $bmd-btn-fab-size;
+    min-width: $bmd-btn-fab-size;
+    height: $bmd-btn-fab-size;
+    //margin: auto;
+    //margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
+    box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
+
+    .ripple-container {
+      border-radius: 50%;
+    }
+
+    &.bmd-btn-fab-sm,
+    .btn-group-sm & {
+      width: $bmd-btn-fab-size-sm;
+      min-width: $bmd-btn-fab-size-sm;
+      height: $bmd-btn-fab-size-sm;
+      //margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
+
+      //.material-icons {
+      //  top: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2;
+      //  left: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2;
+      //}
+    }
+  }
+
+  // Icon buttons
+  &.bmd-btn-icon {
+    width: $bmd-btn-icon-size;
+    min-width: $bmd-btn-icon-size;
+    height: $bmd-btn-icon-size;
+    margin: 0;
+    color: inherit;
+
+    &.bmd-btn-icon-sm,
+    .btn-group-sm & {
+      width: $bmd-btn-icon-size-sm;
+      min-width: $bmd-btn-icon-size-sm;
+      height: $bmd-btn-icon-size-sm;
+      font-size: $bmd-btn-icon-font-size-sm;
+
+      .material-icons {
+        //$position: ($bmd-btn-icon-size-sm - $bmd-btn-icon-font-size-sm) / 2;
+        //top: $position;
+        //left: $position;
+        width: $bmd-btn-icon-font-size-sm;
+        font-size: $bmd-btn-icon-font-size-sm;
+        line-height: 1;
+        transform: translate(-($bmd-btn-icon-font-size-sm / 2), -($bmd-btn-icon-font-size-sm / 2));
+      }
+    }
+  }
+
+  // Align icons inside buttons with text
+  .material-icons {
+    position: relative;
+    top: .25em;
+    margin-top: -1em;
+    margin-bottom: -1em;
+    font-size: 1.5em;
+  }
+
+  // Size variations
+  &.btn-lg,
+  .btn-group-lg & {
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $bmd-btn-font-size-lg, $btn-border-radius-lg);
+  }
+  &.btn-sm,
+  .btn-group-sm & {
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $bmd-btn-font-size-sm, $btn-border-radius-sm);
+    font-size: $bmd-btn-font-size-sm;
+  }
+}
+
+// Disabled buttons and button groups
+.btn,
+.input-group-btn .btn,
+.btn-group,
+.btn-group-vertical {
+  // have to ratchet up the specificity to kill drop shadows on disabled raised buttons
+  @include bmd-disabled() {
+    color: $bmd-btn-disabled;
+    .bg-inverse & {
+      color: $bmd-inverse-btn-disabled;
+    }
+
+    // flat buttons shouldn't lose transparency on disabled hover/focus
+    &,
+    &:hover,
+    &:focus {
+      background: transparent;
+    }
+  }
+}
+
+// btn-group variations
+.btn-group,
+.btn-group-vertical {
+
+  position: relative;
+  margin: 10px 1px;
+
+  // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
+  //&.open {
+  //  .dropdown-toggle {
+  //  }
+  //
+  //  > .dropdown-toggle.btn {
+  //    @include bmd-raised-button-color-bg();
+  //  }
+  //}
+
+  .dropdown-menu {
+    border-radius: 0 0 $border-radius $border-radius;
+  }
+
+  &.btn-group-raised {
+    @include box-shadow($bmd-shadow-2dp);
+  }
+
+  .btn + .btn,
+  .btn,
+  .btn:active,
+  .btn-group {
+    margin: 0;
+  }
+
+  // remove margin from nested btn-group(s) to properly align them with the outer buttons
+  > .btn-group {
+    margin: 0;
+  }
+}