✨ (bootsier): Añade AdminLTE 4 y Bootstrap Icons
Integra AdminLTE 4.0.0 (SCSS y JS), Bootstrap Icons 1.13.1 y las fuentes Source Sans 3 VF; reorganiza los SCSS del tema con la nueva estructura de *pagetop-build*.
This commit is contained in:
parent
f27790c3a2
commit
1bd97d5705
160 changed files with 13401 additions and 133 deletions
|
|
@ -0,0 +1,337 @@
|
|||
/* ==========================================================================
|
||||
AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
|
||||
========================================================================== */
|
||||
|
||||
/* Skip Links - WCAG 2.4.1: Bypass Blocks */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 6px;
|
||||
z-index: 999999;
|
||||
padding: 8px 16px;
|
||||
font-weight: 600;
|
||||
color: var(--bs-white);
|
||||
text-decoration: none;
|
||||
background: var(--bs-primary);
|
||||
|
||||
&:focus {
|
||||
top: 0;
|
||||
outline: 3px solid var(--bs-warning);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-white);
|
||||
text-decoration: none;
|
||||
background: var(--bs-primary-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Focus Indicators - WCAG 2.4.7: Focus Visible */
|
||||
.focus-enhanced {
|
||||
&:focus {
|
||||
outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode Support */
|
||||
@media (prefers-contrast: high) {
|
||||
.card {
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: currentcolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion Support - WCAG 2.3.3: Animation from Interactions */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-duration: .01ms !important;
|
||||
animation-duration: .01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 1 !important;
|
||||
/* stylelint-disable-next-line property-disallowed-list */
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* stylelint-disable-next-line property-disallowed-list */
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.modal.fade .modal-dialog {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Screen Reader Only Content */
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.sr-only-focusable:focus {
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
padding: inherit !important;
|
||||
margin: inherit !important;
|
||||
overflow: visible !important;
|
||||
clip: auto !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
/* Focus Trap Utilities */
|
||||
.focus-trap {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessible Color Combinations - WCAG 1.4.3: Contrast (Minimum) */
|
||||
.text-accessible-primary {
|
||||
color: #003d82; /* 4.5:1 contrast on white */
|
||||
}
|
||||
|
||||
.text-accessible-success {
|
||||
color: #0f5132; /* 4.5:1 contrast on white */
|
||||
}
|
||||
|
||||
.text-accessible-danger {
|
||||
color: #842029; /* 4.5:1 contrast on white */
|
||||
}
|
||||
|
||||
.text-accessible-warning {
|
||||
color: #664d03; /* 4.5:1 contrast on white */
|
||||
}
|
||||
|
||||
/* ARIA Live Regions */
|
||||
.live-region {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
|
||||
&.live-region-visible {
|
||||
position: static;
|
||||
left: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Error States - WCAG 3.3.1: Error Identification */
|
||||
.form-control.is-invalid {
|
||||
border-color: var(--bs-danger);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--bs-danger);
|
||||
box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
&[role="alert"] {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* Target Size - WCAG 2.5.8: Target Size (Minimum) */
|
||||
.touch-target {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
|
||||
&.touch-target-small {
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table Accessibility */
|
||||
.table-accessible {
|
||||
th {
|
||||
font-weight: 600;
|
||||
background-color: var(--bs-secondary-bg);
|
||||
|
||||
&[scope="col"] {
|
||||
border-bottom: 2px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
&[scope="row"] {
|
||||
border-right: 2px solid var(--bs-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
caption {
|
||||
padding: .75rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-secondary);
|
||||
text-align: left;
|
||||
caption-side: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation Landmarks */
|
||||
nav[role="navigation"] {
|
||||
&:not([aria-label]):not([aria-labelledby]) {
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
content: "Navigation";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Form Fieldset Styling */
|
||||
fieldset {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--bs-border-color);
|
||||
|
||||
legend {
|
||||
padding: 0 .5rem;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
.loading[aria-busy="true"] {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
content: "";
|
||||
border: 2px solid var(--bs-primary);
|
||||
border-top-color: transparent;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
&::after {
|
||||
border-top-color: var(--bs-primary);
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Mode Accessibility */
|
||||
[data-bs-theme="dark"] {
|
||||
.text-accessible-primary {
|
||||
color: #6ea8fe;
|
||||
}
|
||||
|
||||
.text-accessible-success {
|
||||
color: #75b798;
|
||||
}
|
||||
|
||||
.text-accessible-danger {
|
||||
color: #f1aeb5;
|
||||
}
|
||||
|
||||
.text-accessible-warning {
|
||||
color: #ffda6a;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Accessibility */
|
||||
@media print {
|
||||
.skip-link,
|
||||
.btn,
|
||||
.nav-link {
|
||||
color: #000 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid #000 !important;
|
||||
}
|
||||
|
||||
a[href^="http"]::after {
|
||||
font-size: .8em;
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
/* Print Layout Fix - Ensure sidebar and main content are both visible */
|
||||
.app-wrapper {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto 1fr auto !important;
|
||||
grid-template-columns: auto 1fr !important;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: static !important;
|
||||
display: block !important;
|
||||
min-width: 200px !important;
|
||||
max-width: 200px !important;
|
||||
max-height: none !important;
|
||||
margin-left: 0 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
width: auto !important;
|
||||
max-width: 100% !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.app-content {
|
||||
padding: $lte-content-padding-y $lte-content-padding-x;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
//
|
||||
// Core: Main Footer
|
||||
//
|
||||
|
||||
.app-footer {
|
||||
grid-area: #{$lte-prefix}app-footer;
|
||||
width: inherit;
|
||||
max-width: 100vw;
|
||||
min-height: 3rem;
|
||||
padding: $lte-app-footer-padding;
|
||||
color: $lte-app-footer-color;
|
||||
background-color: $lte-app-footer-bg;
|
||||
border-top: $lte-app-footer-border-top;
|
||||
@include transition($lte-transition-speed $lte-transition-fn);
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
.app-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: $lte-zindex-fixed-footer;
|
||||
}
|
||||
|
||||
// When layout-fixed is used, app-main has overflow: auto which prevents
|
||||
// position: sticky from working on the footer. Ensure the grid keeps the
|
||||
// footer pinned at the bottom while app-main scrolls independently.
|
||||
&.layout-fixed {
|
||||
.app-main {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
//
|
||||
// Core: Main Header
|
||||
//
|
||||
|
||||
.app-header {
|
||||
z-index: $lte-zindex-app-header;
|
||||
grid-area: #{$lte-prefix}app-header;
|
||||
max-width: 100vw;
|
||||
border-bottom: $lte-app-header-bottom-border;
|
||||
@include transition($lte-transition-speed $lte-transition-fn);
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
height: $nav-link-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar badge
|
||||
.navbar-badge {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 5px;
|
||||
padding: 2px 4px;
|
||||
font-size: .6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: $lte-zindex-fixed-header;
|
||||
}
|
||||
|
||||
// Fixes #6020: when only `fixed-header` is used (without `layout-fixed`),
|
||||
// the sidebar — including its branding — used to scroll with the page
|
||||
// because nothing made it sticky. Pin the sidebar so the brand and menu
|
||||
// stay visible while the page content scrolls beneath the fixed header.
|
||||
// Only applied on `sidebar-expand-*` breakpoints, since the mobile sidebar
|
||||
// is an off-canvas overlay that handles its own positioning.
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&.sidebar-expand#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
.app-sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
max-height: 100vh;
|
||||
|
||||
.sidebar-wrapper {
|
||||
height: subtract(100vh, add($lte-app-header-height, 1px));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
.app-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: #{$lte-prefix}app-main;
|
||||
max-width: 100vw;
|
||||
padding-bottom: $lte-app-main-padding-bottom;
|
||||
@include transition($lte-transition-speed $lte-transition-fn);
|
||||
|
||||
.app-content-header {
|
||||
padding: 1rem $lte-content-padding-x;
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 2.5rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-top-area,
|
||||
.app-content-bottom-area {
|
||||
color: $lte-app-content-bottom-area-color;
|
||||
background-color: $lte-app-content-bottom-area-bg;
|
||||
}
|
||||
|
||||
.app-content-top-area {
|
||||
padding: $lte-app-content-top-area-padding-y $lte-app-content-top-area-padding-x;
|
||||
border-bottom: $lte-app-content-top-area-top-border;
|
||||
}
|
||||
|
||||
.app-content-bottom-area {
|
||||
padding: $lte-app-content-bottom-area-padding-y $lte-app-content-bottom-area-padding-x;
|
||||
margin-top: auto;
|
||||
margin-bottom: $lte-app-content-bottom-area-margin-bottom;
|
||||
border-top: $lte-app-content-bottom-area-top-border;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,619 @@
|
|||
.app-sidebar {
|
||||
--#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg};
|
||||
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
|
||||
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color};
|
||||
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color};
|
||||
--#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg};
|
||||
--#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color};
|
||||
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg};
|
||||
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color};
|
||||
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color};
|
||||
--#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg};
|
||||
--#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color};
|
||||
--#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg};
|
||||
--#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
|
||||
|
||||
z-index: $lte-zindex-sidebar;
|
||||
grid-area: #{$lte-prefix}app-sidebar;
|
||||
min-width: var(--#{$lte-prefix}sidebar-width);
|
||||
max-width: var(--#{$lte-prefix}sidebar-width);
|
||||
@include transition($lte-sidebar-transition);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $lte-app-header-height;
|
||||
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
|
||||
overflow: hidden;
|
||||
font-size: $navbar-brand-font-size;
|
||||
white-space: nowrap;
|
||||
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
|
||||
@include transition(width $lte-transition-speed $lte-transition-fn);
|
||||
|
||||
.brand-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
.brand-image {
|
||||
float: left;
|
||||
width: auto;
|
||||
max-height: 33px;
|
||||
line-height: .8;
|
||||
}
|
||||
|
||||
.brand-image-xs {
|
||||
float: left;
|
||||
width: auto;
|
||||
max-height: 33px;
|
||||
margin-top: -.1rem;
|
||||
line-height: .8;
|
||||
}
|
||||
|
||||
.brand-image-xl {
|
||||
width: auto;
|
||||
max-height: 40px;
|
||||
line-height: .8;
|
||||
|
||||
&.single {
|
||||
margin-top: -.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
margin-left: .5rem;
|
||||
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
|
||||
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
|
||||
&:hover {
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
padding-top: $lte-sidebar-padding-y;
|
||||
padding-right: $lte-sidebar-padding-x;
|
||||
padding-bottom: $lte-sidebar-padding-y;
|
||||
padding-left: $lte-sidebar-padding-x;
|
||||
overscroll-behavior: contain;
|
||||
@include scrollbar-color-gray();
|
||||
@include scrollbar-width-thin();
|
||||
|
||||
.nav-item {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.5rem;
|
||||
max-width: 1.5rem;
|
||||
}
|
||||
|
||||
// Sidebar Menu. First level links
|
||||
.sidebar-menu > .nav-item {
|
||||
// links
|
||||
> .nav-link {
|
||||
color: var(--#{$lte-prefix}sidebar-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$lte-prefix}sidebar-hover-color);
|
||||
background-color: var(--#{$lte-prefix}sidebar-hover-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--#{$lte-prefix}sidebar-menu-active-color);
|
||||
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Open state
|
||||
&.menu-open > .nav-link {
|
||||
color: var(--#{$lte-prefix}sidebar-hover-color);
|
||||
background-color: var(--#{$lte-prefix}sidebar-hover-bg);
|
||||
|
||||
&.active {
|
||||
color: var(--#{$lte-prefix}sidebar-menu-active-color);
|
||||
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// First Level Submenu
|
||||
> .nav-treeview {
|
||||
background-color: var(--#{$lte-prefix}sidebar-submenu-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Section Heading
|
||||
.nav-header {
|
||||
display: inline;
|
||||
overflow: hidden;
|
||||
color: var(--#{$lte-prefix}sidebar-header-color);
|
||||
text-overflow: ellipsis;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
// All links within the sidebar menu
|
||||
a {
|
||||
color: var(--#{$lte-prefix}sidebar-color);
|
||||
}
|
||||
|
||||
// All submenus
|
||||
.nav-treeview {
|
||||
> .nav-item {
|
||||
> .nav-link {
|
||||
color: var(--#{$lte-prefix}sidebar-submenu-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$lte-prefix}sidebar-submenu-hover-color);
|
||||
background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--#{$lte-prefix}sidebar-submenu-active-color);
|
||||
background-color: var(--#{$lte-prefix}sidebar-submenu-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar navigation menu
|
||||
.sidebar-menu {
|
||||
// All levels
|
||||
.nav-item {
|
||||
> .nav-link {
|
||||
margin-bottom: .2rem;
|
||||
|
||||
.nav-arrow {
|
||||
@include transition(transform $lte-transition-fn $lte-transition-speed);
|
||||
transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All levels
|
||||
.nav-link > .nav-badge,
|
||||
.nav-link > p > .nav-badge {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.nav-link > .nav-arrow,
|
||||
.nav-link > p > .nav-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@include transition(width $lte-transition-fn $lte-transition-speed);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
padding-left: .5rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
|
||||
font-size: .9rem;
|
||||
@include transition(width $lte-transition-fn $lte-transition-speed);
|
||||
}
|
||||
|
||||
// Tree view menu
|
||||
.nav-treeview {
|
||||
display: none;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.menu-open {
|
||||
> .nav-treeview {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .nav-link {
|
||||
.nav-arrow {
|
||||
transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override: ensure badges/arrows are aligned to the end (right in LTR, left in RTL)
|
||||
.nav-link > .nav-badge,
|
||||
.nav-link > p > .nav-badge,
|
||||
.nav-link > .nav-arrow,
|
||||
.nav-link > p > .nav-arrow {
|
||||
right: 1rem !important; // place at end in LTR
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-indent {
|
||||
.nav-treeview {
|
||||
padding-left: $lte-sidebar-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-compact.nav-indent {
|
||||
.nav-treeview {
|
||||
padding-left: 0;
|
||||
|
||||
.nav-item {
|
||||
padding-left: $lte-sidebar-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse.nav-indent {
|
||||
.app-sidebar:hover {
|
||||
.nav-treeview {
|
||||
padding-left: 0;
|
||||
|
||||
.nav-item {
|
||||
padding-left: $lte-sidebar-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapse {
|
||||
&.nav-compact.nav-indent {
|
||||
.nav-treeview {
|
||||
.nav-item {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-compact .nav-link {
|
||||
@include border-radius(0);
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// A fix for text overflow while transitioning from sidebar mini to full sidebar
|
||||
.sidebar-menu,
|
||||
.sidebar-menu > .nav-header,
|
||||
.sidebar-menu .nav-link {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Logo style
|
||||
.logo-xs,
|
||||
.logo-xl {
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
||||
&.brand-image-xs {
|
||||
top: 12px;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
&.brand-image-xl {
|
||||
top: 6px;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
&.brand-image-xl {
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
&.logo-switch {
|
||||
&::before {
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse {
|
||||
.app-sidebar {
|
||||
min-width: $lte-sidebar-mini-width;
|
||||
max-width: $lte-sidebar-mini-width;
|
||||
}
|
||||
|
||||
// Make the sidebar headers
|
||||
.sidebar-menu .nav-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
.nav-link {
|
||||
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.nav-badge,
|
||||
.nav-arrow {
|
||||
display: none;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-menu .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl,
|
||||
.nav-arrow {
|
||||
visibility: hidden;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
|
||||
.logo-xs {
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&:not(.sidebar-without-hover) {
|
||||
.app-sidebar:hover {
|
||||
min-width: var(--#{$lte-prefix}sidebar-width);
|
||||
max-width: var(--#{$lte-prefix}sidebar-width);
|
||||
|
||||
.sidebar-menu .nav-header {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sidebar-menu .nav-link {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sidebar-menu .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
visibility: visible;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: inline;
|
||||
max-width: inherit;
|
||||
margin-left: .5rem;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.nav-badge,
|
||||
.nav-arrow {
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
animation-delay: $lte-transition-speed;
|
||||
}
|
||||
|
||||
.nav-link p {
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
visibility: hidden;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapse:not(.sidebar-mini) {
|
||||
.app-sidebar {
|
||||
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
/* stylelint-disable-next-line scss/selector-no-union-class-name */
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
&.layout-fixed {
|
||||
.app-main-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.app-sidebar-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.app-main {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
max-height: 100vh;
|
||||
|
||||
.sidebar-wrapper {
|
||||
height: subtract(100vh, add($lte-app-header-height, 1px));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-open {
|
||||
.nav-link > .nav-badge,
|
||||
.nav-link > p > .nav-badge {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
animation-delay: $lte-transition-speed;
|
||||
}
|
||||
.nav-link > .nav-arrow,
|
||||
.nav-link > p > .nav-arrow {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
animation-delay: $lte-transition-speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($next) {
|
||||
$max: breakpoint-max($next);
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
content: "#{$max}";
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
max-height: 100vh;
|
||||
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
.sidebar-wrapper {
|
||||
height: subtract(100vh, add($lte-app-header-height, 1px));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-open {
|
||||
.app-sidebar {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: $lte-zindex-sidebar-overlay;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
animation-name: fadeIn;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu .nav-link p,
|
||||
.app-sidebar .brand-text,
|
||||
.app-sidebar .logo-xs,
|
||||
.app-sidebar .logo-xl {
|
||||
@include transition(margin-left $lte-transition-speed linear, opacity $lte-transition-speed ease, visibility $lte-transition-speed ease);
|
||||
}
|
||||
|
||||
// To prevent onload transition and animation
|
||||
.app-loaded {
|
||||
&.sidebar-mini.sidebar-collapse {
|
||||
.sidebar-menu .nav-link p,
|
||||
.brand-text {
|
||||
animation-duration: $lte-transition-speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
body:not(.app-loaded) {
|
||||
.app-header,
|
||||
.app-sidebar,
|
||||
.app-main,
|
||||
.app-footer {
|
||||
@include transition(none !important);
|
||||
animation-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
.hold-transition {
|
||||
.app-header,
|
||||
.app-sidebar,
|
||||
.app-main,
|
||||
.app-footer,
|
||||
.nav-arrow,
|
||||
.nav-badge {
|
||||
@include transition(none !important);
|
||||
animation-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
&.app-sidebar,
|
||||
.app-sidebar {
|
||||
--#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg-dark};
|
||||
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color-dark};
|
||||
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color-dark};
|
||||
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color-dark};
|
||||
--#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg-dark};
|
||||
--#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color-dark};
|
||||
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg-dark};
|
||||
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color-dark};
|
||||
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color-dark};
|
||||
--#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg-dark};
|
||||
--#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color-dark};
|
||||
--#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg-dark};
|
||||
--#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color-dark};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
//
|
||||
// Core: Layout
|
||||
//
|
||||
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-header"
|
||||
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-main"
|
||||
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer";
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 0;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
|
||||
> * {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,40 @@
|
|||
//
|
||||
// Callouts
|
||||
//
|
||||
|
||||
.callout {
|
||||
--#{$prefix}link-color-rgb: var(--#{$lte-prefix}callout-link);
|
||||
--#{$prefix}code-color: var(--#{$lte-prefix}callout-code-color);
|
||||
|
||||
padding: 1.25rem;
|
||||
color: var(--#{$lte-prefix}callout-color, inherit);
|
||||
background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
|
||||
border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
|
||||
|
||||
.callout-link {
|
||||
font-weight: $lte-callout-link-font-weight;
|
||||
color: var(--#{$prefix}callout-link-color);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+ .callout {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Variations
|
||||
@each $name, $color in $theme-colors {
|
||||
.callout-#{$name} {
|
||||
--#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
|
||||
--#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
|
||||
--#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
|
||||
--#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,311 @@
|
|||
//
|
||||
// Component: Cards
|
||||
//
|
||||
|
||||
// Color variants
|
||||
.card {
|
||||
@include box-shadow($lte-card-shadow);
|
||||
|
||||
&[class*="card-"]:not(.card-outline),
|
||||
&[class*="text-bg-"]:not(.card-outline) {
|
||||
> .card-header {
|
||||
color: var(--#{$lte-prefix}card-variant-color);
|
||||
background-color: var(--#{$lte-prefix}card-variant-bg);
|
||||
|
||||
.btn-tool {
|
||||
--#{$prefix}btn-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .8);
|
||||
--#{$prefix}btn-hover-color: var(--#{$lte-prefix}card-variant-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
border-top: 3px solid var(--#{$lte-prefix}card-variant-bg);
|
||||
}
|
||||
|
||||
&.maximized-card {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-height: 100% !important;
|
||||
|
||||
&.was-collapsed .card-body {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[data-lte-toggle="card-collapse"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-lte-icon="maximize"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
@include border-radius(0 !important);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.maximized-card) {
|
||||
[data-lte-icon="minimize"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// collapsed mode
|
||||
&.collapsed-card {
|
||||
// Use > .card-header to scope to direct card only, not nested cards
|
||||
> .card-header [data-lte-icon="collapse"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .card-body,
|
||||
> .card-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.collapsed-card) {
|
||||
// Use > .card-header to scope to direct card only, not nested cards
|
||||
> .card-header [data-lte-icon="expand"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav.flex-column {
|
||||
> li {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fixed height to 300px
|
||||
&.height-control {
|
||||
.card-body {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.border-end {
|
||||
border-right: 1px solid $card-border-color;
|
||||
}
|
||||
|
||||
.border-start {
|
||||
border-left: 1px solid $card-border-color;
|
||||
}
|
||||
|
||||
&.card-tabs {
|
||||
&:not(.card-outline) {
|
||||
> .card-header {
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
.nav-item {
|
||||
border-bottom: 0;
|
||||
|
||||
&:first-child .nav-link {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-tools {
|
||||
margin: .3rem .5rem;
|
||||
}
|
||||
|
||||
&:not(.expanding-card).collapsed-card {
|
||||
.card-header {
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanding-card {
|
||||
.card-header {
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline-tabs {
|
||||
border-top: 0;
|
||||
|
||||
.card-header {
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-top: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-top: 3px solid $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:hover {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-tools {
|
||||
margin: .5rem .5rem .3rem;
|
||||
}
|
||||
|
||||
&:not(.expanding-card).collapsed-card .card-header {
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanding-card {
|
||||
.card-header {
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Maximized Card Body Scroll fix
|
||||
html.maximized-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Add clearfix to header, body and footer
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Box header
|
||||
.card-header {
|
||||
position: relative;
|
||||
padding: (($card-spacer-y * .5) * 2) $card-spacer-x;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
|
||||
@if $enable-rounded {
|
||||
@include border-top-radius($border-radius);
|
||||
}
|
||||
|
||||
.collapsed-card & {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
> .card-tools {
|
||||
float: right;
|
||||
margin-right: -$card-spacer-x * .5;
|
||||
|
||||
.input-group,
|
||||
.nav,
|
||||
.pagination {
|
||||
margin-top: -$card-spacer-y * .4;
|
||||
margin-bottom: -$card-spacer-y * .4;
|
||||
}
|
||||
|
||||
[data-bs-toggle="tooltip"] {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
float: left;
|
||||
margin: 0;
|
||||
font-size: $lte-card-title-font-size;
|
||||
font-weight: $lte-card-title-font-weight;
|
||||
}
|
||||
|
||||
// Box Tools Buttons
|
||||
.btn-tool {
|
||||
--#{$prefix}btn-padding-x: .5rem;
|
||||
--#{$prefix}btn-padding-y: .25rem;
|
||||
|
||||
&:not(.btn-tool-custom) {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}tertiary-color);
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-box-shadow: none;
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}secondary-color);
|
||||
--#{$prefix}btn-active-border-color: transparent;
|
||||
}
|
||||
|
||||
margin: -$card-spacer-y 0;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
.card-#{$name},
|
||||
.bg-#{$name},
|
||||
.text-bg-#{$name} {
|
||||
--#{$lte-prefix}card-variant-bg: #{$color};
|
||||
--#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($color)};
|
||||
--#{$lte-prefix}card-variant-color: #{color-contrast($color)};
|
||||
--#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))};
|
||||
}
|
||||
}
|
||||
|
||||
// Box Body
|
||||
.card-body {
|
||||
// Tables within the box body
|
||||
> .table {
|
||||
margin-bottom: 0;
|
||||
|
||||
> thead > tr > th,
|
||||
> thead > tr > td {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.compact-mode {
|
||||
.app-header {
|
||||
max-height: $lte-app-header-height-compact;
|
||||
|
||||
.nav-link {
|
||||
max-height: $nav-link-height-compact;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
--bs-nav-link-padding-y: .25rem;
|
||||
--bs-nav-link-padding-x: .5rem;
|
||||
}
|
||||
|
||||
&.sidebar-mini.sidebar-collapse {
|
||||
.app-sidebar:not(:hover) {
|
||||
min-width: $lte-sidebar-mini-width-compact;
|
||||
max-width: $lte-sidebar-mini-width-compact;
|
||||
|
||||
.sidebar-menu {
|
||||
.nav-link {
|
||||
width: $lte-sidebar-mini-width-compact - $lte-sidebar-padding-x * 2 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-xs,
|
||||
.logo-xl {
|
||||
max-height: $lte-app-header-height-compact;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
width: $nav-link-height-compact;
|
||||
height: $nav-link-height-compact;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
height: $lte-app-header-height-compact;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
padding: $lte-app-footer-padding-compact;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
.nav-icon {
|
||||
min-width: 1.1rem;
|
||||
max-width: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
//
|
||||
// Component: Direct Chat
|
||||
//
|
||||
|
||||
.direct-chat {
|
||||
.card-body {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
&.chat-pane-open {
|
||||
.direct-chat-contacts {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.timestamp-light {
|
||||
.direct-chat-timestamp {
|
||||
color: rgba(var(--#{$prefix}body-color-rgb), .65);
|
||||
}
|
||||
}
|
||||
|
||||
&.timestamp-dark {
|
||||
.direct-chat-timestamp {
|
||||
color: rgba(var(--#{$prefix}body-color-rgb), .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-messages {
|
||||
height: 250px;
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.direct-chat-msg,
|
||||
.direct-chat-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.direct-chat-msg {
|
||||
@include clearfix();
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.direct-chat-messages,
|
||||
.direct-chat-contacts {
|
||||
@include transition(transform .5s ease-in-out);
|
||||
}
|
||||
|
||||
.direct-chat-text {
|
||||
@if $enable-rounded {
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: 5px 10px;
|
||||
margin: 5px 0 0 50px;
|
||||
color: $lte-direct-chat-default-font-color;
|
||||
background-color: $lte-direct-chat-default-msg-bg;
|
||||
border: 1px solid $lte-direct-chat-default-msg-border-color;
|
||||
|
||||
//Create the arrow
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
border: solid transparent;
|
||||
border-right-color: $lte-direct-chat-default-msg-border-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-top: -6px;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.end & {
|
||||
margin-right: 50px;
|
||||
margin-left: 0;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
border-right-color: transparent;
|
||||
border-left-color: $lte-direct-chat-default-msg-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-img {
|
||||
@include border-radius(50%);
|
||||
float: left;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.end & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-infos {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.direct-chat-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.direct-chat-timestamp {
|
||||
color: rgba(var(--#{$prefix}body-color-rgb), .75);
|
||||
}
|
||||
|
||||
//Direct chat contacts pane
|
||||
.direct-chat-contacts-open {
|
||||
.direct-chat-contacts {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-contacts {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
color: var(--#{$prefix}body-bg);
|
||||
background-color: var(--#{$prefix}body-color);
|
||||
transform: translate(101%, 0);
|
||||
}
|
||||
|
||||
.direct-chat-contacts-light {
|
||||
background-color: var(--#{$prefix}light-bg-subtle);
|
||||
|
||||
.contacts-list-name {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.contacts-list-date {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
//Contacts list -- for displaying contacts in direct chat contacts pane
|
||||
.contacts-list {
|
||||
@include list-unstyled();
|
||||
|
||||
> li {
|
||||
@include clearfix();
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba($black, .2);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-list-img {
|
||||
@include border-radius(50%);
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.contacts-list-info {
|
||||
margin-left: 45px;
|
||||
color: var(--#{$prefix}body-bg);
|
||||
}
|
||||
|
||||
.contacts-list-name,
|
||||
.contacts-list-status {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contacts-list-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contacts-list-status {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.contacts-list-date {
|
||||
font-weight: 400;
|
||||
color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.end > .direct-chat-text {
|
||||
color: var(--#{$lte-prefix}direct-chat-color);
|
||||
background-color: var(--#{$lte-prefix}direct-chat-bg);
|
||||
border-color: var(--#{$lte-prefix}direct-chat-bg);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: var(--#{$lte-prefix}direct-chat-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $name, $color in $theme-colors {
|
||||
.direct-chat-#{$name} {
|
||||
--#{$lte-prefix}direct-chat-color: #{color-contrast($color)};
|
||||
--#{$lte-prefix}direct-chat-bg: #{$color};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,820 @@
|
|||
//
|
||||
// Component: Docs
|
||||
//
|
||||
// Visual treatment for documentation pages. Body class `.docs-page` opts in.
|
||||
// Demo pages are not affected.
|
||||
//
|
||||
|
||||
// Inline code blocks rendered by MDX (Astro highlight default class)
|
||||
.astro-code {
|
||||
padding: .75rem;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
.docs-page {
|
||||
// Constrain the docs card to a comfortable reading width.
|
||||
// Tables and code blocks inside can still scroll horizontally if needed.
|
||||
.app-content > .container-fluid {
|
||||
max-width: 60rem; // ~960px
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
max-width: 64rem;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Card body — breathing room + prose typography.
|
||||
// Only applied inside docs content cards so demo-page card content
|
||||
// stays unchanged.
|
||||
//
|
||||
.card > .card-body {
|
||||
padding: 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--#{$prefix}body-color);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
//
|
||||
// Heading hierarchy. The MDX content in src/html/components/docs/ uses
|
||||
// ##### (h5) as the dominant section heading and ###### (h6) as a
|
||||
// sub-heading (most visible in FAQ.mdx, where h5 is a topic and h6 is
|
||||
// a question). Style h5 as a major section and h6 as a sub-section so
|
||||
// the visual hierarchy matches the semantic one.
|
||||
//
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: .5em;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
scroll-margin-top: 4rem; // anchor-link friendly
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
padding-bottom: .35em;
|
||||
font-size: 1.75rem;
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
// h5 is the dominant section heading across docs MDX files. Give it
|
||||
// a visible separator above so sections are easy to scan.
|
||||
h5,
|
||||
.h5 {
|
||||
padding-top: 1.5em;
|
||||
margin-top: 2.5em;
|
||||
font-size: 1.3rem;
|
||||
border-top: 1px solid var(--#{$prefix}border-color);
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// h6 is the sub-section / FAQ question style. Smaller than h5 but
|
||||
// still distinctly heading-like, with a touch of accent colour to
|
||||
// separate from body text.
|
||||
h6,
|
||||
.h6 {
|
||||
margin-top: 1.75em;
|
||||
font-size: 1.08rem;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
|
||||
//
|
||||
// Paragraphs and lists.
|
||||
//
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
table {
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5rem;
|
||||
|
||||
li {
|
||||
margin-bottom: .35rem;
|
||||
}
|
||||
|
||||
// Tighter nested lists
|
||||
ul,
|
||||
ol {
|
||||
margin-top: .35rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Lead-style first paragraph (just after a heading)
|
||||
h2 + p,
|
||||
h3 + p,
|
||||
h5 + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Inline code — pill style that complements MDX's syntax-highlighted blocks.
|
||||
//
|
||||
p code,
|
||||
li code,
|
||||
td code,
|
||||
th code,
|
||||
h2 code,
|
||||
h3 code,
|
||||
h4 code,
|
||||
h5 code,
|
||||
h6 code {
|
||||
padding: .15em .4em;
|
||||
font-size: .875em;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
|
||||
//
|
||||
// Code blocks.
|
||||
//
|
||||
pre.astro-code,
|
||||
pre {
|
||||
padding: 1rem 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
font-size: .875rem;
|
||||
line-height: 1.6;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Tables — reference-doc styling with hairline borders.
|
||||
//
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
font-size: .95rem;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius($border-radius-sm);
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: .65rem .9rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Blockquotes used as info callouts.
|
||||
//
|
||||
blockquote {
|
||||
padding: .85rem 1.1rem;
|
||||
margin-top: 1.25rem;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
background: var(--#{$prefix}info-bg-subtle);
|
||||
border-left: 4px solid var(--#{$prefix}info-border-subtle);
|
||||
@include border-radius($border-radius-sm);
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Prose links — stand out more than Bootstrap defaults.
|
||||
//
|
||||
a:not(.btn):not(.nav-link) {
|
||||
color: var(--#{$prefix}primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
|
||||
&:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Horizontal rule — used as additional section separator.
|
||||
//
|
||||
hr {
|
||||
margin: 2.5rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--#{$prefix}border-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
//
|
||||
// Lead paragraph — the first paragraph in any doc is a summary.
|
||||
// Visually heavier so it functions as a deck.
|
||||
//
|
||||
> p:first-child,
|
||||
> p:first-of-type {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
//
|
||||
// FAQ / disclosure accordion — uses native <details>/<summary>.
|
||||
// Add `.faq-item` to <details> to opt in.
|
||||
//
|
||||
details.faq-item {
|
||||
margin-bottom: .5rem;
|
||||
overflow: hidden;
|
||||
background: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius($border-radius);
|
||||
@include transition(border-color .15s ease, box-shadow .15s ease);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--#{$prefix}primary-border-subtle);
|
||||
}
|
||||
|
||||
&[open] {
|
||||
background: var(--#{$prefix}body-bg);
|
||||
border-color: var(--#{$prefix}primary-border-subtle);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
summary {
|
||||
position: relative;
|
||||
padding: .9rem 3rem .9rem 1.1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@include transition(color .15s ease);
|
||||
|
||||
// Hide the default disclosure triangle in Webkit/Blink
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide the marker in modern Firefox too
|
||||
&::marker {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
// Right-side chevron, rotates on open
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1.1rem;
|
||||
display: inline-block;
|
||||
width: .55rem;
|
||||
height: .55rem;
|
||||
margin-top: -.4rem;
|
||||
content: "";
|
||||
border-right: 2px solid currentcolor;
|
||||
border-bottom: 2px solid currentcolor;
|
||||
opacity: .55;
|
||||
transform: rotate(45deg);
|
||||
@include transition(transform .2s ease);
|
||||
}
|
||||
}
|
||||
|
||||
&[open] > summary {
|
||||
color: var(--#{$prefix}primary);
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
|
||||
&::after {
|
||||
margin-top: -.15rem;
|
||||
opacity: 1;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Content (everything after <summary>) gets the inner padding
|
||||
> *:not(summary) {
|
||||
padding-right: 1.1rem;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
> *:not(summary):first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
> *:not(summary):last-child {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Tighten paragraphs/lists inside an FAQ answer
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
|
||||
> *:last-child p:last-child,
|
||||
> p:last-child,
|
||||
> ul:last-child,
|
||||
> ol:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Code blocks inside an FAQ answer get a less-distracting bg
|
||||
pre.astro-code,
|
||||
pre {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark-mode tweak: blockquote info bg needs more contrast on dark
|
||||
&[data-bs-theme="dark"],
|
||||
[data-bs-theme="dark"] & {
|
||||
.card > .card-body blockquote code {
|
||||
background: rgba(255, 255, 255, .08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// FAQ page — custom layout that breaks out of the standard docs card
|
||||
// to give the FAQ a more distinctive visual identity. Opt in via
|
||||
// body.faq-page (set in pages/docs/faq.astro).
|
||||
//
|
||||
|
||||
.faq-page {
|
||||
// The FAQ doesn't use the standard card wrapper used by other docs,
|
||||
// so the container can stretch wider for the chip strip and section
|
||||
// grid.
|
||||
.app-content > .container-fluid {
|
||||
max-width: 64rem;
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
max-width: 72rem;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Hero -------------------------------------------------------------
|
||||
.faq-hero {
|
||||
position: relative;
|
||||
padding: 3rem 1.5rem 2.5rem;
|
||||
margin-top: 1rem;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(ellipse at top left, rgba(var(--#{$prefix}primary-rgb), .12), transparent 60%), radial-gradient(ellipse at bottom right, rgba(var(--#{$prefix}info-rgb), .1), transparent 65%), var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius($border-radius-xl);
|
||||
}
|
||||
|
||||
.faq-hero-eyebrow {
|
||||
display: inline-flex;
|
||||
gap: .4rem;
|
||||
align-items: center;
|
||||
padding: .35rem .85rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
color: var(--#{$prefix}primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
background: var(--#{$prefix}primary-bg-subtle);
|
||||
border: 1px solid var(--#{$prefix}primary-border-subtle);
|
||||
@include border-radius(50rem);
|
||||
|
||||
.bi {
|
||||
font-size: .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-hero-title {
|
||||
margin: 0 0 .5rem;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-hero-lead {
|
||||
max-width: 36rem;
|
||||
margin: 0 auto 1.75rem;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.55;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
.faq-search {
|
||||
position: relative;
|
||||
max-width: 32rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.form-control {
|
||||
height: 3rem;
|
||||
padding-right: 3rem;
|
||||
padding-left: 3rem;
|
||||
font-size: 1rem;
|
||||
background: var(--#{$prefix}body-bg);
|
||||
@include border-radius(50rem);
|
||||
@include transition(box-shadow .15s ease, border-color .15s ease);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .25rem rgba(var(--#{$prefix}primary-rgb), .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-search-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.2rem;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.faq-search-clear {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: .65rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
border: 0;
|
||||
transform: translateY(-50%);
|
||||
@include border-radius(50%);
|
||||
@include transition(background .15s ease, color .15s ease);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.faq-empty-state {
|
||||
max-width: 32rem;
|
||||
padding: 1rem;
|
||||
margin: 1.5rem auto 0;
|
||||
font-size: .95rem;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
.bi {
|
||||
margin-right: .35rem;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Section nav chips ------------------------------------------------
|
||||
.faq-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.faq-chip {
|
||||
display: inline-flex;
|
||||
gap: .45rem;
|
||||
align-items: center;
|
||||
padding: .45rem .85rem;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
color: var(--#{$prefix}body-color);
|
||||
text-decoration: none;
|
||||
background: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius(50rem);
|
||||
@include transition(transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.bi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-chip-count {
|
||||
padding: 0 .45rem;
|
||||
font-size: .7rem;
|
||||
font-weight: 600;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
@include border-radius(50rem);
|
||||
}
|
||||
|
||||
// Per-section chip accent on hover/active
|
||||
@each $tone in (primary, info, warning, success, danger, secondary) {
|
||||
.faq-chip-#{$tone}:hover {
|
||||
color: var(--#{$prefix}#{$tone}-text-emphasis);
|
||||
background: var(--#{$prefix}#{$tone}-bg-subtle);
|
||||
border-color: var(--#{$prefix}#{$tone}-border-subtle);
|
||||
|
||||
.faq-chip-count {
|
||||
color: var(--#{$prefix}#{$tone}-text-emphasis);
|
||||
background: rgba(0, 0, 0, .06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Sections ---------------------------------------------------------
|
||||
.faq-section {
|
||||
margin-bottom: 2.5rem;
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
.faq-section-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
border-left: 4px solid var(--#{$prefix}primary);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
.faq-section-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
font-size: 1.35rem;
|
||||
color: var(--#{$prefix}primary);
|
||||
background: var(--#{$prefix}primary-bg-subtle);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
.faq-section-title {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
|
||||
.faq-section-count {
|
||||
margin: .1rem 0 0;
|
||||
font-size: .8rem;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
// Per-section tone accents
|
||||
@each $tone in (primary, info, warning, success, danger, secondary) {
|
||||
.faq-section-#{$tone} {
|
||||
border-left-color: var(--#{$prefix}#{$tone});
|
||||
|
||||
.faq-section-icon {
|
||||
color: var(--#{$prefix}#{$tone}-text-emphasis);
|
||||
background: var(--#{$prefix}#{$tone}-bg-subtle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- FAQ items (override the generic .docs-page details styling) ------
|
||||
.faq-section-items .faq-item {
|
||||
margin-bottom: .5rem;
|
||||
overflow: hidden;
|
||||
background: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius($border-radius);
|
||||
@include transition(border-color .15s ease, box-shadow .15s ease, transform .15s ease);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--#{$prefix}primary-border-subtle);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&[open] {
|
||||
border-color: var(--#{$prefix}primary-border-subtle);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: flex;
|
||||
gap: .85rem;
|
||||
align-items: center;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: none; // disable the generic chevron, we use our own
|
||||
}
|
||||
}
|
||||
|
||||
.faq-q-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
font-size: .85rem;
|
||||
color: var(--#{$prefix}primary);
|
||||
background: var(--#{$prefix}primary-bg-subtle);
|
||||
@include border-radius(50%);
|
||||
}
|
||||
|
||||
.faq-q-text {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.faq-q-chevron {
|
||||
flex-shrink: 0;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
@include transition(transform .2s ease, color .2s ease);
|
||||
}
|
||||
|
||||
&[open] .faq-q-chevron {
|
||||
color: var(--#{$prefix}primary);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
color: var(--#{$prefix}primary);
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 1.1rem 1.25rem 1.1rem 3.85rem; // align with the question text (icon + gap)
|
||||
font-size: .95rem;
|
||||
line-height: 1.65;
|
||||
color: var(--#{$prefix}body-color);
|
||||
|
||||
p:last-child,
|
||||
ul:last-child,
|
||||
ol:last-child,
|
||||
pre:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .12em .35em;
|
||||
font-size: .875em;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
|
||||
pre.astro-code,
|
||||
pre {
|
||||
padding: .85rem 1rem;
|
||||
margin-top: .75rem;
|
||||
margin-bottom: .75rem;
|
||||
overflow-x: auto;
|
||||
font-size: .85rem;
|
||||
line-height: 1.55;
|
||||
@include border-radius($border-radius-sm);
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- CTA footer -------------------------------------------------------
|
||||
.faq-cta {
|
||||
padding: 2.5rem 1.5rem;
|
||||
text-align: center;
|
||||
background: radial-gradient(ellipse at top, rgba(var(--#{$prefix}primary-rgb), .08), transparent 60%), var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius($border-radius-xl);
|
||||
}
|
||||
|
||||
.faq-cta-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.6rem;
|
||||
color: var(--#{$prefix}primary);
|
||||
background: var(--#{$prefix}primary-bg-subtle);
|
||||
@include border-radius(50%);
|
||||
}
|
||||
|
||||
.faq-cta h2 {
|
||||
margin: 0 0 .5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
|
||||
.faq-cta p {
|
||||
max-width: 32rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
.faq-cta-actions {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
//
|
||||
// Component: Dropdown
|
||||
//
|
||||
|
||||
// General Dropdown Rules
|
||||
|
||||
// Ensure children cannot overflow and break the dropdown border radius
|
||||
.dropdown-menu {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fs-7 {
|
||||
.dropdown-menu {
|
||||
font-size: $font-size-sm !important;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
vertical-align: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item-title {
|
||||
margin: 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown Sizes
|
||||
.dropdown-menu-lg {
|
||||
min-width: 280px;
|
||||
max-width: 300px;
|
||||
padding: 0;
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown Submenu
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
|
||||
> a::after {
|
||||
@include caret-end();
|
||||
float: right;
|
||||
margin-top: .5rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown Hover
|
||||
.dropdown-hover {
|
||||
&:hover,
|
||||
&.nav-item.dropdown:hover,
|
||||
.dropdown-submenu:hover,
|
||||
&.dropdown-submenu:hover {
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown Sizes
|
||||
.dropdown-menu-xl {
|
||||
min-width: 360px;
|
||||
max-width: 420px;
|
||||
padding: 0;
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown header and footer
|
||||
.dropdown-footer,
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: .5rem $dropdown-item-padding-x;
|
||||
font-size: $font-size-sm;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Add fade animation to dropdown menus by appending
|
||||
// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
|
||||
.open:not(.dropup) > .animated-dropdown-menu {
|
||||
animation: flipInX .7s both;
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
// Fix dropdown menu in navbars
|
||||
.navbar-custom-menu > .navbar-nav {
|
||||
> li {
|
||||
position: relative;
|
||||
> .dropdown-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.navbar-custom-menu > .navbar-nav {
|
||||
float: right;
|
||||
> li {
|
||||
position: static;
|
||||
> .dropdown-menu {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
left: auto;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User Menu
|
||||
.navbar-nav > .user-menu {
|
||||
> .nav-link::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
width: 280px;
|
||||
padding: 0;
|
||||
|
||||
// Header menu
|
||||
> li.user-header {
|
||||
min-height: 175px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
// User image
|
||||
> img {
|
||||
z-index: 5;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border: 3px solid;
|
||||
border-color: transparent;
|
||||
border-color: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
> p {
|
||||
z-index: 5;
|
||||
margin-top: 10px;
|
||||
font-size: 17px;
|
||||
word-wrap: break-word;
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Body
|
||||
> .user-body {
|
||||
@include clearfix();
|
||||
padding: 15px;
|
||||
border-top: 1px solid var(--#{$prefix}border-color);
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Footer
|
||||
> .user-footer {
|
||||
@include clearfix();
|
||||
padding: 10px;
|
||||
background-color: var(--#{$prefix}light-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.user-image {
|
||||
@include media-breakpoint-up(sm) {
|
||||
float: none;
|
||||
margin-top: -8px;
|
||||
margin-right: .4rem;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
float: left;
|
||||
width: $lte-sidebar-user-image-width;
|
||||
height: $lte-sidebar-user-image-width;
|
||||
margin-top: -2px;
|
||||
// margin-right: 10px;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
//
|
||||
// Component: Info Box
|
||||
//
|
||||
|
||||
.info-box {
|
||||
@include box-shadow($lte-card-shadow);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 80px;
|
||||
padding: .5rem;
|
||||
margin-bottom: map-get($spacers, 3);
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
|
||||
.progress {
|
||||
height: 2px;
|
||||
margin: 5px 0;
|
||||
background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);
|
||||
|
||||
.progress-bar {
|
||||
background-color: var(--#{$lte-prefix}card-variant-color);
|
||||
}
|
||||
}
|
||||
|
||||
.info-box-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 70px;
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
> img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.info-box-number {
|
||||
display: block;
|
||||
margin-top: .25rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.progress-description,
|
||||
.info-box-text {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-box-more {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-description {
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.col-xl-2 &,
|
||||
.col-lg-2 &,
|
||||
.col-md-2 & {
|
||||
.progress-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.col-xl-3 &,
|
||||
.col-lg-3 &,
|
||||
.col-md-3 & {
|
||||
.progress-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.col-xl-2 &,
|
||||
.col-lg-2 &,
|
||||
.col-md-2 & {
|
||||
.progress-description {
|
||||
@include font-size(.75rem);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.col-xl-3 &,
|
||||
.col-lg-3 &,
|
||||
.col-md-3 & {
|
||||
.progress-description {
|
||||
@include font-size(.75rem);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.col-xl-2 &,
|
||||
.col-lg-2 &,
|
||||
.col-md-2 & {
|
||||
.progress-description {
|
||||
@include font-size(1rem);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.col-xl-3 &,
|
||||
.col-lg-3 &,
|
||||
.col-md-3 & {
|
||||
.progress-description {
|
||||
@include font-size(1rem);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
//
|
||||
// Misc: Miscellaneous
|
||||
//
|
||||
|
||||
// Image sizes
|
||||
.img-size-64,
|
||||
.img-size-50,
|
||||
.img-size-32 {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.img-size-64 {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.img-size-50 {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.img-size-32 {
|
||||
width: 32px;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
//
|
||||
// General: Mixins
|
||||
//
|
||||
|
||||
@import "mixins/animations";
|
||||
@import "mixins/scrollbar";
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
//
|
||||
// Component: Progress Bar
|
||||
//
|
||||
|
||||
//General CSS
|
||||
.progress {
|
||||
@include box-shadow(null);
|
||||
@include border-radius($lte-progress-bar-border-radius);
|
||||
|
||||
// Vertical bars
|
||||
&.vertical {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 200px;
|
||||
margin-right: 10px;
|
||||
|
||||
> .progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//Sizes
|
||||
&.sm,
|
||||
&.progress-sm {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.xs,
|
||||
&.progress-xs {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&.xxs,
|
||||
&.progress-xxs {
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-group {
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
// size variation
|
||||
.progress-sm {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.progress-xs {
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.progress-xxs {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
// Remove margins from progress bars when put in a table
|
||||
.table {
|
||||
tr > td {
|
||||
.progress {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
// Sidebar
|
||||
--#{$lte-prefix}sidebar-width: #{$lte-sidebar-width};
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
//
|
||||
// Component: Small Box
|
||||
//
|
||||
|
||||
.small-box {
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($lte-card-shadow);
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 1.25rem;
|
||||
--bs-link-color-rgb: none;
|
||||
--bs-link-hover-color-rgb: none;
|
||||
--bs-heading-color: none;
|
||||
|
||||
// content wrapper
|
||||
> .inner {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> .small-box-footer {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: 3px 0;
|
||||
text-align: center;
|
||||
background-color: rgba($black, .07);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($black, .1);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(2.2rem);
|
||||
padding: 0;
|
||||
margin: 0 0 10px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.col-xl-2 &,
|
||||
.col-lg-2 &,
|
||||
.col-md-2 & {
|
||||
h3 {
|
||||
@include font-size(1.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
.col-xl-3 &,
|
||||
.col-lg-3 &,
|
||||
.col-md-3 & {
|
||||
h3 {
|
||||
@include font-size(1.6rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.col-xl-2 &,
|
||||
.col-lg-2 &,
|
||||
.col-md-2 & {
|
||||
h3 {
|
||||
@include font-size(2.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.col-xl-3 &,
|
||||
.col-lg-3 &,
|
||||
.col-md-3 & {
|
||||
h3 {
|
||||
@include font-size(2.2rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: .9rem;
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
p {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
// the icon
|
||||
.small-box-icon {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 0;
|
||||
height: 70px;
|
||||
font-size: 70px;
|
||||
color: rgba($black, .15);
|
||||
@include transition(transform $lte-transition-speed linear);
|
||||
}
|
||||
|
||||
// Small box hover state
|
||||
&:hover {
|
||||
// Animate icons on small box hover
|
||||
.small-box-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
// No need for icons on very small devices
|
||||
.small-box {
|
||||
text-align: center;
|
||||
|
||||
.small-box-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
//
|
||||
// Component: Table
|
||||
//
|
||||
|
||||
.table {
|
||||
&:not(.table-dark) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// fixed table head
|
||||
// Uses Bootstrap CSS variables so the sticky header follows light/dark mode
|
||||
// automatically. Fixes #6026.
|
||||
&.table-head-fixed {
|
||||
thead tr:nth-child(1) th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: var(--bs-body-bg, #{$white});
|
||||
border-bottom: 0;
|
||||
box-shadow: inset 0 1px 0 var(--bs-border-color, #{$table-border-color}), inset 0 -1px 0 var(--bs-border-color, #{$table-border-color});
|
||||
}
|
||||
}
|
||||
|
||||
// no border
|
||||
&.no-border {
|
||||
&,
|
||||
td,
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// .text-center in tables
|
||||
&.text-center {
|
||||
&,
|
||||
td,
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-valign-middle {
|
||||
thead > tr > th,
|
||||
thead > tr > td,
|
||||
tbody > tr > th,
|
||||
tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body.p-0 & {
|
||||
thead > tr > th,
|
||||
thead > tr > td,
|
||||
tfoot > tr > th,
|
||||
tfoot > tr > td,
|
||||
tbody > tr > th,
|
||||
tbody > tr > td {
|
||||
&:first-of-type {
|
||||
padding-left: map-get($spacers, 4);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: map-get($spacers, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
//
|
||||
// Component: Timeline
|
||||
//
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0 0 45px;
|
||||
// The line
|
||||
&::before {
|
||||
@include border-radius($border-radius);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 31px;
|
||||
width: 4px;
|
||||
margin: 0;
|
||||
content: "";
|
||||
background-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
// Element
|
||||
> div {
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 15px;
|
||||
// The content
|
||||
> .timeline-item {
|
||||
@include box-shadow($lte-card-shadow);
|
||||
@include border-radius($border-radius);
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-right: 15px;
|
||||
margin-left: 60px;
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
// The time and header
|
||||
> .time {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
// Header
|
||||
> .timeline-header {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
// Link in header
|
||||
> a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// Item body and footer
|
||||
> .timeline-body,
|
||||
> .timeline-footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> .timeline-body {
|
||||
> img {
|
||||
margin: 10px;
|
||||
}
|
||||
> dl,
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.timeline-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border-radius: 50%; // stylelint-disable-line property-disallowed-list
|
||||
}
|
||||
}
|
||||
// Time label
|
||||
> .time-label {
|
||||
> span {
|
||||
@include border-radius(4px);
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
font-weight: 600;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-inverse {
|
||||
> div {
|
||||
> .timeline-item {
|
||||
@include box-shadow(none);
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
|
||||
> .timeline-header {
|
||||
border-bottom-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
//
|
||||
// Toast
|
||||
//
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
.toast-#{$name} {
|
||||
--#{$prefix}toast-header-color: #{color-contrast($color)};
|
||||
--#{$prefix}toast-header-bg: #{$color};
|
||||
--#{$prefix}toast-header-border-color: #{$color};
|
||||
--#{$prefix}toast-border-color: #{$color};
|
||||
--#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle);
|
||||
|
||||
@if color-contrast($color) == $color-contrast-light {
|
||||
.btn-close {
|
||||
@include btn-close-white();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
@each $name, $color in $theme-colors {
|
||||
.toast-#{$name} {
|
||||
@if color-contrast($color) == $color-contrast-dark {
|
||||
.btn-close {
|
||||
--#{$prefix}btn-close-white-filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// SIDEBAR SKINS
|
||||
// --------------------------------------------------------
|
||||
|
||||
$lte-sidebar-hover-bg-dark: rgba(255, 255, 255, .1) !default;
|
||||
$lte-sidebar-color-dark: #c2c7d0 !default;
|
||||
$lte-sidebar-hover-color-dark: $white !default;
|
||||
$lte-sidebar-active-color-dark: $white !default;
|
||||
$lte-sidebar-menu-active-bg-dark: rgba(255, 255, 255, .1) !default;
|
||||
$lte-sidebar-menu-active-color-dark: $white !default;
|
||||
$lte-sidebar-submenu-bg-dark: transparent !default;
|
||||
$lte-sidebar-submenu-color-dark: #c2c7d0 !default;
|
||||
$lte-sidebar-submenu-hover-color-dark: $white !default;
|
||||
$lte-sidebar-submenu-hover-bg-dark: rgba(255, 255, 255, .1) !default;
|
||||
$lte-sidebar-submenu-active-color-dark: $white !default;
|
||||
$lte-sidebar-submenu-active-bg-dark: rgba(255, 255, 255, .1) !default;
|
||||
$lte-sidebar-header-color-dark: tint-color(#c2c7d0, 5%) !default;
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
//
|
||||
// Custom AdminLTE Variables
|
||||
//
|
||||
|
||||
// Prefix for :root CSS variables and others.
|
||||
$lte-prefix: lte- !default;
|
||||
|
||||
// TRANSITIONS SETTINGS
|
||||
// --------------------------------------------------------
|
||||
// Transition global options
|
||||
$lte-transition-speed: .3s !default;
|
||||
$lte-transition-fn: ease-in-out !default;
|
||||
|
||||
// SIDEBAR
|
||||
// --------------------------------------------------------
|
||||
$lte-sidebar-width: 250px !default;
|
||||
$lte-sidebar-breakpoint: lg !default;
|
||||
$lte-sidebar-padding-x: .5rem !default;
|
||||
$lte-sidebar-padding-x-compact: .5rem !default;
|
||||
$lte-sidebar-padding-y: .5rem !default;
|
||||
$lte-sidebar-padding-y-compact: .25rem !default;
|
||||
$lte-sidebar-transition: min-width $lte-transition-speed $lte-transition-fn,
|
||||
max-width $lte-transition-speed $lte-transition-fn,
|
||||
margin-left $lte-transition-speed $lte-transition-fn,
|
||||
margin-right $lte-transition-speed $lte-transition-fn !default;
|
||||
|
||||
// SIDEBAR SKINS
|
||||
// --------------------------------------------------------
|
||||
|
||||
$lte-sidebar-hover-bg: rgba($black, .1) !default;
|
||||
$lte-sidebar-color: $gray-800 !default;
|
||||
$lte-sidebar-hover-color: $gray-900 !default;
|
||||
$lte-sidebar-active-color: $black !default;
|
||||
$lte-sidebar-menu-active-bg: rgba($black, .1) !default;
|
||||
$lte-sidebar-menu-active-color: $black !default;
|
||||
$lte-sidebar-submenu-bg: transparent !default;
|
||||
$lte-sidebar-submenu-color: #777 !default;
|
||||
$lte-sidebar-submenu-hover-color: $black !default;
|
||||
$lte-sidebar-submenu-hover-bg: rgba($black, .1) !default;
|
||||
$lte-sidebar-submenu-active-color: $gray-900 !default;
|
||||
$lte-sidebar-submenu-active-bg: rgba($black, .1) !default;
|
||||
$lte-sidebar-header-color: shade-color($gray-800, 5%) !default;
|
||||
|
||||
// SIDEBAR MINI
|
||||
// --------------------------------------------------------
|
||||
$nav-link-padding-x-compact: .25rem !default;
|
||||
$lte-sidebar-mini-width: ($nav-link-padding-x + $lte-sidebar-padding-x + .8rem) * 2 !default;
|
||||
$lte-sidebar-mini-width-compact: ($nav-link-padding-x-compact + $lte-sidebar-padding-x-compact + .8rem) * 2 !default;
|
||||
$lte-sidebar-nav-icon-width: $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
|
||||
$lte-sidebar-user-image-width: $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .4) !default;
|
||||
|
||||
// MAIN HEADER
|
||||
// --------------------------------------------------------
|
||||
$nav-link-height-compact: 1.75rem !default;
|
||||
$lte-app-header-bottom-border-width: $border-width !default;
|
||||
$lte-app-header-bottom-border-color: var(--#{$prefix}border-color) !default;
|
||||
$lte-app-header-bottom-border: $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
|
||||
$lte-app-header-link-padding-y: $navbar-padding-y !default;
|
||||
$lte-app-header-height: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
|
||||
$lte-app-header-height-compact: ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
|
||||
$lte-zindex-fixed-header: $zindex-fixed !default;
|
||||
|
||||
// APP MAIN
|
||||
// --------------------------------------------------------
|
||||
$lte-app-main-padding-bottom: $grid-gutter-width * .5 !default;
|
||||
|
||||
// CONTENT PADDING
|
||||
// --------------------------------------------------------
|
||||
$lte-content-padding-y: 0 !default;
|
||||
$lte-content-padding-x: .5rem !default;
|
||||
|
||||
// MAIN FOOTER
|
||||
// --------------------------------------------------------
|
||||
$lte-app-footer-padding: 1rem !default;
|
||||
$lte-app-footer-padding-compact: .5rem !default;
|
||||
$lte-app-footer-border-top-width: 1px !default;
|
||||
$lte-app-footer-border-top-color: var(--#{$prefix}border-color) !default;
|
||||
$lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
|
||||
$lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
|
||||
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
|
||||
$lte-zindex-fixed-footer: $zindex-fixed !default;
|
||||
// CONTENT BOTTOM AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;
|
||||
$lte-app-content-bottom-area-color: $lte-app-footer-color !default;
|
||||
$lte-app-content-bottom-area-bg: $lte-app-footer-bg !default;
|
||||
$lte-app-content-bottom-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-bottom-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-bottom-area-padding-x: 0 !default;
|
||||
|
||||
// CONTENT TOP AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-top-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-top-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-top-area-padding-x: 0 !default;
|
||||
|
||||
// BRAND LINK
|
||||
// --------------------------------------------------------
|
||||
$navbar-brand-padding-y-compact: $navbar-brand-padding-y * .75 !default;
|
||||
$navbar-padding-y-compact: $navbar-padding-y * .5 !default;
|
||||
$lte-brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y !default;
|
||||
$lte-brand-link-padding-y-compact: $navbar-brand-padding-y-compact + $navbar-padding-y-compact !default;
|
||||
$lte-brand-link-padding-x: $lte-sidebar-padding-x !default;
|
||||
$lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
|
||||
$lte-brand-link-border-buttom: 1px !default;
|
||||
|
||||
// CARDS
|
||||
// --------------------------------------------------------
|
||||
$lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
|
||||
$lte-card-title-font-size: 1.1rem !default;
|
||||
$lte-card-title-font-weight: $font-weight-normal !default;
|
||||
|
||||
// PROGRESS BARS
|
||||
// --------------------------------------------------------
|
||||
$lte-progress-bar-border-radius: 1px !default;
|
||||
|
||||
// CALLOUTS
|
||||
// --------------------------------------------------------
|
||||
$lte-callout-link-font-weight: $alert-link-font-weight !default;
|
||||
|
||||
// DIRECT CHAT
|
||||
// --------------------------------------------------------
|
||||
$lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$lte-direct-chat-default-font-color: var(--#{$prefix}emphasis-color) !default;
|
||||
$lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
// Z-INDEX
|
||||
// --------------------------------------------------------
|
||||
$lte-zindex-app-header: $zindex-fixed + 4 !default;
|
||||
$lte-zindex-sidebar: $zindex-fixed + 8 !default;
|
||||
$lte-zindex-sidebar-overlay: $lte-zindex-sidebar - 1 !default;
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/*!
|
||||
* AdminLTE v4.0.0
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <https://adminlte.io>
|
||||
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|
||||
*/
|
||||
|
||||
// Bootstrap Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap/scss/functions";
|
||||
|
||||
// AdminLTE Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap-variables"; // little modified are here
|
||||
|
||||
// Bootstrap Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
// Bootstrap Layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/accordion";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/badge";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
@import "bootstrap/scss/placeholders";
|
||||
|
||||
// Bootstrap Helpers
|
||||
@import "bootstrap/scss/helpers";
|
||||
|
||||
// Bootstrap Utilities
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
|
||||
// AdminLTE Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "mixins";
|
||||
|
||||
// AdiminLTE Parts
|
||||
// ---------------------------------------------------
|
||||
@import "parts/core";
|
||||
@import "parts/components";
|
||||
@import "parts/extra-components";
|
||||
@import "parts/pages";
|
||||
@import "parts/miscellaneous";
|
||||
|
||||
// AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
|
||||
@import "accessibility";
|
||||
|
||||
// AdminLTE Documentation Styles (only applies to pages with body.docs-page)
|
||||
@import "docs";
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
//
|
||||
// Mixins: Animation
|
||||
//
|
||||
|
||||
|
||||
@keyframes flipInX {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transition-timing-function: ease-in;
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transition-timing-function: ease-in;
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(2px, 1px) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-1px, -2px) rotate(-2deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-3px, 0) rotate(3deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(0, 2px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(1px, -1px) rotate(1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-1px, 2px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-3px, 1px) rotate(0deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(2px, 1px) rotate(-2deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(-1px, -1px) rotate(4deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(2px, 2px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(1px, -2px) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
//
|
||||
// Mixins: Scrollbar
|
||||
//
|
||||
|
||||
@mixin scrollbar-color-gray() {
|
||||
scrollbar-color: var(--#{$prefix}secondary-bg) transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar-width-thin() {
|
||||
scrollbar-width: thin;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar-width-none() {
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
//
|
||||
// Pages: Lock Screen
|
||||
//
|
||||
|
||||
// ADD THIS CLASS TO THE <BODY> TAG
|
||||
.lockscreen {
|
||||
// User name [optional]
|
||||
.lockscreen-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lockscreen-logo {
|
||||
margin-bottom: 25px;
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lockscreen-wrapper {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
// Will contain the image and the sign in form
|
||||
.lockscreen-item {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
padding: 0;
|
||||
margin: 10px auto 30px;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
@include border-radius(4px);
|
||||
}
|
||||
|
||||
// User image
|
||||
.lockscreen-image {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: -10px;
|
||||
z-index: 10;
|
||||
padding: 5px;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
@include border-radius(50%);
|
||||
|
||||
> img {
|
||||
@include border-radius(50%);
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
// Contains the password input and the login button
|
||||
.lockscreen-credentials {
|
||||
margin-left: 70px;
|
||||
|
||||
.form-control {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lockscreen-footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
//
|
||||
// Pages: Login & Register
|
||||
//
|
||||
|
||||
.login-logo,
|
||||
.register-logo {
|
||||
margin-bottom: .9rem;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.login-page,
|
||||
.register-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-box,
|
||||
.register-box {
|
||||
width: 400px;
|
||||
|
||||
@media (max-width: map-get($grid-breakpoints, sm)) {
|
||||
width: 90%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-card-body,
|
||||
.register-card-body {
|
||||
padding: 20px;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
border-top: 0;
|
||||
|
||||
.input-group {
|
||||
.form-control {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
|
||||
~ .input-group-prepend .input-group-text,
|
||||
~ .input-group-append .input-group-text {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-valid {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
~ .input-group-prepend .input-group-text,
|
||||
~ .input-group-append .input-group-text {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-invalid {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
~ .input-group-append .input-group-text {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background-color: transparent;
|
||||
@include border-top-end-radius($border-radius);
|
||||
@include border-bottom-end-radius($border-radius);
|
||||
@include transition($input-transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-box-msg,
|
||||
.register-box-msg {
|
||||
padding: 0 20px 20px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-auth-links {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
//
|
||||
// Part: Components
|
||||
//
|
||||
|
||||
@import "../progress-bars";
|
||||
@import "../cards";
|
||||
@import "../table";
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Part: Core
|
||||
//
|
||||
|
||||
@import "../root";
|
||||
@import "../app-wrapper";
|
||||
@import "../app-content";
|
||||
@import "../app-header";
|
||||
@import "../app-sidebar";
|
||||
@import "../app-main";
|
||||
@import "../app-footer";
|
||||
@import "../dropdown";
|
||||
@import "../callouts";
|
||||
@import "../compact-mode";
|
||||
@import "../docs";
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
//
|
||||
// Part: Extra Components
|
||||
//
|
||||
|
||||
@import "../small-box";
|
||||
@import "../info-box";
|
||||
@import "../timeline";
|
||||
@import "../direct-chat";
|
||||
@import "../toasts";
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
//
|
||||
// Part: Miscellaneous
|
||||
//
|
||||
|
||||
@import "../miscellaneous";
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
//
|
||||
// Part: Pages
|
||||
//
|
||||
|
||||
@import "../pages/login_and_register";
|
||||
@import "../pages/lockscreen";
|
||||
Loading…
Add table
Add a link
Reference in a new issue