rails-bootstrap-material-design 0.5.10

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

@@ -0,0 +1,21 @@
+.panel {
+  border-radius: 2px;
+  border: 0;
+
+  @include variations(unquote(".panel"), unquote(" > .panel-heading"), background-color, $grey-200);
+  @include shadow-z-1;
+}
+
+
+[class*="panel-"] > .panel-heading {
+  color: $mdb-text-color-light;
+  border: 0;
+}
+.panel-default, .panel:not([class*="panel-"]) {
+  > .panel-heading {
+    color: $mdb-text-color-primary;
+  }
+}
+.panel-footer {
+  background-color: $grey-200;
+}

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

@@ -0,0 +1,5 @@
+// External plugins
+@import 'plugins/_plugin-snackbarjs';
+@import 'plugins/_plugin-nouislider';
+@import 'plugins/_plugin-selectize';
+@import 'plugins/_plugin-dropdownjs';

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

@@ -0,0 +1,18 @@
+.popover, .tooltip-inner {
+  color: $mdb-popover-color;
+  line-height: 1em;
+  background: $mdb-popover-background;
+  border: none;
+  border-radius: $border-radius-base;
+  @include shadow-z-1();
+}
+
+.tooltip, .tooltip.in {
+  opacity: 1;
+}
+
+.popover, .tooltip {
+  .arrow, .tooltip-arrow {
+    display: none;
+  }
+}

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

@@ -0,0 +1,10 @@
+.progress {
+    height: 4px;
+    border-radius: 0;
+    box-shadow: none;
+    background: #c8c8c8;
+    .progress-bar {
+        box-shadow: none;
+        @include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary);
+    }
+}

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

