Bootstrap 4 Advanced Components : simple inline editing for Bootstrap 4 Daemonite

Bootstrap 4 Advanced Components : Simple inline editing for Bootstrap 4 and Daemonite material UI

by djibe89

HTML

<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.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,400,400i,500,500i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Inline editing using HTML5 contenteditable for Bootstrap 4 - Advanced Components with daemonite material UI</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4 + Daemonite Material Design)</p>
        <p>
          Want the user to be able to edit some text with no effort ? Just add the HTML5 tag : <code>contenteditable="true"</code> to your element.
        </p>
        <p class="lead">
          If you see this page unstyled, press Ctrl + F5 to reload it.
        </p>
        <h2>Setup</h2>
        <ol>
          <li>
            Create a simple element with the contenteditable tag : <code>
              &lt;p contenteditable="true">
Example on a simple paragraph of text.
&lt;/p>
            </code>.
          </li>
          <li>Add the CSS from this fiddle to your project.
          </li>
          <li>
            Click on the paragraph to see contentedition in action.
          </li>
          <li>
            You'll have to save the modified content using javascript and AJAX requests.
          </li>
        </ol>
        <h2>Demo</h2>
        <p>
          Just click on the titles below to start inline editing
        </p>
        <ul class="list-group">
          <li...

CSS

/* Add my CSS to your CSS */

[contenteditable="true"]:focus {
  outline: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 16px 12px;
  background: #f5f5f5;
  -webkit-box-shadow: inset 0px -2px 0px 0px var(--secondary), 0 0 4px 0 rgba(0, 0, 0, .14), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  box-shadow: inset 0px -2px 0px 0px var(--secondary), 0 0 4px 0 rgba(0, 0, 0, .14), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  font-weight: normal;
}