You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
12 KiB
235 lines
12 KiB
2 years ago
|
<div id="styleSwitcherDropdown" class="hs-unfold-content sidebar sidebar-bordered sidebar-box-shadow w-35rem">
|
||
|
|
<div class="card card-lg border-0 h-100">
|
||
|
|
<div class="card-header align-items-start">
|
||
|
|
<div class="mr-2">
|
||
|
|
<h3 class="card-header-title">Front Builder</h3>
|
||
|
|
<p>Customize your overview page layout. Choose the one that best fits your needs.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Toggle Button -->
|
||
|
|
<a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-ghost-dark" href="javascript:;"
|
||
|
|
data-hs-unfold-options='{
|
||
|
|
"target": "#styleSwitcherDropdown",
|
||
|
|
"type": "css-animation",
|
||
|
|
"animationIn": "fadeInRight",
|
||
|
|
"animationOut": "fadeOutRight",
|
||
|
|
"hasOverlay": true,
|
||
|
|
"smartPositionOff": true
|
||
|
|
}'>
|
||
|
|
<i class="tio-clear tio-lg"></i>
|
||
|
|
</a>
|
||
|
|
<!-- End Toggle Button -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Body -->
|
||
|
|
<div class="card-body sidebar-scrollbar">
|
||
|
|
<h4 class="mb-1">Layout skins <span id="js-builder-disabled" class="badge badge-soft-danger opacity-0">Disabled</span></h4>
|
||
|
|
<p>3 kinds of layout skins to choose from.</p>
|
||
|
|
|
||
|
|
<div class="row gx-2 mb-5">
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="layoutSkinsRadio"
|
||
|
|
id="layoutSkinsRadio1" checked value="default">
|
||
|
|
<label class="custom-checkbox-card-label" for="layoutSkinsRadio1">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/layouts-sidebar-default.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Default</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="layoutSkinsRadio"
|
||
|
|
id="layoutSkinsRadio2" value="navbar-dark">
|
||
|
|
<label class="custom-checkbox-card-label" for="layoutSkinsRadio2">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/layouts-sidebar-dark.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Dark</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="layoutSkinsRadio"
|
||
|
|
id="layoutSkinsRadio3" value="navbar-light">
|
||
|
|
<label class="custom-checkbox-card-label" for="layoutSkinsRadio3">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/layouts-sidebar-light.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Light</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
</div>
|
||
|
|
<!-- End Row -->
|
||
|
|
|
||
|
|
<h4 class="mb-1">Sidebar layout options</h4>
|
||
|
|
<p>Choose between standard navigation sizing, mini or even compact with icons.</p>
|
||
|
|
|
||
|
|
<div class="row gx-2 mb-5">
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="sidebarLayoutOptions"
|
||
|
|
id="sidebarLayoutOptions1" checked value="default">
|
||
|
|
<label class="custom-checkbox-card-label" for="sidebarLayoutOptions1">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/sidebar-default-classic.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Default</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="sidebarLayoutOptions"
|
||
|
|
id="sidebarLayoutOptions2" value="navbar-vertical-aside-compact-mode">
|
||
|
|
<label class="custom-checkbox-card-label" for="sidebarLayoutOptions2">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/sidebar-compact.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Compact</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="sidebarLayoutOptions"
|
||
|
|
id="sidebarLayoutOptions3" value="navbar-vertical-aside-mini-mode">
|
||
|
|
<label class="custom-checkbox-card-label" for="sidebarLayoutOptions3">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/sidebar-mini.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Mini</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
</div>
|
||
|
|
<!-- End Row -->
|
||
|
|
|
||
|
|
<h4 class="mb-1">Header layout options</h4>
|
||
|
|
<p>Choose the primary navigation of your header layout.</p>
|
||
|
|
|
||
|
|
<div class="row gx-2">
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="headerLayoutOptions"
|
||
|
|
id="headerLayoutOptions1" value="single">
|
||
|
|
<label class="custom-checkbox-card-label" for="headerLayoutOptions1">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/header-default-fluid.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Default (Fluid)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="headerLayoutOptions"
|
||
|
|
id="headerLayoutOptions2" value="single-container">
|
||
|
|
<label class="custom-checkbox-card-label" for="headerLayoutOptions2">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/header-default-container.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Default (Container)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="headerLayoutOptions"
|
||
|
|
id="headerLayoutOptions3" value="double">
|
||
|
|
<label class="custom-checkbox-card-label" for="headerLayoutOptions3">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/header-double-line-fluid.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Double line (Fluid)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
|
||
|
|
<!-- Custom Radio -->
|
||
|
|
<div class="col-4 text-center mt-2">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="custom-checkbox-card mb-2">
|
||
|
|
<input type="radio" class="custom-checkbox-card-input" name="headerLayoutOptions"
|
||
|
|
id="headerLayoutOptions4" value="double-container">
|
||
|
|
<label class="custom-checkbox-card-label" for="headerLayoutOptions4">
|
||
|
|
<img class="custom-checkbox-card-img"
|
||
|
|
src="{{asset('public/assets/admin')}}/svg/layouts/header-double-line-container.svg"
|
||
|
|
alt="Image Description">
|
||
|
|
</label>
|
||
|
|
<span class="custom-checkbox-card-text">Double line (Container)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Custom Radio -->
|
||
|
|
</div>
|
||
|
|
<!-- End Row -->
|
||
|
|
</div>
|
||
|
|
<!-- End Body -->
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<div class="card-footer">
|
||
|
|
<div class="row gx-2">
|
||
|
|
<div class="col">
|
||
|
|
<button type="button" id="js-builder-reset" class="btn btn-block btn-lg btn-white">
|
||
|
|
<i class="tio-restore"></i> Reset
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<button type="button" id="js-builder-preview" class="btn btn-block btn-lg btn-primary">
|
||
|
|
<i class="tio-visible"></i> Preview
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Row -->
|
||
|
|
</div>
|
||
|
|
<!-- End Footer -->
|
||
|
|
</div>
|
||
|
|
</div>
|