@@ -0,0 +1,115 @@
+@mixin radio-color($color, $opacity){
+  & ~ .check,
+  & ~ .circle {
+    opacity: $opacity;
+  }
+
+  & ~ .check {
+    background-color: $color;
+  }
+
+  & ~ .circle {
+    border-color: $color;
+  }
+}
+
+.radio label, label.radio-inline {
+    cursor: pointer;
+    padding-left: 45px;
+    position: relative;
+    color: $mdb-radio-label-color;
+    @include mdb-label-color-toggle-focus();
+}
+
+.radio, label.radio-inline {
+  span {
+    display: block;
+    position: absolute;
+    left: 10px;
+    top: 2px;
+    transition-duration: 0.2s;
+  }
+  .circle {
+    border: 2px solid $mdb-radio-color-off;
+    height: 15px;
+    width: 15px;
+    border-radius: 100%;
+  }
+  .check {
+    height: 15px;
+    width: 15px;
+    border-radius: 100%;
+    background-color: $mdb-radio-color-on;
+    transform: scale3d(0, 0, 0);
+  }
+  .check:after {
+    display: block;
+    position: absolute;
+    content: "";
+    background-color: $mdb-text-color-primary;
+    left: -18px;
+    top: -18px;
+    height: 50px;
+    width: 50px;
+    border-radius: 100%;
+    z-index: 1;
+    opacity: 0;
+    margin: 0;
+    transform: scale3d(1.5, 1.5, 1);
+  }
+  
+  input[type=radio]:focus:not(:checked) ~ .check:after {
+    animation: rippleOff 500ms;
+  }
+  input[type=radio]:focus:checked ~ .check:after {
+    animation: rippleOn 500ms;
+  }
+
+  input[type=radio] {
+    opacity: 0;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+
+    &:checked {
+      @include radio-color($mdb-radio-color-on, 1);
+    }
+    &:checked ~ .check {
+      transform: scale3d(0.55, 0.55, 1);
+    }
+  }
+
+  input[type=radio][disabled] {
+
+    // light theme spec: Disabled: #000000, Opacity  26%
+    @include radio-color($black, 0.26);
+
+    // dark theme spec: Disabled: #FFFFFF, Opacity  30%
+    .theme-dark & {
+      @include radio-color($white, 0.30);
+    }
+  }
+}
+
+@keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,82 @@
+@mixin shadow-z-1(){
+  box-shadow:
+    0 1px 6px 0 rgba(0, 0, 0, 0.12),
+    0 1px  6px 0 rgba(0, 0, 0, 0.12);
+}
+
+@mixin shadow-z-1-hover(){
+  box-shadow:
+    0 5px 11px 0 rgba(0, 0, 0, 0.18),
+    0 4px 15px 0 rgba(0, 0, 0, 0.15);
+}
+
+@mixin shadow-z-2(){
+  box-shadow:
+    0 8px 17px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+@mixin shadow-z-3(){
+  box-shadow:
+    0 12px 15px 0 rgba(0, 0, 0, 0.24),
+    0 17px 50px 0 rgba(0, 0, 0, 0.19);
+}
+
+@mixin shadow-z-4(){
+  box-shadow:
+    0 16px 28px 0 rgba(0, 0, 0, 0.22),
+    0 25px 55px 0 rgba(0, 0, 0, 0.21);
+}
+
+@mixin shadow-z-5(){
+  box-shadow:
+    0 27px 24px 0 rgba(0, 0, 0, 0.2),
+    0 40px 77px 0 rgba(0, 0, 0, 0.22);
+}
+
+
+/* Shadows (from mdl http://www.getmdl.io/) */
+
+// Focus shadow mixin.
+@mixin focus-shadow(){
+  box-shadow: 0 0 8px rgba(0,0,0,.18),
+  0 8px 16px rgba(0,0,0,.36);
+}
+
+@mixin shadow-2dp(){
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 3px 1px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
+}
+@mixin shadow-3dp(){
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 3px 3px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
+}
+@mixin shadow-4dp(){
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 1px 10px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+@mixin shadow-6dp(){
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 1px 18px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+@mixin shadow-8dp(){
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-16dp(){
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0  6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0  8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-24dp(){
+  box-shadow: 0  9px 46px  8px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 11px 15px -7px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 24px 38px  3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}

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

@@ -0,0 +1,15 @@
+table {
+  width: 100%;
+  font-size: 12px;
+  thead th {
+    color: rgba(0, 0, 0, 0.46);
+    font-weight: 400;
+  }
+  td, th {
+    padding: 10px 15px;
+    border-bottom: 1px solid #E0E0E0;
+  }
+  tbody tr:hover {
+    background-color: #EEEEEE;
+  }
+}

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

@@ -0,0 +1,24 @@
+.nav-tabs {
+    background: $brand-primary;
+    > li {
+        > a {
+            color: #FFFFFF;
+            border: 0;
+            margin: 0;
+            &:hover {
+                background-color: transparent;
+                border: 0;
+            }
+        }
+        & > a, & > a:hover, & > a:focus {
+            background-color: transparent !important;
+            border: 0 !important;
+            color: #FFFFFF !important;
+            font-weight: 500;
+        }
+        &.disabled > a, &.disabled > a:hover {
+            color: rgba(255,255,255,0.5);
+        }
+    }
+
+}

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

@@ -0,0 +1,6 @@
+// by default, assume light-theme, no need for a marker class.
+
+// this is mostly a marker class, add it to something like the body or container.  Subordinates will look for this marker - see buttons
+.theme-dark {
+
+}

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

@@ -0,0 +1,83 @@
+.togglebutton {
+  vertical-align: middle;
+  &, label, input, .toggle {
+    user-select: none;
+  }
+  label {
+    cursor: pointer;
+    color: $mdb-toggle-label-color;
+    @include mdb-label-color-toggle-focus();
+
+    // Hide original checkbox
+    input[type=checkbox] {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .toggle {
+      text-align: left; // Issue #737 horizontal form
+    }
+    // Switch bg off and disabled
+    .toggle,
+    input[type=checkbox][disabled] + .toggle {
+      content: "";
+      display: inline-block;
+      width: 30px;
+      height: 15px;
+      background-color: rgba(80, 80, 80, 0.7);
+      border-radius: 15px;
+      margin-right: 15px;
+      transition: background 0.3s ease;
+      vertical-align: middle;
+    }
+    // Handle off
+    .toggle:after {
+      content: "";
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background-color: #F1F1F1;
+      border-radius: 20px;
+      position: relative;
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+      left: -5px;
+      top: -2px;
+      transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+    }
+    input[type=checkbox] {
+      // Handle disabled
+      &[disabled] {
+        & + .toggle:after,
+        &:checked + .toggle:after {
+          background-color: #BDBDBD;
+        }
+      }
+
+      & + .toggle:active:after,
+      &[disabled] + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+      }
+
+      // Ripple off and disabled
+      &:checked + .toggle:after {
+        left: 15px;
+      }
+    }
+
+    // set bg when checked
+    input[type=checkbox]:checked {
+      + .toggle {
+        background-color: rgba($brand-primary, (50/100)); // Switch bg on
+      }
+
+      + .toggle:after {
+        background-color: $brand-primary; // Handle on
+      }
+
+      + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+.text-warning {
+  color: $brand-warning;
+}
+.text-primary {
+  color: $brand-primary;
+}
+.text-danger {
+  color: $brand-danger;
+}
+.text-success {
+  color: $brand-success;
+}
+.text-info {
+  color: $brand-info;
+}

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

@@ -0,0 +1,169 @@
+@import '_colors';
+
+// Typography elements
+$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
+$mdb-text-color-light: $white;
+$mdb-text-color-light-hex: $white !default; // for contrast function in inverse
+$mdb-text-color-primary: $black;
+$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
+$icon-color: rgba(0,0,0,0.5) !default;
+
+
+$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
+$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;
+
+
+//---
+// Converted bs variables
+
+// Bootstrap brand color customization
+$brand-primary: #00519d;
+$brand-success: $green !default;
+$brand-danger: $red !default;
+$brand-warning: $deep-orange !default;
+$brand-info: $light-blue !default;
+
+$border-radius-base: 2px !default;
+$border-radius-small: 1px !default;
+
+// Typography
+$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
+$headings-font-weight: 300 !default;
+
+$body-bg: #EEEEEE !default;
+//---
+
+// import bs variables for sass, first declared wins.
+@import '_import-bs-sass';
+
+// Bootstrap Material Design variables start with mdb-
+$mdb-brand-inverse: $indigo !default;
+
+
+/* ANIMATION */
+$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
+
+
+//---
+// FIXME: Similar but not quite the same as Bootstrap variables
+// FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables
+$contrast-factor: 40% !default;
+//---
+
+
+
+
+// --------------------
+// inputs
+$mdb-input-placeholder-color: #BDBDBD !default;
+$mdb-input-underline-color: #D2D2D2 !default;
+$mdb-label-static-size-ratio: 75 / 100 !default;
+$mdb-help-block-size-ratio: 75 / 100 !default;
+
+$mdb-input-font-size-base: 14px;
+$mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
+$mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
+
+// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
+//** Unit-less `line-height` for use in components like buttons.
+$mdb-input-line-height-base:        $line-height-base; //1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$mdb-input-line-height-computed:    floor(($mdb-input-font-size-base * $mdb-input-line-height-base)) !default; // ~20px
+$mdb-input-line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$mdb-input-line-height-small:         1.5 !default;
+
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+$mdb-input-padding-base-vertical:     8px - 1px !default; // was 6.
+$mdb-input-padding-base-horizontal:   0 !default; // was 12.
+$mdb-label-as-placeholder-shim-base:  0 !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-base:           16px !default;
+
+$mdb-input-padding-large-vertical:    10px - 1px !default; // 10
+$mdb-input-padding-large-horizontal:  0 !default;  // 16
+$mdb-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-large:          16px !default;
+
+$mdb-input-padding-small-vertical:    4px - 1px !default; // 5
+$mdb-input-padding-small-horizontal:  0 !default; // 10
+$mdb-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-small:          12px !default;
+
+$mdb-input-padding-xs-vertical:       2px !default; // 1
+$mdb-input-padding-xs-horizontal:     0 !default; // 5
+
+$mdb-input-border-radius-base:        0 !default;
+$mdb-input-border-radius-large:       0 !default;
+$mdb-input-border-radius-small:       0 !default;
+
+
+//** Default `.form-control` height
+$mdb-input-height-base:              ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$mdb-input-height-large:             (ceil($mdb-input-font-size-large * $mdb-input-line-height-large) + ($mdb-input-padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$mdb-input-height-small:             (floor($mdb-input-font-size-small * $mdb-input-line-height-small) + ($mdb-input-padding-small-vertical * 2) + 2) !default;
+
+
+
+
+// Card
+$mdb-card-body-text: $mdb-text-color-primary !default;
+$mdb-card-body-background: #fff !default;
+$mdb-card-image-headline: #fff !default;
+
+$text-disabled: #a8a8a8 !default;
+$background-disabled: #eaeaea !default;
+
+// Checkboxes
+$mdb-checkbox-size: 20px !default;
+$mdb-checkbox-animation-ripple: 500ms !default;
+$mdb-checkbox-animation-check: 0.3s !default;
+$mdb-checkbox-checked-color: $brand-primary !default;
+
+$mdb-checkbox-border-size: 2px !default;
+$mdb-checkbox-label-color: $mdb-label-color !default;
+$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
+
+// Popovers and Popups
+$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
+$mdb-popover-color: #ececec !default;
+
+// Dropdown Menu
+$mdb-dropdown-font-size: 14px;
+
+// Toggle
+$mdb-toggle-label-color: $mdb-label-color !default;
+
+// Radio:
+$mdb-radio-label-color: $mdb-label-color !default;
+$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
+$mdb-radio-color-on: $brand-primary !default;
+
+// Buttons:
+$mdb-btn-font-size-base: 14px !default;
+$mdb-btn-font-size-lg: 16px !default;
+$mdb-btn-font-size-sm: 12px !default;
+$mdb-btn-font-size-xs: 10px !default;
+
+
+$mdb-btn-background-color: $body-bg; //transparent !default;
+$mdb-btn-background-color-text: $mdb-text-color-primary !default;
+
+
+//$mdb-btn-border-radius: 2px !default;
+//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;
+
+$mdb-btn-fab-size: 56px !default;
+$mdb-btn-fab-size-mini: 40px !default;
+$mdb-btn-fab-font-size: 24px !default;
+
+$mdb-btn-icon-size: 32px !default;
+$mdb-btn-icon-size-mini: 24px !default;
+
+/* SHADOWS */
+$mdb-shadow-key-umbra-opacity: 0.2 !default;
+$mdb-shadow-key-penumbra-opacity: 0.14 !default;
+$mdb-shadow-ambient-shadow-opacity: 0.12 !default;