material-sass 4.0.0.alpha6 → 4.0.0.beta

data/app/assets/stylesheets/material/bootstrap/_image.scss

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

data/app/assets/stylesheets/material/bootstrap/_jumbotron.scss

@@ -1,12 +1,15 @@
 .jumbotron {
-	background-color: $jumbotron-bg;
-	box-shadow: map-get($card-elevation-shadow, shadow);
-	color: $jumbotron-color;
-	padding: $toolbar-height $card-spacer-inner-x;
-	z-index: map-get($card-elevation-shadow, elevation);
+  @include border-radius($jumbotron-border-radius);
+
+  background-color: $jumbotron-bg;
+  box-shadow: map-get($jumbotron-elevation-shadow, shadow);
+  color: $jumbotron-color;
+  padding: $jumbotron-padding-y $jumbotron-padding-x;
 }
 
 .jumbotron-fluid {
-	padding-right: 0;
-	padding-left: 0;
+  @include border-radius(0);
+
+  padding-right: 0;
+  padding-left: 0;
 }

data/app/assets/stylesheets/material/bootstrap/_nav.scss

@@ -1,5 +1,6 @@
 .nav {
   display: flex;
+  flex-wrap: wrap;
   list-style: none;
   margin-bottom: 0;
   padding-left: 0;
@@ -7,90 +8,91 @@
 
 .nav-link {
   display: block;
-  padding: $nav-link-padding;
+  padding: $nav-link-padding-y $nav-link-padding-x;
+
+  @include active-focus-hover {
+    text-decoration: none;
+  }
+
+  &.disabled {
+    color: $nav-link-color-disabled;
+    cursor: default;
+  }
+}
+
+
+
+// Justified
+
+.nav-fill {
+  .nav-item {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
+
+.nav-justified {
+  .nav-item {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+}
+
+
+
+// Pills
+
+.nav-pills {
+  .nav-link {
+    @include border-radius($nav-pills-border-radius);
+    @include transition-standard(background-color, color, opacity);
+
+    color: $nav-pills-color;
+    opacity: $nav-pills-link-opacity;
 
-  // active, focus, hover
     @include active-focus-hover {
-      text-decoration: none;
+      background-color: $nav-pills-bg-hover;
     }
 
-  // disabled
-    &.disabled {
-      color: $nav-link-color-disabled;
-      cursor: $cursor-disabled;
+    &:active {
+      opacity: 1;
     }
-}
 
-//
-// justified
-//
-  .nav-fill {
-    .nav-item {
-      flex: 1 1 auto;
-      text-align: center;
+    &.active {
+      color: $nav-pills-color-active;
+      opacity: 1;
     }
-  }
 
-  .nav-justified {
-    .nav-item {
-      flex: 1 1 100%;
-      text-align: center;
+    &.disabled {
+      background-color: transparent;
+      color: $nav-link-color-disabled;
+      opacity: 1;
     }
   }
 
-//
-// pills
-//
-  .nav-pills {
-    .nav-link {
-      color: $nav-link-color;
-      @include border-radius($border-radius);
-      @include transition-standard(background-color, color);
-
-      // active, focus, hover
-        @include active-focus-hover {
-          color: $nav-link-color-active;
-        }
-
-        &.active {
-          background-color: $nav-link-bg-active;
-          color: $nav-link-color-active;
-          cursor: default;
-        }
-
-      // disabled
-        &.disabled {
-          color: $nav-link-color-disabled;
-        }
-    }
-
-    // open
-      .nav-item.show .nav-link {
-        background-color: $nav-link-bg-active;
-        color: $nav-link-color-active;
-        cursor: default;
-      }
+  .show > .nav-link {
+    background-color: $nav-pills-bg-hover;
+    opacity: 1;
   }
+}
+
+
 
-//
-// tabs are defined in material design guidelines
+// 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
-//
-  .tab-content {
-    // hide to start
-      > .tab-pane {
-        display: none;
-      }
-
-    // show when activated
-      > .active {
-        display: block;
-      }
+
+// Tabs (helper classes to work with tabs JavaScript)
+
+.tab-content {
+  // Hide to start
+  > .tab-pane {
+    display: none;
   }
 
-  .tab-pane {
-    &.fade {
-      transform: none;
-    }
+  // Show when activated
+  > .active {
+    display: block;
   }
+}

data/app/assets/stylesheets/material/bootstrap/_pagination.scss

@@ -6,30 +6,38 @@
 }
 
 .page-link {
-  color: $btn-color;
-  cursor: pointer;
+  @include border-radius($pagination-border-radius);
+  @include transition-standard(color);
+
+  color: $pagination-color;
   display: block;
   font-size: $btn-font-size;
   font-weight: $btn-font-weight;
-  line-height: 1;
-  margin-left: 1px;
+  line-height: $btn-line-height;
+  margin-left: $pagination-inner-spacer-x;
   padding: $btn-padding-y $btn-padding-x;
   position: relative;
   text-align: center;
   white-space: nowrap;
-  @include border-radius($border-radius);
-  @include transition-standard(background-color, color);
 
-  // active, focus, hover
-    @include active-focus-hover {
-      background-color: $btn-bg-active;
-      color: $btn-color;
-      text-decoration: none;
-    }
+  @include active-focus-hover {
+    color: $pagination-color;
+    text-decoration: none;
+  }
+
+  @include focus-hover {
+    background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
+  }
+
+  &:active,
+  &.active {
+    background-color: $btn-bg-active;
+    background-image: none;
+  }
 
-    &:focus {
-      outline: 0;
-    }
+  &:focus {
+    outline: 0;
+  }
 
   .page-item:first-child & {
     margin-left: 0;
@@ -41,18 +49,18 @@
 
   .page-item.disabled & {
     background-color: transparent;
-    color: $btn-color-disabled;
-    cursor: $cursor-disabled;
+    color: $pagination-color-disabled;
+    pointer-events: none;
   }
 }
 
-// size
-  .pagination-lg .page-link {
-    font-size: $btn-font-size-lg;
-    padding: $btn-padding-y-lg $btn-padding-x-lg;
-  }
+// Size
+.pagination-lg .page-link {
+  font-size: $btn-font-size-lg;
+  padding: $btn-padding-y-lg $btn-padding-x-lg;
+}
 
-  .pagination-sm .page-link {
-    font-size: $btn-font-size-sm;
-    padding: $btn-padding-y-sm $btn-padding-x-sm;
-  }
+.pagination-sm .page-link {
+  font-size: $btn-font-size-sm;
+  padding: $btn-padding-y-sm $btn-padding-x-sm;
+}

data/app/assets/stylesheets/material/bootstrap/_popover.scss

@@ -1,86 +1,53 @@
-//
-// material design guidelines specifically discouragae the usage of tooltips with rich information
+// N.B. Material design specifically discouragaes the usage of tooltips with rich information
 // (https://material.google.com/components/tooltips.html#tooltips-usage)
-//
+// Therefore, popovers are styled as Material design's dialogs
 
 .popover {
+  @include reset-text;
+  @include border-radius($border-radius);
+
   background-clip: padding-box;
   background-color: $dialog-content-bg;
-  border: 1px solid transparent;
   box-shadow: map-get($dialog-elevation-shadow, shadow);
   display: block;
   font-size: $font-size-base;
+  margin: $tooltip-margin;
   max-width: $dialog-width-sm;
   position: absolute;
-    top: 0;
-    left: 0;
+  top: 0;
+  left: 0;
   z-index: map-get($dialog-elevation-shadow, elevation);
-  @include border-radius($border-radius);
-  @include reset-text;
-
-  &,
-  &.fade,
-  &.fade.show {
-    transition-property: opacity;
-  }
-
-  &.bs-tether-element-attached-bottom,
-  &.popover-top {
-    margin-top: ($tooltip-margin * -1);
-  }
-
-  &.bs-tether-element-attached-left,
-  &.popover-right {
-    margin-left: $tooltip-margin;
-  }
+}
 
-  &.bs-tether-element-attached-right,
-  &.popover-left {
-    margin-left: ($tooltip-margin * -1);
-  }
+.popover-body {
+  padding: $dialog-padding-y $dialog-padding-x;
 
-  &.bs-tether-element-attached-top,
-  &.popover-bottom {
-    margin-top: $tooltip-margin;
+  > :last-child {
+    margin-bottom: 0;
   }
 }
 
-.popover-content {
-  padding: $dialog-inner-padding;
-}
-
-.popover-title {
-  margin: 0;
-  padding: $dialog-inner-padding;
-  padding-bottom: 0;
+.popover-header {
   @include typography-title;
 
+  margin-bottom: 0;
+  padding: $dialog-padding-y $dialog-padding-x 0;
+
   &:empty {
     display: none;
   }
+
+  &:last-child {
+    padding-bottom: $dialog-padding-y;
+  }
 }
 
-// desktop
-  @include media-breakpoint-up(md) {
-    .popover {
-      &.bs-tether-element-attached-bottom,
-      &.popover-top {
-        margin-top: ($tooltip-margin-md-up * -1);
-      }
 
-      &.bs-tether-element-attached-left,
-      &.popover-right {
-        margin-left: $tooltip-margin-md-up;
-      }
 
-      &.bs-tether-element-attached-right,
-      &.popover-left {
-        margin-left: ($tooltip-margin-md-up * -1);
-      }
+// Desktop
 
-      &.bs-tether-element-attached-top,
-      &.popover-bottom {
-        margin-top: $tooltip-margin-md-up;
-      }
-    }
+@include media-breakpoint-up(md) {
+  .popover {
+    margin: $tooltip-margin-desktop;
   }
+}

data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss

@@ -6,7 +6,7 @@
   width: 100%;
 
   &::before {
-    content: "";
+    content: '';
     display: block;
   }
 
@@ -18,9 +18,9 @@
     border: 0;
     height: 100%;
     position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
     width: 100%;
   }
 }