Bootstrap 4 Advanced Components : Label color on focus and line ripple

Bootstrap 4 Advanced Components : Label color on focus and line ripple for text fields

by djibe89

HTML

<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron my-4">
        <h1>Line ripple effect for text fields and label color on focus for Bootstrap 4 Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <p>
          No dependencies.<br>
          Set the Bootstrap 4 color class you want to use to color label (or any custom text color CSS class).
        </p>
        <p>
        Just click in the input fields to see it working.<br>
        Label is colored on focus.
        </p>
        <p>
        The line ripple works in pure CSS, inspired by <a href="https://propeller.in/components/form.php" target="_blank">Propeller</a>. Add the line ripple effect in javascript by adding the data-rippleLine attribute to your input and the 2nd script below.
        </p>

        <form role="form" id="my-form">
          <div class="form-group">
            <label for="name">Text field</label>
            <input type="text" class="form-control" id="name" name="name" required data-rippleLine>
          </div>
          <div class="form-group">
            <label for="email">Email address field</label>
            <input type="email" class="form-control" id="email" name="email" required placeholder="line ripple effect added in javascript" data-rippleLine>
            <small id="emailHelp"...

CSS

/* this resets Daemonite focus state */

.form-control:focus {
    border-color: 2px solid black;
    -webkit-box-shadow: none;
            box-shadow: none;
}
/* This is for the ripple effect */
.form-control:focus + .form-control-ripple {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

.form-control-ripple {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.4,0,.2,1) 0s;
    transition: -webkit-transform .2s cubic-bezier(.4,0,.2,1) 0s;
    -o-transition: transform .2s cubic-bezier(.4,0,.2,1) 0s;
    transition: transform .2s cubic-bezier(.4,0,.2,1) 0s;
    transition: transform .2s cubic-bezier(.4,0,.2,1) 0s, -webkit-transform .2s cubic-bezier(.4,0,.2,1) 0s;
    width: 100%;
    height: 2px;
    display: block;
    top: -1px;
    background-color: var(--secondary);
    -ms-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    position: relative;
    z-index: 2;
}

JavaScript

// You can pass any text color class as argument or any of the standard Bootstrap 4 color classes as argument
// Ex: labelOnFocus('text-secondary'); // default is 'text-primary'.
labelOnFocus();


/*! Bootstrap 4 Label color on focus for Daemonite : material design for bootstrap 4 available here : https://github.com/Daemonite/material
 * by djibe
 * MIT license
 * Include this script in your javascript collection.
 */
function labelOnFocus(colorClass){
	if (colorClass===undefined) colorClass = 'text-secondary';
  
  $(':input.form-control').on('focus', function(){
    $(this).prevAll('label').addClass(colorClass);
   }).on('blur', function(){
    $(this).siblings('label').removeClass(colorClass);
  });
}

// This is to add the ripple effect to any text field by simply adding the data-rippleLine attribute to the input
rippleLine();

/*! Bootstrap 4 line ripple for Daemonite : material design for bootstrap 4 available here : https://github.com/Daemonite/material
 * by djibe
 * MIT license
 * Include this script in your javascript collection.
 */
function rippleLine(){
	 $('<span class="form-control-ripple"></span>').insertAfter('[data-rippleLine]');
}