material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -6,34 +6,37 @@ samp {
 }
 
 code {
+  @include border-radius($code-border-radius);
+
   background-color: $code-bg;
   color: $code-color;
   font-size: $code-font-size;
-  padding: $code-padding;
-  @include border-radius($border-radius);
+  padding: $code-padding-y $code-padding-x;
 }
 
 kbd {
+  @include border-radius($code-border-radius);
+
   background-color: $kbd-bg;
   color: $kbd-color;
   font-size: $code-font-size;
-  padding: $code-padding;
-  @include border-radius($border-radius);
+  padding: $code-padding-y $code-padding-x;
 
   kbd {
     font-size: 100%;
+    font-weight: bolder;
     padding: 0;
   }
 }
 
 pre {
-  background-color: $pre-bg;
+  @include border-radius($code-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);
+  margin-bottom: $pre-margin-y;
 
   code {
     background-color: transparent;

data/app/assets/stylesheets/material/bootstrap/_custom-form.scss

@@ -1,67 +1,61 @@
-//
-// custom checkbox, radio button and select are defined in material design guidelines
+// N.B. Custom checkbox, radio button and select are defined in Material design
 // (https://material.google.com/components/selection-controls.html)
 // therefore, these elements are styled in /assets/sass/material/_selection-control.scss
-//
 
-//
-// custom file
-//
-  .custom-file {
-    cursor: pointer;
-    display: inline-block;
-    height: $textfield-height;
-    max-width: 100%;
-    position: relative;
-  }
+// Custom file
 
-  .custom-file-control {
-    border-bottom: $textfield-border-width solid $textfield-border-color;
-    color: $textfield-hint-color;
-    font-weight: $font-weight-regular;
-    position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-    user-select: none;
-    z-index: 1;
-    @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
-    @include transition-standard(border-bottom-color);
+.custom-file {
+  display: inline-block;
+  height: $textfield-height;
+  max-width: 100%;
+  position: relative;
+}
 
-    @each $lang, $text in $custom-file-text {
-      &:lang(#{$lang})::after {
-        content: $text;
-      }
-    }
+.custom-file-control {
+  @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
+  @include transition-standard(border-color, box-shadow);
+
+  align-items: center;
+  border-bottom: $textfield-border-width solid $textfield-border-color;
+  color: $textfield-hint-color;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
-    &::before {
-      background-color: transparent;
-      background-image: $custom-file-button-bg;
-      background-position: 50% 50%;
-      background-repeat: no-repeat;
-      background-size: $material-icon-size $material-icon-size;
-      content: "";
-      opacity: $custom-file-button-opacity;
-      position: absolute;
-        top: $textfield-padding-top;
-        right: 0;
-        bottom: 0;
-      width: $material-icon-size;
-      z-index: 2;
-      @include transition-standard(opacity);
+  @each $lang, $text in $custom-file-text {
+    &:lang(#{$lang})::before {
+      content: $text;
     }
+  }
+
+  @include hover {
+    border-bottom-color: $textfield-border-color-hover;
+    box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
+  }
+
+  &::after {
+    @include set-material-icons;
 
-    // active, focus, hover
-      @include active-focus-hover {
-        &::before {
-          opacity: $custom-file-button-opacity-visible;
-        }
-      }
+    content: $custom-file-button-icon;
   }
 
-  .custom-file-input {
-    margin: 0;
-    max-width: 100%;
-    min-width: $custom-file-width;
-    opacity: 0;
+  &::before {
+    @include text-truncate;
+  }
+}
+
+.custom-file-input {
+  margin: 0;
+  max-width: 100%;
+  min-width: $custom-file-width;
+  opacity: 0;
+
+  &:focus ~ .custom-file-control {
+    border-bottom-color: $textfield-border-color-focus;
+    box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
   }
+}

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

@@ -1,159 +1,189 @@
-//
-// checkbox and radio button
-//
-  .form-check {
-    display: block;
-    margin-bottom: $textfield-margin-bottom;
-
-    // disabled
-      &.disabled {
-        .form-check-label {
-          color: $textfield-color-disabled;
-          cursor: $cursor-disabled;
-        }
-      }
-  }
+// Checkbox and radio button
 
-  .form-check-input {
-    margin-right: $form-check-input-margin-x;
+.form-check {
+  display: block;
+  margin-bottom: $textfield-margin-y;
+
+  &.disabled {
+    .form-check-label {
+      color: $textfield-color-disabled;
+    }
   }
+}
 
-  .form-check-label {
-    align-items: center;
-    cursor: pointer;
-    display: inline-flex;
-    margin-bottom: 0;
+.form-check-inline {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: middle;
+
+  + .form-check-inline {
+    margin-left: $form-check-inline-margin-x;
   }
+}
 
-  // inline
-    .form-check-inline {
-      display: inline-block;
-      margin-bottom: 0;
-      vertical-align: middle;
+.form-check-input {
+  flex-shrink: 0;
+  margin-right: $form-check-input-margin-x;
+  position: relative;
+  top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2);
+}
 
-      + .form-check-inline {
-        margin-left: $form-check-inline-margin-x;
-      }
-    }
+.form-check-label {
+  align-items: flex-start;
+  color: inherit;
+  display: inline-flex;
+  font-size: inherit;
+  line-height: inherit;
+}
 
-//
-// form group
-//
-  .form-group {
-    margin-bottom: $form-group-margin-bottom;
 
-    &:not(.floating-label) label:not(.form-check-label) {
-      font-size: $form-group-label-font-size;
-      margin-bottom: 0;
-    }
+
+// Form group
+
+.form-group {
+  margin-bottom: $form-group-margin-y;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: ($textfield-margin-x / -2);
+  margin-left: ($textfield-margin-x / -2);
+
+  > .col,
+  > [class*='col-'] {
+    padding-right: ($textfield-margin-x / 2);
+    padding-left: ($textfield-margin-x / 2);
   }
+}
 
-//
-// inline
-//
-  .form-inline {
-    align-items: center;
-    display: flex;
-    flex-flow: row wrap;
 
-    .form-check {
-      width: 100%;
-    }
 
-    @include media-breakpoint-up(sm) {
-      label {
-        align-items: center;
-        display: flex;
-        justify-content: center;
-        margin-bottom: 0;
-      }
-
-      .form-check {
-        margin-bottom: 0;
-        width: auto;
-      }
-
-      .form-control {
-        display: inline-block;
-        vertical-align: middle;
-        width: auto;
-      }
-
-      .form-control-static {
-        display: inline-block;
-      }
-
-      .form-group {
-        align-items: center;
-        display: flex;
-        flex: 0 0 auto;
-        flex-flow: row wrap;
-        margin-bottom: 0;
-      }
-
-      .input-group {
-        width: auto;
-      }
-    }
+// Inline
+
+.form-inline {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+
+  label {
+    align-items: center;
+    display: flex;
+    justify-content: center;
   }
 
-//
-// label
-//
-  .col-form-label {
-    line-height: ($textfield-height - $textfield-padding-top - $textfield-padding-bottom);
-    padding-top: $textfield-padding-top;
-    padding-bottom: $textfield-padding-bottom;
+  .form-check {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0;
+    width: auto;
   }
 
-  .col-form-label-lg {
-    line-height: ($textfield-height-lg - $textfield-padding-top-lg - $textfield-padding-bottom-lg);
-    padding-top: $textfield-padding-top-lg;
-    padding-bottom: $textfield-padding-bottom-lg;
+  .form-control {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
   }
 
-  .col-form-label-sm {
-    line-height: ($textfield-height-sm - $textfield-padding-top-sm - $textfield-padding-bottom-sm);
-    padding-top: $textfield-padding-top-sm;
-    padding-bottom: $textfield-padding-bottom-sm;
+  .form-control-plaintext {
+    display: inline-block;
   }
 
-  .col-form-legend {
-    font-size: $font-size-base;
+  .form-group {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    flex-flow: row wrap;
     margin-bottom: 0;
-    padding-top: $textfield-padding-top;
-    padding-bottom: $textfield-padding-bottom;
+  }
 
-    .form-group & {
-      font-size: $form-group-label-font-size;
-    }
+  .input-group {
+    width: auto;
   }
+}
 
-//
-// misc
-//
-  .form-control-feedback,
-  .form-text {
-    display: block;
-    margin-top: $textfield-margin-bottom;
-
-    .form-control-lg + &,
-    .form-control-static-lg + & {
-      margin-top: $textfield-margin-bottom-lg;
-    }
 
-    .form-control-sm + &,,
-    .form-control-static-sm + & {
-      margin-top: $textfield-margin-bottom-sm;
-    }
+
+// Label
+
+.col-form-label {
+  color: inherit;
+  font-size: $font-size-base;
+  line-height: ($textfield-font-size * $textfield-line-height / $font-size-base);
+  padding-top: $textfield-padding-y;
+  padding-bottom: $textfield-padding-y;
+}
+
+.col-form-label-lg {
+  font-size: ($font-size-base / $textfield-font-size * $textfield-font-size-lg);
+  line-height: ($textfield-line-height-lg / ($font-size-base / $textfield-font-size));
+  padding-top: $textfield-padding-y-lg;
+  padding-bottom: $textfield-padding-y-lg;
+}
+
+.col-form-label-sm {
+  font-size: ($font-size-base / $textfield-font-size * $textfield-font-size-sm);
+  line-height: ($textfield-line-height-sm / ($font-size-base / $textfield-font-size));
+  padding-top: $textfield-padding-y-sm;
+  padding-bottom: $textfield-padding-y-sm;
+}
+
+.col-form-legend {
+  font-size: $font-size-base;
+  line-height: ($textfield-font-size * $textfield-line-height / $font-size-base);
+  margin-bottom: 0;
+  padding-top: $textfield-padding-y;
+  padding-bottom: $textfield-padding-y;
+}
+
+
+
+// Misc
+
+.form-text {
+  @include typography-caption;
+
+  color: $textfield-hint-color;
+  display: block;
+  margin-top: $textfield-margin-y;
+
+  .form-control-lg + & {
+    margin-top: $textfield-margin-y-lg;
   }
 
-  .form-control-file,
-  .form-control-range {
-    display: block;
+  .form-control-sm + & {
+    margin-top: $textfield-margin-y-sm;
   }
+}
+
+.form-control-file,
+.form-control-range {
+  display: block;
+}
+
+
 
-  .form-control-file {
-    margin-top: $textfield-padding-top;
-    margin-bottom: $textfield-margin-bottom;
+// Validation
+
+.invalid-feedback {
+  @include typography-caption;
+
+  color: $form-feedback-invalid-color;
+  display: none;
+  margin-top: $textfield-margin-y;
+
+  .form-control-lg + & {
+    margin-top: $textfield-margin-y-lg;
   }
+
+  .form-control-sm + & {
+    margin-top: $textfield-margin-y-sm;
+  }
+}
+
+.invalid-tooltip {
+  display: none;
+  position: absolute;
+  top: 100%;
+}