rails-bootstrap-material-design 0.5.10

data/app/assets/stylesheets/bootstrap-material-design.scss

@@ -0,0 +1,4 @@
+@import 'bootstrap-material-design/_variables';
+@import 'bootstrap-material-design/_mixins';
+@import 'bootstrap-material-design/_shadows';
+@import 'bootstrap-material-design/_core';

data/app/assets/stylesheets/bootstrap-material-design/_alerts.scss

@@ -0,0 +1,17 @@
+.alert {
+    border: 0;
+    border-radius: 0;
+
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
+    @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
+
+    &-info, &-danger, &-warning, &-success {
+        color: $mdb-text-color-light;
+    }
+
+    &-default {
+        a, .alert-link {
+            color: $mdb-text-color-primary;
+        }
+    }
+}

data/app/assets/stylesheets/bootstrap-material-design/_buttons.scss

@@ -0,0 +1,244 @@
+// specification: https://www.google.com/design/spec/components/buttons.html
+
+@mixin typo-button($colorContrast: false){
+  font-size: $mdb-btn-font-size-base;
+  font-weight: 500;
+  text-transform: uppercase;
+  //line-height: 1;
+  letter-spacing: 0;
+
+  @if ($colorContrast) {
+    opacity: 0.87;
+  }
+}
+
+// mdb default buttons are flat by default
+// synchronized with mdl 11/23/15
+.btn,
+.input-group-btn .btn {
+  border: none;
+  border-radius: $border-radius-base;
+  position: relative;
+  padding: 8px 30px;
+  margin: 10px 1px;
+  @include typo-button();
+  will-change: box-shadow, transform;
+  transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
+  background-color 0.2s $mdb-animation-curve-default,
+  color 0.2s $mdb-animation-curve-default;
+  outline: 0;
+  cursor: pointer;
+  text-decoration: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  //---
+  // btn-flat
+  background: transparent;
+  &:not(.btn-raised) {
+    @include variations(unquote(".btn"), unquote(""), color, $mdb-text-color-primary);
+    box-shadow: none;
+
+    &:not(.btn-link) {
+      &:hover,
+      &:focus {
+        // spec: flat/light bg Hover: 20% #999999
+        background-color: rgba(#999999, (20/100));
+
+        .theme-dark & {
+          // spec: dark bg Hover: 15% #CCCCCC
+          background-color: rgba(#CCCCCC, (15/100));
+        }
+      }
+    }
+  }
+
+  //--
+  // color variations
+  &.btn-raised,
+  &.btn-fab,
+  .btn-group-raised & {
+    @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
+  }
+
+  //---
+  // btn-raised
+  &.btn-raised,
+  .btn-group-raised & {
+    &:not(.btn-link) {
+      @include shadow-2dp();
+
+      // colors on hover, focus, active
+      &:hover,
+      &:focus,
+      &.active,
+      &:active {
+
+        outline: 0;
+
+        // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
+        // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
+        @include button-variations(unquote(".btn"), "", $mdb-btn-background-color);
+
+        // Spec:
+        //  - Raised Light/Light theme no hover.
+        //  - Raised Dark/Dark theme Hover color: 600
+        .theme-dark & {
+        }
+      }
+
+      // shadow on active
+      &.active,
+      &:active {
+        &,
+        &:hover {
+          @include shadow-4dp();
+        }
+      }
+
+      // shadow on focus
+      //   Focus should take precedence over active, so specificity is needed
+      &:focus {
+        &,
+        &.active,
+        &:active {
+          &,
+          &:hover {
+            @include focus-shadow();
+          }
+        }
+      }
+    }
+  }
+
+  &.btn-fab {
+    // see above for color variations
+    border-radius: 50%;
+    font-size: $mdb-btn-fab-font-size;
+    height: $mdb-btn-fab-size;
+    margin: auto;
+    min-width: $mdb-btn-fab-size;
+    width: $mdb-btn-fab-size;
+    padding: 0;
+    overflow: hidden;
+    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
+    position: relative;
+    line-height: normal;
+
+    .ripple-container {
+      border-radius: 50%;
+    }
+
+    &.btn-fab-mini,
+    .btn-group-sm & {
+      height: $mdb-btn-fab-size-mini;
+      min-width: $mdb-btn-fab-size-mini;
+      width: $mdb-btn-fab-size-mini;
+
+      &.material-icons {
+        top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
+        left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
+      }
+    }
+
+    i.material-icons {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
+      line-height: $mdb-btn-fab-font-size;
+      width: $mdb-btn-fab-font-size;
+    }
+  }
+
+  // Align icons inside buttons with text
+  i.material-icons {
+    vertical-align: middle;
+  }
+
+  // Size variations
+  &.btn-lg,
+  .btn-group-lg & {
+    font-size: $mdb-btn-font-size-lg;
+  }
+  &.btn-sm,
+  .btn-group-sm & {
+    padding: 5px 20px;
+    font-size: $mdb-btn-font-size-sm;
+  }
+  &.btn-xs,
+  .btn-group-xs & {
+    padding: 4px 15px;
+    font-size: $mdb-btn-font-size-xs;
+  }
+}
+
+// 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
+  fieldset[disabled][disabled] &,
+  &.disabled,
+  &:disabled,
+  &[disabled][disabled] {
+    // spec: light theme: Disabled text: 26% #000000
+    color: rgba(#000000, (26/100));
+    .theme-dark & {
+      // spec: dark theme: Disabled text: 30% #FFFFFF
+      color: rgba(#FFFFFF, (30/100));
+    }
+
+    // flat buttons lose transparency
+    background: transparent;
+
+    // no box-shadow on raised - need specificity
+    &.btn-raised,
+    &.btn-group-raised {
+      &,
+      &.active,
+      &:active,
+      &:focus:not(:active) {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+// btn-group variations
+.btn-group,
+.btn-group-vertical {
+
+  position: relative;
+  //border-radius: 2px;
+  margin: 10px 1px;
+
+  // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
+  &.open {
+    .dropdown-toggle {
+      //box-shadow: none;
+    }
+
+    & > .dropdown-toggle.btn {
+      @include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color);
+    }
+  }
+
+  .dropdown-menu {
+    border-radius: 0 0 $border-radius-base $border-radius-base;
+  }
+
+  &.btn-group-raised {
+    @include shadow-2dp();
+  }
+
+  & .btn + .btn,
+  .btn,
+  .btn:active,
+  .btn-group {
+    margin: 0;
+  }
+}

data/app/assets/stylesheets/bootstrap-material-design/_cards.scss

@@ -0,0 +1,66 @@
+.card {
+
+    /***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
+
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    .card-height-indicator {
+        margin-top: 100%;
+    }
+    .card-content {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    /**************************************************************************/
+
+
+    border-radius: $border-radius-base;
+    color: $mdb-card-body-text;
+    background: $mdb-card-body-background;
+
+    @include shadow-z-2();
+
+    .card-image {
+        height: 60%;
+        position: relative;
+        overflow: hidden;
+        img {
+            width: 100%;
+            height: 100%;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            pointer-events: none;
+        }
+        .card-image-headline {
+            position: absolute;
+            bottom: 16px;
+            left: 18px;
+            color: $mdb-card-image-headline;
+            font-size: 2em;
+        }
+    }
+
+    .card-body {
+        height: 30%;
+        padding: 18px;
+    }
+
+    .card-footer {
+        height: 10%;
+        padding: 18px;
+        button, a {
+            margin: 0 !important;
+            position: relative;
+            bottom: 25px;
+            width: auto;
+            &:first-child {
+                left: -15px;
+            }
+        }
+    }
+}

data/app/assets/stylesheets/bootstrap-material-design/_checkboxes.scss

@@ -0,0 +1,270 @@
+// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
+
+.checkbox label,
+label.checkbox-inline {
+  cursor: pointer;
+  padding-left: 0; // Reset for Bootstrap rule
+  color: $mdb-checkbox-label-color;
+  @include mdb-label-color-toggle-focus();
+}
+
+.checkbox,
+label.checkbox-inline {
+  // Hide native checkbox
+  input[type=checkbox] {
+    opacity: 0;
+    position: absolute;
+    margin: 0;
+    z-index: -1;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    left: 0;
+    pointer-events: none;
+  }
+
+  .checkbox-material {
+    vertical-align: middle;
+    position: relative;
+    top: 3px;
+    &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
+      display: block;
+      position: absolute;
+      top:-5px;
+      left: 0;
+      content: "";
+      background-color: rgba(0, 0, 0, .84);
+      height: $mdb-checkbox-size;
+      width: $mdb-checkbox-size;
+      border-radius: 100%;
+      z-index: 1;
+      opacity: 0;
+      margin: 0;
+      transform: scale3d(2.3, 2.3, 1);
+    }
+
+    .check {
+      position: relative;
+      display: inline-block;
+      width: $mdb-checkbox-size;
+      height: $mdb-checkbox-size;
+      border: $mdb-checkbox-border-size solid $mdb-checkbox-border-color;
+      border-radius: $border-radius-base;
+      overflow: hidden;
+      z-index: 1;
+    }
+    .check:before {
+      position: absolute;
+      content: "";
+      transform: rotate(45deg);
+      display: block;
+      margin-top: -4px;
+      margin-left: 6px;
+      width: 0;
+      height: 0;
+      box-shadow:
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0 inset;
+    }
+  }
+
+  input[type=checkbox] {
+
+    &:focus + .checkbox-material .check:after {
+      opacity: 0.2;
+    }
+ 
+    &:focus{
+      
+      &:checked{
+        & + .checkbox-material:before {
+          animation: rippleOn 500ms;
+        }
+        & + .checkbox-material .check:before {
+          animation: checkbox-on $mdb-checkbox-animation-check forwards;
+        }
+        & + .checkbox-material .check:after {
+          animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
+        }
+      }
+      
+      &:not(:checked) {
+        & + .checkbox-material:before {
+          animation: rippleOff 500ms;
+        }
+        & + .checkbox-material .check:before {
+          animation: checkbox-off $mdb-checkbox-animation-check forwards;
+        }
+        & + .checkbox-material .check:after {
+          animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
+        }
+      }
+      
+    }
+    
+    
+    &:checked {
+
+      // FIXME: once working - combine further to reduce code
+      & + .checkbox-material .check {
+        color: $mdb-checkbox-checked-color;
+        border-color: $mdb-checkbox-checked-color;
+      }
+
+      & + .checkbox-material .check:before {
+        color: $mdb-checkbox-checked-color;
+        box-shadow:
+          0 0 0 10px,
+          10px -10px 0 10px,
+          32px 0 0 20px,
+          0px 32px 0 20px,
+          -5px 5px 0 10px,
+          20px -12px 0 11px;
+      }
+
+      & + .checkbox-material .check:after {
+        //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
+      }
+    }
+  }
+
+  // Style for disabled inputs
+  fieldset[disabled] &,
+  fieldset[disabled] & input[type=checkbox],
+  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
+  input[type=checkbox][disabled] + .circle {
+    opacity: 0.5;
+  }
+  input[type=checkbox][disabled] + .checkbox-material .check:after {
+    background-color: $mdb-text-color-primary;
+    transform: rotate(-45deg);
+  }
+}
+
+@keyframes checkbox-on {
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px;
+  }
+  50% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px 2px 0 11px;
+  }
+  100% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px;
+  }
+}
+
+@keyframes checkbox-off {
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px,
+      0 0 0 0 inset;
+  }
+  25% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px,
+      0 0 0 0 inset;
+  }
+  50% {
+    transform: rotate(45deg);
+    margin-top: -4px;
+    margin-left: 6px;
+    width: 0;
+    height: 0;
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px,
+      0 0 0 0 inset;
+  }
+  51% {
+    transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow:
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0 0 10px inset;
+  }
+  100% {
+    transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow:
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0 0 0 inset;
+  }
+}
+
+@keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}