Merge pull request #111 from Daemonite/backfilling-bootstrap-v4.0.0-a…

…lpha.5

Backfilling bootstrap v4.0.0 alpha.5

README.md

@@ -23,7 +23,7 @@ Because these components will require additional markup (some may require additi
 
 ## Supported Bootstrap 4 Components
 
-Currently based on __Bootstrap v4.0.0-alpha.4__.
+Currently based on __Bootstrap v4.0.0-alpha.5__.
 
 | Bootstrap 4 Components | Equivalent Material Design Components |
 | --- | --- |

assets/js/src.js

@@ -121,7 +121,7 @@ var FloatingLabel = function ($) {
 
 /*!
  * navigation drawer
- * based on bootstrap's (v4.0.0-alpha.4) modal.js
+ * based on bootstrap's (v4.0.0-alpha.5) modal.js
  */
 var NavDrawer = function ($) {
  // constants >>>
@@ -476,7 +476,7 @@ var NavDrawer = function ($) {
 
 /*!
  * tab indicator animation
- * requires bootstrap's (v4.0.0-alpha.4) tab.js
+ * requires bootstrap's (v4.0.0-alpha.5) tab.js
  */
 var TabSwitch = function ($) {
  // constants >>>
@@ -620,7 +620,7 @@ var TabSwitch = function ($) {
 
 /*!
  * global util js
- * based on bootstrap's (v4.0.0-alpha.4) util.js
+ * based on bootstrap's (v4.0.0-alpha.5) util.js
  */
 var Util = function ($) {
  var transition = false;
@@ -712,7 +712,7 @@ var Util = function ($) {
  },
  getUID: function getUID(prefix) {
  do {
- prefix += ~~(Math.random() * 1000000);
+ prefix += ~ ~(Math.random() * 1000000);
  } while (document.getElementById(prefix));
  return prefix;
  },

assets/js/src/navdrawer.js

@@ -1,6 +1,6 @@
 /*!
  * navigation drawer
- * based on bootstrap's (v4.0.0-alpha.4) modal.js
+ * based on bootstrap's (v4.0.0-alpha.5) modal.js
  */
 const NavDrawer = (($) => {
  // constants >>>

assets/js/src/tab-switch.js

@@ -1,6 +1,6 @@
 /*!
  * tab indicator animation
- * requires bootstrap's (v4.0.0-alpha.4) tab.js
+ * requires bootstrap's (v4.0.0-alpha.5) tab.js
  */
 const TabSwitch = (($) => {
  // constants >>>

assets/js/src/util.js

@@ -1,6 +1,6 @@
 /*!
  * global util js
- * based on bootstrap's (v4.0.0-alpha.4) util.js
+ * based on bootstrap's (v4.0.0-alpha.5) util.js
  */
 const Util = (($) => {
  let transition = false;

assets/sass/_mixins.scss

@@ -1,4 +1,5 @@
 @import "mixins/background-variant";
+@import "mixins/border-radius";
 @import "mixins/breakpoint";
 @import "mixins/clearfix";
 @import "mixins/form";

assets/sass/_utilities.scss

@@ -1,10 +1,15 @@
-@import "utilities/material-icons";
-@import "utilities/utility-background";
-@import "utilities/utility-clearfix";
-@import "utilities/utility-display";
-@import "utilities/utility-pull";
-@import "utilities/utility-screenreader";
-@import "utilities/utility-spacing";
-@import "utilities/utility-text";
-@import "utilities/utility-visibility";
-@import "utilities/waves";
+// bootstrap
+ @import "utilities/align";
+ @import "utilities/border";
+ @import "utilities/background";
+ @import "utilities/clearfix";
+ @import "utilities/display";
+ @import "utilities/float";
+ @import "utilities/screenreader";
+ @import "utilities/spacing";
+ @import "utilities/text";
+ @import "utilities/visibility";
+
+// material
+ @import "utilities/material-icons";
+ @import "utilities/waves";

assets/sass/_variables.scss

@@ -1,3 +1,20 @@
+@mixin _assert-ascending($map, $map-name) {
+ $prev-key: null;
+ $prev-num: null;
+
+ @each $key, $num in $map {
+ @if $prev-num == null {
+ } @else if not comparable($num, $prev-num) {
+ @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ } @else if $num <= $prev-num {
+ @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ }
+
+ $prev-key: $key;
+ $prev-num: $num;
+ }
+}
+
 @import "variables/animation";
 @import "variables/colour";
 @import "variables/elevation-shadow";

assets/sass/base/_base.scss

@@ -1,5 +1,5 @@
 /*
- * includes normalize and reboot from bootstrap's (v4.0.0-alpha.4)
+ * includes normalize and reboot from bootstrap's (v4.0.0-alpha.5)
  */
 
 /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

assets/sass/bootstrap/_alert.scss

@@ -1,13 +1,13 @@
 .alert {
  background-color: $card-bg;
  border: 0;
- border-radius: $border-radius;
  box-shadow: map-get($card-elevation-shadow, shadow);
  display: block;
  margin-bottom: $card-margin-bottom;
  padding: $card-spacer-inner-y $card-spacer-inner-x;
  position: relative;
  z-index: map-get($card-elevation-shadow, elevation);
+ @include border-radius($border-radius);
 }
 
 // colour

assets/sass/bootstrap/_code.scss

@@ -7,18 +7,18 @@ samp {
 
 code {
  background-color: $code-bg;
- border-radius: $border-radius;
  color: $code-color;
  font-size: $code-font-size;
  padding: $code-padding;
+ @include border-radius($border-radius);
 }
 
 kbd {
  background-color: $kbd-bg;
- border-radius: $border-radius;
  color: $kbd-color;
  font-size: $code-font-size;
  padding: $code-padding;
+ @include border-radius($border-radius);
 
  kbd {
  font-size: 100%;
@@ -28,12 +28,12 @@ kbd {
 
 pre {
  background-color: $pre-bg;
- border-radius: $border-radius;
  color: $pre-color;
  display: block;
  font-size: $code-font-size;
  margin-top: 0;
  margin-bottom: $pre-margin-bottom;
+ @include border-radius($border-radius);
 
  code {
  background-color: transparent;

assets/sass/bootstrap/_image.scss

@@ -1,18 +1,10 @@
-.img-circle {
- border-radius: 50%;
-}
-
 .img-fluid {
  @include img-fluid;
 }
 
-.img-rounded {
- border-radius: $border-radius;
-}
-
 .img-thumbnail {
  box-shadow: $thumbnail-box-shadow;
- @include img-fluid(inline-block);
+ @include img-fluid;
 }
 
 //

assets/sass/bootstrap/_nav.scss

@@ -54,10 +54,10 @@
  }
 
  .nav-link {
- border-radius: $border-radius;
  color: $nav-link-color;
  display: block;
  padding: $nav-link-padding;
+ @include border-radius($border-radius);
  @include transition-standard(background-color, color);
 
  // active, focus, hover

assets/sass/bootstrap/_pagination.scss

@@ -12,7 +12,6 @@
 
 .page-link {
  background-color: transparent;
- border-radius: $border-radius;
  color: $btn-color;
  display: block;
  float: left;
@@ -25,6 +24,7 @@
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
+ @include border-radius($border-radius);
  @include transition-standard(background-color, color);
 
  // active, focus, hover

assets/sass/bootstrap/_popover.scss

@@ -7,7 +7,6 @@
  background-clip: padding-box;
  background-color: $dialog-content-bg;
  border: 1px solid transparent;
- border-radius: $border-radius;
  box-shadow: map-get($dialog-elevation-shadow, shadow);
  display: block;
  font-size: $font-size-base;
@@ -16,6 +15,7 @@
  top: 0;
  left: 0;
  z-index: map-get($dialog-elevation-shadow, elevation);
+ @include border-radius($border-radius);
  @include reset-text;
 
  &.bs-tether-element-attached-bottom,

assets/sass/material.scss

@@ -10,7 +10,7 @@
 
 //
 // bootstrap components
-// components covered in bootstrap's (v4.0.0-alpha.3) css but not in material design guidelines
+// components covered in bootstrap's (v4.0.0-alpha.5) css but not in material design guidelines
 //
  @import "bootstrap/alert";
  @import "bootstrap/animation";

assets/sass/material/_button.scss

@@ -2,7 +2,6 @@
  background-color: $btn-bg;
  background-image: none;
  border: 0;
- border-radius: $border-radius;
  box-shadow: map-get($btn-elevation-shadow, shadow);
  color: $btn-color;
  cursor: pointer;
@@ -21,11 +20,11 @@
  vertical-align: middle;
  white-space: nowrap;
  z-index: map-get($btn-elevation-shadow, elevation);
+ @include border-radius($border-radius);
  @include transition-standard(background-color, box-shadow, color);
 
  &::before {
  background-color: $btn-focus-overlay;
- border-radius: $border-radius;
  content: "";
  display: block;
  opacity: 0;
@@ -35,6 +34,7 @@
  bottom: 0;
  left: 0;
  z-index: -1;
+ @include border-radius($border-radius);
  @include transition-standard(opacity);
  }
 
@@ -95,14 +95,14 @@
  .dropdown.open > & {
  &.dropdown-toggle,
  &.dropdown-toggle::before {
- border-radius: $border-radius $border-radius 0 0;
+ @include border-bottom-radius(0);
  }
  }
 
  .dropup.open > & {
  &.dropdown-toggle,
  &.dropdown-toggle::before {
- border-radius: 0 0 $border-radius $border-radius;
+ @include border-top-radius(0);
  }
  }
 }

assets/sass/material/_card.scss

@@ -1,11 +1,11 @@
 .card {
  background-color: $card-bg;
  border: 0;
- border-radius: $border-radius;
  box-shadow: map-get($card-elevation-shadow, shadow);
  display: block;
  margin-bottom: $card-margin-bottom;
  position: relative;
+ @include border-radius($border-radius);
  z-index: map-get($card-elevation-shadow, elevation);
 }
 
@@ -52,11 +52,11 @@
  @include clearfix;
 
  &:first-child {
- border-radius: $border-radius $border-radius 0 0;
+ @include border-top-radius($border-radius);
  }
 
  &:last-child {
- border-radius: 0 0 $border-radius $border-radius;
+ @include border-bottom-radius($border-radius);
  }
 
  .btn {
@@ -119,7 +119,7 @@
  padding: $card-spacer-inner-y $card-spacer-inner-x;
 
  &:last-child {
- border-radius: 0 0 $border-radius $border-radius;
+ @include border-bottom-radius($border-radius);
  }
  }
 
@@ -134,7 +134,7 @@
  @include clearfix;
 
  &:first-child {
- border-radius: $border-radius $border-radius 0 0;
+ @include border-top-radius($border-radius);
  }
 
  > :last-child {
@@ -146,15 +146,15 @@
 // image
 //
  .card-img {
- border-radius: $border-radius;
+ @include border-radius($border-radius);
  }
 
  .card-img-bottom {
- border-radius: 0 0 $border-radius $border-radius;
+ @include border-bottom-radius($border-radius);
  }
 
  .card-img-top {
- border-radius: $border-radius $border-radius 0 0;
+ @include border-top-radius($border-radius);
  }
 
 //

assets/sass/material/_dialog.scss

@@ -90,11 +90,11 @@
  background-clip: padding-box;
  background-color: $dialog-content-bg;
  border: 1px solid transparent;
- border-radius: $border-radius;
  box-shadow: map-get($dialog-elevation-shadow, shadow);
  outline: 0;
  position: relative;
  vertical-align: baseline;
+ @include border-radius($border-radius);
  }
 
  .dialog-footer,