Files
front/dist/documentation/changelog-archive.html
2021-12-28 13:34:18 +01:00

5833 lines
213 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Changelog - Documentation | Front - Multipurpose Responsive Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="../favicon.ico">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
<!-- CSS Front Template -->
<link rel="stylesheet" href="../assets/css/theme.min.css">
<link rel="stylesheet" href="../assets/css/docs.min.css">
</head>
<body class="navbar-sidebar-aside-lg">
<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
<div class="container-fluid">
<nav class="navbar-nav-wrap">
<div class="row flex-grow-1">
<!-- Default Logo -->
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<a href="../documentation/changelog.html">
<span class="badge bg-soft-primary text-primary">v4.1</span>
</a>
</div>
<!-- End Default Logo -->
<div class="col-md px-lg-0">
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
<div class="d-none d-md-block">
<!-- Search Form -->
<form id="docsSearch" class="position-relative"
data-hs-list-options='{
"searchMenu": true,
"keyboard": true,
"item": "searchTemplate",
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
"empty": "#searchNoResults"
}'>
<!-- Input Group -->
<div class="input-group input-group-merge navbar-input-group">
<div class="input-group-prepend input-group-text">
<i class="bi-search"></i>
</div>
<input type="search" class="search form-control form-control-sm" placeholder="Search in docs" aria-label="Search in docs">
<a class="input-group-append input-group-text" href="javascript:;">
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
</a>
</div>
<!-- End Input Group -->
<!-- List -->
<div class="list dropdown-menu navbar-dropdown-menu-borderless w-100 overflow-auto" style="max-height: 16rem;"></div>
<!-- End List -->
<!-- Empty -->
<div id="searchNoResults" style="display: none;">
<div class="text-center p-4">
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
<p class="mb-0">No Results</p>
</div>
</div>
<!-- End Empty -->
</form>
<!-- End Search Form -->
<!-- List Item Template -->
<div class="d-none">
<div id="searchTemplate" class="dropdown-item">
<a class="d-block link" href="#">
<span class="category d-block fw-normal text-muted mb-1"></span>
<span class="component text-dark"></span>
</a>
</div>
</div>
<!-- End List Item Template -->
</div>
<!-- Navbar -->
<ul class="navbar-nav p-0">
<li class="nav-item">
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary btn-sm" href="../index.html">
<i class="bi-eye me-1"></i> Preview Demo
</a>
</li>
</ul>
<!-- End Navbar -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Navbar -->
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
data-hs-nav-scroller-options='{
"type": "vertical",
"target": ".navbar-nav .active",
"offset": 80
}'>
<!-- Navbar Toggle -->
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
<span class="d-flex justify-content-between align-items-center">
<span class="h3 mb-0">Nav menu</span>
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</span>
</button>
<!-- End Navbar Toggle -->
<!-- Navbar Collapse -->
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
<div class="navbar-brand-wrapper border-end" style="height: auto;">
<!-- Default Logo -->
<div class="d-flex align-items-center mb-3">
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<a class="navbar-brand-badge" href="../documentation/changelog.html">
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
</a>
</div>
<!-- End Default Logo -->
<!-- Nav -->
<ul class="nav nav-segment nav-fill nav-justified">
<li class="nav-item">
<a class="nav-link active" href="../documentation/index.html">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../snippets/index.html">Snippets</a>
</li>
</ul>
<!-- End Nav -->
</div>
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
<li class="nav-item">
<span class="nav-subtitle">Documentation</span>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/index.html">Introduction</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<span class="nav-subtitle">Getting started</span>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/getting-started.html">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/gulp.html">Gulp</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/customization.html">Customization</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/credits.html">Credits</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../documentation/changelog.html">Changelog</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<span class="nav-subtitle">Design &amp; Graphics</span>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/bs-icons.html">Bootstrap Icons</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/duotone-icons.html">Duotone Icons</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/illustrations.html">Illustrations</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<span class="nav-subtitle">Components</span>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/accordion.html">Accordion</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/alerts.html">Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/avatars.html">Avatars</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/badge.html">Badge</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/breadcrumb.html">Breadcrumb</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/buttons.html">Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/cards.html">Cards</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/collapse.html">Collapse</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/column-divider.html">Column Divider</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/devices.html">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/divider.html">Divider</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/dropdowns.html">Dropdowns</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/icons.html">Icons</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/list-group.html">List Group</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/lists.html">Lists</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/legend-indicator.html">Legend Indicator</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/modal.html">Modal</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/offcanvas.html">Offcanvas</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/page-header.html">Page Header</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/pagination.html">Pagination</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/popovers.html">Popovers</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/progress.html">Progress</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/profile.html">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/shapes.html">Shapes</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/spinners.html">Spinners</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/steps.html">Steps</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/tab.html">Tab</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/tables.html">Tables</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/text-highlight.html">Text Highlight</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/toasts.html">Toasts</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/tooltips.html">Tooltips</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/typography.html">Typography</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle d-block">Navbars</small>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/navbar.html">Navbar</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/navs.html">Navs</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/mega-menu.html">Mega Menu</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/scrollspy.html">Scrollspy</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle d-block">Basic forms</small>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/basic-forms.html">Basic Forms</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/checks-and-switches.html">Checks &amp; Switches</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/input-group.html">Input Group</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle">Advanced Forms</small>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/select.html">Advanced Select</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/file-attachments.html">File Attachments</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/dropzone.html">Drag n Drop File Uploads</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/quill.html">WYSIWYG Editor</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/quantity-counter.html">Quantity Counter</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/input-mask.html">Input Mask</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/step-forms.html">Step Forms (Wizards)</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/range-slider.html">Range Slider (noUiSlider)</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/add-field.html">Add Field</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/toggle-password.html">Toggle Password</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/count-characters.html">Count Characters</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/toggle-switch.html">Toggle Switch</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/toggle-state.html">Toggle State</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/switch.html">Switch</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle">Media</small>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/fslightbox.html">Fullscreen Lightbox</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/video-bg.html">Video Background</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/video-player.html">Video Player</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/swiper.html">Swiper</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle">Others</small>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/maps-leaflet.html">Maps (Leaflet)</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/chartjs.html">Chart.js</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/circles.html">Circles.js (Pie Chart)</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/sticky-block.html">Sticky Block</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/countdown.html">Countdown</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/sorting.html">Sorting (Shuffle.js)</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/go-to.html">Go To</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/show-animation.html">Show Animation</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/typedjs.html">Typed.js</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle d-block">Utilities</small>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/backgrounds.html">Backgrounds</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/borders.html">Borders</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/colors.html">Colors</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/links.html">Links</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/position.html">Position</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/rotations.html">Rotations</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/shadows.html">Shadows</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/sizing.html">Sizing</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/spacing.html">Spacing</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../documentation/z-index.html">Z-index</a>
</li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</nav>
<!-- End Navbar -->
<!-- Content -->
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
<div id="version3_3_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.3.1</code> - 27 April, 2021 <a class="anchorjs-link" href="#version3_3_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<a class="link" href="../documentation/progress-animation.html">Progress Animation</a> Fixed animation for horizontal progress bar on load the page.
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Coloring issue when Search Push Top is active
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<a class="link" href="../page-login.html">Sign In</a> and <a class="link" href="../page-signup.html">Sign Up</a> layout pages
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
Bootstrap from <code>v4.5.3</code> to <code>v4.6.0</code>
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/utilities/_sizing.scss</code></li>
<li><code>assets/scss/front/headers/_header-white-nav-links.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
<ul>
<li><code>page-login.html</code></li>
<li><code>page-signup.html</code></li>
</ul>
</div>
</div>
<div id="version3_3" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.3</code> - 03 December, 2020 <a class="anchorjs-link" href="#version3_3" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<h3 class="hs-docs-heading">Introducing new powerful Gulp Toolkit</h3>
<p>Over the past years, we've been asked many times how to automatically prepare the optimized build package, auto path detection, passing variables over HTML and SVG files and lots of others. We are happy to introduce the new powerful <strong>Gulp Toolkit</strong> which covers all and even more. Learn more at <a class="link" href="../documentation/gulp.html">Gulp Page</a> for more details.</p>
<p>Please note, <code>v3.3.0</code> comes with a new <a class="link" href="../documentation/index.html#file-structure">File Structure</a> including with a few global changes to make the development process fast and scalable than ever before in Front.</p>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../documentation/gulp.html">Gulp Toolkit</a>
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../demo-real-estate/index.html">Real Estate</a> (5 Pages)
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../demo-jobs/index.html">Jobs</a> (9 Pages)
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../index.html">Sign Up</a> modal
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../demo-app-marketplace/submit-app.html">Submit app</a> page for the App Marketplace demo
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../documentation/count-characters.html">Count characters</a> plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../documentation/cards.html#card-no-gutters">Card no gutters</a> option
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../documentation/navs.html#nav-scroller">HS Nav Scroller</a> plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../documentation/step-form.html#methods">HS Step Form</a> slide to top option
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../documentation/profile-cover.html">Profile cover</a> component
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../documentation/page-header.html">Page Header</a> component
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<a class="link" href="../documentation/forms.html#checkbox-bookmark">Checkbox Bookmark</a> component
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
HS Unfold "Spacebar" keyboard issue on iPhone X
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added new utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Step component
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Dropdown item hover effect
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<a class="link" href="../documentation/css-divider.html">CSS divider</a>
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<a class="link" href="../documentation/typography.html#blockquotes">Blockquote</a> styles
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
The CSS psuedo icons, now SVG based
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
JS code comment section in the HTML-pages only
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Extended utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
Bootstrap from <code>v4.5</code> to <code>v4.5.3</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="../documentation/file-attach.html">File attach</a> new options added
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="../documentation/typedjs.html">Typedjs</a> now via data attributes
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="../documentation/range-slider.html">Ion Range Slider</a>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="../documentation/fancybox.html">Fancybox</a>
</div>
<div class="mt-5">
<h4>List of new JS-files/folders:</h4>
<ul>
<li><code>assets/vendor/hs-nav-scroller/</code></li>
<li><code>assets/vendor/hs-count-characters/</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of new SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/blockquote/_blockquote.scss</code></li>
<li><code>assets/scss/front/hero/</code></li>
<li><code>assets/scss/front/forms/checkbox/_checkbox-bookmark.scss</code></li>
<li><code>assets/scss/front/page-header/</code></li>
<li><code>assets/scss/front/profile/</code></li>
<li><code>assets/scss/front/vendor/hs-nav-scroller/</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of dropped SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/divider/_divider-sizes.scss</code></li>
<li><code>assets/scss/front/forms/bookmark/_bookmark-checkbox.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated JS-files/folders:</h4>
<ul>
<li><code>assets/js/hs.validation.js</code></li>
<li><code>assets/js/hs.fancybox.js</code></li>
<li><code>assets/js/hs.select2.js</code></li>
<li><code>assets/js/hs.typed.js</code></li>
<li><code>assets/js/hs.chartjs.js</code></li>
<li><code>assets/vendor/hs-step-form/</code></li>
<li><code>assets/vendor/hs-file-attach/</code></li>
<li><code>src/assets/vendor/hs-unfold/</code></li>
<li><code>src/assets/vendor/chart.js.extensions/chartjs-extensions.js</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/_variables.scss</code></li>
<li><code>assets/scss/front/avatar/_avatar.scss</code></li>
<li><code>assets/scss/front/breadcrumb/_breadcrumb.scss</code></li>
<li><code>assets/scss/front/buttons/_button-custom.scss</code></li>
<li><code>assets/scss/front/buttons/_button-soft.scss</code></li>
<li><code>assets/scss/front/dropdown/_dropdown.scss</code></li>
<li><code>assets/scss/front/headers/_header-default.scss</code></li>
<li><code>assets/scss/front/headers/_header-white-nav-links.scss</code></li>
<li><code>assets/scss/front/forms/checkbox/_checkbox-icon.scss</code></li>
<li><code>assets/scss/front/forms/states/_states.scss</code></li>
<li><code>assets/scss/front/divider/_divider.scss</code></li>
<li><code>assets/scss/front/navs/_navs.scss</code></li>
<li><code>assets/scss/front/slick/arrows/_slick-arrow.scss</code></li>
<li><code>assets/scss/front/step/_step.scss</code></li>
<li><code>assets/scss/front/step/_step-avatar.scss</code></li>
<li><code>assets/scss/front/step/_step-avatar-sizes.scss</code></li>
<li><code>assets/scss/front/step/_step-breakpoints.scss</code></li>
<li><code>assets/scss/front/step/_step-centered.scss</code></li>
<li><code>assets/scss/front/step/_step-colors.scss</code></li>
<li><code>assets/scss/front/step/_step-divider.scss</code></li>
<li><code>assets/scss/front/step/_step-icon.scss</code></li>
<li><code>assets/scss/front/step/_step-icon-sizes.scss</code></li>
<li><code>assets/scss/front/step/_step-inline.scss</code></li>
<li><code>assets/scss/front/step/_step-states.scss</code></li>
<li><code>assets/scss/front/step/_step-timeline.scss</code></li>
<li><code>assets/scss/front/utilities/_borders.scss</code></li>
<li><code>assets/scss/front/utilities/_gradients.scss</code></li>
<li><code>assets/scss/front/utilities/_gradients-overlay.scss</code></li>
<li><code>assets/scss/front/utilities/_transitions.scss</code></li>
<li><code>assets/scss/front/vendor/select2/_select2.scss</code></li>
<li><code>assets/scss/front/vendor/ion-range-slider/_select2.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>Breaking changes:</h4>
<ul>
<li><code>.step-inline-title</code> changed to <code>.step-title</code></li>
<li><code>navy</code> color changed to <code>dark</code></li>
<li><code>dark</code> color changed to <code>gray-900</code></li>
<li><code>data-chartjs-options='{}'</code> data attribute changed to <code>data-hs-chartjs-options='{}'</code></li>
</ul>
</div>
<!-- Card -->
<div class="card mt-5">
<div class="card-header">
<h4 class="card-header-title">Renamed classes</h4>
</div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Front v3.2.2</th>
<th>Front v3.3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.gradient-y-overlay-sm-dark</code>
</td>
<td>
<code>.gradient-y-overlay-sm-gray-900</code>
</td>
</tr>
<tr>
<td>
<code>.gradient-x-overlay-sm-navy</code>
</td>
<td>
<code>.gradient-x-overlay-sm-dark</code>
</td>
</tr>
<tr>
<td>
<code>.gradient-x-overlay-lg-navy</code>
</td>
<td>
<code>.gradient-x-overlay-lg-dark</code>
</td>
</tr>
<tr>
<td>
<code>.gradient-x-overlay-lg-navy-video</code>
</td>
<td>
<code>.gradient-x-overlay-lg-dark-video</code>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
</div>
<div id="version3_2_2" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.2.2</code> - 30 July, 2020 <a class="anchorjs-link" href="#version3_2_2" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Unfold JS error
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Privacy Page UI enhancement
</div>
<div class="mt-5">
<h4>List of updated JS-files/folders:</h4>
<ul>
<li><code>assets/vendor/hs-unfold</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
<ul>
<li><code>html/pages/privacy.html</code></li>
</ul>
</div>
</div>
<div id="version3_2_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.2.1</code> - 11 June, 2020 <a class="anchorjs-link" href="#version3_2_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<a class="link" href="../account-overview.html">Account</a> pages on mobile screen
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/forms/_custom-form.scss</code></li>
<li><code>assets/scss/front/navbar/_navbar-vertical.scss</code></li>
</ul>
</div>
</div>
<div id="version3_2" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.2</code> - 09 June, 2020 <a class="anchorjs-link" href="#version3_2" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../account-overview.html">Account</a> (9 Pages)
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="input-mask.html">Input mask</a> library
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="quill.html">Quill</a> library
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="select2.html">Select2</a> library
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="add-field.html">Add Field</a> HS library
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="text-highlight.html">Text Highlight</a> component
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="legend-indicator.html">Legend indicator</a> component
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="navbar.html">Vertical Navbar</a> component
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Video player icon moving issue on hover
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Unfold JS error
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Mega Menu Click event
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Added missing ID to Hire Us section to OnePage SASS demo
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Added missing <code>unfold.js</code> library to OnePage SASS and Classic Software demos
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Extended utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="avatars.html#border">Avatar</a> options
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="buttons.html#color-variants">White button</a> option
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="cards.html#card-bordered">Cards</a> options
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="breadcrumb.html">Breadcrumb Light</a> option
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="forms.html#input-group-break">Forms</a> options
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="list-group.html#flush">List group</a> option
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="modal.html#top-cover">Modal</a> option
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="navs.html">Navs &amp; Tabs</a> options
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="tables.html">Tables</a> options
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Extended functionalities of <a class="link" href="video-player.html">HS Video Player</a> library
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Extended functionalities of <a class="link" href="file-attach.html">HS File Attach</a> library
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Video background in <a class="link" href="../classic-studio.html">Classic Studio</a> improved on smaller devices
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Hero in <a class="link" href="../demo-help-desk/index.html">Help Desk</a> page
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Soft Alert style link color
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
Bootstrap from <code>v4.4.1</code> to <code>v4.5</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
jQuery from <code>v3.3.1</code> to <code>v3.5.1</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
jQuery Migrate from <code>v3.0.1</code> to <code>v3.3.0</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
HS File-attach
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
HS Go-to
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
HS Mega-menu
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
HS Unfold
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
HS Video-player
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>Bootstrap Select</code> and <code>Tagify</code> library in favor of <a class="link" href="select2.html">Select2</a>
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>Summernote</code> library in favor of <a class="link" href="quill.html">Quill</a>
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>Datatables</code>, <code>Flatpickr</code> and <code>Password Strength</code> libraries as lack of use cases at the current versions of Front. However, if you need them for some reaons, you may refer to the previouse version of Front's Documentation (e.g. <a target="_blank" href="https://htmlstream.com/preview/front-v3.1.1/documentation/index.html">v3.1.1</a>)
</div>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
<ul>
<li><code>html/index.html</code></li>
<li><code>html/onepage-saas.html</code></li>
<li><code>html/classic-software.html</code></li>
<li><code>html/demo-course/listing.html</code></li>
<li><code>html/demo-help-desk/index.html</code></li>
<li><code>html/demo-app-marketplace/index.html</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/_variables.scss</code></li>
<li><code>assets/scss/front/avatar/_avatar.scss</code></li>
<li><code>assets/scss/front/avatar/_avatar-sizes.scss</code></li>
<li><code>assets/scss/front/badge/_badge-soft.scss</code></li>
<li><code>assets/scss/front/buttons/_button-custom.scss</code></li>
<li><code>assets/scss/front/breadcrumb/_breadcrumb.scss</code></li>
<li><code>assets/scss/front/card/_card.scss</code></li>
<li><code>assets/scss/front/dropdown/_dropdown.scss</code></li>
<li><code>assets/scss/front/forms/_form.scss</code></li>
<li><code>assets/scss/front/forms/_form-merge.scss</code></li>
<li><code>assets/scss/front/forms/checkbox/_checkbox-icon.scss</code></li>
<li><code>assets/scss/front/headers/_header-fullscreen-style.scss</code></li>
<li><code>assets/scss/front/links/_links.scss</code></li>
<li><code>assets/scss/front/navs/_navs.scss</code></li>
<li><code>assets/scss/front/media/_video-player.scss</code></li>
<li><code>assets/scss/front/modal/_modal.scss</code></li>
<li><code>assets/scss/front/table/_table.scss</code></li>
<li><code>assets/scss/front/utilities/_text-colors.scss</code></li>
<li><code>assets/scss/front/vendor/hs-unfold/_hs-unfold.scss</code></li>
<li><code>assets/scss/front/mixins/_alert.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of new SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/forms/custom-forms/_custom-forms.scss</code></li>
<li><code>assets/scss/front/forms/checkbox/_checkbox-switch.scss</code></li>
<li><code>assets/scss/front/navbar/_navbar.scss</code></li>
<li><code>assets/scss/front/navbar/_navbar-vertical.scss</code></li>
<li><code>assets/scss/front/legend-indicator/_legend-indicator.scss</code></li>
<li><code>assets/scss/front/list/_list-group.scss</code></li>
<li><code>assets/scss/front/navs/_nav-list.scss</code></li>
<li><code>assets/scss/front/vendor/_select2.scss</code></li>
<li><code>assets/scss/front/text-highlight/_text-highlight.scss</code></li>
<li><code>assets/scss/front/mixins/_text-highlight.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of new JS-files (HS extended):</h4>
<ul>
<li><code>assets/js/hs.quill.js</code></li>
<li><code>assets/js/hs.select2.js</code></li>
<li><code>assets/js/hs.mask.js</code></li>
</ul>
</div>
</div>
<div id="version3_1_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.1.1</code> - 15 April, 2020 <a class="anchorjs-link" href="#version3_1_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Added <a class="link" href="step.html#avatars">Step Avatars</a> and <a class="link" href="step.html#last-item-borderless">Last item borderless</a> compontents
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Updated illustrations in <a class="link" href="../demo-course/index.html">Course</a>, <a class="link" href="../page-error-404.html">Error 404</a>, <a class="link" href="../page-maintenance-mode.html">Maintenance Mode</a>, <a class="link" href="../page-coming-soon.html">Coming Soon</a> and <a class="link" href="../shop-empty-cart.html">Cart Empty</a> pages
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Added <a class="link" href="index.html#starter-template">Starter Template</a> snippet code to Documentation Introduction page
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>hs.summernote.js</code> and <code>hs.dropzone.js</code> libraries source code
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
SCSS variables
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/_variables.scss</code></li>
<li><code>assets/scss/front/breadcrumb/_breadcrumb.scss</code></li>
<li><code>assets/scss/front/buttons/_button-soft.scss</code></li>
<li><code>assets/scss/front/card/_card.scss</code></li>
<li><code>assets/scss/front/dropdown/_dropdown.scss</code></li>
<li><code>assets/scss/front/forms/_form-flush.scss</code></li>
<li><code>assets/scss/front/forms/_form-merge.scss</code></li>
<li><code>assets/scss/front/navs/_navs.scss</code></li>
<li><code>assets/scss/front/step/_step.scss</code></li>
<li><code>assets/scss/front/step/_step-icon.scss</code></li>
<li><code>assets/scss/front/vendor/datatables/_datatables.scss</code></li>
<li><code>assets/scss/front/vendor/tagify/_tagify.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of new SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/buttons/_button-outline.scss</code></li>
<li><code>assets/scss/front/step/_step-avatar.scss</code></li>
<li><code>assets/scss/front/step/_step-avatar-sizes.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated JS-files (HS extended):</h4>
<ul>
<li><code>assets/js/hs.dropzone.js</code></li>
<li><code>assets/js/hs.summernote-editor.js</code></li>
<li>Changed from <code>assets/include/upload.html</code> to <code>assets/include/dropzone-upload.html</code></li>
</ul>
</div>
</div>
<div id="version3_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.1</code> - 31 March, 2020 <a class="anchorjs-link" href="#version3_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../snippets/index.html">Snippets</a> pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="devices.html">Devices</a>, <a class="link" href="file-attach.html">File attach</a>, <a class="link" href="toggle-switch.html">Toggle switch</a>, <a class="link" href="modal.html">Modal</a>, <a class="link" href="popovers.html">Popovers</a>, <a class="link" href="tabs.html">Tabs</a>, and <a class="link" href="tooltips.html">Tooltips</a> documentation pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
HS-Unfold plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Link hover color on "Course" demo pages
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Default <code>.avatar</code> border-radius
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>.avatar-group</code> alignment
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>assets/js/</code> files JS errors when using <code>.theme.min.js</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>.nav-borderless</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>.nav-icon</code> in favor of step components
</div>
<div class="mt-5">
<h4>Breaking changes:</h4>
<ul>
<li><code>.card-shadow-on-hover</code> changed to <code>.card-hover-shadow</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of dropped SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/sticky-footer/</code> folder</li>
<li><code>assets/css/sticky-footer.css</code> file</li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/_variables.scss</code></li>
<li><code>assets/scss/front/navs/_navs.scss</code></li>
<li><code>assets/scss/front/avatar/_avatar.scss</code></li>
<li><code>assets/scss/front/avatar/_avatar-group.scss</code></li>
<li><code>assets/scss/front/search-forms/_search-form-slide-down.scss</code></li>
<li><code>assets/scss/front/tagify/_tagify.scss</code></li>
<li><code>assets/scss/front/utilities/_text-colors.scss</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of updated plugins:</h4>
<ul>
<li><code>assets/vendor/hs-unfold/</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of new plugins:</h4>
<ul>
<li><code>assets/vendor/hs-file-attach/</code></li>
</ul>
</div>
</div>
<div id="version3_0-migrating-to-v3" class="content-divider">
<h2 class="hs-docs-heading">Migrating to v3 <a class="anchorjs-link" href="#version3_0-migrating-to-v3" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<p>Front v3.0 is a major rewrite of the entire template. The most notable changes are summarized below, followed by more specific changes to relevant components. Hence, below are the breaking changes to bear in mind when moving from v2.x to v3.0 or any older version of Front.</p>
<p>The most notable improvements made in Front v3.0</p>
<ul class="list-py-1">
<li><span class="text-dark fw-semi-bold">Design</span> - almost all pages are redesigned with a new fresh look.</li>
<li><span class="text-dark fw-semi-bold">JavaScript</span> - all scripts are fully re-written from scratch, in the last two years since Front is released we have recieved lots of feedback from users and implimented all of them making Front's JavaScript to scale in any level.</li>
<li><span class="text-dark fw-semi-bold">HTML</span> - fully rid of BEM CSS naming convention in favor of Bootstrap naming classes to match Fronts components codes as native as Bootstrap components codes.</li>
<li><span class="text-dark fw-semi-bold">CSS/SCSS</span> - extended components variables to make customization experience even better.</li>
</ul>
</div>
<div id="version3_0" class="content-divider">
<h2 class="hs-docs-heading"><code>v3.0</code> - 19 March, 2020 <a class="anchorjs-link" href="#version3_0" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../demo-course/index.html">Course</a> demo - comes with three additional inner pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Nav Wrap header option that keeps secondary contents, like, "Buy Now" or search buttons always visible across all resolutions
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="headers.html#with-bs-dropdown">Bootstrap dropdown</a> examples that do not require <code>hs.megamenu</code> plugin to work
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<code>assets/scss/animation/</code> components
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>.search-slide-down</code> width issue on smaller resolution
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Redesigned almost all Home Pages except Home App pages
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Design of supporting pages (e.g. Portfolio, Careers, Pricing etc.)
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Design of Blog pages
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Standardized font <code>weight styles</code> across pages
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>Poppins</code> font replaced with <code>Open-Sans</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>heading</code> and <code>p</code> tags styles rewritten and enhanced
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Switch style <code>_custom-switch.scss</code> changed to <code>_toggle-switch.scss</code> and completely rewritten
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Font icons changed from <code>&lt;span&gt;&lt;/span&gt;</code> and <code>&lt;small&gt;&lt;/small&gt;</code> tags to the <code>&lt;i&gt;&lt;/i&gt;</code> tag
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>.btn-custom-toggle-*</code> and <code>.btn</code> components
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>.box-shadow-sm</code> class value
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>.btn-outline-secondary</code> border color
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
custom <code>.fadeInUp</code> class CSS parameters
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
avatar classes grouped with a <code>.avatar-group</code> class
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<a class="link" href="step-form.html">Step Form</a> works without validation now
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Video background resolution on smaller devices in the <a class="link" href="../classic-studio.html">Classic Studio</a> home page
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Default alert style - now alerts come with 2 styles solid (default) and soft colors
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Header completely rewritten
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
SCSS variables
</div>
<div class="mt-5">
<h4>Most noticeable dropped sources:</h4>
<ul>
<li><span class="text-dark fw-semi-bold">Sketch</span> file. Due to many complains of version difference between Front HTML and Front Sketch files. This has been huge issue to maintain at the same version both Sketch and HTML version of Front since they are two different purpose products. However, we will consider adding design version (Sketch or Figma) of Front as a separate product in future.</li>
<li><code>design</code> folder - logo sources can be found at <code>assets/svg/logos/..</code></li>
<li>Crypto Landing demo page.</li>
</ul>
</div>
<div class="mt-5">
<h4>Breaking changes</h4>
<ul>
<li><code>.u-</code> class prefix to optimize the classes with Bootstrap utility classes</li>
<li>All JS-files moved from <code>assets/js/components</code> to the <code>assets/js/</code> path.</li>
<li>All JS-files from <code>assets/js</code> completely rewritten.</li>
<li>SVG elements called via <code>.img-fluid</code> class instead of <code>.js-svg-injector</code> class.</li>
<li>Bootstrap JS path updated from <code>node_modules/bootstrap/dist/js/bootstrap.min.js</code> to <code>node_modules/bootstrap/dist/js/bootstrap.bundle.min.js</code>.</li>
<li><code>assets/vendor/font-awesome/css/fontawesome-all.min.css</code> changed to <code>node_modules/@fortawesome/fontawesome-free/css/all.css</code>.</li>
<li><code>slickPaging</code> changed to <code>counter</code>.</li>
<li><code>hs-bg-video</code> changed to <code>hs-video-bg</code>.</li>
<li><code>hs.datepickr.js</code> changed to <code>hs.flatpickr.js</code>.</li>
<li><code>hs.range-slider.js</code> changed to <code>hs.ion-range-slider.js</code>.</li>
<li><code>hs.char-pie.js</code> changed to <code>hs.circles.js</code>.</li>
<li><code>hs.password-strength.js</code> changed to <code>hs.pwstrength.js</code>.</li>
</ul>
</div>
<!-- Card -->
<div class="card mt-5">
<div class="card-header">
<h4 class="card-header-title">Renamed classes</h4>
</div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Front v3.2.2</th>
<th>Front v3.3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.min-width-3</code>
</td>
<td>
<code>.min-w-3rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-width-4</code>
</td>
<td>
<code>.min-w-4rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-width-8</code>
</td>
<td>
<code>.min-w-8rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-width-21</code>
</td>
<td>
<code>.min-w-21rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-3</code>
</td>
<td>
<code>.max-w-3rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-4</code>
</td>
<td>
<code>.max-w-4rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-5</code>
</td>
<td>
<code>.max-w-5rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-6</code>
</td>
<td>
<code>.max-w-6rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-7</code>
</td>
<td>
<code>.max-w-7rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-8</code>
</td>
<td>
<code>.max-w-8rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-9</code>
</td>
<td>
<code>.max-w-9rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-10</code>
</td>
<td>
<code>.max-w-10rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-11</code>
</td>
<td>
<code>.max-w-11rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-13</code>
</td>
<td>
<code>.max-w-13rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-15</code>
</td>
<td>
<code>.max-w-15rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-19</code>
</td>
<td>
<code>.max-w-19rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-23</code>
</td>
<td>
<code>.max-w-23rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-27</code>
</td>
<td>
<code>.max-w-27rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-33</code>
</td>
<td>
<code>.max-w-33rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-35</code>
</td>
<td>
<code>.max-w-35rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-40</code>
</td>
<td>
<code>.max-w-40rem</code>
</td>
</tr>
<tr>
<td>
<code>.max-width-50</code>
</td>
<td>
<code>.max-w-50rem</code>
</td>
</tr>
<tr>
<td>
<code>.height-4</code>
</td>
<td>
<code>.h-4rem</code>
</td>
</tr>
<tr>
<td>
<code>.height-250</code>
</td>
<td>
<code>.h-250rem</code>
</td>
</tr>
<tr>
<td>
<code>.height-380</code>
</td>
<td>
<code>.h-380rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-270</code>
</td>
<td>
<code>.min-h-270rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-300</code>
</td>
<td>
<code>.min-h-300rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-380</code>
</td>
<td>
<code>.min-h-380rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-4540</code>
</td>
<td>
<code>.min-h-4540rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-500</code>
</td>
<td>
<code>.min-h-500rem</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-620</code>
</td>
<td>
<code>.min-h-620rem</code>
</td>
</tr>
<tr>
<td>
<code>.height-md-30vh</code>
</td>
<td>
<code>.vh-md-30</code>
</td>
</tr>
<tr>
<td>
<code>.height-md-70vh</code>
</td>
<td>
<code>.vh-md-70</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-md-100vh</code>
</td>
<td>
<code>.min-vh-md-100</code>
</td>
</tr>
<tr>
<td>
<code>.height-lg-100vh</code>
</td>
<td>
<code>.vh-lg-100</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-lg-100vh</code>
</td>
<td>
<code>.min-vh-lg-100</code>
</td>
</tr>
<tr>
<td>
<code>.min-height-lg-600</code>
</td>
<td>
<code>.min-h-lg-600rem</code>
</td>
</tr>
<tr>
<td>
<code>.link-muted</code>
</td>
<td>
<code>.link-underline</code>
</td>
</tr>
<tr>
<td>
<code>.custom-checkbox</code>
</td>
<td>
<code>.toggle-switch</code>
</td>
</tr>
<tr>
<td>
<code>.datepicker</code>
</td>
<td>
<code>.flatpickr</code>
</td>
</tr>
<tr>
<td>
<code>.card-btn-arrow</code>
</td>
<td>
<code>.card-btn-toggle</code>
</td>
</tr>
<tr>
<td>
<code>.btn__toggle-toggled</code>
</td>
<td>
<code>.btn-toggle-toggled</code>
</td>
</tr>
<tr>
<td>
<code>.btn__toggle-default</code>
</td>
<td>
<code>.btn-toggle-default</code>
</td>
</tr>
<tr>
<td>
<code>.gradient-overlay-half-dark-video-v1</code>
</td>
<td>
<code>.gradient-x-overlay-lg-dark-video</code>
</td>
</tr>
<tr>
<td>
<code>.gradient-overlay-half-indigo-v1</code>
</td>
<td>
<code>.gradient-x-overlay-sm-indigo</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__submenu-list-link</code>
</td>
<td>
<code>.fullscreen-submenu-list-link</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__submenu-list</code>
</td>
<td>
<code>.fullscreen-submenu-list</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__submenu-nav-link</code>
</td>
<td>
<code>.fullscreen-submenu-nav-link</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__submenu</code>
</td>
<td>
<code>.fullscreen-submenu</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__nav-link</code>
</td>
<td>
<code>.fullscreen-nav-link</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__nav-list</code>
</td>
<td>
<code>.fullscreen-nav-list</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__nav</code>
</td>
<td>
<code>.fullscreen-nav</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__overlay</code>
</td>
<td>
<code>.fullscreen-overlay</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen__container</code>
</td>
<td>
<code>.fullscreen-container</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen--showed</code>
</td>
<td>
<code>.fullscreen--showed</code>
</td>
</tr>
<tr>
<td>
<code>.fullscreen--toggler</code>
</td>
<td>
<code>.fullscreen--toggler</code>
</td>
</tr>
<tr>
<td>
<code>.header--floating__inner</code>
</td>
<td>
<code>.header-floating-inner</code>
</td>
</tr>
<tr>
<td>
<code>.header--floating-xl</code>
</td>
<td>
<code>.header-floating-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--floating-lg</code>
</td>
<td>
<code>.header-floating-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--floating-md</code>
</td>
<td>
<code>.header-floating-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--floating-sm</code>
</td>
<td>
<code>.header-floating-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--floating</code>
</td>
<td>
<code>.header-floating</code>
</td>
</tr>
<tr>
<td>
<code>.header--invulnerable-xl</code>
</td>
<td>
<code>.header-invulnerable-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--invulnerable-lg</code>
</td>
<td>
<code>.header-invulnerable-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--invulnerable-md</code>
</td>
<td>
<code>.header-invulnerable-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--invulnerable-sm</code>
</td>
<td>
<code>.header-invulnerable-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--invulnerable</code>
</td>
<td>
<code>.header-invulnerable</code>
</td>
</tr>
<tr>
<td>
<code>.header--change-appearance-xl</code>
</td>
<td>
<code>.header-change-appearance-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--change-appearance-lg</code>
</td>
<td>
<code>.header-change-appearance-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--change-appearance-md</code>
</td>
<td>
<code>.header-change-appearance-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--change-appearance-sm</code>
</td>
<td>
<code>.header-change-appearance-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--change-appearance</code>
</td>
<td>
<code>.header-change-appearance</code>
</td>
</tr>
<tr>
<td>
<code>.header--toggle-section-xl</code>
</td>
<td>
<code>.header-toggle-section-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--toggle-section-lg</code>
</td>
<td>
<code>.header-toggle-section-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--toggle-section-md</code>
</td>
<td>
<code>.header-toggle-section-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--toggle-section-sm</code>
</td>
<td>
<code>.header-toggle-section-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--toggle-section</code>
</td>
<td>
<code>.header-toggle-section</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-top-xl</code>
</td>
<td>
<code>.header-abs-top-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-top-lg</code>
</td>
<td>
<code>.header-abs-top-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-top-md</code>
</td>
<td>
<code>.header-abs-top-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-top-sm</code>
</td>
<td>
<code>.header-abs-top-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-top</code>
</td>
<td>
<code>.header-abs-top</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-sticky-top-xl</code>
</td>
<td>
<code>.header-abs-sticky-top-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-sticky-top-lg</code>
</td>
<td>
<code>.header-abs-sticky-top-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-sticky-top-md</code>
</td>
<td>
<code>.header-abs-sticky-top-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-sticky-top-sm</code>
</td>
<td>
<code>.header-abs-sticky-top-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-sticky-top</code>
</td>
<td>
<code>.header-abs-sticky-top</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-show-hide-xl</code>
</td>
<td>
<code>.header-abs-show-hide-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-show-hide-lg</code>
</td>
<td>
<code>.header-abs-show-hide-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-show-hide-md</code>
</td>
<td>
<code>.header-abs-show-hide-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-show-hide-sm</code>
</td>
<td>
<code>.header-abs-show-hide-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--abs-show-hide</code>
</td>
<td>
<code>.header-abs-show-hide</code>
</td>
</tr>
<tr>
<td>
<code>.header--static-xl</code>
</td>
<td>
<code>.header-static-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header--static-lg</code>
</td>
<td>
<code>.header-static-lg</code>
</td>
</tr>
<tr>
<td>
<code>.header--static-md</code>
</td>
<td>
<code>.header-static-md</code>
</td>
</tr>
<tr>
<td>
<code>.header--static-sm</code>
</td>
<td>
<code>.header-static-sm</code>
</td>
</tr>
<tr>
<td>
<code>.header--static</code>
</td>
<td>
<code>.header-static</code>
</td>
</tr>
<tr>
<td>
<code>.header--change-logo</code>
</td>
<td>
<code>.header-change-logo</code>
</td>
</tr>
<tr>
<td>
<code>.header--untransitioned</code>
</td>
<td>
<code>.header-untransitioned</code>
</td>
</tr>
<tr>
<td>
<code>.header--moved-up</code>
</td>
<td>
<code>.header-moved-up</code>
</td>
</tr>
<tr>
<td>
<code>.header--invisible</code>
</td>
<td>
<code>.header-invisible</code>
</td>
</tr>
<tr>
<td>
<code>.header--faded</code>
</td>
<td>
<code>.header-faded</code>
</td>
</tr>
<tr>
<td>
<code>.header--fix-top</code>
</td>
<td>
<code>.header-fix-top</code>
</td>
</tr>
<tr>
<td>
<code>.header__mega-menu-position-right-fix--md</code>
</td>
<td>
<code>.mega-menu-position-right-fix-md</code>
</td>
</tr>
<tr>
<td>
<code>.header__mega-menu-position-right-fix--xl</code>
</td>
<td>
<code>.mega-menu-position-right-fix-xl</code>
</td>
</tr>
<tr>
<td>
<code>.header__mega-menu-wrapper</code>
</td>
<td>
<code>.mega-menu-body</code>
</td>
</tr>
<tr>
<td>
<code>.header__mega-menu</code>
</td>
<td>
<code>.header-mega-menu</code>
</td>
</tr>
<tr>
<td>
<code>.header--white-nav-links</code>
</td>
<td>
<code>.header-white-nav-links</code>
</td>
</tr>
<tr>
<td>
<code>.header--navbar-bg</code>
</td>
<td>
<code>.header-navbar-bg</code>
</td>
</tr>
<tr>
<td>
<code>.header--white-bg-on-scroll</code>
</td>
<td>
<code>.header-white-bg-on-scroll</code>
</td>
</tr>
<tr>
<td>
<code>.header--bg-transparent</code>
</td>
<td>
<code>.header-bg-transparent</code>
</td>
</tr>
<tr>
<td>
<code>.header--hide-topbar</code>
</td>
<td>
<code>.header-hide-topbar</code>
</td>
</tr>
<tr>
<td>
<code>.header__hide-content</code>
</td>
<td>
<code>.header-hide-content</code>
</td>
</tr>
<tr>
<td>
<code>.header__product-banner-content</code>
</td>
<td>
<code>.navbar-product-banner-content</code>
</td>
</tr>
<tr>
<td>
<code>.header__product-banner</code>
</td>
<td>
<code>.navbar-product-banner</code>
</td>
</tr>
<tr>
<td>
<code>.header__banner-content</code>
</td>
<td>
<code>.navbar-banner-content</code>
</td>
</tr>
<tr>
<td>
<code>.header__banner</code>
</td>
<td>
<code>.navbar-banner</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-footer-ver-divider</code>
</td>
<td>
<code>.navbar-promo-card-footer-ver-divider</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-footer-item</code>
</td>
<td>
<code>.navbar-promo-card-footer-item</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-footer</code>
</td>
<td>
<code>.navbar-promo-card-footer</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-text</code>
</td>
<td>
<code>.navbar-promo-card-text</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-title</code>
</td>
<td>
<code>.navbar-promo-card-title</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-icon</code>
</td>
<td>
<code>.navbar-promo-card-icon</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-body</code>
</td>
<td>
<code>.navbar-promo-card-body</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card-deck</code>
</td>
<td>
<code>.navbar-promo-card-deck</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-card</code>
</td>
<td>
<code>.navbar-promo-card</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-link</code>
</td>
<td>
<code>.navbar-promo-link</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-item</code>
</td>
<td>
<code>.navbar-promo-item</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo-inner</code>
</td>
<td>
<code>.navbar-promo-inner</code>
</td>
</tr>
<tr>
<td>
<code>.header__promo</code>
</td>
<td>
<code>.navbar-promo</code>
</td>
</tr>
<tr>
<td>
<code>.header__nav-item</code>
</td>
<td>
<code>.navbar-nav-item</code>
</td>
</tr>
<tr>
<td>
<code>.header-navbar-brand</code>
</td>
<td>
<code>.navbar-brand</code>
</td>
</tr>
<tr>
<td>
<code>.header__navbar-body</code>
</td>
<td>
<code>.navbar-body</code>
</td>
</tr>
<tr>
<td>
<code>.header__navbar-link</code>
</td>
<td>
<code>.navbar-link</code>
</td>
</tr>
<tr>
<td>
<code>.header-navbar-brand</code>
</td>
<td>
<code>.header-navbar-brand</code>
</td>
</tr>
<tr>
<td>
<code>.header__navbar</code>
</td>
<td>
<code>.header-navbar</code>
</td>
</tr>
<tr>
<td>
<code>.header__nav-last-item</code>
</td>
<td>
<code>.header-nav-last-item</code>
</td>
</tr>
<tr>
<td>
<code>.header__navbar-nav</code>
</td>
<td>
<code>.header-navbar-nav</code>
</td>
</tr>
<tr>
<td>
<code>.header__sub-menu-nav-link-toggle</code>
</td>
<td>
<code>.nav-link-toggle</code>
</td>
</tr>
<tr>
<td>
<code>.header__sub-menu-nav-link</code>
</td>
<td>
<code>.header-sub-menu-nav-link</code>
</td>
</tr>
<tr>
<td>
<code>.header__sub-menu-nav-group</code>
</td>
<td>
<code>.header-sub-menu-nav-group</code>
</td>
</tr>
<tr>
<td>
<code>.header__section--hidden</code>
</td>
<td>
<code>.header-section-hidden</code>
</td>
</tr>
<tr>
<td>
<code>.header__section</code>
</td>
<td>
<code>.header-section</code>
</td>
</tr>
<tr>
<td>
<code>.datatable__thead-icon</code>
</td>
<td>
<code>.datatable-thead-icon</code>
</td>
</tr>
<tr>
<td>
<code>.datatable__trigger-icon</code>
</td>
<td>
<code>.datatable-trigger-icon</code>
</td>
</tr>
<tr>
<td>
<code>.datatable__trigger</code>
</td>
<td>
<code>.datatable-trigger</code>
</td>
</tr>
<tr>
<td>
<code>.datatable__content</code>
</td>
<td>
<code>.datatable-content</code>
</td>
</tr>
<tr>
<td>
<code>.datatable__striped</code>
</td>
<td>
<code>.datatable-striped</code>
</td>
</tr>
<tr>
<td>
<code>.content-centered-y--lg</code>
</td>
<td>
<code>.content-centered-y-lg</code>
</td>
</tr>
<tr>
<td>
<code>.content-centered-y--md</code>
</td>
<td>
<code>.content-centered-y-md</code>
</td>
</tr>
<tr>
<td>
<code>.stats-progress__info</code>
</td>
<td>
<code>.stats-progress-info</code>
</td>
</tr>
<tr>
<td>
<code>.slick--pagination-modern</code>
</td>
<td>
<code>.slick-pagination-modern</code>
</td>
</tr>
<tr>
<td>
<code>.slick-pagination-interactive__title</code>
</td>
<td>
<code>.slick-pagination-interactive-title</code>
</td>
</tr>
<tr>
<td>
<code>.slick-pagination-interactive__text</code>
</td>
<td>
<code>.slick-pagination-interactive-text</code>
</td>
</tr>
<tr>
<td>
<code>.slick__pagination--vertical</code>
</td>
<td>
<code>.slick-pagination-vertical</code>
</td>
</tr>
<tr>
<td>
<code>.slick__pagination--white</code>
</td>
<td>
<code>.slick-pagination-white</code>
</td>
</tr>
<tr>
<td>
<code>.slick__pagination</code>
</td>
<td>
<code>.slick-pagination</code>
</td>
</tr>
<tr>
<td>
<code>.slick__counter-total</code>
</td>
<td>
<code>.slick-counter-total</code>
</td>
</tr>
<tr>
<td>
<code>.slick__counter-divider</code>
</td>
<td>
<code>.slick-counter-divider</code>
</td>
</tr>
<tr>
<td>
<code>.slick__counter-current</code>
</td>
<td>
<code>.slick-counter-current</code>
</td>
</tr>
<tr>
<td>
<code>.slick-arrow-centered--y</code>
</td>
<td>
<code>.slick-arrow-centered-y</code>
</td>
</tr>
<tr>
<td>
<code>.slick-arrow--offset</code>
</td>
<td>
<code>.slick-arrow-offset</code>
</td>
</tr>
<tr>
<td>
<code>.slick-arrow--flat-white</code>
</td>
<td>
<code>.slick-arrow</code>
</td>
</tr>
<tr>
<td>
<code>.slick-arrow--flat</code>
</td>
<td>
<code>.slick-arrow-primary</code>
</td>
</tr>
<tr>
<td>
<code>.slick-arrow--white</code>
</td>
<td>
<code>.slick-arrow-soft-white</code>
</td>
</tr>
<tr>
<td>
<code>.slick-arrow-right</code>
</td>
<td>
<code>.slick-arrow-right</code>
</td>
</tr>
<tr>
<td>
<code>.slick-arrow-left</code>
</td>
<td>
<code>.slick-arrow-left</code>
</td>
</tr>
<tr>
<td>
<code>.slick__arrow</code>
</td>
<td>
<code>.slick-arrow</code>
</td>
</tr>
<tr>
<td>
<code>.slick--gutters-3</code>
</td>
<td>
<code>.slick-gutters-3</code>
</td>
</tr>
<tr>
<td>
<code>.slick--gutters-2</code>
</td>
<td>
<code>.slick-gutters-2</code>
</td>
</tr>
<tr>
<td>
<code>.slick--gutters-1</code>
</td>
<td>
<code>.slick-gutters-1</code>
</td>
</tr>
<tr>
<td>
<code>.slick--equal-height</code>
</td>
<td>
<code>.slick-equal-height</code>
</td>
</tr>
<tr>
<td>
<code>.sidebar--left</code>
</td>
<td>
<code>.sidebar-left</code>
</td>
</tr>
<tr>
<td>
<code>.sidebar__footer</code>
</td>
<td>
<code>.sidebar-footer</code>
</td>
</tr>
<tr>
<td>
<code>.sidebar__scroller</code>
</td>
<td>
<code>.sidebar-scroller</code>
</td>
</tr>
<tr>
<td>
<code>.sidebar__container</code>
</td>
<td>
<code>.sidebar-container</code>
</td>
</tr>
<tr>
<td>
<code>.sidebar__content--account</code>
</td>
<td>
<code>.sidebar-content-account</code>
</td>
</tr>
<tr>
<td>
<code>.sidebar__content</code>
</td>
<td>
<code>.sidebar-content</code>
</td>
</tr>
<tr>
<td>
<code>.sidebar__body</code>
</td>
<td>
<code>.sidebar-body</code>
</td>
</tr>
<tr>
<td>
<code>.search-slide-down-suggestions</code>
</td>
<td>
<code>.search-slide-down__suggestions</code>
</td>
</tr>
<tr>
<td>
<code>.search-slide-down__input</code>
</td>
<td>
<code>.search-slide-down-input</code>
</td>
</tr>
<tr>
<td>
<code>.search-slide-down-trigger__icon</code>
</td>
<td>
<code>.search-slide-down-trigger-icon</code>
</td>
</tr>
<tr>
<td>
<code>.search-push-top__banner</code>
</td>
<td>
<code>.search-push-top-banner</code>
</td>
</tr>
<tr>
<td>
<code>.search-push-top__close-btn</code>
</td>
<td>
<code>.search-push-top-close-btn</code>
</td>
</tr>
<tr>
<td>
<code>.search-push-top__content</code>
</td>
<td>
<code>.search-push-top-content</code>
</td>
</tr>
<tr>
<td>
<code>.page-preloader__content-centered</code>
</td>
<td>
<code>.page-preloader-content-centered</code>
</td>
</tr>
<tr>
<td>
<code>.page-preloader__content-centered</code>
</td>
<td>
<code>.page-preloader-content-centered</code>
</td>
</tr>
<tr>
<td>
<code>.video-player__centered</code>
</td>
<td>
<code>.video-player-centered</code>
</td>
</tr>
<tr>
<td>
<code>.video-player__icon</code>
</td>
<td>
<code>.video-player-icon</code>
</td>
</tr>
<tr>
<td>
<code>.video-player__btn</code>
</td>
<td>
<code>.video-player-btn</code>
</td>
</tr>
<tr>
<td>
<code>.video-player__played</code>
</td>
<td>
<code>.video-player-played</code>
</td>
</tr>
<tr>
<td>
<code>.video-player__preview</code>
</td>
<td>
<code>.video-player-preview</code>
</td>
</tr>
<tr>
<td>
<code>.media-viewer-icon--active</code>
</td>
<td>
<code>.media-viewer-icon-active</code>
</td>
</tr>
<tr>
<td>
<code>.media-viewer__container</code>
</td>
<td>
<code>.media-viewer-container</code>
</td>
</tr>
<tr>
<td>
<code>.media-viewer__icon</code>
</td>
<td>
<code>.media-viewer-icon</code>
</td>
</tr>
<tr>
<td>
<code>.link-muted__toggle-toggled</code>
</td>
<td>
<code>.link-underline-toggle-toggled</code>
</td>
</tr>
<tr>
<td>
<code>.link-muted-toggle__default</code>
</td>
<td>
<code>.link-underline-toggle-default</code>
</td>
</tr>
<tr>
<td>
<code>.link-collapse__default</code>
</td>
<td>
<code>.link-collapse-default</code>
</td>
</tr>
<tr>
<td>
<code>.link-collapse__active</code>
</td>
<td>
<code>.link-collapse-active</code>
</td>
</tr>
<tr>
<td>
<code>.link__icon</code>
</td>
<td>
<code>.link-icon</code>
</td>
</tr>
<tr>
<td>
<code>.indicator-steps</code>
</td>
<td>
<code>.step-flow</code>
</td>
</tr>
<tr>
<td>
<code>.indicator-steps__inner</code>
</td>
<td>
<code>.step-flow-inner</code>
</td>
</tr>
<tr>
<td>
<code>.go-to__inner</code>
</td>
<td>
<code>.go-to-inner</code>
</td>
</tr>
<tr>
<td>
<code>.checkbox-outline-input</code>
</td>
<td>
<code>.checkbox-outline-input</code>
</td>
</tr>
<tr>
<td>
<code>.checkbox-outline-label</code>
</td>
<td>
<code>.checkbox-outline-label</code>
</td>
</tr>
<tr>
<td>
<code>.checkbox-icon__input</code>
</td>
<td>
<code>.checkbox-icon-input</code>
</td>
</tr>
<tr>
<td>
<code>.checkbox-icon__label</code>
</td>
<td>
<code>.checkbox-icon-label</code>
</td>
</tr>
<tr>
<td>
<code>.file-attachment-input</code>
</td>
<td>
<code>.file-attachment-btn</code>
</td>
</tr>
<tr>
<td>
<code>.file-attachment-btn__label</code>
</td>
<td>
<code>.file-attachment-btn-label</code>
</td>
</tr>
<tr>
<td>
<code>.divider--text</code>
</td>
<td>
<code>.divider-text</code>
</td>
</tr>
<tr>
<td>
<code>.divider--xs</code>
</td>
<td>
<code>.divider-xs</code>
</td>
</tr>
<tr>
<td>
<code>.js-select</code>
</td>
<td>
<code>.js-selectpicker</code>
</td>
</tr>
<tr>
<td>
<code>.js-range-slider</code>
</td>
<td>
<code>.js-ion-range-slider</code>
</td>
</tr>
<tr>
<td>
<code>.slick__paging</code>
</td>
<td>
<code>.slick-counter</code>
</td>
</tr>
<tr>
<td>
<code>.btn-icon.btn-sm</code>
</td>
<td>
<code>.btn-icon.btn-xs</code>
</td>
</tr>
<tr>
<td>
<code>.btn-text-*</code>
</td>
<td>
<code>.btn-ghost-*</code>
</td>
</tr>
<tr>
<td>
<code>.opacity-lg</code>
</td>
<td>
<code>.opacity-xs</code>
</td>
</tr>
<tr>
<td>
<code>.form-label</code>
</td>
<td>
<code>.input-label</code>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
<div class="mt-5">
<h4>List of dropped JS-files (HS extended):</h4>
<ul>
<li><code>assets/js/file-attachement.js</code> file</li>
<li><code>assets/js/hs.scroll-effect.js</code> file</li>
<li><code>assets/js/hs.svg-injector.js</code> file</li>
<li><code>assets/js/hs.focus-state.js</code> file</li>
</ul>
</div>
<div class="mt-5">
<h4>List of dropped plugins/libraries:</h4>
<ul>
<li><code>assets/vendor/instafeed.js/</code> due to unstable API</li>
<li><code>assets/vendor/player.js/</code> in favor of <code>assets/vendor/hs-video-player/</code></li>
<li><code>assets/vendor/malihu-custom-scrollbar-plugin/</code> in favor of a custom scrollbar</li>
<li><code>assets/vendor/chartist</code> in favor of <a target="_blank" href="https://www.chartjs.org/">Chart.js</a></li>
<li><code>assets/vendor/bootstrap-tagsinput/</code> in favor of <a target="_blank" href="https://yaireo.github.io/tagify/">Tagify</a></li>
<li><code>assets/vendor/custombox/</code> in favor of Bootstrap modals</li>
<li><code>assets/vendor/animate.css</code> library</li>
<li><code>assets/vendor/svg-injector/</code> library</li>
<li><code>assets/svg/components/circle-process-1.svg</code> illustration</li>
<li><code>assets/svg/components/circle-process-2.svg</code> illustration</li>
<li><code>assets/svg/components/circle-process-3.svg</code> illustration</li>
</ul>
</div>
<div class="mt-5">
<h4>List of dropped SCSS-files/folders:</h4>
<ul>
<li><code>assets/scss/front/quantity/</code></li>
<li><code>assets/scss/front/vendor/fileuploader/</code></li>
<li><code>assets/scss/front/badges/_badge-positions.scss</code></li>
<li><code>assets/scss/front/badges/_badge-sizes.scss</code></li>
<li><code>assets/scss/front/hamburger/</code> in favor of <code>navbar-toggle</code></li>
<li><code>assets/scss/front/mockups/_browser-v1.scss</code></li>
<li><code>assets/scss/front/mockups/_devices-v1.scss</code></li>
<li><code>assets/scss/front/mockups/_devices-v2.scss</code></li>
<li><code>assets/scss/front/mockups/_devices-v3.scss</code></li>
<li><code>assets/scss/front/mockups/_devices-v4.scss</code></li>
<li><code>assets/scss/front/modal-window/</code></li>
<li><code>assets/scss/front/forms/states/_focus-state.scss</code></li>
<li><code>assets/scss/front/paging/paging-modern.scss</code></li>
<li><code>assets/scss/front/go-to-section/_go-to-modern.scss</code></li>
<li><code>assets/scss/front/go-to-section/_go-to-vertical-arrow.scss</code></li>
<li><code>assets/scss/front/go-to-section/_go-to-wave.scss</code></li>
<li><code>assets/scss/front/timeline/_timeline.scss</code></li>
<li><code>assets/scss/front/svg/_svg.scss</code></li>
<li><code>assets/scss/front/vendor/animate.css/_animate.css.scss</code></li>
<li><code>assets/scss/front/mixins/_gradients.scss</code> in favor of Bootstrap mixins</li>
</ul>
</div>
<div class="mt-5">
<h4>List of dropped SCSS variables:</h4>
<ul>
<li><code>$theme-color</code> white option</li>
<li><code>$primary-darker</code></li>
<li><code>$primary-lighter</code></li>
<li><code>$warning-lighter</code></li>
<li><code>$success-lighter</code></li>
<li><code>$cyan-lighter</code></li>
<li><code>$red-lighter</code></li>
<li><code>$secondary-colors</code></li>
</ul>
</div>
<div class="mt-5">
<h4>List of dropped components:</h4>
<ul>
<li>Header - hamburger sidebars</li>
<li>Header - dropdown-menu dark</li>
<li>Header - navbar dark</li>
<li>Header - Primary</li>
<li>Header - Sticky Bottom</li>
<li>Header - Absolute Bottom</li>
<li>Header - Absolute top center aligned logo on top</li>
<li>Header - Second screen</li>
</ul>
</div>
<div class="mt-5">
<h4>List of dropped classes:</h4>
<ul>
<li>Responsive text classes in favor of Bootstrap Responsive font sizes (RFS)</li>
<li><code>.min-height-100vh</code> in favor of the Bootstrap utility <code>.min-vh-100</code> class</li>
<li><code>.card-text-dark</code></li>
<li><code>.go-to-modern</code> in favor of <code>.btn-icon</code> class</li>
<li><code>.btn-sm-wide</code></li>
<li><code>.gmap-interactive</code></li>
<li><code>.cubeportfolio-reveal</code></li>
<li><code>.svg-divider-polygon</code></li>
<li><code>.close-light</code></li>
<li><code>.blog-thumb-minimal</code></li>
<li><code>.mt-23</code></li>
<li><code>.hero-v1</code> in favor of utility classes.</li>
<li><code>.cubeportfolio</code> in favor of <code>.label</code> classes.</li>
<li><code>.font-weight-medium</code></li>
<li><code>.gradient-overlay-half-dark-v2</code></li>
<li><code>.gradient-overlay-half-dark</code></li>
<li><code>.gradient-overlay-half-info-v1</code></li>
<li><code>.gradient-overlay-half-primary-v4</code></li>
<li><code>.gradient-overlay-half-primary-v3</code></li>
<li><code>.gradient-overlay-half-primary-v2</code></li>
<li><code>.gradient-overlay-half-primary-v1</code></li>
<li><code>.gradient-half-info-v1</code></li>
<li><code>.gradient-half-warning-v3</code></li>
<li><code>.gradient-half-warning-v2</code></li>
<li><code>.gradient-half-warning-v1</code></li>
<li><code>.gradient-half-primary-v5</code></li>
<li><code>.gradient-half-primary-v4</code></li>
<li><code>.gradient-half-primary-v3</code></li>
<li><code>.gradient-half-primary-v2</code></li>
<li><code>.gradient-half-primary-v1</code></li>
<li><code>.gradient-half-primary-body-v1</code></li>
<li><code>.gradient-overlay-half-primary-video-v1</code> in favor of <code>.gradient-x-overlay-lg-dark-video</code></li>
<li><code>.clients</code> in favor of utility classes</li>
<li><code>.media-player</code> in favor of <code>.video-player</code></li>
<li><code>.indicator-dots</code> in favor of <code>.step-dots</code></li>
<li><code>.indicator-vertical-dashed</code> in favor of <code>.step-vertical</code></li>
<li><code>.timeline</code> in favor of <code>.step</code></li>
<li><code>.link-white</code> in favor of <code>.link-underline-light</code></li>
<li><code>.btn-white</code> in favor of <code>.btn-light</code></li>
<li><code>.btn-outline-white</code> in favor of <code>.btn-outline-light</code></li>
<li><code>.btn-soft-white</code> in favor of <code>.btn-soft-light</code></li>
<li><code>.btn-tiny</code> in favor of <code>.btn-xs</code></li>
<li><code>.avatar-tiny</code> in favor of <code>.avatar-xs</code></li>
<li><code>.sidebar-account-holder-img</code> in favor of <code>.avatar</code></li>
<li><code>.sidebar-account-holder-text</code> in favor of utility classes</li>
<li><code>.sidebar-account-holder</code> in favor of utility classes</li>
<li><code>.sidebar-content-account</code> in favor of utility classes</li>
<li><code>.sidebar-footer-account-text</code> in favor of utility classes</li>
<li><code>.sidebar-footer-account</code> in favor of utility classes</li>
<li><code>.sidebar-cart-footer-offset</code> in favor of <code>.sidebar-footer-offset</code></li>
<li><code>.sidebar-account-footer-offset</code> in favor of <code>.sidebar-footer-offset</code></li>
<li><code>.sidebar-account-toggle-bg-img</code> in favor of <code>.label-avatar-img</code></li>
<li><code>.sidebar-account-toggle-bg-text</code> in favor of <code>.label</code></li>
<li><code>.sidebar-account-toggle-bg</code> in favor of <code>.label</code></li>
<li><code>.alert-text</code> in favor of <code>.text-inherit</code></li>
<li><code>.hamburger</code> in favor of <code>data-toggle</code> attribute</li>
<li><code>.slick-pagination-centered--y</code> class in favor of utility classes</li>
<li><code>.vertical-divider</code> in favor of <code>.column-divider</code></li>
<li><code>.indicator-vertical-line</code> in favor of <code>.column-divider</code></li>
<li><code>.mx-gutters-*</code> in favor of Bootstrap negative utility classes</li>
<li><code>.btn-bg-transparent</code> in favor of <code>.btn-ghost-*</code></li>
<li><code>.stop-color-*</code> colors in favor of inline coloring</li>
<li><code>.stroke-*</code> colors in favor of inline colors</li>
<li><code>.fill-*</code> colors in favor of inline colors</li>
<li><code>.list-group</code> extended styles in favor of <code>.nav</code></li>
<li><code>assets/scss/front/badge/</code> folder in favor of avatar, and icon status classes</li>
<li><code>.slick__pagination--bottom-center</code> in favor of utility classes</li>
<li><code>.slick-arrow--inner</code></li>
<li><code>.header-navbar-brand-text</code></li>
<li><code>.header-navbar-brand-text-white</code></li>
<li><code>.header-navbar-brand-center</code></li>
<li><code>.card-text-dark</code> in favor of utility classes</li>
<li><code>.badge-pos-*</code></li>
<li><code>.badge-outline-*</code></li>
<li><code>.header-navbar-no-space</code></li>
<li><code>.header-navbar-top-space</code></li>
<li><code>.header-collapse-nav-list-no-spacer</code></li>
<li><code>.header-collapse-submenu-list-link</code></li>
<li><code>.header-collapse-submenu-list</code></li>
<li><code>.header-collapse-submenu-nav-link</code></li>
<li><code>.header-collapse-submenu-nav-link</code></li>
<li><code>.header-collapse-submenu</code></li>
<li><code>.header-collapse-submenu-nav-link</code></li>
<li><code>.header-collapse-nav-list</code></li>
<li><code>.header-collapse-nav-pointer</code></li>
<li><code>.header-collapse-nav-pointer</code></li>
<li><code>.header-collapse-nav-link</code></li>
<li><code>.header-collapse-nav</code></li>
<li><code>.header-center-aligned</code></li>
<li><code>.header-center-aligned-inner</code></li>
<li><code>.header-sub-menu-title</code></li>
<li><code>.header-sub-menu-spacer</code></li>
<li><code>.header-sub-menu</code></li>
<li><code>.slick-pagination-bottom-center</code></li>
<li><code>.slick-thumb-progress-path</code></li>
<li><code>.slick-zoom-slide</code></li>
<li><code>.sidebar-account-list</code></li>
<li><code>.sidebar-sidebar--account__list</code></li>
<li><code>.sidebar-account-toggle-text</code></li>
<li><code>.sidebar-account-toggle-bg</code></li>
<li><code>.sidebar-account-holder</code></li>
<li><code>.sidebar-account-footer-offset</code></li>
<li><code>.blog-thumb-minimal-img-wrapper</code></li>
<li><code>.blog-thumb-minimal-img</code></li>
<li><code>.modal-facebook-text</code></li>
<li><code>.modal-facebook-navbar</code></li>
<li><code>.modal-facebook-content</code></li>
<li><code>.modal-facebook-space</code></li>
<li><code>.modal-facebook-body</code></li>
<li><code>.modal-facebook</code></li>
<li><code>.video-player-icon-lg</code></li>
<li><code>.avatar avatar-lg--bordered</code></li>
<li><code>.js-text-animation</code></li>
</ul>
</div>
</div>
<div id="version2_9_4" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.9.4</code> - 19 January, 2019 <a class="anchorjs-link" href="#version2_9_4" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
Bootstrap from <code>v4.4</code> to <code>v4.4.1</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="bootstrap-select.html">Bootstrap select</a> from <code>v1.13.2</code> to <code>v1.13.10</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="clipboard.html">Clipboard</a> from <code>v4.1</code> to <code>v2.0.4</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="flatpickr.html">Flatpickr</a> from <code>v4.5.1</code> to <code>v4.6.2</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="validation.html">jQuery Validation</a> from <code>v1.16.0</code> to <code>v1.19.1</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<a class="link" href="font-awesome.html">FontAwesome</a> from <code>v5.9.1</code> to <code>v5.12</code>
</div>
</div>
<div id="version2_9_3" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.9.3</code> - 28 November, 2019 <a class="anchorjs-link" href="#version2_9_3" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
Bootstrap from <code>v4.3.1</code> to <code>v4.4</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
Gulp file from <code>v3.9.x</code> to <code>v4.x</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
<code>package.json</code> file
</div>
<div class="mb-3">
<span class="badge bg-soft-success text-success py-2 px-3 me-2">Updated</span>
Sketch download link in the README.md file
</div>
</div>
<div id="version2_9_2" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.9.2</code> - 19 August, 2019 <a class="anchorjs-link" href="#version2_9_2" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>assets/scss/</code> path in some files
</div>
</div>
<div id="version2_9_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.9.1</code> - 2 August, 2019 <a class="anchorjs-link" href="#version2_9_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Dropdown spacing issue of the Blogs section on the navbar on mobile devices
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>$btn-font-size-sm</code> removed from the <code>assets/scss/front/_variables.scss</code> file to fix the customization issue of the <code>.btn-sm</code> size
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/scss/front/_variables.scss</code></li>
</ul>
</div>
<div id="version2_9" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.9</code> - 25 July, 2019 <a class="anchorjs-link" href="#version2_9" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../onepage-corporate.html">Onepage Corporate</a> home page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Blog - Card Style page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Blog - Listing page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Blog - Profile page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../blog-article.html">Blog - Single Article</a> page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="tables.html#light-bordered-table">Light bordered</a> table option
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="navs.html#white-border-style">White Border style</a> nav option
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>hs.unfold.js</code> <em>ESC</em> keyboard button functionality
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>hs.scroll-nav.js</code> double-scrolling animation when clicked to the first link of the .u-header--abs-top-*
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Static button hover status in link
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Active status of the Home Onepage headers
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Onscroll Animation reveal when you scroll down to it
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>assets/scss/front/forms/_chechbox-bordered.scss</code> in favor of <code>assets/scss/front/forms/_chechbox-outline.scss</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Account Plans Pricing table
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<a class="link" href="../demo-app-marketplace/app-description.html">App Description</a> Pricing table
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Account Invite friends SVG elements
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Tooltip background color changed in favor of Dark color
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
Blog pages in favor of new Blog design pages
</div>
<div class="mt-5">
<h4>List of new SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/scss/front/forms/_chechbox-icon.scss</code></li>
<li><code>assets/scss/front/vendor/onscroll-animation/_onscroll-animation.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/scss/front/_variables.scss</code></li>
<li><code>assets/scss/front/_front.scss</code></li>
<li><code>assets/scss/front/buttons/_buttons.scss</code></li>
<li><code>assets/scss/front/table/_table.scss</code></li>
<li><code>assets/scss/front/brand/_brand.scss</code></li>
<li><code>assets/scss/front/forms/_chechbox-bordered.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files:</h4>
</div>
<ul>
<li><code>assets/js/components/hs.unfold.js</code></li>
<li><code>assets/js/components/hs.scroll-nav.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
</div>
<ul>
<li><code>html/onepage-creative.html</code></li>
<li><code>html/onepage-saas.html</code></li>
<li><code>html/account-plans.html</code></li>
<li><code>html/account-invite-friends.html</code></li>
<li><code>html/demo-app-marketplace/app-description.html</code></li>
</ul>
</div>
<div id="version2_8" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.8</code> - 27 June, 2019 <a class="anchorjs-link" href="#version2_8" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../demo-app-marketplace/index.html">App Marketplace</a> demo page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../demo-help-desk/index.html">Help Desk</a> page moved to the <code>app-marketplace/</code> folder as a stand-alone demo
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../demo-help-desk/listing.html">Help Listing</a> page
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>ajax/</code> and <code>scss/</code> folders moved into the <code>assets/</code> folder
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/scss/front/_variables.scss</code></li>
<li><code>assets/scss/front/utilities/_bg-soft-colors.scss</code></li>
<li><code>assets/scss/front/headers/_header-navbar-expand.scss</code></li>
</ul>
</div>
<div id="version2_7" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.7</code> - 30 May, 2019 <a class="anchorjs-link" href="#version2_7" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../classic-studio.html">Classic Studio</a> home page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../app-ui-kit.html">App UI kit</a> home page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../page-about-agency.html">About Agency</a> inner page redesigned
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../page-services-agency.html">Services Agency</a> inner page redesigned
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Shop <a class="link" href="../shop-categories.html">Categories</a> demo pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Shop <a class="link" href="../shop-categories-sidebar.html">Categories sidebar</a> demo pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Shop <a class="link" href="../shop-products-grid.html">Products grid</a> demo pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Shop <a class="link" href="../shop-products-list.html">Products list</a> demo pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Shop <a class="link" href="../shop-empty-cart.html">Empty cart</a> demo pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Shop <a class="link" href="../shop-order-completed.html">Order completed</a> demo pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Background Video examples
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Modal Window options
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Page preloader documentation page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>.btn-custom-toggle-primary</code> border color on hover
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
About Start-up and Services Start-up pages in favor of new About and Services pages
</div>
<div class="mt-5">
<h4>List of new SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/svg/_svg-ie.scss</code></li>
<li><code>assets/include/scss/front/utilities/_transform.scss</code></li>
<li><code>assets/include/scss/front/page-preloader/_page-preloader.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/_variables.scss</code></li>
<li><code>assets/include/scss/front/card/_card.scss</code></li>
<li><code>assets/include/scss/front/dropdown/_dropdown.scss</code></li>
<li><code>assets/include/scss/front/utilities/_borders.scss</code></li>
<li><code>assets/include/scss/front/slick/paginations/_slick-pagination.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files:</h4>
</div>
<ul>
<li><code>html/page-about-agency.html</code></li>
<li><code>html/page-services-agency.html</code></li>
</ul>
</div>
<div id="version2_6" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.6</code> - 4 May, 2019 <a class="anchorjs-link" href="#version2_6" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../shop-classic.html">Shop</a> demo pages redesigned
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Slick thumb progress added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Slick arrow option
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Icon options added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Summernote options
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Summernote double toggle arrow style
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
Duplicated <code>.dropdown-menu-*-left</code> and <code>.dropdown-menu-*-right</code> classes
</div>
<div class="mt-5">
<h4>List of new SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/dropdown/_dropdown.scss</code></li>
<li><code>assets/include/scss/front/popover/_popover.scss</code></li>
<li><code>assets/include/scss/front/vendor/summernote-editor/_summernote-editor.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/_variables.scss</code></li>
<li><code>assets/include/scss/front/slick/_slick.scss</code></li>
<li><code>assets/js/components/hs.unfold.js</code></li>
<li><code>assets/js/components/hs.slick-carousel.js</code></li>
<li><code>html/page-careers-single.html</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files:</h4>
</div>
<ul>
<li><code>assets/js/components/hs.unfold.js</code></li>
<li><code>assets/js/components/hs.slick-carousel.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
</div>
<ul>
<li><code>html/page-careers-single.html</code></li>
</ul>
</div>
<div id="version2_5" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.5</code> - 18 April, 2019 <a class="anchorjs-link" href="#version2_5" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../app-saas.html">App SaaS</a> home page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../app-workflow.html">App Workflow</a> home page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Clipboard within modal example
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Datatables pagination options
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Hero block mockup overlaying in <a class="link" href="../classic-consulting.html">Classic-consulting</a> page
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Quotation mark in <a class="link" href="../blog-article.html">Single article classic Blog</a> page
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
SVG preloader background white color
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
SVG illustrations freshened up
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Form shadows softened for a better look
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Gradient colors rewritten with variables now
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
SCSS variables
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/_variables.scss</code></li>
<li><code>assets/include/scss/front/utilities/_gradients.scss</code></li>
<li><code>assets/include/scss/front/utilities/_gradients-overlay.scss</code></li>
<li><code>assets/include/scss/front/utilities/_fill-colors.scss</code></li>
<li><code>assets/include/scss/front/utilities/_links.scss</code> moved to <code>assets/scss/front/links/</code> folder</li>
<li><code>assets/include/scss/front/forms/range-slider/</code> moved to <code>assets/scss/vendor/</code> folder</li>
<li><code>assets/include/scss/front/avatar/_avatar-bordered.scss</code></li>
<li><code>assets/include/scss/front/badge/_badge-styles.scss</code></li>
<li><code>assets/include/scss/front/brand/_brand.scss</code></li>
<li><code>assets/include/scss/front/breadcrumb/_breadcrumb.scss</code></li>
<li><code>assets/include/scss/front/buttons/_button-custom-toggle.scss</code></li>
<li><code>assets/include/scss/front/card/_card.scss</code></li>
<li><code>assets/include/scss/front/close/_close.scss</code></li>
<li><code>assets/include/scss/front/divider/_divider.scss</code></li>
<li><code>assets/include/scss/front/divider/_divider-style.scss</code></li>
<li><code>assets/include/scss/front/divider/_divider-vertical.scss</code></li>
<li><code>assets/include/scss/front/dropdown/_dropdown.scss</code></li>
<li><code>assets/include/scss/front/forms/checkbox/_checkbox-bordered.scss</code></li>
<li><code>assets/include/scss/front/go-to-section/_go-to-vertical-arrow.scss</code></li>
<li><code>assets/include/scss/front/indicators/_indicator-dots.scss</code></li>
<li><code>assets/include/scss/front/indicators/_indicator-vertical-line.scss</code></li>
<li><code>assets/include/scss/front/indicators/_indicator-vertical-dashed.scss</code></li>
<li><code>assets/include/scss/front/navs/_navs.scss</code></li>
<li><code>assets/include/scss/front/stats/_stats-progress.scss</code></li>
<li><code>assets/include/scss/front/svg/_svg.scss</code></li>
<li><code>assets/include/scss/front/svg/_svg-ie.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files:</h4>
</div>
<ul>
<li><code>assets/js/components/hs.unfold.js</code></li>
<li><code>assets/js/components/hs.summernote-editor.js</code></li>
<li><code>assets/js/components/hs.clipboard.js</code></li>
<li><code>assets/js/components/hs.datatables.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
</div>
<ul>
<li><code>html/classic-consulting.html</code></li>
<li><code>html/corporate-agency.html</code></li>
<li><code>html/corporate-start-up.html</code></li>
<li><code>html/page-contacts-agency.html</code></li>
<li><code>html/page-hire-us.html</code></li>
<li><code>html/page-pricing.html</code></li>
<li><code>html/page-careers.html</code></li>
<li><code>html/page-services-start-up.html</code></li>
<li><code>html/page-faq.html</code></li>
<li><code>html/page-terms.html</code></li>
<li><code>html/page-about-agency.html</code></li>
<li><code>html/page-about-start-up.html</code></li>
<li><code>html/page-services-agency.html</code></li>
</ul>
</div>
<div id="version2_4" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.4</code> - 4 April, 2019 <a class="anchorjs-link" href="#version2_4" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../app-payment.html">App Payment</a> home page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
App Software home page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../page-customers.html">Customers</a> inner page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../page-customer-story.html">Customer story</a> inner page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Search push down (Inspired by <a class="link" href="https://ionicframework.com/">Ionic</a>) option added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Background overlay option to the <code>hs.unfold.js</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="colors.html">Background soft color</a>
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Dropzone drag'n'drop file uploader plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Summernote editor options
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>assets/scss/front/utilities/_overflow.scss</code> file in favor of Bootstrap <code>.overflow</code> classes
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/scss/front/utilities/_sizing.scss</code></li>
<li><code>assets/scss/front/utilities/_position-spaces.scss</code></li>
<li><code>assets/scss/front/utilities/_gradients-overlay.scss</code></li>
<li><code>assets/scss/front/list/_list-group.scss</code></li>
<li><code>assets/scss/front/svg/_svg-ie.scss</code></li>
<li><code>assets/scss/front/divider/_divider.scss</code></li>
<li><code>assets/scss/front/divider/_divider-sizes.scss</code></li>
<li><code>assets/scss/front/svg/_svg-ie.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files:</h4>
</div>
<ul>
<li><code>assets/js/components/hs.unfold.js</code></li>
<li><code>assets/js/components/hs.slick-carousel.js</code></li>
<li><code>assets/js/components/hs.svg-injector.js</code></li>
<li><code>assets/js/components/hs.datatables.js</code></li>
<li><code>assets/js/components/hs.selectpicker.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
</div>
<ul>
<li><code>html/account-activity.html</code></li>
<li><code>html/house/property-seller.html</code></li>
</ul>
</div>
<div id="version2_3-migrating-to-v2_3" class="content-divider">
<h2 class="hs-docs-heading">Migrating to v2.3 <a class="anchorjs-link" href="#version2_3-migrating-to-v2_3" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<p>Moving from Front v2.2.1 to the latest v2.3 release, there are some notable changes.</p>
</div>
<div id="version2_3" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.3</code> - 14 March, 2019 <a class="anchorjs-link" href="#version2_3" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<a class="link" href="../page-status.html">Status</a> page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Timeline feature
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Added a new <a class="link" href="spinners.html">spinner loading component</a>
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Added a new <a class="link" href="forms.html#switches">iOS style switch</a> (a modifier class to our custom checkboxes)
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Added responsive <code>.list-group-horizontal</code> modifier classes for displaying list groups as a horizontal row
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>hs.hamburger.js</code> active class
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>.badge-md</code> line height issue
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Testimonials spacing issue on vertical Slick Carousel options
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>type=""</code> added to the buttons where it was not
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>.custom-checkbox</code> line height issue
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>.form-control</code> size style removed for the <code>.input-group-lg</code> class
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>.btn-soft-*</code> color issues on hover states
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>hs.video-player.js</code> autoplay option added
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>hs.fancybox.js</code> autoplay slideshow option added
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Password hint validation
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>.custom-checkbox</code> disabled state color
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>.btn</code> classes in the navigation of the Account pages with the help of <code>.text-nowrap</code> class
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>button</code> styles
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>.checkbox-switch</code> styles in favor of Bootstrap <code>.custom-switch</code> classes
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>hs.video-player.js</code> now called via <code>data-video-id</code> attribute rather than <code>iframe</code>. For more information, see <a class="link" href="video-player.html">Video player</a>
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/_variables.scss</code></li>
<li><code>assets/include/scss/front/forms/_form-sizes.scss</code></li>
<li><code>assets/include/scss/front/forms/checkbox/_checkbox-switch.scss</code></li>
<li><code>assets/include/scss/front/mixins/_buttons.scss</code></li>
<li><code>assets/include/scss/front/buttons/_button-custom.scss</code></li>
<li>New <code>assets/include/scss/front/spinner/</code></li>
<li>New <code>assets/include/scss/front/forms/checkbox/_custom-checkbox.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files:</h4>
</div>
<ul>
<li><code>assets/js/components/hs.video-player.js</code></li>
<li><code>assets/js/components/hs.fancybox.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated HTML-files:</h4>
</div>
<ul>
<li>All <code>html/account/</code> pages</li>
<li><code>html/job/freelancers-grid.html</code></li>
<li><code>html/job/freelancers-grid-side-filter.html</code></li>
<li><code>html/job/freelancers-list.html</code></li>
<li><code>html/job/freelancers-list-side-filter.html</code></li>
<li><code>html/job/jobs-grid.html</code></li>
<li><code>html/job/jobs-grid-side-filter.html</code></li>
<li><code>html/job/jobs-list.html</code></li>
<li><code>html/job/jobs-list-side-filter.html</code></li>
<li><code>html/portfolio-agency.html</code></li>
<li><code>html/blog-business.html</code></li>
<li><code>html/blog-agency.html</code></li>
<li><code>html/onepage-creative.html</code></li>
<li><code>html/page-about-agency.html</code></li>
<li><code>html/page-careers.html</code></li>
</ul>
</div>
<div id="version2_2_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.2.1</code> - 18 February, 2019 <a class="anchorjs-link" href="#version2_2_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
HS Megamenu collapse on small devices
</div>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/front/vendor/animate.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files/folders:</h4>
</div>
<ul>
<li><code>assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js</code></li>
</ul>
</div>
<div id="version2_2" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.2</code> - 09 February, 2019 <a class="anchorjs-link" href="#version2_2" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
House inner pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Validation forms
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
HS GoTo issue on iOS
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
HS Unfold bug with Esc keyboard button
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
HS Megamenu <code>hideTimeOut</code> issue
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
HS Range slider bug with Charts
</div>
<div class="mt-5">
<h4>List of new SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/dropdown/_dropdown-sizes.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/_variables.scss</code></li>
<li><code>assets/include/scss/front/utilities/_margin.scss</code></li>
<li><code>assets/include/scss/front/scss/arrows/_slick-arrow.scss</code></li>
<li><code>assets/include/scss/front/front/vendor/animate.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files/folders:</h4>
</div>
<ul>
<li><code>assets/js/hs.ion-range-slider.js</code></li>
<li><code>assets/js/components/hs.unfold.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated HTML-files/folders:</h4>
</div>
<ul>
<li><code>html/classic-marketing.html</code></li>
<li><code>html/corporate-start-up.html</code></li>
<li><code>html/onepage-creative.html</code></li>
<li><code>html/house/index.html</code></li>
<li><code>html/shop-classic.html</code></li>
<li><code>html/shop-masonry.html</code></li>
<li><code>html/shop-single-product.html</code></li>
<li><code>html/shop-checkout.html</code></li>
<li><code>html/account-edit-profile.html</code></li>
<li><code>html/page-about-agency.html</code></li>
<li><code>html/page-contacts-start-up.html</code></li>
<li><code>html/page-hire-us.html</code></li>
</ul>
</div>
<div id="version2_1_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.1.1</code> - 05 January, 2019 <a class="anchorjs-link" href="#version2_1_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
jQuery Password Strength Bootstrap plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
<code>hs.password-strength.js</code> library
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Password strength documentation page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Clipboard options
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>hs.unfold.js</code> and added <code>data-unfold-target-is-menu</code> attribute
</div>
<div class="mt-5">
<h4>List of new plugins/libraries:</h4>
</div>
<ul>
<li><code>node_modules/pwstrength-bootstrap/</code></li>
</ul>
<div class="mt-5">
<h4>List of new JS-files/folders:</h4>
</div>
<ul>
<li><code>assets/js/components/hs.password-strength.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated SCSS-files/folders:</h4>
</div>
<ul>
<li><code>assets/include/scss/front/utilities/_sizing.scss</code></li>
</ul>
<div class="mt-5">
<h4>List of updated JS-files/folders:</h4>
</div>
<ul>
<li><code>assets/js/components/hs.unfold.js</code></li>
<li><code>assets/js/components/hs.clipboard.js</code></li>
</ul>
<div class="mt-5">
<h4>List of updated HTML-files/folders:</h4>
</div>
<ul>
<li><code>html/account-change-password.html</code></li>
</ul>
</div>
<div id="version2_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.1</code> - 22 December, 2018 <a class="anchorjs-link" href="#version2_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Jobs inner pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Header layout
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>.u-label</code> styles in favor of <code>.btn</code> classes
</div>
</div>
<div id="version2_0_2" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.0.2</code> - 04 December, 2018 <a class="anchorjs-link" href="#version2_0_2" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>hs.megamenu.js</code> issue on iPad devices
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Conflicting Bootstrap Select plugin with <code>hs.unfold.js</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Bootstrap active button style on checkbox and radio buttons
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Bootstrap select copy-code snippet wrong class naming
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Some linking issues
</div>
</div>
<div id="version2_0_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v4.1</code> - 15 November, 2018 <a class="anchorjs-link" href="#version2_0_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Anchor offset issue in the Documentation pages
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>onepage-saas.html</code> Pricing block's SVG component (.ie-abstract-shapes-11) in IE browser
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>hs.scroll-nav.js</code> file
</div>
</div>
<div id="version2_2-migrating-to-v2" class="content-divider">
<h2 class="hs-docs-heading">Migrating to v2.2 <a class="anchorjs-link" href="#version2_2-migrating-to-v2" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<p>Front v2 is a major rewrite of the entire template. The most notable changes are summarized below, followed by more specific changes to relevant components.</p>
<p>v2 comes with the bulk of breaking changes, hence, below are the breaking changes to bear in mind when moving from v1.3 to v2 or any older version of Front.</p>
</div>
<div id="version2_0" class="content-divider">
<h2 class="hs-docs-heading"><code>v2.0</code> - 07 November, 2018 <a class="anchorjs-link" href="#version2_0" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
3 home pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Invoice page
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
FAQ pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
IE supported now
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
List group
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Header gradient option
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Toggle topbar Header option
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Set of new SVG Icons
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Login pages
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Player.js plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
SVG-injector plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Range Slider plugin
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Google Map degradation issue
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Bootstrap select style issue on page load
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
mega-menu.js click function
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
header-collapse not collapsing issue
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>hs.datatables.js</code> pagination issue with <code>.active</code> state
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Font size rendering
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Font awesome prefix classing where <code>fa-</code> classes changed to <code>fas-</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
hs.go-to.js plugin disappearing issue on scroll
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>page-contacts-agency.html</code> horizontal scrollbar issue on icon blocks
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>classic-crypto.html</code> <span class="text-dark fw-semi-bold">Blog news</span>'s image alignment issue fixed with <code>.w-100</code> class to the parent
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>custombox</code> visibility issue in IE
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>page-services-start-up.html</code> pricing pagination issue
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>unfold.js</code> (Dropdown) accessibility
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>hs.video-player.js</code>
</div>
<div class="mt-5">
<h4>Breaking changes</h4>
<ul>
<li><span class="text-dark fw-semi-bold">Refactored nearly all components</span> to use more un-nested class selectors instead of over-specific children selectors.</li>
<li><code>bootstrap.css</code> file merged to the <code>theme.css</code>.</li>
<li><code>bootstrap.css</code> file removed from all HTML-files.</li>
<li>Main Front SCSS file changed to <code>theme.scss</code>.</li>
<li>Main Front CSS file changed to <code>theme.css</code>.</li>
<li>Main Front JS file changed to <code>theme.js</code>.</li>
<li>Helper JS files moved to the <code>components</code> folder.</li>
<li><code>$g-</code> variable prefix dropped to optimize the variables with Bootstrap variables, and to avoid duplications.</li>
<li>Dropped <code>Unfold</code> styles in favor of Bootstrap <code>.dropdown</code> menu.</li>
<li>Switched from <code>px-to-rem</code> mixing to plain <code>rem</code>.</li>
<li>Dropped <code>.u-</code> prefix from utility classes.</li>
<li>
<span class="text-dark fw-semi-bold">Buttons</span>
<ul>
<li>Dropped <code>.u-</code> prefix from button classes in favor of Bootstrap naming classes.</li>
<li>Renamed <code>.u-button-*--air</code> classes to <code>.btn-*-soft</code>.</li>
</ul>
</li>
<li>
<span class="text-dark fw-semi-bold">Badges</span>
<ul>
<li>Dropped <code>.u-</code> prefix from badge classes in favor of Bootstrap naming classes.</li>
<li>Improved badge positioning.</li>
<li>Renamed <code>.u-badge-border-*</code> classes to <code>.badge-outline-*</code>.</li>
</ul>
</li>
<li>
<span class="text-dark fw-semi-bold">Forms</span>
<ul>
<li>Renamed <code>u-form-layouts</code> in favor of Bootstrap naming classes.</li>
<li>Dropped some <code>u-form-layouts</code> classes and extended Bootstrap form classes.</li>
<li>Dropped <code>.u-</code> prefix from <code>.u-file-attachment-*</code> classes.</li>
<li>Dropped <code>.u-</code> prefix from <code>.u-checkbox-*</code> classes.</li>
</ul>
</li>
<li>
Components that are dropped in favor of <span class="text-dark fw-semi-bold">.card</span>
<ul>
<li><code>.u-pricing-v1</code>, and <code>.u-pricing-v2</code> classes</li>
<li><code>modal-window</code>s</li>
<li><code>.u-blog-overlay-v1</code> class</li>
<li><code>.blog-masonry</code> blocks.</li>
<li><code>shop-cart.html</code> Shipment blocks</li>
<li><code>shop-checkout.html</code> Order summary content</li>
<li><code>classic-crypto.html</code> Bitcoin charts blocks</li>
<li><code>corporate-agency.html</code> Team blocks</li>
<li><code>corporate-business.html</code> Hero card blocks</li>
<li><code>corporate-business.html</code> Pricing blocks</li>
<li><code>landing-house.html</code> Products blocks</li>
<li><code>landing-job.html</code> Hiring blocks</li>
<li><code>portfolio-agency.html</code> Hire Us blocks</li>
<li><code>classic-marketing.html</code> News and Features blocks</li>
<li><code>blog-start-up.html</code> News blocks</li>
<li><code>blog-agency.html</code> News blocks</li>
<li><code>Sidebar news blogs</code> classes.</li>
<li><code>blog-classic</code> News blocks.</li>
<li><code>blog-grid</code> News blocks.</li>
<li><code>blog-list</code> News blocks.</li>
<li><code>blog-masonry</code> News blocks.</li>
<li><code>work-masonry</code> News blocks.</li>
<li><code>work-modern</code> News blocks.</li>
<li><code>landing-house.html</code> Testimonials blocks</li>
<li><code>classic-consulting.html</code> Testimonials blocks</li>
<li><code>blog-agency.html</code> Testimonials blocks</li>
<li><code>shop-classic.html</code> Product blocks</li>
<li><code>shop-masonry.html</code> Product blocks</li>
<li><code>page-privacy.html</code> content.</li>
<li><code>page-terms.html</code> sticky-block nav.</li>
<li><code>page-help.html</code> sticky-block nav.</li>
<li><code>page-services-agency.html</code> <span class="text-dark fw-semi-bold">Get Started with Front</span> blocks.</li>
<li><code>shop-classic.html</code> Testimonials blocks.</li>
<li><code>about-start-up.html</code> Testimonials blocks.</li>
<li><code>account-members.html</code> Members block.</li>
<li><code>account-members-list.html</code> Members block.</li>
<li><code>account-activity.html</code> Activity table block.</li>
<li><code>account-my-tasks.html</code> Tasks table block.</li>
<li><code>account-plans.html</code> Pricing blocks.</li>
<li><code>account-projects-list.html</code> Projects blocks.</li>
<li><code>account-profile.html</code> Sibebar blocks.</li>
</ul>
</li>
<li>
Components that are dropped in favor of <span class="text-dark fw-semi-bold">.list-group</span>
<ul>
<li>All <code>Footers</code> list groups.</li>
<li><code>account-profile.html</code> List groups.</li>
<li><code>page-terms.html</code> sticky-blocks.</li>
<li><code>page-help.html</code> sticky-blocks.</li>
</ul>
</li>
<li>Dropped Cubeportfolio plugin from <code>.blog-masonry</code> blocks.</li>
<li>Dropped <code>.u-</code> prefix from progress-vertical classes.</li>
<li>Dropped <code>.u-info-v1</code>, and <code>.u-info-v2</code> classes, and replaced with <code>.card-frame</code> class.</li>
<li>Dropped <code>mixins/_breakpoint.scss</code> in favor of Bootstrap mixins.</li>
<li>Dropped <code>list-style.scss</code> file and replaced with Bootstrap list-groups.</li>
<li>Dropped <code>.u-md-avatar</code> in favor of <code>.u-avatar</code> class.</li>
<li>Updated <code>hs.chart-pie.js</code>.</li>
<li>Refactored <code>position</code> classes in favor of Bootstrap naming classes. See <a class="link" href="positions.html">Position</a> classes.</li>
<li>Refactored <code>video-player</code> blocks.</li>
<li>Refactored <code>hs.chart-pie.js</code> file.</li>
<li>Stats blocks in the <code>classic-consulting.html</code> file are not dynamic rather than static SVG.</li>
<li>Previous Front content spacing utility classes rewritten with <code>$content-space</code> mixins and renamed in favor of Bootstrap naming classes. See <a class="link" href="spacings.html">Spacing</a> classes.</li>
<li>Renamed <code>$midnightblue</code> to the Bootstrap's <code>$indigo</code> variable.</li>
<li>Renamed <code>$social-network-colors</code> to <code>$secondary-colors</code>.</li>
<li>Renamed <code>.u-font-size-*</code> to <code>.font-size-*</code>. See <a class="link" href="others.html#font-sizes">Font size</a> classes.</li>
</ul>
</div>
<div class="mt-5">
<h4>Global changes</h4>
<ul>
<li>
<span class="text-dark fw-semi-bold">SVG</span>
<ul>
<li>Refactored <code>SVG</code> elements to make their classes and IDs unique to give them unique styles.</li>
<li>Plain <code>SVG</code> codes removed from HTMl-pages and called through <code>img</code> tag.</li>
</ul>
</li>
<li>Dropped <code>skippy</code> across all HTML-pages.</li>
</ul>
</div>
<div class="mt-5">
<h4>Dropped</h4>
<ul>
<li>Dropped <code>front.scss</code>, <code>front-core.scss</code>, and <code>front-components.scss</code> SCSS files. All these files merged to the <code>theme.scss</code> file. Since there was no a reason to divide them.</li>
<li>Removed the unused <code>_staggered-transition-delay.scss</code> mixin. It was just extra code.</li>
<li>Dropped <code>_space.scss</code> file.</li>
<li>Dropped <code>overflow: hidden;</code> from <code>main</code> tag.</li>
<li>Dropped <code>body</code> and <code>html</code> tag styles to use stick to the Bootstrap <a class="link" href="https://getbootstrap.com/docs/4.1/content/reboot/">Reboot</a>.</li>
<li>Dropped <code>_modal-window-account.scss</code>, <code>_modal-window-shopping-cart.scss</code>, and <code>_modal-window-subscribe.scss</code> files, since their only style was width. However, their styles are now given through HTML inline style.</li>
<li>Dropped <code>_news-blog-overlay-v1.scss</code> class in favor of utility classes. Use <a class="link" href="colors.html#bg-gradient-overlay">Background gradient overlay</a> classes instead now.</li>
<li>Dropped <code>scss/front/unfold/</code> folder.</li>
<li>Dropped <code>.u-icon</code> in favor of <code>.btn</code> classes.</li>
<li>Dropped <code>search-classic</code> style in favor of utility classes.</li>
<li>Dropped <code>shopping-cart</code> style in favor of explicit <code>.card</code> classes.</li>
<li>Dropped duplicated <code>Sidebar</code> examples from <code>header-layouts.html</code> page.</li>
<li>Dropped <code>.u-sidebar--cart</code> and <code>.u-sidebar__content--cart</code> classes for simplicity's sake.</li>
<li>Dropped <code>exit-intend</code> plugin from <code>blog-agency.html</code> page.</li>
<li>Dropped <code>forms/toggle-state/</code> folder.</li>
<li>Dropped <code>forms/form-steps/</code> folder.</li>
<li>Dropped <code>.u-form-steps</code> classes in favor of <code>.nav</code> classes. Use Nav classes instead now.</li>
<li>Dropped <code>Instagram</code> plugin from demo pages due to a continuous data token error. However, the plugin is still available in the Documentation page.</li>
<li>Dropped <code>px-to-rem</code> mixin in favor of plain <code>rem</code>.</li>
<li><code>$accent-colors</code> dropped.</li>
<li>Dropped <code>@icon-elements</code> mixin in favor of plain SCSS style.</li>
<li>Dropped <code>.theme-color</code> function.</li>
<li>Removed the unused <code>.mx-gutters-5</code> class.</li>
<li>Dropped <code>.u-form--modern</code> in favor of a default form style.</li>
</ul>
</div>
<div class="mt-5">
<h4>Optimized</h4>
<ul>
<li>Moved <code>scss/vendor/</code> folder to the <code>scss/front/</code> folder.</li>
<li>Moved <code>scss/vendor/bootstrap.scss</code> file to the <code>scss/</code> folder.</li>
<li><code>scss/mixins/_border-radius.scss</code> optimized.</li>
<li><code>scss/mixins/_buttons.scss</code> optimized.</li>
<li>Large and responsive spacing issues on small devices optimized.</li>
<li><code>footers</code> optimized.</li>
<li>Moved <code>_typo-font-sizes.scss</code> and <code>_typo-font-weight.scss</code> utilities to the <code>utilities/_text.scss</code> file.</li>
<li>Moved <code>scss/front/colors/</code> utility folder to the <code>scss/front/utilities/</code> folder.</li>
<li>Moved <code>scss/front/links/</code> utility folder to the <code>scss/front/utilities/_links.scss</code> folder.</li>
<li>Merged <code>_height.scss</code> utility file with <code>_sizing.scss</code> file.</li>
</ul>
</div>
<div class="mt-5">
<h4>Miscellaneous</h4>
<ul>
<li>Dropped <code>data-bg-img-src</code> JS function in favor of HTML inline style.</li>
<li>Dropped <code>$teal-darker, $cyan-darker, $red-darker</code> colors.</li>
<li><code>.u-sidebar--cart__footer-offset</code> class changed to <code>.u-sidebar__cart-footer-offset</code>.</li>
<li>Renamed <code>scss/vendor/_border-radius.scss</code> file to <code>_border.scss</code>.</li>
<li><code>@media</code> breakpoint sizes are fixed according to Bootstrap's latest changes.</li>
<li><code>_area-chart.scss</code> file moved to <code>scss/front/vendor/area-chart/_area-chart.scss</code>
folder.</li>
<li><code>datatable/</code> folder moved to <code>scss/front/vendor/ folder</code>.</li>
<li><code>datepicker/</code> folder moved to <code>scss/front/vendor/ folder</code>.</li>
<li><code>forms/select/</code> folder moved to <code>scss/front/vendor/ folder</code>.</li>
<li><code>forms/summernote/-editor</code> folder moved to <code>scss/front/vendor/ folder</code>.</li>
<li><code>forms/tagsinput/</code> folder moved to <code>scss/front/vendor/ folder</code>.</li>
<li>Replaced <code>.u-labels</code> on Blog pages with <span class="text-dark fw-semi-bold">.btn</span> classes.</li>
<li>Replaced <code>SVG</code> background <code>.content-centered</code> class to <code>.content-centered-y</code> in <code>page-maintenance-mode.html</code> page.</li>
<li>Replaced <code>SVG</code> background <code>.content-centered</code> class to <code>.content-centered-y</code> in <code>page-privacy.html</code> page.</li>
<li>Replaced <code>SVG</code> background <code>.content-centered</code> class to <code>.content-centered-y</code> in <code>portfolio-case-studies-modern.html</code> page.</li>
<li>Replaced <code>Video Background</code>'s SVG background <code>.content-centered</code> class to <code>.content-centered-y</code> in <code>page-careers.html</code> page.</li>
<li>Replaced <code>assets/img/64x64/</code> images with <code>100x100</code> images due to low quality.</li>
<li>Bootstrap's <code>$indigo</code> variable enabled.</li>
<li><code>img</code> tags are now wrapped with <code>.u-*-avatar</code> classes for better usability.</li>
<li><code>.u-*-avatar</code> sizes are improved to match the <code>.btn-icon</code> sizes.</li>
<li>Added <code>data-adaptive-height="true"</code> to the <span class="text-dark fw-semi-bold">Pricing</span> section to the <code>classic-consulting.html</code>, and <code>page-pricing.html</code> pages.</li>
<li>Changed <code>.u-slick-gutters-3</code> from <code>16px</code> to <code>15px</code>.</li>
</ul>
</div>
<!-- Card -->
<div class="card mt-5">
<div class="card-header">
<h4 class="card-header-title">Renamed classes</h4>
</div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Front v3.2.2</th>
<th>Front v3.3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.u-button-*--air</code>
</td>
<td>
<code>.btn-*-soft</code>
</td>
</tr>
<tr>
<td>
<code>.u-badge-border-*</code>
</td>
<td>
<code>.badge-outline-*</code>
</td>
</tr>
<tr>
<td>
<code>.u-font-size-14</code>
</td>
<td>
<code>.font-size-1</code>
</td>
</tr>
<tr>
<td>
<code>.u-font-size-20</code>
</td>
<td>
<code>.font-size-2</code>
</td>
</tr>
<tr>
<td>
<code>.u-font-size-32</code>
</td>
<td>
<code>.font-size-3</code>
</td>
</tr>
<tr>
<td>
<code>.u-font-size-48--md-down</code>
</td>
<td>
<code>.font-size-md-down-5</code>
</td>
</tr>
<tr>
<td>
<code>.u-card-header</code>
</td>
<td>
<code>.card-collapse</code>
</td>
</tr>
<tr>
<td>
<code>.u-select</code>
</td>
<td>
<code>.dropdown-select</code>
</td>
</tr>
<tr>
<td>
<code>.u-toggle__toggle</code>
</td>
<td>
<code>.link-muted__toggle</code> and <code>.btn-toggle</code>
</td>
</tr>
<tr>
<td>
<code>.u-checkbox-brd</code>
</td>
<td>
<code>.checkbox-outline</code>
</td>
</tr>
<tr>
<td>
<code>.u-indicator-ver-dashed</code>
</td>
<td>
<code>.u-indicator-vertical-dashed</code>
</td>
</tr>
<tr>
<td>
<code>.u-paging-v1</code>
</td>
<td>
<code>.u-paging-modern</code>
</td>
</tr>
<tr>
<td>
<code>.u-blog-thumb-v1</code>
</td>
<td>
<code>.u-blog-thumb-minimal</code>
</td>
</tr>
<tr>
<td>
<code>.u-gmap-v1</code>
</td>
<td>
<code>.u-gmap-interactive</code>
</td>
</tr>
<tr>
<td>
<code>.u-stats-v1</code>
</td>
<td>
<code>.u-stats-progress</code>
</td>
</tr>
<tr>
<td>
<code>.u-stats-v2</code>
</td>
<td>
<code>.u-area-chart</code>
</td>
</tr>
<tr>
<td>
<code>.u-slick-paging-v1</code>
</td>
<td>
<code>.u-slick-paging</code>
</td>
</tr>
<tr>
<td>
<code>.u-slick-pagination-testimonials-v1</code>
</td>
<td>
<code>.u-slick-pagination-interactive</code>
</td>
</tr>
<tr>
<td>
<code>.opacity-0_2</code>
</td>
<td>
<code>.opacity-xs</code>
</td>
</tr>
<tr>
<td>
<code>.u-file-attachment-v1</code>
</td>
<td>
<code>.u-file-attachment-link</code>
</td>
</tr>
<tr>
<td>
<code>.text-light</code>
</td>
<td>
<code>.text-white-70</code>
</td>
</tr>
<tr>
<td>
<code>.u-bg-transparent</code>
</td>
<td>
<code>.btn-bg-transparent</code>
</td>
</tr>
<tr>
<td>
<code>.u-checkbox-btn</code>
</td>
<td>
<code>.btn-custom-toggle-primary</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon</code>
</td>
<td>
<code>.btn</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon--xs</code>
</td>
<td>
<code>.btn-xs.btn-icon</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon--sm</code>
</td>
<td>
<code>.btn-sm.btn-icon</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon--md</code>
</td>
<td>
<code>.btn-icon</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon--lg</code>
</td>
<td>
<code>.btn-lg.btn-icon</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon__inner</code>
</td>
<td>
<code>.btn-icon-inner</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon__inner</code>
</td>
<td>
<code>.btn-icon-inner</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon__inner</code>
</td>
<td>
<code>.btn-icon-inner-bottom-minus</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon--*</code>
</td>
<td>
<code>.btn-*</code>
</td>
</tr>
<tr>
<td>
<code>.u-icon-*--air</code>
</td>
<td>
<code>.btn-soft-*</code>
</td>
</tr>
<tr>
<td>
<code>.z-index-minus-1</code>
</td>
<td>
<code>.z-index-n1</code>
</td>
</tr>
<tr>
<td>
<code>.ml-offset-2</code>
</td>
<td>
<code>.ml-n2</code>
</td>
</tr>
<tr>
<td>
<code>.ml-offset-3</code>
</td>
<td>
<code>.ml-n3</code>
</td>
</tr>
<tr>
<td>
<code>.mt-offset-1</code>
</td>
<td>
<code>.mt-n1</code>
</td>
</tr>
<tr>
<td>
<code>.mt-offset-5</code>
</td>
<td>
<code>.mt-n5</code>
</td>
</tr>
<tr>
<td>
<code>.mt-offset-6</code>
</td>
<td>
<code>.mt-n6</code>
</td>
</tr>
<tr>
<td>
<code>.mt-offset-9</code>
</td>
<td>
<code>.mt-n9</code>
</td>
</tr>
<tr>
<td>
<code>.mt-offset-23</code>
</td>
<td>
<code>.mt-n23</code>
</td>
</tr>
<tr>
<td>
<code>.mb-offset-3</code>
</td>
<td>
<code>.mb-n3</code>
</td>
</tr>
<tr>
<td>
<code>.mb-offset-9</code>
</td>
<td>
<code>.mb-n9</code>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
</div>
<div id="version1_3" class="content-divider">
<h2 class="hs-docs-heading"><code>v1.3</code> - 05 August, 2018 <a class="anchorjs-link" href="#version1_3" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Account pages added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Circles (Pie Charts) added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Datatables added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Flatpickr added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Bootstrap Select added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Bootstrap Tagsinput added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Summernote WYSIWYG Editor added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Toggle state added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Instagram Image resolution
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Header Nav Link icon rotation
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
<code>vertical-align: baseline;</code> added to our <code>SVG</code> styles
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Bordered Badge colors in <code>_badge-style.scss</code> updated
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Vertical progress bar
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
Bootstrap Popover enabled
</div>
<div class="mb-3">
<span class="badge bg-soft-dark text-dark py-2 px-3 me-2">Dropped</span>
<code>&lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;</code> in all HTML files.
</div>
</div>
<div id="version1_2" class="content-divider">
<h2 class="hs-docs-heading"><code>v1.2</code> - 05 June, 2018 <a class="anchorjs-link" href="#version1_2" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Landing House Home page added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Landing Job Home page added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Corporate Business Home page added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Tables documentation page added
</div>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Utility classes added
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>snippets/headers/header-sidebar-right.html</code> menu links fixed
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
"Dark-to-white on scroll" wrong linking issue fixed on <code>snippets/header-layouts.html</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>confirm_password</code> init function changed to <code>confirmPassword</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Search Classic visibility issue fixed
</div>
<div class="mb-3">
<span class="badge bg-soft-info text-info py-2 px-3 me-2">Enhanced</span>
hs.go-to.js - Now you can use it as a link
</div>
</div>
<div id="version1_1" class="content-divider">
<h2 class="hs-docs-heading"><code>v1.1</code> - 13 May, 2018 <a class="anchorjs-link" href="#version1_1" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<div class="mb-3">
<span class="badge bg-soft-primary text-primary py-2 px-3 me-2">New</span>
Sketch file added
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>scss/dropdown/</code> folders and its <code>_dropdown.scss</code> along with <code>_dropdown-country.scss</code> files changed to <code>unfold</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
<code>slick-carousel-preloader-black.svg</code> file name changed to <code>slick-carousel-preloader-primary.svg</code>
</div>
<div class="mb-3">
<span class="badge bg-soft-danger text-danger py-2 px-3 me-2">Fixed</span>
Instagram API invalid token issue fixed
</div>
</div>
<div id="initial-release" class="content-divider">
<h2 class="hs-docs-heading"><code>v1.0</code> - 08 May, 2018 <a class="anchorjs-link" href="#initial-release" aria-label="Anchor" data-anchorjs-icon="#"></a></h2>
<p>Initial Release.</p>
</div>
</div>
<!-- End Content -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Go To -->
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
data-hs-go-to-options='{
"offsetTop": 700,
"position": {
"init": {
"right": "2rem"
},
"show": {
"bottom": "2rem"
},
"hide": {
"bottom": "-2rem"
}
}
}'>
<i class="bi-chevron-up"></i>
</a>
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory -->
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
<script src="../assets/vendor/prism/prism.js"></script>
<!-- JS Front -->
<script src="../assets/js/theme.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF HEADER
// =======================================================
new HSHeader('#header').init()
// INITIALIZATION OF LISTJS COMPONENT
// =======================================================
const docsSearch = HSCore.components.HSList.init('#docsSearch')
// GET JSON FILE RESULTS
// =======================================================
fetch('../assets/json/docs-search.json')
.then(response => response.json())
.then(data => {
docsSearch.getItem(0).add(data)
})
// INITIALIZATION OF GO TO
// =======================================================
new HSGoTo('.js-go-to')
})()
</script>
</body>
</html>