material-sass 4.0.0.beta → 4.0.0.beta2

data/{app/assets → assets}/stylesheets/material/base/_grid.scss

@@ -4,8 +4,6 @@
   @include make-grid-columns;
 }
 
-
-
 // Container
 
 @if $enable-grid-classes {
@@ -21,8 +19,6 @@
   }
 }
 
-
-
 // Row
 
 @if $enable-grid-classes {
@@ -35,7 +31,7 @@
     margin-left: 0;
 
     > .col,
-    > [class*="col-"] {
+    > [class*='col-'] {
       padding-right: 0;
       padding-left: 0;
     }

data/{app/assets → assets}/stylesheets/material/base/_typography.scss

@@ -20,8 +20,6 @@
   }
 }
 
-
-
 // Emphasis
 
 mark,
@@ -34,7 +32,7 @@ mark,
 small,
 .small {
   font-size: $small-font-size;
-  font-weight: normal;
+  font-weight: $font-weight-regular;
 }
 
 .initialism {
@@ -42,8 +40,6 @@ small,
   text-transform: uppercase;
 }
 
-
-
 // Headings
 
 .typography-display-4 {
@@ -86,8 +82,6 @@ small,
   @include typography-caption;
 }
 
-
-
 // Headings - bootstrap classes
 
 h1,
@@ -157,8 +151,6 @@ h6,
   @include typography-title;
 }
 
-
-
 // Hr
 
 hr {
@@ -168,8 +160,6 @@ hr {
   margin-bottom: $paragraph-margin-y;
 }
 
-
-
 // List
 
 .list-inline {

data/{app/assets → assets}/stylesheets/material/bootstrap/_alert.scss

@@ -2,40 +2,33 @@
   @include border-radius($alert-border-radius);
 
   border: 0;
-  box-shadow: map-get($alert-elevation-shadow, shadow);
   display: block;
   margin-bottom: $alert-margin-y;
   padding: $alert-padding-y $alert-padding-x;
+  position: relative;
 }
 
-// Colour
 @each $color, $values in $theme-colors {
   .alert-#{$color} {
-    @include color-yiq(map-get(theme-color($color), lighter));
-
     background-color: map-get(theme-color($color), lighter);
-
-    .alert-link {
-      color: map-get(theme-color($color), darker);
-    }
+    color: color-yiq(map-get(theme-color($color), lighter));
   }
 }
 
-
-
 // Dismissible
 
 .alert-dismissible {
+  padding-right: ($alert-padding-x * 2 + $close-font-size);
+
   .close {
-    padding: $btn-padding-y $btn-padding-x;
-    position: relative;
-    top: (($close-font-size - $font-size-base * $line-height-base) / -2 - $btn-padding-y);
-    right: ($btn-padding-x * -1);
+    color: inherit;
+    padding: ($alert-padding-y - ($close-font-size - $font-size-base * $line-height-base) / 2) $alert-padding-x;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 }
 
-
-
 // Misc
 
 .alert-heading {
@@ -43,5 +36,10 @@
 }
 
 .alert-link {
+  color: inherit;
   font-weight: $alert-link-font-weight;
+
+  @include active-focus-hover {
+    color: inherit;
+  }
 }

data/{app/assets → assets}/stylesheets/material/bootstrap/_badge.scss

@@ -1,13 +1,13 @@
 .badge {
   @include border-radius($badge-border-radius);
 
-  background-color: $badge-bg;
-  color: $badge-color;
-  display: inline-block;
+  align-items: center;
+  display: inline-flex;
   font-size: inherit;
   font-weight: $badge-font-weight;
   line-height: inherit;
-  padding: $badge-padding-y $badge-padding-x;
+  padding-right: $badge-padding-x;
+  padding-left: $badge-padding-x;
   text-align: center;
   vertical-align: baseline;
   white-space: nowrap;
@@ -24,11 +24,23 @@
   }
 }
 
-// Colour
 @each $color, $values in $theme-colors {
   .badge-#{$color} {
-    @include color-yiq(map-get(theme-color($color), color));
-
     background-color: map-get(theme-color($color), color);
+    color: color-yiq(map-get(theme-color($color), color));
+
+    &[href] {
+      @include active-focus-hover {
+        background-color: map-get(theme-color($color), darker);
+        color: color-yiq(map-get(theme-color($color), darker));
+        text-decoration: none;
+      }
+    }
   }
 }
+
+// Pill badges with extra rounded corners
+
+.badge-pill {
+  @include border-radius(1em);
+}

data/{app/assets → assets}/stylesheets/material/bootstrap/_carousel.scss

@@ -65,8 +65,6 @@
   top: 0;
 }
 
-
-
 // Left/right controls
 
 .carousel-control-next,
@@ -124,8 +122,6 @@
   content: $carousel-control-prev-icon;
 }
 
-
-
 // Optional captions
 
 .carousel-caption {
@@ -138,8 +134,6 @@
   z-index: 1;
 }
 
-
-
 // Optional indicators
 
 .carousel-indicators {

data/{app/assets → assets}/stylesheets/material/bootstrap/_close.scss

@@ -20,8 +20,4 @@
   &:focus {
     outline: 0;
   }
-
-  span {
-    vertical-align: text-top;
-  }
 }

data/{app/assets → assets}/stylesheets/material/bootstrap/_code.scss

