Syarif Ubaidillah
2 weeks ago
28 changed files with 2501 additions and 1216 deletions
@ -1,11 +1,11 @@ |
|||||
{ |
{ |
||||
"mcpServers": { |
"mcpServers": { |
||||
"laravel-boost": { |
"laravel-boost": { |
||||
"command": "php", |
"command": "php", |
||||
"args": [ |
"args": [ |
||||
"artisan", |
"artisan", |
||||
"boost:mcp" |
"boost:mcp" |
||||
] |
] |
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
@ -1,4 +1,94 @@ |
|||||
import * as bootstrap from 'bootstrap'; |
import * as coreui from '@coreui/coreui'; |
||||
import './sidebar.js' |
window.coreui = coreui; |
||||
|
|
||||
window.bootstrap = bootstrap |
const THEME = 'coreui-free-bootstrap-admin-template-theme'; |
||||
|
|
||||
|
// Helper functions declared outside of event scopes so they stay clean
|
||||
|
const getStoredTheme = () => localStorage.getItem(THEME); |
||||
|
const setStoredTheme = theme => localStorage.setItem(THEME, theme); |
||||
|
|
||||
|
const getPreferredTheme = () => { |
||||
|
const storedTheme = getStoredTheme(); |
||||
|
if (storedTheme) return storedTheme; |
||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; |
||||
|
}; |
||||
|
|
||||
|
const setTheme = theme => { |
||||
|
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { |
||||
|
document.documentElement.setAttribute('data-coreui-theme', 'dark'); |
||||
|
} else { |
||||
|
document.documentElement.setAttribute('data-coreui-theme', theme); |
||||
|
} |
||||
|
document.documentElement.dispatchEvent(new Event('ColorSchemeChange')); |
||||
|
}; |
||||
|
|
||||
|
const showActiveTheme = theme => { |
||||
|
const btnToActive = document.querySelector(`[data-coreui-theme-value="${theme}"]`); |
||||
|
if (!btnToActive) return; // Guard clause in case toggle buttons aren't on the current page
|
||||
|
|
||||
|
const activeThemeIcon = document.querySelector('.theme-icon-active'); |
||||
|
const svgOfActiveBtn = btnToActive.querySelector('svg'); |
||||
|
|
||||
|
for (const element of document.querySelectorAll('[data-coreui-theme-value]')) { |
||||
|
element.classList.remove('active'); |
||||
|
} |
||||
|
|
||||
|
btnToActive.classList.add('active'); |
||||
|
|
||||
|
if (activeThemeIcon && svgOfActiveBtn) { |
||||
|
const useElement = svgOfActiveBtn.querySelector('use'); |
||||
|
if (useElement) { |
||||
|
const activeUseElement = activeThemeIcon.querySelector('use'); |
||||
|
if (activeUseElement) { |
||||
|
activeUseElement.setAttribute('xlink:href', useElement.getAttribute('xlink:href')); |
||||
|
} |
||||
|
} else { |
||||
|
activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 1. Run theme initialization immediately on file execution to prevent dark-mode flashbangs
|
||||
|
(() => { |
||||
|
const urlParams = new URLSearchParams(window.location.href.split('?')[1]); |
||||
|
if (urlParams.get('theme') && ['auto', 'dark', 'light'].includes(urlParams.get('theme'))) { |
||||
|
localStorage.setItem(THEME, urlParams.get('theme')); |
||||
|
} |
||||
|
setTheme(getPreferredTheme()); |
||||
|
})(); |
||||
|
|
||||
|
// System preferences watcher
|
||||
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { |
||||
|
const storedTheme = getStoredTheme(); |
||||
|
if (storedTheme !== 'light' && storedTheme !== 'dark') { |
||||
|
setTheme(getPreferredTheme()); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 2. CORE LIVEWIRE FIX: Run UI bindings on every single page navigation step
|
||||
|
document.addEventListener('livewire:navigated', () => { |
||||
|
const preferredTheme = getPreferredTheme(); |
||||
|
|
||||
|
// initiate sidebar toggle
|
||||
|
const toggleButton = document.querySelector('.header-toggler'); |
||||
|
const sidebar = document.querySelector('.sidebar'); |
||||
|
if(toggleButton) { |
||||
|
toggleButton.addEventListener('click', () => { |
||||
|
window.coreui.Sidebar.getOrCreateInstance(sidebar).toggle(); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// Ensure the state continues to match after navigation
|
||||
|
setTheme(preferredTheme); |
||||
|
showActiveTheme(preferredTheme); |
||||
|
|
||||
|
// Re-attach query click listeners to newly swapped DOM elements
|
||||
|
for (const toggle of document.querySelectorAll('[data-coreui-theme-value]')) { |
||||
|
toggle.addEventListener('click', () => { |
||||
|
const theme = toggle.getAttribute('data-coreui-theme-value'); |
||||
|
setStoredTheme(theme); |
||||
|
setTheme(theme); |
||||
|
showActiveTheme(theme); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|||||
@ -1,31 +0,0 @@ |
|||||
const sidebar = document.getElementById('sidebar'); |
|
||||
const content = document.getElementById('content'); |
|
||||
const topbar = document.getElementById('topbar'); |
|
||||
const toggleBtn = document.getElementById('toggleBtn'); |
|
||||
const mobileBtn = document.getElementById('mobileBtn'); |
|
||||
const overlay = document.getElementById('overlay'); |
|
||||
|
|
||||
// Desktop collapse
|
|
||||
if (toggleBtn) { |
|
||||
toggleBtn.addEventListener('click', () => { |
|
||||
if (sidebar) sidebar.classList.toggle('collapsed'); |
|
||||
if (content) content.classList.toggle('full'); |
|
||||
if (topbar) topbar.classList.toggle('full'); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
// Mobile sidebar open
|
|
||||
if (mobileBtn) { |
|
||||
mobileBtn.addEventListener('click', () => { |
|
||||
if (sidebar) sidebar.classList.add('mobile-show'); |
|
||||
if (overlay) overlay.classList.add('show'); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
// 🔥 Click outside to close
|
|
||||
if (overlay) { |
|
||||
overlay.addEventListener('click', () => { |
|
||||
if (sidebar) sidebar.classList.remove('mobile-show'); |
|
||||
if (overlay) overlay.classList.remove('show'); |
|
||||
}); |
|
||||
} |
|
||||
@ -1,153 +0,0 @@ |
|||||
// Avatar |
|
||||
.avatar { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
width: 3rem; |
|
||||
height: 3rem; |
|
||||
} |
|
||||
|
|
||||
// Avatar Size |
|
||||
.avatar-xs { |
|
||||
width: $avatar-size-xs; |
|
||||
height: $avatar-size-xs; |
|
||||
} |
|
||||
|
|
||||
.avatar-sm { |
|
||||
width: $avatar-size-sm; |
|
||||
height: $avatar-size-sm; |
|
||||
} |
|
||||
|
|
||||
.avatar-md { |
|
||||
width: $avatar-size-md; |
|
||||
height: $avatar-size-md; |
|
||||
} |
|
||||
|
|
||||
.avatar-lg { |
|
||||
width: $avatar-size-lg; |
|
||||
height: $avatar-size-lg; |
|
||||
} |
|
||||
|
|
||||
.avatar-xl { |
|
||||
width: $avatar-size-xl; |
|
||||
height: $avatar-size-xl; |
|
||||
} |
|
||||
|
|
||||
.avatar-xxl { |
|
||||
width: $avatar-size-xxl; |
|
||||
height: $avatar-size-xxl; |
|
||||
} |
|
||||
|
|
||||
// Avatar img |
|
||||
.avatar img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
-o-object-fit: cover; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
|
|
||||
.avatar-indicators { |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.avatar-indicators:before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
bottom: 0px; |
|
||||
right: 5%; |
|
||||
width: 30%; |
|
||||
height: 30%; |
|
||||
border-radius: 50%; |
|
||||
border: 2px solid var(--#{$prefix}white); |
|
||||
display: table; |
|
||||
} |
|
||||
|
|
||||
.avatar-xxl.avatar-indicators:before { |
|
||||
bottom: 5px; |
|
||||
right: 17%; |
|
||||
width: 16%; |
|
||||
height: 16%; |
|
||||
} |
|
||||
|
|
||||
// Avatar indicators |
|
||||
.avatar-offline:before { |
|
||||
background-color: var(--#{$prefix}gray-400); |
|
||||
} |
|
||||
|
|
||||
.avatar-online:before { |
|
||||
background-color: $success; |
|
||||
} |
|
||||
|
|
||||
.avatar-away:before { |
|
||||
background-color: $warning; |
|
||||
} |
|
||||
|
|
||||
.avatar-busy:before { |
|
||||
background-color: $danger; |
|
||||
} |
|
||||
|
|
||||
.avatar-info:before { |
|
||||
background-color: $info; |
|
||||
} |
|
||||
|
|
||||
// Avatar intials |
|
||||
.avatar-initials { |
|
||||
display: -ms-flexbox; |
|
||||
display: flex; |
|
||||
-ms-flex-pack: center; |
|
||||
justify-content: center; |
|
||||
-ms-flex-align: center; |
|
||||
align-items: center; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
pointer-events: none; |
|
||||
text-transform: uppercase; |
|
||||
} |
|
||||
|
|
||||
// Color varient |
|
||||
.avatar-primary .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $primary; |
|
||||
} |
|
||||
.avatar-secondary .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $secondary; |
|
||||
} |
|
||||
.avatar-success .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $success; |
|
||||
} |
|
||||
.avatar-warning .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $warning; |
|
||||
} |
|
||||
.avatar-info .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $info; |
|
||||
} |
|
||||
.avatar-danger .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $danger; |
|
||||
} |
|
||||
.avatar-light .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $light; |
|
||||
} |
|
||||
.avatar-dark .avatar-initials { |
|
||||
color: var(--#{$prefix}white); |
|
||||
background-color: $dark; |
|
||||
} |
|
||||
|
|
||||
// Avatar Group |
|
||||
.avatar-group .avatar + .avatar { |
|
||||
margin-left: -1.2rem; |
|
||||
} |
|
||||
|
|
||||
.avatar-group .avatar:hover { |
|
||||
z-index: 2; |
|
||||
} |
|
||||
|
|
||||
// Avatar border |
|
||||
.avatar-group img, |
|
||||
.avatar-group .avatar .avatar-initials { |
|
||||
border: 2px solid var(--#{$prefix}white); |
|
||||
} |
|
||||
@ -1,34 +0,0 @@ |
|||||
// Border dashed |
|
||||
|
|
||||
.border-dashed { |
|
||||
--ds-border-style: dashed; |
|
||||
} |
|
||||
|
|
||||
.timeline-vertical { |
|
||||
position: relative; |
|
||||
.timeline-item { |
|
||||
.timeline-bar { |
|
||||
position: absolute; |
|
||||
height: 100px; |
|
||||
left: 5px; |
|
||||
top: 24px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.timeline-vertical-height { |
|
||||
.timeline-item { |
|
||||
.timeline-bar { |
|
||||
height: calc(100% - 1rem) !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// vr border |
|
||||
.vr { |
|
||||
display: inline-block; |
|
||||
align-self: stretch; |
|
||||
width: $vr-border-width; |
|
||||
min-height: 1em; |
|
||||
background-color: var(--#{$prefix}border-color) !important; |
|
||||
opacity: $hr-opacity; |
|
||||
} |
|
||||
@ -1,39 +0,0 @@ |
|||||
.btn * { |
|
||||
// disable pointer event |
|
||||
pointer-events: none; |
|
||||
} |
|
||||
|
|
||||
.btn-icon { |
|
||||
position: relative; |
|
||||
display: -ms-inline-flexbox; |
|
||||
display: inline-flex; |
|
||||
-ms-flex-negative: 0; |
|
||||
flex-shrink: 0; |
|
||||
-ms-flex-pack: center; |
|
||||
justify-content: center; |
|
||||
-ms-flex-align: center; |
|
||||
align-items: center; |
|
||||
font-size: 0.92969rem; |
|
||||
font-weight: 400; |
|
||||
width: 2.5rem; |
|
||||
height: 2.5rem; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.btn-icon.btn-xs { |
|
||||
font-size: 0.75rem; |
|
||||
width: 1.75rem; |
|
||||
height: 1.75rem; |
|
||||
} |
|
||||
|
|
||||
.btn-icon.btn-sm { |
|
||||
font-size: 0.875rem; |
|
||||
width: 2.1875rem; |
|
||||
height: 2.1875rem; |
|
||||
} |
|
||||
|
|
||||
.btn-icon.btn-lg { |
|
||||
font-size: 1rem; |
|
||||
width: 3.36875rem; |
|
||||
height: 3.36875rem; |
|
||||
} |
|
||||
@ -1,138 +0,0 @@ |
|||||
.overlay { |
|
||||
position: fixed; |
|
||||
inset: 0; |
|
||||
background: rgba(0, 0, 0, .45); |
|
||||
backdrop-filter: blur(1px); |
|
||||
display: none; |
|
||||
z-index: 1030; |
|
||||
} |
|
||||
|
|
||||
.overlay.show { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
.sidebar { |
|
||||
width: 240px; |
|
||||
background: $white; |
|
||||
transition: width .3s, left .3s; |
|
||||
border-right: 1px solid $gray-200; |
|
||||
height: 100vh; |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
padding-top: 60px; |
|
||||
z-index: 1030; |
|
||||
|
|
||||
.nav-link { |
|
||||
color: $gray-800; |
|
||||
padding: 8px 10px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
gap: 12px; |
|
||||
white-space: nowrap; |
|
||||
margin: 1px 12px; |
|
||||
border-radius: 8px; |
|
||||
|
|
||||
&:hover { |
|
||||
color: $primary; |
|
||||
background-color: rgba($primary, 0.095); |
|
||||
} |
|
||||
|
|
||||
&.active { |
|
||||
color: $primary; |
|
||||
background-color: rgba($primary, 0.095); |
|
||||
} |
|
||||
|
|
||||
.ti { |
|
||||
font-size: 18px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.nav-text { |
|
||||
transition: opacity .2s; |
|
||||
} |
|
||||
|
|
||||
.logo-area { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
height: 60px; |
|
||||
width: 100%; |
|
||||
background: $white; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 10px; |
|
||||
padding-left: 17px; |
|
||||
color: $gray-800; |
|
||||
border-bottom: 1px solid $gray-200; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.sidebar.collapsed { |
|
||||
width: 60px; |
|
||||
|
|
||||
.nav-link { |
|
||||
margin: 0 0px; |
|
||||
background-color: transparent; |
|
||||
padding: 8px 18px; |
|
||||
} |
|
||||
|
|
||||
.nav-text { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.logo-text { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.topbar { |
|
||||
height: 60px; |
|
||||
margin-left: 240px; |
|
||||
// transition: margin-left .3s; |
|
||||
} |
|
||||
|
|
||||
.topbar.full { |
|
||||
margin-left: 60px; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
margin-left: 240px; |
|
||||
// transition: margin-left .3s; |
|
||||
// padding: 20px; |
|
||||
} |
|
||||
|
|
||||
.content.full { |
|
||||
margin-left: 60px; |
|
||||
} |
|
||||
|
|
||||
@media (max-width: 992px) { |
|
||||
.sidebar { |
|
||||
left: -240px; |
|
||||
} |
|
||||
|
|
||||
.sidebar.mobile-show { |
|
||||
left: 0; |
|
||||
} |
|
||||
|
|
||||
.topbar { |
|
||||
margin-left: 0 !important; |
|
||||
width: 100% !important; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
margin-left: 0 !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.min-vh-90 { |
|
||||
min-height: 90vh; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
@import "./avatar"; |
|
||||
@import "./button"; |
|
||||
@import "./icon-shape"; |
|
||||
@import "./utilities"; |
|
||||
@ -1,50 +0,0 @@ |
|||||
// Icon shape |
|
||||
|
|
||||
.icon-xxs { |
|
||||
width: $icon-size-xxs; |
|
||||
height: $icon-size-xxs; |
|
||||
line-height: $icon-size-xxs; |
|
||||
} |
|
||||
.icon-xs { |
|
||||
width: $icon-size-xs; |
|
||||
height: $icon-size-xs; |
|
||||
line-height: $icon-size-xs; |
|
||||
} |
|
||||
.icon-sm { |
|
||||
width: $icon-size-sm; |
|
||||
height: $icon-size-sm; |
|
||||
line-height: $icon-size-sm; |
|
||||
} |
|
||||
.icon-md { |
|
||||
width: $icon-size-md; |
|
||||
height: $icon-size-md; |
|
||||
line-height: $icon-size-md; |
|
||||
} |
|
||||
.icon-lg { |
|
||||
width: $icon-size-lg; |
|
||||
height: $icon-size-lg; |
|
||||
line-height: $icon-size-lg; |
|
||||
} |
|
||||
.icon-xl { |
|
||||
width: $icon-size-xl; |
|
||||
height: $icon-size-xl; |
|
||||
line-height: $icon-size-xl; |
|
||||
} |
|
||||
.icon-xxl { |
|
||||
width: $icon-size-xxl; |
|
||||
height: $icon-size-xxl; |
|
||||
line-height: $icon-size-xxl; |
|
||||
} |
|
||||
|
|
||||
.icon-xxxl { |
|
||||
width: $icon-size-xxxl; |
|
||||
height: $icon-size-xxxl; |
|
||||
line-height: $icon-size-xxxl; |
|
||||
} |
|
||||
.icon-shape { |
|
||||
display: inline-flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
text-align: center; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
@ -1,59 +0,0 @@ |
|||||
@import "bootstrap/scss/functions"; |
|
||||
@import "bootstrap/scss/variables"; |
|
||||
@import "bootstrap/scss/variables-dark"; |
|
||||
@import "bootstrap/scss/maps"; |
|
||||
@import "bootstrap/scss/mixins"; |
|
||||
@import "bootstrap/scss/utilities"; |
|
||||
|
|
||||
$utilities: map-merge( |
|
||||
$utilities, |
|
||||
( |
|
||||
"font-size": ( |
|
||||
rfs: true, |
|
||||
responsive: true, |
|
||||
property: font-size, |
|
||||
class: fs, |
|
||||
values: $font-sizes |
|
||||
), |
|
||||
"position": ( |
|
||||
property: position, |
|
||||
responsive: true, |
|
||||
values: static relative absolute fixed sticky |
|
||||
), |
|
||||
"top": ( |
|
||||
property: top, |
|
||||
responsive: true, |
|
||||
values: $position-values |
|
||||
), |
|
||||
"bottom": ( |
|
||||
property: bottom, |
|
||||
responsive: true, |
|
||||
values: $position-values |
|
||||
), |
|
||||
"start": ( |
|
||||
property: left, |
|
||||
class: start, |
|
||||
responsive: true, |
|
||||
|
|
||||
values: $position-values |
|
||||
), |
|
||||
"end": ( |
|
||||
property: right, |
|
||||
class: end, |
|
||||
responsive: true, |
|
||||
values: $position-values |
|
||||
), |
|
||||
"translate-middle": ( |
|
||||
property: transform, |
|
||||
class: translate-middle, |
|
||||
responsive: true, |
|
||||
values: ( |
|
||||
null: translate(-50%, -50%), |
|
||||
x: translateX(-50%), |
|
||||
y: translateY(-50%), |
|
||||
) |
|
||||
), |
|
||||
) |
|
||||
); |
|
||||
|
|
||||
@import "bootstrap/scss/utilities/api"; |
|
||||
@ -1,141 +0,0 @@ |
|||||
// Example: override Bootstrap color variables |
|
||||
|
|
||||
$gray-50: #fafafa !default; |
|
||||
$gray-100: #f5f5f5 !default; |
|
||||
$gray-200: #e5e5e5 !default; |
|
||||
$gray-300: #d4d4d4 !default; |
|
||||
$gray-400: #a3a3a3 !default; |
|
||||
$gray-500: #737373 !default; |
|
||||
$gray-600: #525252 !default; |
|
||||
$gray-700: #404040 !default; |
|
||||
$gray-800: #262626 !default; |
|
||||
$gray-900: #171717 !default; |
|
||||
$gray-950: #0a0a0a !default; |
|
||||
|
|
||||
$white: #ffffff !default; |
|
||||
$black: #000000 !default; |
|
||||
|
|
||||
$orange: #E66239 !default; |
|
||||
$red: #FB2C36 !default; |
|
||||
$green: #00C951 !default; |
|
||||
$cyan: #00B8DB !default; |
|
||||
$yellow: #F0B100 !default; |
|
||||
|
|
||||
|
|
||||
$primary: $orange !default; |
|
||||
$secondary: $gray-600 !default; |
|
||||
$success: $green !default; |
|
||||
$info: $cyan !default; |
|
||||
$warning: $yellow !default; |
|
||||
$danger: $red !default; |
|
||||
|
|
||||
$min-contrast-ratio: 2.5 !default; |
|
||||
$link-hover-decoration: none !default; |
|
||||
$link-color: $gray-700 !default; |
|
||||
$link-hover-color: $primary !default; |
|
||||
|
|
||||
|
|
||||
$light: $gray-100 !default; |
|
||||
$border-color: $gray-200 !default; |
|
||||
$border-color-translucent: $gray-200 !default; |
|
||||
|
|
||||
$enable-negative-margins: true !default; |
|
||||
$enable-rounded: true !default; |
|
||||
|
|
||||
$headings-font-weight: 400 !default; |
|
||||
$grid-gutter-width: 2.5rem !default; |
|
||||
|
|
||||
// scss-docs-start position-map |
|
||||
$position-values: ( |
|
||||
0: 0, |
|
||||
10: 10%, |
|
||||
25: 25%, |
|
||||
50: 50%, |
|
||||
60: 60%, |
|
||||
65:65%, |
|
||||
70: 70%, |
|
||||
75: 75%, |
|
||||
100: 100%, |
|
||||
auto: auto |
|
||||
) !default; |
|
||||
// scss-docs-end position-map |
|
||||
|
|
||||
|
|
||||
// scss-docs-start spacer-variables-maps |
|
||||
$spacer: 1rem !default; |
|
||||
$spacers: ( |
|
||||
0: 0, |
|
||||
1: $spacer * 0.25, |
|
||||
// 4px |
|
||||
2: $spacer * 0.5, |
|
||||
// 8px |
|
||||
3: $spacer, |
|
||||
// 16px |
|
||||
4: $spacer * 1.5, |
|
||||
// 24px |
|
||||
5: $spacer * 2, |
|
||||
// 32px |
|
||||
6: $spacer * 2.5, |
|
||||
// 40px |
|
||||
7: $spacer * 3, |
|
||||
// 48px |
|
||||
8: $spacer * 4, |
|
||||
// 64px |
|
||||
9: $spacer * 5, |
|
||||
// 80px |
|
||||
10: $spacer * 6, |
|
||||
// 96px |
|
||||
11: $spacer * 8, |
|
||||
// 128px |
|
||||
) !default; |
|
||||
// scss-docs-end spacer-variables-maps |
|
||||
|
|
||||
$font-family-base: 'Poppins', sans-serif !default; |
|
||||
$font-size-root: null !default; |
|
||||
$font-size-base: .875rem !default; // Assumes the browser default, typically `16px` |
|
||||
$font-size-sm: $font-size-base * .85 !default; |
|
||||
$font-size-lg: $font-size-base * 1.25 !default; |
|
||||
|
|
||||
$font-xs: 0.75rem !default; |
|
||||
|
|
||||
$h1-font-size: $font-size-base * 2.5 !default; |
|
||||
$h2-font-size: $font-size-base * 2 !default; |
|
||||
$h3-font-size: $font-size-base * 1.75 !default; |
|
||||
$h4-font-size: $font-size-base * 1.5 !default; |
|
||||
$h5-font-size: $font-size-base * 1.25 !default; |
|
||||
$h6-font-size: $font-size-base !default; |
|
||||
|
|
||||
// scss-docs-start border-radius-variables |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
$input-btn-padding-y: 0.5rem !default; |
|
||||
$input-btn-padding-x: .875rem !default; |
|
||||
$table-th-font-weight: 400!default; |
|
||||
|
|
||||
|
|
||||
|
|
||||
$link-decoration: none !default; |
|
||||
|
|
||||
$link-hover-decoration: underline !default; |
|
||||
|
|
||||
|
|
||||
// Icon |
|
||||
$icon-color: $gray-500 !default; |
|
||||
$icon-size-xxs: 1rem !default; |
|
||||
$icon-size-xs: 1.5rem !default; |
|
||||
$icon-size-sm: 2rem !default; |
|
||||
$icon-size-md: 2.5rem !default; |
|
||||
$icon-size-lg: 3rem !default; |
|
||||
$icon-size-xl: 3.5rem !default; |
|
||||
$icon-size-xxl: 4rem !default; |
|
||||
$icon-size-xxxl: 7rem !default; |
|
||||
|
|
||||
// Avatar |
|
||||
$avatar-size-xs: 1.5rem !default; |
|
||||
$avatar-size-sm: 2rem !default; |
|
||||
$avatar-size-md: 2.5rem !default; |
|
||||
$avatar-size-lg: 3.5rem !default; |
|
||||
$avatar-size-xl: 5rem !default; |
|
||||
$avatar-size-xxl: 7.5rem !default; |
|
||||
@ -1,13 +1,69 @@ |
|||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); |
@use "@coreui/coreui/scss/coreui" as * with ( |
||||
|
$enable-deprecation-messages: false |
||||
|
); |
||||
|
|
||||
// Import Bootstrap functions first |
body { |
||||
@import "bootstrap/scss/functions"; |
background-color: var(--cui-tertiary-bg); |
||||
|
} |
||||
|
|
||||
// Override Bootstrap variables here |
.icon { |
||||
@import "./variables"; |
fill: none !important; |
||||
|
} |
||||
|
|
||||
// Import Bootstrap |
.wrapper { |
||||
@import "bootstrap/scss/bootstrap"; |
width: 100%; |
||||
|
padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); |
||||
|
will-change: auto; |
||||
|
@include transition(padding .15s); |
||||
|
} |
||||
|
|
||||
// Custom styles |
.header > .container-fluid, |
||||
@import "./custom"; |
.sidebar-header { |
||||
|
min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list |
||||
|
} |
||||
|
|
||||
|
.sidebar-brand-full { |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
|
||||
|
.sidebar-header { |
||||
|
.nav-underline-border { |
||||
|
--cui-nav-underline-border-link-padding-x: 1rem; |
||||
|
--cui-nav-underline-border-gap: 0; |
||||
|
} |
||||
|
|
||||
|
.nav-link { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sidebar-toggler { |
||||
|
margin-inline-start: auto; |
||||
|
} |
||||
|
|
||||
|
.sidebar-narrow, |
||||
|
.sidebar-narrow-unfoldable:not(:hover) { |
||||
|
.sidebar-toggler { |
||||
|
margin-inline-end: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.header > .container-fluid + .container-fluid { |
||||
|
min-height: 3rem; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list |
||||
|
} |
||||
|
|
||||
|
@include color-mode(dark) { |
||||
|
body { |
||||
|
background-color: var(--cui-dark-bg-subtle); |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
--cui-footer-bg: var(--cui-body-bg); |
||||
|
} |
||||
|
} |
||||
|
|||||
@ -1,277 +1,288 @@ |
|||||
@import "../variables"; |
@import "@coreui/coreui/scss/variables"; |
||||
|
@import "@coreui/coreui/scss/mixins"; |
||||
@import "select2/dist/css/select2.min.css"; |
@import "select2/dist/css/select2.min.css"; |
||||
@import "select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css"; |
@import "select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css"; |
||||
|
|
||||
// Select2 Theme Overrides |
// Select2 Theme Overrides |
||||
.select2-container { |
.select2-container { |
||||
font-family: $font-family-base; |
font-family: var(--cui-font-sans-serif); |
||||
font-size: $font-size-base; |
font-size: var(--cui-body-font-size); |
||||
width: 100% !important; |
width: 100% !important; |
||||
|
|
||||
// Main selection box |
// Main selection box |
||||
.select2-selection--single, |
.select2-selection--single, |
||||
.select2-selection--multiple { |
.select2-selection--multiple { |
||||
font-family: $font-family-base; |
font-family: var(--cui-font-sans-serif); |
||||
font-size: $font-size-base; |
font-size: var(--cui-body-font-size); |
||||
border: 1px solid $border-color; |
border: 1px solid var(--cui-border-color); |
||||
border-radius: 0.5rem !important; |
border-radius: 0.5rem !important; |
||||
background-color: $white; |
background-color: var(--cui-body-bg); |
||||
transition: border-color 0.15s, box-shadow 0.15s; |
color: var(--cui-body-color); |
||||
|
transition: border-color 0.15s, box-shadow 0.15s; |
||||
|
|
||||
&:hover { |
&:hover { |
||||
border-color: $gray-600; |
border-color: var(--cui-border-color-translucent); |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
// Single select rendered value |
// Single select rendered value |
||||
.select2-selection--single { |
.select2-selection--single { |
||||
height: calc(1.5em + 0.75rem + 2px); |
height: calc(1.5em + 0.75rem + 2px); |
||||
|
|
||||
.select2-selection__rendered { |
.select2-selection__rendered { |
||||
color: $gray-800; |
color: var(--cui-body-color); |
||||
padding-left: 0.75rem; |
padding-left: 0.75rem; |
||||
padding-right: 2rem; |
padding-right: 2rem; |
||||
width: 90%; |
width: 90%; |
||||
line-height: calc(1.5em + 0.75rem); |
line-height: calc(1.5em + 0.75rem); |
||||
overflow: hidden !important; |
overflow: hidden !important; |
||||
text-overflow: ellipsis !important; |
text-overflow: ellipsis !important; |
||||
white-space: nowrap !important; |
white-space: nowrap !important; |
||||
display: block !important; |
display: block !important; |
||||
|
|
||||
// Increase padding right when clear button is present so text truncates before it |
// Increase padding right when clear button is present so text truncates before it |
||||
&:has(.select2-selection__clear) { |
&:has(.select2-selection__clear) { |
||||
padding-right: .3rem !important; |
padding-right: .3rem !important; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.select2-selection__placeholder { |
.select2-selection__placeholder { |
||||
color: $gray-600; |
color: var(--cui-secondary-color); |
||||
} |
} |
||||
|
|
||||
.select2-selection__clear { |
.select2-selection__clear { |
||||
position: absolute; |
position: absolute; |
||||
right: 1.8rem; |
right: 1.8rem; |
||||
top: 50%; |
top: 50%; |
||||
transform: translateY(-50%); |
transform: translateY(-50%); |
||||
z-index: 10; |
z-index: 10; |
||||
cursor: pointer; |
cursor: pointer; |
||||
color: $gray-500; |
color: var(--cui-secondary-color); |
||||
background: transparent; |
background: transparent; |
||||
padding: 0; |
padding: 0; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
height: 1rem; |
height: 1rem; |
||||
width: 1rem; |
width: 1rem; |
||||
line-height: 1; |
line-height: 1; |
||||
|
|
||||
&:hover { |
&:hover { |
||||
color: $danger; |
color: var(--cui-danger); |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.select2-selection__arrow { |
.select2-selection__arrow { |
||||
height: 100%; |
height: 100%; |
||||
right: 0.5rem; |
right: 0.5rem; |
||||
|
|
||||
b { |
b { |
||||
border-color: $gray-600 transparent transparent; |
// Native CSS properties to draw the carets cleanly in dark theme |
||||
border-width: 5px 4px 0; |
border-color: var(--cui-secondary-color) transparent transparent; |
||||
} |
border-width: 5px 4px 0; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
// Multiple select tags |
|
||||
.select2-selection--multiple { |
|
||||
padding: 0.25rem 0.5rem; |
|
||||
min-height: calc(1.5em + 0.75rem + 2px); |
|
||||
|
|
||||
.select2-selection__choice { |
|
||||
background-color: rgba($primary, 0.1); |
|
||||
border: 1px solid rgba($primary, 0.2); |
|
||||
border-radius: 0.375rem; |
|
||||
color: $primary; |
|
||||
font-size: $font-size-sm; |
|
||||
font-weight: 500; |
|
||||
padding: 0.1rem 0.5rem; |
|
||||
|
|
||||
.select2-selection__choice__remove { |
|
||||
color: $primary; |
|
||||
font-weight: 700; |
|
||||
margin-right: 4px; |
|
||||
|
|
||||
&:hover { |
// Multiple select tags |
||||
color: $danger; |
.select2-selection--multiple { |
||||
background: transparent; |
padding: 0.25rem 0.5rem; |
||||
|
min-height: calc(1.5em + 0.75rem + 2px); |
||||
|
|
||||
|
.select2-selection__choice { |
||||
|
background-color: color-mix(in srgb, var(--cui-primary) 10%, transparent); |
||||
|
border: 1px solid color-mix(in srgb, var(--cui-primary) 20%, transparent); |
||||
|
border-radius: 0.375rem; |
||||
|
color: var(--cui-primary); |
||||
|
font-size: var(--cui-font-size-sm); |
||||
|
font-weight: 500; |
||||
|
padding: 0.1rem 0.5rem; |
||||
|
|
||||
|
.select2-selection__choice__remove { |
||||
|
color: var(--cui-primary); |
||||
|
font-weight: 700; |
||||
|
margin-right: 4px; |
||||
|
|
||||
|
&:hover { |
||||
|
color: var(--cui-danger); |
||||
|
background: transparent; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
} |
|
||||
|
|
||||
.select2-search__field { |
.select2-search__field { |
||||
font-family: $font-family-base; |
font-family: var(--cui-font-sans-serif); |
||||
font-size: $font-size-sm; |
font-size: var(--cui-font-size-sm); |
||||
color: $gray-800; |
color: var(--cui-body-color); |
||||
|
background-color: transparent; |
||||
|
|
||||
&::placeholder { |
&::placeholder { |
||||
color: $gray-600; |
color: var(--cui-secondary-color); |
||||
} |
} |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
// Focused state |
// Focused state |
||||
&--open, |
&--open, |
||||
&--focus { |
&--focus { |
||||
|
.select2-selection--single, |
||||
.select2-selection--single, |
.select2-selection--multiple { |
||||
.select2-selection--multiple { |
border-color: var(--cui-primary) !important; |
||||
border-color: $primary !important; |
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent) !important; |
||||
box-shadow: 0 0 0 3px rgba($primary, 0.12) !important; |
outline: 0; |
||||
outline: 0; |
} |
||||
} |
|
||||
|
|
||||
.select2-selection--single .select2-selection__arrow b { |
.select2-selection--single .select2-selection__arrow b { |
||||
border-color: transparent transparent $primary; |
border-color: transparent transparent var(--cui-primary); |
||||
border-width: 0 4px 5px; |
border-width: 0 4px 5px; |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
} |
} |
||||
|
|
||||
// Support for form-control-sm |
// Support for form-control-sm |
||||
select.form-control-sm + .select2-container, |
select.form-control-sm + .select2-container, |
||||
select.form-select-sm + .select2-container, |
select.form-select-sm + .select2-container, |
||||
.select2-container--sm { |
.select2-container--sm { |
||||
.select2-selection--single, |
.select2-selection--single, |
||||
.select2-selection--multiple { |
.select2-selection--multiple { |
||||
border-radius: 0.375rem !important; |
border-radius: 0.375rem !important; |
||||
} |
|
||||
|
|
||||
.select2-selection--single { |
|
||||
height: calc(1.5em + 0.5rem + 2px) !important; |
|
||||
|
|
||||
.select2-selection__rendered { |
|
||||
padding-left: 0.5rem; |
|
||||
font-size: $font-size-sm; |
|
||||
line-height: calc(1.5em + 0.5rem) !important; |
|
||||
} |
} |
||||
|
|
||||
.select2-selection__clear { |
.select2-selection--single { |
||||
right: 0.5rem; |
height: calc(1.5em + 0.5rem + 2px) !important; |
||||
|
|
||||
|
.select2-selection__rendered { |
||||
|
padding-left: 0.5rem; |
||||
|
font-size: var(--cui-font-size-sm); |
||||
|
line-height: calc(1.5em + 0.5rem) !important; |
||||
|
} |
||||
|
|
||||
|
.select2-selection__clear { |
||||
|
right: 0.5rem; |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.select2-selection--multiple { |
.select2-selection--multiple { |
||||
min-height: calc(1.5em + 0.5rem + 2px) !important; |
min-height: calc(1.5em + 0.5rem + 2px) !important; |
||||
padding: 0.15rem 0.5rem; |
padding: 0.15rem 0.5rem; |
||||
|
|
||||
.select2-search__field { |
.select2-search__field { |
||||
font-size: $font-size-sm; |
font-size: var(--cui-font-size-sm); |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
} |
} |
||||
|
|
||||
// Dropdown panel |
// Dropdown panel |
||||
.select2-dropdown { |
.select2-dropdown { |
||||
font-family: $font-family-base; |
font-family: var(--cui-font-sans-serif); |
||||
font-size: $font-size-base; |
font-size: var(--cui-body-font-size); |
||||
border: 1px solid $border-color; |
border: 1px solid var(--cui-border-color); |
||||
border-radius: 0.5rem !important; |
border-radius: 0.5rem !important; |
||||
box-shadow: 0 8px 24px rgba($black, 0.15); |
background-color: var(--cui-body-bg); |
||||
overflow: hidden; |
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); |
||||
|
overflow: hidden; |
||||
// Search field inside dropdown |
|
||||
.select2-search--dropdown { |
// Search field inside dropdown |
||||
padding: 0.5rem; |
.select2-search--dropdown { |
||||
background: $gray-100; |
padding: 0.5rem; |
||||
border-bottom: 1px solid $border-color; |
background: var(--cui-tertiary-bg); |
||||
|
border-bottom: 1px solid var(--cui-border-color); |
||||
.select2-search__field { |
|
||||
font-family: $font-family-base; |
.select2-search__field { |
||||
font-size: $font-size-sm; |
font-family: var(--cui-font-sans-serif); |
||||
border: 1px solid $border-color; |
font-size: var(--cui-font-size-sm); |
||||
border-radius: 0.375rem; |
border: 1px solid var(--cui-border-color); |
||||
padding: 0.375rem 0.75rem; |
border-radius: 0.375rem; |
||||
color: $gray-800; |
padding: 0.375rem 0.75rem; |
||||
width: 100%; |
color: var(--cui-body-color); |
||||
background-color: $white; |
width: 100%; |
||||
|
background-color: var(--cui-body-bg); |
||||
&:focus { |
|
||||
border-color: $primary; |
&:focus { |
||||
outline: 0; |
border-color: var(--cui-primary); |
||||
box-shadow: 0 0 0 3px rgba($primary, 0.12); |
outline: 0; |
||||
} |
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent); |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
// Option list |
// Option list |
||||
.select2-results__options { |
.select2-results__options { |
||||
padding: 0.25rem 0; |
padding: 0.25rem 0; |
||||
max-height: 220px; |
max-height: 220px; |
||||
overflow-y: auto; |
overflow-y: auto; |
||||
|
|
||||
// Scrollbar |
// Scrollbar styling to respect theme |
||||
&::-webkit-scrollbar { |
&::-webkit-scrollbar { |
||||
width: 5px; |
width: 5px; |
||||
} |
} |
||||
|
|
||||
&::-webkit-scrollbar-track { |
&::-webkit-scrollbar-track { |
||||
background: $gray-100; |
background: var(--cui-tertiary-bg); |
||||
} |
} |
||||
|
|
||||
&::-webkit-scrollbar-thumb { |
&::-webkit-scrollbar-thumb { |
||||
background: $gray-300; |
background: var(--cui-border-color); |
||||
border-radius: 4px; |
border-radius: 4px; |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.select2-results__option { |
|
||||
font-size: $font-size-sm; |
|
||||
color: $gray-800; |
|
||||
padding: 0.45rem 0.85rem; |
|
||||
transition: background 0.12s; |
|
||||
|
|
||||
// Highlighted (hover or keyboard) |
|
||||
&--highlighted { |
|
||||
background-color: rgba($primary, 0.08) !important; |
|
||||
color: $primary !important; |
|
||||
} |
} |
||||
|
|
||||
// Selected |
.select2-results__option { |
||||
&[aria-selected='true'] { |
font-size: var(--cui-font-size-sm); |
||||
background-color: rgba($primary, 0.12); |
color: var(--cui-body-color); |
||||
color: $primary; |
background-color: transparent; |
||||
font-weight: 500; |
padding: 0.45rem 0.85rem; |
||||
} |
transition: background 0.12s; |
||||
|
|
||||
|
// Highlighted (hover or keyboard) |
||||
|
&--highlighted { |
||||
|
background-color: color-mix(in srgb, var(--cui-primary) 8%, transparent) !important; |
||||
|
color: var(--cui-primary) !important; |
||||
|
} |
||||
|
|
||||
// Disabled |
// Selected |
||||
&[aria-disabled='true'] { |
&[aria-selected='true'] { |
||||
color: $gray-600; |
background-color: color-mix(in srgb, var(--cui-primary) 12%, transparent); |
||||
cursor: not-allowed; |
color: var(--cui-primary); |
||||
} |
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
// Disabled |
||||
|
&[aria-disabled='true'] { |
||||
|
color: var(--cui-secondary-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
// Option group label |
// Option group label |
||||
&--group { |
&--group { |
||||
color: $gray-500; |
color: var(--cui-secondary-color); |
||||
font-size: $font-xs; |
font-size: var(--cui-font-size-sm); |
||||
font-weight: 600; |
font-weight: 600; |
||||
text-transform: uppercase; |
text-transform: uppercase; |
||||
letter-spacing: 0.04em; |
letter-spacing: 0.04em; |
||||
padding: 0.5rem 0.85rem 0.25rem; |
padding: 0.5rem 0.85rem 0.25rem; |
||||
cursor: default; |
cursor: default; |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
} |
} |
||||
|
|
||||
// Disabled state |
// Disabled state |
||||
.select2-container--disabled { |
.select2-container--disabled { |
||||
|
.select2-selection--single, |
||||
|
.select2-selection--multiple { |
||||
|
background-color: var(--cui-disabled-bg) !important; |
||||
|
border-color: var(--cui-border-color) !important; |
||||
|
cursor: not-allowed; |
||||
|
|
||||
.select2-selection--single, |
.select2-selection__rendered { |
||||
.select2-selection--multiple { |
color: var(--cui-disabled-color); |
||||
background-color: $gray-100 !important; |
} |
||||
border-color: $border-color !important; |
} |
||||
cursor: not-allowed; |
} |
||||
|
|
||||
.select2-selection__rendered { |
// Scoped CoreUI Theme adjustments for intense dark background shadows |
||||
color: $gray-600; |
[data-coreui-theme="dark"] { |
||||
|
.select2-dropdown { |
||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); |
||||
} |
} |
||||
} |
|
||||
} |
} |
||||
|
|||||
File diff suppressed because it is too large
@ -1,28 +1,64 @@ |
|||||
<nav id="topbar" class="navbar border-bottom fixed-top topbar bg-white px-3"> |
<header class="header header-sticky p-0 mb-4"> |
||||
<button id="toggleBtn" class="d-none d-lg-inline-flex btn btn-light btn-icon btn-sm"> |
<div class="container-fluid d-flex align-items-center"> |
||||
<x-tabler-menu-2 width="16" /> |
<button class="header-toggler" type="button" style="margin-inline-start: -14px"> |
||||
</button> |
<svg class="icon icon-lg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> |
||||
|
<path fill="var(--ci-primary-color, currentcolor)" d="M80 96h352v32H80zm0 144h352v32H80zm0 144h352v32H80z" class="ci-primary" /> |
||||
|
</svg> |
||||
|
</button> |
||||
|
|
||||
<!-- MOBILE --> |
|
||||
<button id="mobileBtn" class="btn btn-light btn-icon btn-sm d-lg-none me-2"> |
<ul class="header-nav"> |
||||
<x-tabler-menu-2 width="16" /> |
<li class="nav-item dropdown"> |
||||
</button> |
|
||||
<div> |
|
||||
<!-- Navbar nav --> |
|
||||
<ul class="list-unstyled d-flex align-items-center mb-0 gap-1"> |
|
||||
<!-- Bell icon --> |
|
||||
<li> |
|
||||
<livewire:layouts::notification /> |
<livewire:layouts::notification /> |
||||
</li> |
</li> |
||||
<!-- Language switcher --> |
<li class="nav-item py-1"> |
||||
<li> |
<div class="vr h-100 mx-2 text-body text-opacity-75"></div> |
||||
|
</li> |
||||
|
<li class="nav-item dropdown"> |
||||
<livewire:layouts::language-switcher /> |
<livewire:layouts::language-switcher /> |
||||
</li> |
</li> |
||||
<!-- Dropdown --> |
<li class="nav-item py-1"> |
||||
<li class="ms-3"> |
<div class="vr h-100 mx-2 text-body text-opacity-75"></div> |
||||
|
</li> |
||||
|
<li class="nav-item dropdown"> |
||||
|
<button class="btn btn-link nav-link py-2 px-2 d-flex align-items-center" type="button" aria-expanded="false" data-coreui-toggle="dropdown"> |
||||
|
<svg class="icon icon-lg theme-icon-active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> |
||||
|
<path fill="var(--ci-primary-color, currentcolor)" d="M256 16C123.452 16 16 123.452 16 256s107.452 240 240 240 240-107.452 240-240S388.548 16 256 16m-22 446.849a208.35 208.35 0 0 1-169.667-125.9c-.364-.859-.706-1.724-1.057-2.587L234 429.939Zm0-69.582L50.889 290.76A210 210 0 0 1 48 256q0-9.912.922-19.67L234 339.939Zm0-90L54.819 202.96a206 206 0 0 1 9.514-27.913Q67.1 168.5 70.3 162.191L234 253.934Zm0-86.015L86.914 134.819a209.4 209.4 0 0 1 22.008-25.9q3.72-3.72 7.6-7.228L234 166.027Zm0-87.708-89.648-49.093A206.95 206.95 0 0 1 234 49.151ZM464 256a207.775 207.775 0 0 1-198 207.761V48.239A207.79 207.79 0 0 1 464 256" class="ci-primary" /> |
||||
|
</svg> |
||||
|
</button> |
||||
|
<ul class="dropdown-menu dropdown-menu-end" style="--cui-dropdown-min-width: 8rem"> |
||||
|
<li> |
||||
|
<button class="dropdown-item d-flex align-items-center" type="button" data-coreui-theme-value="light"> |
||||
|
<svg class="icon icon-lg me-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> |
||||
|
<path fill="var(--ci-primary-color, currentcolor)" d="M256 104c-83.813 0-152 68.187-152 152s68.187 152 152 152 152-68.187 152-152-68.187-152-152-152m0 272a120 120 0 1 1 120-120 120.136 120.136 0 0 1-120 120M240 16h32v48h-32zm0 432h32v48h-32zm208-208h48v32h-48zm-432 0h48v32H16zm372.687 171.314 22.627-22.627 32 32-22.627 22.627zm-320-320 22.628-22.628 32 32-22.628 22.628zm-.002 329.375 32-32 22.628 22.626-32 32zm320.002-320.003 32-32 22.628 22.628-32 32z" class="ci-primary" /> |
||||
|
</svg> |
||||
|
Light |
||||
|
</button> |
||||
|
</li> |
||||
|
<li> |
||||
|
<button class="dropdown-item d-flex align-items-center" type="button" data-coreui-theme-value="dark"> |
||||
|
<svg class="icon icon-lg me-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> |
||||
|
<path fill="var(--ci-primary-color, currentcolor)" d="M268.279 496c-67.574 0-130.978-26.191-178.534-73.745S16 311.293 16 243.718A252.25 252.25 0 0 1 154.183 18.676a24.44 24.44 0 0 1 34.46 28.958 220.12 220.12 0 0 0 54.8 220.923A218.75 218.75 0 0 0 399.085 333.2a220.2 220.2 0 0 0 65.277-9.846 24.439 24.439 0 0 1 28.959 34.461A252.26 252.26 0 0 1 268.279 496M153.31 55.781A219.3 219.3 0 0 0 48 243.718C48 365.181 146.816 464 268.279 464a219.3 219.3 0 0 0 187.938-105.31 253 253 0 0 1-57.13 6.513 250.54 250.54 0 0 1-178.268-74.016 252.15 252.15 0 0 1-67.509-235.4Z" class="ci-primary" /> |
||||
|
</svg> |
||||
|
Dark |
||||
|
</button> |
||||
|
</li> |
||||
|
<li> |
||||
|
<button class="dropdown-item d-flex align-items-center active" type="button" data-coreui-theme-value="auto"> |
||||
|
<svg class="icon icon-lg me-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> |
||||
|
<path fill="var(--ci-primary-color, currentcolor)" d="M256 16C123.452 16 16 123.452 16 256s107.452 240 240 240 240-107.452 240-240S388.548 16 256 16m-22 446.849a208.35 208.35 0 0 1-169.667-125.9c-.364-.859-.706-1.724-1.057-2.587L234 429.939Zm0-69.582L50.889 290.76A210 210 0 0 1 48 256q0-9.912.922-19.67L234 339.939Zm0-90L54.819 202.96a206 206 0 0 1 9.514-27.913Q67.1 168.5 70.3 162.191L234 253.934Zm0-86.015L86.914 134.819a209.4 209.4 0 0 1 22.008-25.9q3.72-3.72 7.6-7.228L234 166.027Zm0-87.708-89.648-49.093A206.95 206.95 0 0 1 234 49.151ZM464 256a207.775 207.775 0 0 1-198 207.761V48.239A207.79 207.79 0 0 1 464 256" class="ci-primary" /> |
||||
|
</svg> |
||||
|
Auto |
||||
|
</button> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li class="nav-item py-1"> |
||||
|
<div class="vr h-100 mx-2 text-body text-opacity-75"></div> |
||||
|
</li> |
||||
|
<li class="nav-item dropdown"> |
||||
<livewire:layouts::profile-dropdown /> |
<livewire:layouts::profile-dropdown /> |
||||
</li> |
</li> |
||||
</ul> |
</ul> |
||||
</div> |
</div> |
||||
|
</header> |
||||
</nav> |
|
||||
|
|||||
Loading…
Reference in new issue