Javascript Components

by CreativeTim

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/js/plugins/bootstrap-datepicker.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<div class="section section-javascript" id="javascriptComponents">
  <div class="container">
    <h3 class="title">Javascript components</h3>
    <div class="row" id="modals">
      <div class="col-md-6">
        <h4>Modal</h4><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
          Launch Modal
        </button>
        <button class="btn btn-warning" data-toggle="modal" data-target="#myModal1">
          Launch Modal Mini
        </button>
      </div>
      <div class="col-md-6">
        <h4>Popovers</h4>
        <button type="button" class="btn btn-default" data-container="body" data-original-title="Popover On Left" data-toggle="popover" data-placement="left" data-content="Here will be some very useful information about his popover." data-color="primary">
          On left
        </button>
        <button type="button" class="btn btn-default" data-container="body" data-original-title="Popover on Top" data-toggle="popover" data-placement="top" data-content="Here will be some very useful information about his popover.">
          On top
        </button>
        <button type="button" class="btn btn-default" data-container="body" data-original-title="Popover on Right" data-toggle="popover" data-placement="right" data-content="Here will be some very useful information about his popover.<br>...

CSS

@font-face {
  font-family: 'Nucleo Outline';
  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
  src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
  font-weight: normal;
  font-style: normal;
}

.datepicker {
  padding: 8px 6px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr;
  -webkit-transform: translate3d(0, -40px, 0);
  -moz-transform: translate3d(0, -40px, 0);
  -o-transform: translate3d(0, -40px, 0);
  -ms-transform: translate3d(0, -40px, 0);
  transform: translate3d(0, -40px, 0);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: hidden;
  display: block;
  width: 254px;
  max-width: 254px;
}

.datepicker.dropdown-menu:before {
  display: none;
}

.datepicker.datepicker-primary {
  background-color: #f96332;
}

.datepicker.datepicker-primary th,
.datepicker.datepicker-primary .day div,
.datepicker.datepicker-primary table tr td span {
  color: #FFFFFF;
}

.datepicker.datepicker-primary:after {
  border-bottom-color: #f96332;
}

.datepicker.datepicker-primary.datepicker-orient-top:after {
  border-top-color: #f96332;
}

.datepicker.datepicker-primary .dow {
  color: rgba(255, 255, 255, 0.8);
}

.datepicker.datepicker-primary table tr td.old div,
.datepicker.datepicker-primary table tr td.new div,
.datepicker.datepicker-primary table tr td span.old,
.datepicker.datepicker-primary table tr td span.new {
  color: rgba(255, 255, 255, 0.4);
}

.datepicker.datepicker-primary table tr td span:hover,
.datepicker.datepicker-primary table tr td span.focused {
  background: rgba(255, 255, 255, 0.1);
}

.datepicker.datepicker-primary...

JavaScript

$(document).ready(function() {
  $('.date-picker').each(function() {
    $(this).datepicker({
      templates: {
        leftArrow: '<i class="now-ui-icons arrows-1_minimal-left"></i>',
        rightArrow: '<i class="now-ui-icons arrows-1_minimal-right"></i>'
      }
    }).on('show', function() {
      $('.datepicker').addClass('open');

      datepicker_color = $(this).data('datepicker-color');
      if (datepicker_color.length != 0) {
        $('.datepicker').addClass('datepicker-' + datepicker_color + '');
      }
    }).on('hide', function() {
      $('.datepicker').removeClass('open');
    });
  });

  //  Activate the Tooltips
  $('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();

  // Activate Popovers and set color for popovers
  $('[data-toggle="popover"]').each(function() {
    color_class = $(this).data('color');
    $(this).popover({
      template: '<div class="popover popover-' + color_class + '" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
    });
  });
});