stuct fixes
This commit is contained in:
Mark Gregory
@@ -959,3 +959,257 @@ select:focus[data-flux-control] {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--wms-sidebar-width: 288px;
|
||||
--wms-sidebar-min-width: 224px;
|
||||
--wms-sidebar-max-width: 448px;
|
||||
--wms-sidebar-collapsed-width: 76px;
|
||||
|
||||
--wms-active-parent-blue: #4164dc;
|
||||
--wms-active-child-gold: #e7b72f;
|
||||
--wms-active-child-gold-dark: #e7b72f;
|
||||
}
|
||||
|
||||
.wms-app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="expanded"] .wms-app-shell {
|
||||
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-app-shell {
|
||||
grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.wms-sidebar {
|
||||
position: relative;
|
||||
width: var(--wms-sidebar-width);
|
||||
min-width: var(--wms-sidebar-width);
|
||||
max-width: var(--wms-sidebar-width);
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.wms-main-panel {
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
||||
width: var(--wms-sidebar-collapsed-width);
|
||||
min-width: var(--wms-sidebar-collapsed-width);
|
||||
max-width: var(--wms-sidebar-collapsed-width);
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4px;
|
||||
z-index: 30;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: rgba(148, 163, 184, 0.22);
|
||||
transition: background 160ms ease;
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer:hover::after,
|
||||
body.wms-sidebar-is-resizing .wms-sidebar-resizer::after {
|
||||
background: rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
body.wms-sidebar-is-resizing {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-nav {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-content > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-group-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
|
||||
position: relative;
|
||||
width: calc(100% - 1.25rem);
|
||||
min-height: 2.9rem;
|
||||
margin: 0.25rem 0.65rem 0.35rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
border-radius: 1.35rem;
|
||||
background: linear-gradient(135deg, #4667df 0%, #3f5fd2 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.035em;
|
||||
box-shadow: 0 8px 18px rgba(65, 100, 220, 0.22);
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button .wms-sidebar-icon {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.wms-sidebar-primary-link {
|
||||
margin-bottom: 0.35rem;
|
||||
min-height: 3.25rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wms-sidebar-primary-link span {
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
.wms-sidebar-link.is-active {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
width: calc(100% - 2.05rem);
|
||||
min-height: 2.85rem;
|
||||
margin: 0.2rem 1.25rem 0.25rem 0.8rem;
|
||||
padding: 0.6rem 0.95rem;
|
||||
border-radius: 1.65rem 0.75rem 0.75rem 1.65rem;
|
||||
background: var(--wms-active-child-gold);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 8px 18px rgba(231, 183, 47, 0.24);
|
||||
}
|
||||
|
||||
.wms-sidebar-link.is-active::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -1.05rem;
|
||||
z-index: -1;
|
||||
width: 1.75rem;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: var(--wms-active-child-gold);
|
||||
clip-path: polygon(0 0, 64% 0, 100% 50%, 64% 100%, 0 100%);
|
||||
border-radius: 0 0.9rem 0.9rem 0;
|
||||
}
|
||||
|
||||
.wms-sidebar-link.is-active .wms-sidebar-icon,
|
||||
.wms-sidebar-link.is-active i,
|
||||
.wms-sidebar-link.is-active span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-chevron,
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button,
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active {
|
||||
width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
margin: 0.25rem auto;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
padding: 0.65rem;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.wms-app-shell {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wms-sidebar,
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
||||
width: min(88vw, 22rem);
|
||||
min-width: min(88vw, 22rem);
|
||||
max-width: min(88vw, 22rem);
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
|
||||
width: calc(100% - 1.25rem);
|
||||
min-height: 2.85rem;
|
||||
margin: 0.25rem 0.65rem 0.35rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
}
|
||||
|
||||
.wms-sidebar-link.is-active {
|
||||
width: calc(100% - 2.05rem);
|
||||
min-height: 2.8rem;
|
||||
margin: 0.2rem 1.25rem 0.25rem 0.8rem;
|
||||
padding: 0.6rem 0.95rem;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
|
||||
@include('partials.head')
|
||||
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.toggle class="lg:hidden mr-2" icon="bars-2" inset="left" />
|
||||
|
||||
@@ -25,261 +25,8 @@
|
||||
</script>
|
||||
|
||||
<body class="min-h-screen bg-white font-sans text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
|
||||
<style>
|
||||
:root {
|
||||
--wms-sidebar-width: 288px;
|
||||
--wms-sidebar-min-width: 224px;
|
||||
--wms-sidebar-max-width: 448px;
|
||||
--wms-sidebar-collapsed-width: 76px;
|
||||
|
||||
--wms-active-parent-blue: #4164dc;
|
||||
--wms-active-child-gold: #e7b72f;
|
||||
--wms-active-child-gold-dark: #e7b72f;
|
||||
}
|
||||
|
||||
.wms-app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="expanded"] .wms-app-shell {
|
||||
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-app-shell {
|
||||
grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.wms-sidebar {
|
||||
position: relative;
|
||||
width: var(--wms-sidebar-width);
|
||||
min-width: var(--wms-sidebar-width);
|
||||
max-width: var(--wms-sidebar-width);
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.wms-main-panel {
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
||||
width: var(--wms-sidebar-collapsed-width);
|
||||
min-width: var(--wms-sidebar-collapsed-width);
|
||||
max-width: var(--wms-sidebar-collapsed-width);
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4px;
|
||||
z-index: 30;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: rgba(148, 163, 184, 0.22);
|
||||
transition: background 160ms ease;
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer:hover::after,
|
||||
body.wms-sidebar-is-resizing .wms-sidebar-resizer::after {
|
||||
background: rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
body.wms-sidebar-is-resizing {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-nav {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-content > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-group-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
|
||||
position: relative;
|
||||
width: calc(100% - 1.25rem);
|
||||
min-height: 2.9rem;
|
||||
margin: 0.25rem 0.65rem 0.35rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
border-radius: 1.35rem;
|
||||
background: linear-gradient(135deg, #4667df 0%, #3f5fd2 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.035em;
|
||||
box-shadow: 0 8px 18px rgba(65, 100, 220, 0.22);
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button .wms-sidebar-icon {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.wms-sidebar-primary-link {
|
||||
margin-bottom: 0.35rem;
|
||||
min-height: 3.25rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wms-sidebar-primary-link span {
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
.wms-sidebar-link.is-active {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
width: calc(100% - 2.05rem);
|
||||
min-height: 2.85rem;
|
||||
margin: 0.2rem 1.25rem 0.25rem 0.8rem;
|
||||
padding: 0.6rem 0.95rem;
|
||||
border-radius: 1.65rem 0.75rem 0.75rem 1.65rem;
|
||||
background: var(--wms-active-child-gold);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 8px 18px rgba(231, 183, 47, 0.24);
|
||||
}
|
||||
|
||||
.wms-sidebar-link.is-active::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -1.05rem;
|
||||
z-index: -1;
|
||||
width: 1.75rem;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: var(--wms-active-child-gold);
|
||||
clip-path: polygon(0 0, 64% 0, 100% 50%, 64% 100%, 0 100%);
|
||||
border-radius: 0 0.9rem 0.9rem 0;
|
||||
}
|
||||
|
||||
.wms-sidebar-link.is-active .wms-sidebar-icon,
|
||||
.wms-sidebar-link.is-active i,
|
||||
.wms-sidebar-link.is-active span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-chevron,
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button,
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active {
|
||||
width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
margin: 0.25rem auto;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
padding: 0.65rem;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.wms-app-shell {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wms-sidebar,
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
||||
width: min(88vw, 22rem);
|
||||
min-width: min(88vw, 22rem);
|
||||
max-width: min(88vw, 22rem);
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
|
||||
width: calc(100% - 1.25rem);
|
||||
min-height: 2.85rem;
|
||||
margin: 0.25rem 0.65rem 0.35rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
}
|
||||
|
||||
.wms-sidebar-link.is-active {
|
||||
width: calc(100% - 2.05rem);
|
||||
min-height: 2.8rem;
|
||||
margin: 0.2rem 1.25rem 0.25rem 0.8rem;
|
||||
padding: 0.6rem 0.95rem;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@vite(['resources/css/app.css'])
|
||||
|
||||
<div class="wms-app-shell" data-wms-shell data-wms-mobile-shell>
|
||||
<button type="button" class="wms-mobile-overlay" data-wms-mobile-close aria-label="{{ __('Close navigation menu') }}"></button>
|
||||
|
||||
Reference in New Issue
Block a user