Docs + line ripple

Author: djibe

CHANGELOG.md

@@ -9,19 +9,19 @@
 
 ## 4.6.0 - RC2
 
-- **New** Changed version numbers to NPM compatible ones for updates
-- **New** `modal-xl` is Full-screen dialog MD component
-- **New** Documentation search is back thanks to Algolia Docsearch
+- **New** `modal-xl` is the equivalent for the *Full-screen dialog* of Material Design components.
+- **New** Documentation search is back thanks to Algolia Docsearch.
 - **Fixed** `modal` documentation updated to reflect max sizes.
 - **Fixed** `card` overflow behavior reverted to standard BS4.
 - **Fixed** `Form-group`: Removed label color on form-group:focus-within.
 - **Fixed** Most components with text overflow are now with an ellipsis ...
-- **Fixed** `Table-cell` word break
+- **Fixed** `Table-cell` word break.
 - **Fixed** Various bugs related to IE11 (`card-img` aspect ratio, Material Icons, Select2 items alignment, chip close icon).
 - **Fixed** Datatables.net search displays suitable number of results.
 - **Fixed** Various minor changes.
 - **Improved** Datatables.net responsive rendering.
 - **Improved** JavaScript compilation.
+- Updated build dependencies.
 
 ## 4.6.0 - RC1
 

assets/scss/material/_text-field-box.scss

@@ -111,15 +111,30 @@
 // Ripple
 
 @if ($enable-form-ripple) {
-  .floating-label.textfield-box::before {
+  .textfield-box.form-ripple-nolabel::before,
+  .floating-label.textfield-box.form-ripple::before {
     top: calc(#{($textfield-box-height)} - #{(2*$textfield-border-width)});
   }
 
-  .floating-label-lg.textfield-box::before {
-    top: calc(#{($textfield-box-height-lg)} - #{(2*$textfield-border-width)});
+  .textfield-box-lg.form-ripple-nolabel::before,
+  .floating-label-lg.textfield-box.form-ripple::before {
+    top: calc(#{($textfield-box-height-lg)} - #{($textfield-border-width)});
   }
 
-  .floating-label-sm.textfield-box::before {
+  .textfield-box-sm.form-ripple-nolabel::before,
+  .floating-label-sm.textfield-box.form-ripple::before {
     top: calc(#{($textfield-box-height-sm)} - #{(2*$textfield-border-width)});
   }
+
+  .textfield-box.form-ripple::before {
+    top: calc(85px - 2px);
+  }
+
+  .textfield-box-lg.form-ripple::before {
+    top: calc(98px - 2px);
+  }
+
+  .textfield-box-sm.form-ripple::before {
+    top: calc(73px - 2px);
+  }
 }

assets/scss/material/_text-field.scss

@@ -345,18 +345,16 @@ textarea {
   padding-right: calc(1.5rem + 0.5rem);
 }
 
-// Line ripple + label color on focus
-
-[class*='form-ripple'] {
-  &:focus-within label:not(.custom-control-label):not(.form-check-label):not(.btn) {
-    color: selection-theme-color();
+@if ($enable-form-ripple) {
+  // Line ripple + label color on focus
+  [class*='form-ripple'] {
+    &:focus-within label:not(.custom-control-label):not(.form-check-label):not(.btn) {
+      color: selection-theme-color();
+    }
   }
-}
 
-@if ($enable-form-ripple) {
   [class*='form-ripple'],
-  .floating-label,
-  .textfield-box {
+  .floating-label {
     position: relative;
 
     &::before {
@@ -378,9 +376,7 @@ textarea {
     }
   }
 
-  [class*='form-ripple']:focus-within::before,
-  .floating-label.is-focused::before,
-  .textfield-box:focus-within::before {
+  [class*='form-ripple']:focus-within::before {
     transform: scaleX(1);
   }
 
@@ -390,7 +386,7 @@ textarea {
   }
 
   .form-ripple-lg::before {
-    top: calc(81px - 2px);
+    top: calc(82px - 2px);
   }
 
   .form-ripple-sm::before {
@@ -402,10 +398,14 @@ textarea {
   }
 
   .form-ripple-lg-nolabel::before {
-    top: calc(60px - 2px);
+    top: calc(61px - 2px);
   }
 
   .form-ripple-sm-nolabel::before {
     top: calc(32px - 2px);
   }
+
+  .form-ripple-bottom::before {
+    bottom: 0 !important; // stylelint-disable-line declaration-no-important
+  }
 }

assets/scss/utilities/_webkit-custom.scss

@@ -1,5 +1,3 @@
-// TODO: doc
-
 // Clear icon
 ::-webkit-search-cancel-button,
 ::-webkit-clear-button {

css/material.css

@@ -182,6 +182,36 @@ You'll notice that the modal-body has a custom scrollbar on both Firefox and Chr
 </div>
 {% endhighlight %}
 
+### Full-screen dialog
+
+Full-screen dialogs group a series of tasks, such as creating a calendar entry with the event title, date, location, and time. Because they take up the entire screen, full-screen dialogs are the only dialogs over which other dialogs can appear.
+
+Modal-xl is adapted to reproduce Full screen material dialog.
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalXl">Extra large modal</button>
+</div>
+
+{% highlight html %}
+<div class="modal-dialog modal-xl">...</div>
+{% endhighlight %}
+
+<div class="modal fade" id="exampleModalXl" tabindex="-1"  aria-labelledby="exampleModalXlLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
 ## Buttons
 
 ### Side-by-side buttons