Syarif Ubaidillah
2 weeks ago
28 changed files with 2501 additions and 1216 deletions
@ -1,11 +1,11 @@ |
|||
{ |
|||
"mcpServers": { |
|||
"laravel-boost": { |
|||
"command": "php", |
|||
"args": [ |
|||
"artisan", |
|||
"boost:mcp" |
|||
] |
|||
} |
|||
"mcpServers": { |
|||
"laravel-boost": { |
|||
"command": "php", |
|||
"args": [ |
|||
"artisan", |
|||
"boost:mcp" |
|||
] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,4 +1,94 @@ |
|||
import * as bootstrap from 'bootstrap'; |
|||
import './sidebar.js' |
|||
import * as coreui from '@coreui/coreui'; |
|||
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 |
|||
@import "bootstrap/scss/functions"; |
|||
body { |
|||
background-color: var(--cui-tertiary-bg); |
|||
} |
|||
|
|||
// Override Bootstrap variables here |
|||
@import "./variables"; |
|||
.icon { |
|||
fill: none !important; |
|||
} |
|||
|
|||
// Import Bootstrap |
|||
@import "bootstrap/scss/bootstrap"; |
|||
.wrapper { |
|||
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 |
|||
@import "./custom"; |
|||
.header > .container-fluid, |
|||
.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-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css"; |
|||
|
|||
// Select2 Theme Overrides |
|||
.select2-container { |
|||
font-family: $font-family-base; |
|||
font-size: $font-size-base; |
|||
width: 100% !important; |
|||
|
|||
// Main selection box |
|||
.select2-selection--single, |
|||
.select2-selection--multiple { |
|||
font-family: $font-family-base; |
|||
font-size: $font-size-base; |
|||
border: 1px solid $border-color; |
|||
border-radius: 0.5rem !important; |
|||
background-color: $white; |
|||
transition: border-color 0.15s, box-shadow 0.15s; |
|||
font-family: var(--cui-font-sans-serif); |
|||
font-size: var(--cui-body-font-size); |
|||
width: 100% !important; |
|||
|
|||
// Main selection box |
|||
.select2-selection--single, |
|||
.select2-selection--multiple { |
|||
font-family: var(--cui-font-sans-serif); |
|||
font-size: var(--cui-body-font-size); |
|||
border: 1px solid var(--cui-border-color); |
|||
border-radius: 0.5rem !important; |
|||
background-color: var(--cui-body-bg); |
|||
color: var(--cui-body-color); |
|||
transition: border-color 0.15s, box-shadow 0.15s; |
|||
|
|||
&:hover { |
|||
border-color: $gray-600; |
|||
&:hover { |
|||
border-color: var(--cui-border-color-translucent); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Single select rendered value |
|||
.select2-selection--single { |
|||
height: calc(1.5em + 0.75rem + 2px); |
|||
|
|||
.select2-selection__rendered { |
|||
color: $gray-800; |
|||
padding-left: 0.75rem; |
|||
padding-right: 2rem; |
|||
width: 90%; |
|||
line-height: calc(1.5em + 0.75rem); |
|||
overflow: hidden !important; |
|||
text-overflow: ellipsis !important; |
|||
white-space: nowrap !important; |
|||
display: block !important; |
|||
|
|||
// Increase padding right when clear button is present so text truncates before it |
|||
&:has(.select2-selection__clear) { |
|||
padding-right: .3rem !important; |
|||
} |
|||
} |
|||
.select2-selection--single { |
|||
height: calc(1.5em + 0.75rem + 2px); |
|||
|
|||
.select2-selection__rendered { |
|||
color: var(--cui-body-color); |
|||
padding-left: 0.75rem; |
|||
padding-right: 2rem; |
|||
width: 90%; |
|||
line-height: calc(1.5em + 0.75rem); |
|||
overflow: hidden !important; |
|||
text-overflow: ellipsis !important; |
|||
white-space: nowrap !important; |
|||
display: block !important; |
|||
|
|||
// Increase padding right when clear button is present so text truncates before it |
|||
&:has(.select2-selection__clear) { |
|||
padding-right: .3rem !important; |
|||
} |
|||
} |
|||
|
|||
.select2-selection__placeholder { |
|||
color: $gray-600; |
|||
} |
|||
.select2-selection__placeholder { |
|||
color: var(--cui-secondary-color); |
|||
} |
|||
|
|||
.select2-selection__clear { |
|||
position: absolute; |
|||
right: 1.8rem; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
z-index: 10; |
|||
cursor: pointer; |
|||
color: $gray-500; |
|||
background: transparent; |
|||
padding: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 1rem; |
|||
width: 1rem; |
|||
line-height: 1; |
|||
|
|||
&:hover { |
|||
color: $danger; |
|||
} |
|||
} |
|||
.select2-selection__clear { |
|||
position: absolute; |
|||
right: 1.8rem; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
z-index: 10; |
|||
cursor: pointer; |
|||
color: var(--cui-secondary-color); |
|||
background: transparent; |
|||
padding: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 1rem; |
|||
width: 1rem; |
|||
line-height: 1; |
|||
|
|||
&:hover { |
|||
color: var(--cui-danger); |
|||
} |
|||
} |
|||
|
|||
.select2-selection__arrow { |
|||
height: 100%; |
|||
right: 0.5rem; |
|||
.select2-selection__arrow { |
|||
height: 100%; |
|||
right: 0.5rem; |
|||
|
|||
b { |
|||
border-color: $gray-600 transparent transparent; |
|||
border-width: 5px 4px 0; |
|||
} |
|||
b { |
|||
// Native CSS properties to draw the carets cleanly in dark theme |
|||
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 { |
|||
color: $danger; |
|||
background: transparent; |
|||
// Multiple select tags |
|||
.select2-selection--multiple { |
|||
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 { |
|||
font-family: $font-family-base; |
|||
font-size: $font-size-sm; |
|||
color: $gray-800; |
|||
.select2-search__field { |
|||
font-family: var(--cui-font-sans-serif); |
|||
font-size: var(--cui-font-size-sm); |
|||
color: var(--cui-body-color); |
|||
background-color: transparent; |
|||
|
|||
&::placeholder { |
|||
color: $gray-600; |
|||
} |
|||
&::placeholder { |
|||
color: var(--cui-secondary-color); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Focused state |
|||
&--open, |
|||
&--focus { |
|||
|
|||
.select2-selection--single, |
|||
.select2-selection--multiple { |
|||
border-color: $primary !important; |
|||
box-shadow: 0 0 0 3px rgba($primary, 0.12) !important; |
|||
outline: 0; |
|||
} |
|||
// Focused state |
|||
&--open, |
|||
&--focus { |
|||
.select2-selection--single, |
|||
.select2-selection--multiple { |
|||
border-color: var(--cui-primary) !important; |
|||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent) !important; |
|||
outline: 0; |
|||
} |
|||
|
|||
.select2-selection--single .select2-selection__arrow b { |
|||
border-color: transparent transparent $primary; |
|||
border-width: 0 4px 5px; |
|||
.select2-selection--single .select2-selection__arrow b { |
|||
border-color: transparent transparent var(--cui-primary); |
|||
border-width: 0 4px 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Support for form-control-sm |
|||
select.form-control-sm + .select2-container, |
|||
select.form-select-sm + .select2-container, |
|||
.select2-container--sm { |
|||
.select2-selection--single, |
|||
.select2-selection--multiple { |
|||
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--single, |
|||
.select2-selection--multiple { |
|||
border-radius: 0.375rem !important; |
|||
} |
|||
|
|||
.select2-selection__clear { |
|||
right: 0.5rem; |
|||
.select2-selection--single { |
|||
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 { |
|||
min-height: calc(1.5em + 0.5rem + 2px) !important; |
|||
padding: 0.15rem 0.5rem; |
|||
.select2-selection--multiple { |
|||
min-height: calc(1.5em + 0.5rem + 2px) !important; |
|||
padding: 0.15rem 0.5rem; |
|||
|
|||
.select2-search__field { |
|||
font-size: $font-size-sm; |
|||
.select2-search__field { |
|||
font-size: var(--cui-font-size-sm); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Dropdown panel |
|||
.select2-dropdown { |
|||
font-family: $font-family-base; |
|||
font-size: $font-size-base; |
|||
border: 1px solid $border-color; |
|||
border-radius: 0.5rem !important; |
|||
box-shadow: 0 8px 24px rgba($black, 0.15); |
|||
overflow: hidden; |
|||
|
|||
// Search field inside dropdown |
|||
.select2-search--dropdown { |
|||
padding: 0.5rem; |
|||
background: $gray-100; |
|||
border-bottom: 1px solid $border-color; |
|||
|
|||
.select2-search__field { |
|||
font-family: $font-family-base; |
|||
font-size: $font-size-sm; |
|||
border: 1px solid $border-color; |
|||
border-radius: 0.375rem; |
|||
padding: 0.375rem 0.75rem; |
|||
color: $gray-800; |
|||
width: 100%; |
|||
background-color: $white; |
|||
|
|||
&:focus { |
|||
border-color: $primary; |
|||
outline: 0; |
|||
box-shadow: 0 0 0 3px rgba($primary, 0.12); |
|||
} |
|||
font-family: var(--cui-font-sans-serif); |
|||
font-size: var(--cui-body-font-size); |
|||
border: 1px solid var(--cui-border-color); |
|||
border-radius: 0.5rem !important; |
|||
background-color: var(--cui-body-bg); |
|||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); |
|||
overflow: hidden; |
|||
|
|||
// Search field inside dropdown |
|||
.select2-search--dropdown { |
|||
padding: 0.5rem; |
|||
background: var(--cui-tertiary-bg); |
|||
border-bottom: 1px solid var(--cui-border-color); |
|||
|
|||
.select2-search__field { |
|||
font-family: var(--cui-font-sans-serif); |
|||
font-size: var(--cui-font-size-sm); |
|||
border: 1px solid var(--cui-border-color); |
|||
border-radius: 0.375rem; |
|||
padding: 0.375rem 0.75rem; |
|||
color: var(--cui-body-color); |
|||
width: 100%; |
|||
background-color: var(--cui-body-bg); |
|||
|
|||
&:focus { |
|||
border-color: var(--cui-primary); |
|||
outline: 0; |
|||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Option list |
|||
.select2-results__options { |
|||
padding: 0.25rem 0; |
|||
max-height: 220px; |
|||
overflow-y: auto; |
|||
// Option list |
|||
.select2-results__options { |
|||
padding: 0.25rem 0; |
|||
max-height: 220px; |
|||
overflow-y: auto; |
|||
|
|||
// Scrollbar |
|||
&::-webkit-scrollbar { |
|||
width: 5px; |
|||
} |
|||
// Scrollbar styling to respect theme |
|||
&::-webkit-scrollbar { |
|||
width: 5px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-track { |
|||
background: $gray-100; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
background: var(--cui-tertiary-bg); |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: $gray-300; |
|||
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; |
|||
&::-webkit-scrollbar-thumb { |
|||
background: var(--cui-border-color); |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
|
|||
// Selected |
|||
&[aria-selected='true'] { |
|||
background-color: rgba($primary, 0.12); |
|||
color: $primary; |
|||
font-weight: 500; |
|||
} |
|||
.select2-results__option { |
|||
font-size: var(--cui-font-size-sm); |
|||
color: var(--cui-body-color); |
|||
background-color: transparent; |
|||
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 |
|||
&[aria-disabled='true'] { |
|||
color: $gray-600; |
|||
cursor: not-allowed; |
|||
} |
|||
// Selected |
|||
&[aria-selected='true'] { |
|||
background-color: color-mix(in srgb, var(--cui-primary) 12%, transparent); |
|||
color: var(--cui-primary); |
|||
font-weight: 500; |
|||
} |
|||
|
|||
// Disabled |
|||
&[aria-disabled='true'] { |
|||
color: var(--cui-secondary-color); |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
// Option group label |
|||
&--group { |
|||
color: $gray-500; |
|||
font-size: $font-xs; |
|||
font-weight: 600; |
|||
text-transform: uppercase; |
|||
letter-spacing: 0.04em; |
|||
padding: 0.5rem 0.85rem 0.25rem; |
|||
cursor: default; |
|||
// Option group label |
|||
&--group { |
|||
color: var(--cui-secondary-color); |
|||
font-size: var(--cui-font-size-sm); |
|||
font-weight: 600; |
|||
text-transform: uppercase; |
|||
letter-spacing: 0.04em; |
|||
padding: 0.5rem 0.85rem 0.25rem; |
|||
cursor: default; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Disabled state |
|||
.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--multiple { |
|||
background-color: $gray-100 !important; |
|||
border-color: $border-color !important; |
|||
cursor: not-allowed; |
|||
.select2-selection__rendered { |
|||
color: var(--cui-disabled-color); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.select2-selection__rendered { |
|||
color: $gray-600; |
|||
// Scoped CoreUI Theme adjustments for intense dark background shadows |
|||
[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"> |
|||
<button id="toggleBtn" class="d-none d-lg-inline-flex btn btn-light btn-icon btn-sm"> |
|||
<x-tabler-menu-2 width="16" /> |
|||
</button> |
|||
<header class="header header-sticky p-0 mb-4"> |
|||
<div class="container-fluid d-flex align-items-center"> |
|||
<button class="header-toggler" type="button" style="margin-inline-start: -14px"> |
|||
<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"> |
|||
<x-tabler-menu-2 width="16" /> |
|||
</button> |
|||
<div> |
|||
<!-- Navbar nav --> |
|||
<ul class="list-unstyled d-flex align-items-center mb-0 gap-1"> |
|||
<!-- Bell icon --> |
|||
<li> |
|||
|
|||
<ul class="header-nav"> |
|||
<li class="nav-item dropdown"> |
|||
<livewire:layouts::notification /> |
|||
</li> |
|||
<!-- Language switcher --> |
|||
<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::language-switcher /> |
|||
</li> |
|||
<!-- Dropdown --> |
|||
<li class="ms-3"> |
|||
<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"> |
|||
<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 /> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
</nav> |
|||
</header> |
|||
|
|||
Loading…
Reference in new issue