@@ -1,10 +1,3 @@
-code,
-kbd,
-pre,
-samp {
-  font-family: $font-family-monospace;
-}
-
 code {
   @include border-radius($code-border-radius);
 
@@ -35,8 +28,6 @@ pre {
   color: $pre-color;
   display: block;
   font-size: $code-font-size;
-  margin-top: 0;
-  margin-bottom: $pre-margin-y;
 
   code {
     background-color: transparent;

data/{app/assets → assets}/stylesheets/material/bootstrap/_form.scss

@@ -3,12 +3,6 @@
 .form-check {
   display: block;
   margin-bottom: $textfield-margin-y;
-
-  &.disabled {
-    .form-check-label {
-      color: $textfield-color-disabled;
-    }
-  }
 }
 
 .form-check-inline {
@@ -34,9 +28,11 @@
   display: inline-flex;
   font-size: inherit;
   line-height: inherit;
-}
-
 
+  .form-check.disabled & {
+    color: $textfield-color-disabled;
+  }
+}
 
 // Form group
 
@@ -57,8 +53,6 @@
   }
 }
 
-
-
 // Inline
 
 .form-inline {
@@ -103,8 +97,6 @@
   }
 }
 
-
-
 // Label
 
 .col-form-label {
@@ -137,8 +129,6 @@
   padding-bottom: $textfield-padding-y;
 }
 
-
-
 // Misc
 
 .form-text {
@@ -162,8 +152,6 @@
   display: block;
 }
 
-
-
 // Validation
 
 .invalid-feedback {

data/{app/assets → assets}/stylesheets/material/bootstrap/_image.scss

@@ -1,17 +1,3 @@
-.img-fluid {
-  @include img-fluid;
-}
-
-.img-thumbnail {
-  @include img-fluid;
-
-  box-shadow: $thumbnail-box-shadow;
-}
-
-
-
-// figure
-
 .figure {
   display: inline-block;
 }
@@ -26,3 +12,13 @@
   line-height: 1;
   margin-bottom: $figure-img-margin-y;
 }
+
+.img-fluid {
+  @include img-fluid;
+}
+
+.img-thumbnail {
+  @include img-fluid;
+
+  box-shadow: $thumbnail-box-shadow;
+}

data/{app/assets → assets}/stylesheets/material/bootstrap/_nav.scss

@@ -20,8 +20,6 @@
   }
 }
 
-
-
 // Justified
 
 .nav-fill {
@@ -39,8 +37,6 @@
   }
 }
 
-
-
 // Pills
 
 .nav-pills {
@@ -55,10 +51,6 @@
       background-color: $nav-pills-bg-hover;
     }
 
-    &:active {
-      opacity: 1;
-    }
-
     &.active {
       color: $nav-pills-color-active;
       opacity: 1;
@@ -69,6 +61,10 @@
       color: $nav-link-color-disabled;
       opacity: 1;
     }
+
+    &:active {
+      opacity: 1;
+    }
   }
 
   .show > .nav-link {
@@ -77,8 +73,6 @@
   }
 }
 
-
-
 // N.B. Tabs are defined in Material design
 // (https://material.google.com/components/tabs.html)
 // therefore, tabs are styled in /assets/sass/material/_tab.scss

data/{app/assets → assets}/stylesheets/material/bootstrap/_pagination.scss

@@ -54,7 +54,6 @@
   }
 }
 
-// Size
 .pagination-lg .page-link {
   font-size: $btn-font-size-lg;
   padding: $btn-padding-y-lg $btn-padding-x-lg;

data/{app/assets → assets}/stylesheets/material/bootstrap/_popover.scss

@@ -17,6 +17,10 @@
   top: 0;
   left: 0;
   z-index: map-get($dialog-elevation-shadow, elevation);
+
+  @include media-breakpoint-up(md) {
+    margin: $tooltip-margin-desktop;
+  }
 }
 
 .popover-body {
@@ -41,13 +45,3 @@
     padding-bottom: $dialog-padding-y;
   }
 }
-
-
-
-// Desktop
-
-@include media-breakpoint-up(md) {
-  .popover {
-    margin: $tooltip-margin-desktop;
-  }
-}

data/{app/assets → assets}/stylesheets/material/bootstrap/_transition.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-no-qualifying-type
+
 .collapse {
   display: none;
 

data/{app/assets → assets}/stylesheets/material/material.scss

@@ -3,16 +3,12 @@
 @import 'mixins';
 @import 'variables';
 
-
-
 // Base CSS
 
 @import 'base/base';
 @import 'base/grid';
 @import 'base/typography';
 
-
-
 // Bootstrap components
 // Components covered in Bootstrap's css but not in Material design
 
@@ -33,8 +29,6 @@
 @import 'bootstrap/responsive-embed';
 @import 'bootstrap/transition';
 
-
-
 // Material components
 // Components covered in Material design (https://material.google.com/components)
 
@@ -56,20 +50,17 @@
 @import 'material/stepper';
 @import 'material/tab';
 @import 'material/text-field';
+@import 'material/text-field-box';
 @import 'material/text-field-floating-label';
 @import 'material/text-field-input-group';
 @import 'material/text-field-textarea';
 @import 'material/toolbar';
 @import 'material/tooltip';
 
-
-
 // Utilities
 
 @import 'utilities';
 
-
-
 // Very basic print styles
 
 @import 'print';