Compare commits
No commits in common. "8d0103c257d2c60d934fc712711ea92ef4289c13" and "f27790c3a22d35c31365b3f71afa2bb1d681bbb6" have entirely different histories.
8d0103c257
...
f27790c3a2
191 changed files with 353 additions and 13619 deletions
|
|
@ -1,77 +0,0 @@
|
||||||
// Bootsier CSS rules: self-hosted fonts, form components, and regions.
|
|
||||||
|
|
||||||
// Self-hosted Source Sans 3 (SIL OFL 1.1), served from /bootsier/fonts.
|
|
||||||
// Required by AdminLTE 4, which declares it as the primary font family in $font-family-sans-serif.
|
|
||||||
@font-face {
|
|
||||||
font-family: "Source Sans 3";
|
|
||||||
src: url("/bootsier/fonts/bootsier.font.woff2") format("woff2");
|
|
||||||
font-weight: 200 900;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Source Sans 3";
|
|
||||||
src: url("/bootsier/fonts/bootsier.font.italic.woff2") format("woff2");
|
|
||||||
font-weight: 200 900;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Required field indicator in forms.
|
|
||||||
.form-required {
|
|
||||||
color: var(--bs-danger);
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form field with consistent bottom margin.
|
|
||||||
.form-field {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fieldset with border and floating legend.
|
|
||||||
fieldset {
|
|
||||||
position: relative;
|
|
||||||
background-color: var(--bs-body-bg);
|
|
||||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
|
||||||
border-radius: var(--bs-border-radius);
|
|
||||||
padding: 2rem 1rem 1rem;
|
|
||||||
margin: 2rem 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset > legend {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 1rem;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: var(--bs-body-bg);
|
|
||||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
|
||||||
border-radius: var(--bs-border-radius);
|
|
||||||
padding: 0.125rem 0.75rem;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
line-height: 1.25;
|
|
||||||
width: fit-content;
|
|
||||||
max-width: 75%;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fieldset-description {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gap between group label and first inline check.
|
|
||||||
.form-label + .form-check-inline {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Footer region.
|
|
||||||
.region-footer {
|
|
||||||
padding: 0.75rem 0 3rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
// Bootstrap Icons v1.13.1, fonts served from /bootsier/fonts.
|
|
||||||
|
|
||||||
$bootstrap-icons-font: "bootsier.icons";
|
|
||||||
$bootstrap-icons-font-dir: "/bootsier/fonts";
|
|
||||||
@import "bootstrap-icons-1.13.1/bootstrap-icons";
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
// Bootsier overrides for Bootstrap variables. Imported before bootstrap/scss/variables
|
|
||||||
// so that Bootstrap's !default declarations do not override these values.
|
|
||||||
|
|
||||||
$font-size-base: 1.125rem;
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,337 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
.app-content {
|
|
||||||
padding: $lte-content-padding-y $lte-content-padding-x;
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,619 +0,0 @@
|
||||||
.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};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
//
|
|
||||||
// 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
|
|
@ -1,40 +0,0 @@
|
||||||
//
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,311 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,235 +0,0 @@
|
||||||
//
|
|
||||||
// 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};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,820 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,225 +0,0 @@
|
||||||
//
|
|
||||||
// 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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,131 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
//
|
|
||||||
// General: Mixins
|
|
||||||
//
|
|
||||||
|
|
||||||
@import "mixins/animations";
|
|
||||||
@import "mixins/scrollbar";
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
:root,
|
|
||||||
[data-bs-theme="light"] {
|
|
||||||
// Sidebar
|
|
||||||
--#{$lte-prefix}sidebar-width: #{$lte-sidebar-width};
|
|
||||||
}
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
//
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
//
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
// 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;
|
|
||||||
|
|
@ -1,131 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
/*!
|
|
||||||
* 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";
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
//
|
|
||||||
// Part: Components
|
|
||||||
//
|
|
||||||
|
|
||||||
@import "../progress-bars";
|
|
||||||
@import "../cards";
|
|
||||||
@import "../table";
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
//
|
|
||||||
// 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";
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
//
|
|
||||||
// Part: Extra Components
|
|
||||||
//
|
|
||||||
|
|
||||||
@import "../small-box";
|
|
||||||
@import "../info-box";
|
|
||||||
@import "../timeline";
|
|
||||||
@import "../direct-chat";
|
|
||||||
@import "../toasts";
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
//
|
|
||||||
// Part: Miscellaneous
|
|
||||||
//
|
|
||||||
|
|
||||||
@import "../miscellaneous";
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
//
|
|
||||||
// Part: Pages
|
|
||||||
//
|
|
||||||
|
|
||||||
@import "../pages/login_and_register";
|
|
||||||
@import "../pages/lockscreen";
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
// AdminLTE v4.0.0 + Bootstrap 5.3.8 - PageTop Bootsier Styles.
|
|
||||||
|
|
||||||
// Bootstrap Configuration
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "bootstrap-5.3.8/scss/functions";
|
|
||||||
|
|
||||||
// AdminLTE Configuration (little modified are here)
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "adminlte-4.0.0/scss/bootstrap-variables";
|
|
||||||
|
|
||||||
// Bootsier Bootstrap variable overrides
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "bootsier-variables";
|
|
||||||
|
|
||||||
// Bootstrap Configuration
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "bootstrap-5.3.8/scss/variables";
|
|
||||||
@import "bootstrap-5.3.8/scss/variables-dark";
|
|
||||||
@import "bootstrap-5.3.8/scss/maps";
|
|
||||||
@import "bootstrap-5.3.8/scss/mixins";
|
|
||||||
@import "bootstrap-5.3.8/scss/utilities";
|
|
||||||
|
|
||||||
// Bootstrap Layout & components
|
|
||||||
@import "bootstrap-5.3.8/scss/root";
|
|
||||||
@import "bootstrap-5.3.8/scss/reboot";
|
|
||||||
@import "bootstrap-5.3.8/scss/type";
|
|
||||||
@import "bootstrap-5.3.8/scss/images";
|
|
||||||
@import "bootstrap-5.3.8/scss/containers";
|
|
||||||
@import "bootstrap-5.3.8/scss/grid";
|
|
||||||
@import "bootstrap-5.3.8/scss/tables";
|
|
||||||
@import "bootstrap-5.3.8/scss/forms";
|
|
||||||
@import "bootstrap-5.3.8/scss/buttons";
|
|
||||||
@import "bootstrap-5.3.8/scss/transitions";
|
|
||||||
@import "bootstrap-5.3.8/scss/dropdown";
|
|
||||||
@import "bootstrap-5.3.8/scss/button-group";
|
|
||||||
@import "bootstrap-5.3.8/scss/nav";
|
|
||||||
@import "bootstrap-5.3.8/scss/navbar";
|
|
||||||
@import "bootstrap-5.3.8/scss/card";
|
|
||||||
@import "bootstrap-5.3.8/scss/accordion";
|
|
||||||
@import "bootstrap-5.3.8/scss/breadcrumb";
|
|
||||||
@import "bootstrap-5.3.8/scss/pagination";
|
|
||||||
@import "bootstrap-5.3.8/scss/badge";
|
|
||||||
@import "bootstrap-5.3.8/scss/alert";
|
|
||||||
@import "bootstrap-5.3.8/scss/progress";
|
|
||||||
@import "bootstrap-5.3.8/scss/list-group";
|
|
||||||
@import "bootstrap-5.3.8/scss/close";
|
|
||||||
@import "bootstrap-5.3.8/scss/toasts";
|
|
||||||
@import "bootstrap-5.3.8/scss/modal";
|
|
||||||
@import "bootstrap-5.3.8/scss/tooltip";
|
|
||||||
@import "bootstrap-5.3.8/scss/popover";
|
|
||||||
@import "bootstrap-5.3.8/scss/carousel";
|
|
||||||
@import "bootstrap-5.3.8/scss/spinners";
|
|
||||||
@import "bootstrap-5.3.8/scss/offcanvas";
|
|
||||||
@import "bootstrap-5.3.8/scss/placeholders";
|
|
||||||
|
|
||||||
// Bootstrap Helpers
|
|
||||||
@import "bootstrap-5.3.8/scss/helpers";
|
|
||||||
|
|
||||||
// Bootsier Utilities (must precede utilities/api to extend $utilities)
|
|
||||||
@import "bootsier-utilities";
|
|
||||||
|
|
||||||
// Bootstrap Utilities
|
|
||||||
@import "bootstrap-5.3.8/scss/utilities/api";
|
|
||||||
|
|
||||||
// AdminLTE Configuration
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "adminlte-4.0.0/scss/variables";
|
|
||||||
@import "adminlte-4.0.0/scss/variables-dark";
|
|
||||||
@import "adminlte-4.0.0/scss/mixins";
|
|
||||||
|
|
||||||
// AdminLTE Parts
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "adminlte-4.0.0/scss/parts/core";
|
|
||||||
@import "adminlte-4.0.0/scss/parts/components";
|
|
||||||
@import "adminlte-4.0.0/scss/parts/extra-components";
|
|
||||||
@import "adminlte-4.0.0/scss/parts/pages";
|
|
||||||
@import "adminlte-4.0.0/scss/parts/miscellaneous";
|
|
||||||
|
|
||||||
// AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
|
|
||||||
@import "adminlte-4.0.0/scss/accessibility";
|
|
||||||
|
|
||||||
// AdminLTE Documentation Styles (only applies to pages with body.docs-page)
|
|
||||||
@import "adminlte-4.0.0/scss/docs";
|
|
||||||
|
|
||||||
// Bootstrap Icons 1.13.1
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "bootsier-icons";
|
|
||||||
|
|
||||||
// Bootsier customizations
|
|
||||||
// ---------------------------------------------------
|
|
||||||
@import "bootsier-custom";
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// Fullscreen: keeps maximize/minimize icons in sync with the actual fullscreen state.
|
|
||||||
document.addEventListener('fullscreenchange', function () {
|
|
||||||
var isFs = !!document.fullscreenElement;
|
|
||||||
document.querySelectorAll('[data-lte-icon="maximize"]').forEach(function (el) {
|
|
||||||
el.classList.toggle('d-none', isFs);
|
|
||||||
});
|
|
||||||
document.querySelectorAll('[data-lte-icon="minimize"]').forEach(function (el) {
|
|
||||||
el.classList.toggle('d-none', !isFs);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Color mode selector (light / dark / auto).
|
|
||||||
var STORAGE_KEY = 'lte-theme';
|
|
||||||
var getStored = function () { return localStorage.getItem(STORAGE_KEY); };
|
|
||||||
var setStored = function (theme) { localStorage.setItem(STORAGE_KEY, theme); };
|
|
||||||
var prefersDark = function () {
|
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
||||||
};
|
|
||||||
|
|
||||||
var setTheme = function (theme) {
|
|
||||||
var resolved = (theme === 'auto') ? (prefersDark() ? 'dark' : 'light') : theme;
|
|
||||||
document.documentElement.setAttribute('data-bs-theme', resolved);
|
|
||||||
};
|
|
||||||
|
|
||||||
var showActiveTheme = function (theme) {
|
|
||||||
document.querySelectorAll('[data-bs-theme-value]').forEach(function (el) {
|
|
||||||
el.classList.remove('active');
|
|
||||||
el.setAttribute('aria-pressed', 'false');
|
|
||||||
var check = el.querySelector('.bi-check-lg');
|
|
||||||
if (check) { check.classList.add('d-none'); }
|
|
||||||
});
|
|
||||||
var active = document.querySelector('[data-bs-theme-value="' + theme + '"]');
|
|
||||||
if (active) {
|
|
||||||
active.classList.add('active');
|
|
||||||
active.setAttribute('aria-pressed', 'true');
|
|
||||||
var check = active.querySelector('.bi-check-lg');
|
|
||||||
if (check) { check.classList.remove('d-none'); }
|
|
||||||
}
|
|
||||||
document.querySelectorAll('[data-lte-theme-icon]').forEach(function (icon) {
|
|
||||||
icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
|
|
||||||
var stored = getStored();
|
|
||||||
if (!stored || stored === 'auto') { setTheme('auto'); }
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
var theme = getStored() || 'auto';
|
|
||||||
setTheme(theme);
|
|
||||||
showActiveTheme(theme);
|
|
||||||
document.querySelectorAll('[data-bs-theme-value]').forEach(function (toggle) {
|
|
||||||
toggle.addEventListener('click', function () {
|
|
||||||
var t = toggle.getAttribute('data-bs-theme-value');
|
|
||||||
setStored(t);
|
|
||||||
setTheme(t);
|
|
||||||
showActiveTheme(t);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}());
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
Binary file not shown.
Binary file not shown.
|
|
@ -57,7 +57,7 @@ impl BorderColor {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(BorderColor::Theme(Color::Primary).to_class(), "border-primary");
|
/// assert_eq!(BorderColor::Theme(Color::Primary).to_class(), "border-primary");
|
||||||
/// assert_eq!(BorderColor::Subtle(Color::Warning).to_class(), "border-warning-subtle");
|
/// assert_eq!(BorderColor::Subtle(Color::Warning).to_class(), "border-warning-subtle");
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,7 @@ impl BreakPoint {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let bp = BreakPoint::MD;
|
/// let bp = BreakPoint::MD;
|
||||||
/// assert_eq!(bp.class_with("col", ""), "col-md");
|
/// assert_eq!(bp.class_with("col", ""), "col-md");
|
||||||
|
|
|
||||||
|
|
@ -75,7 +75,7 @@ impl ButtonColor {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(
|
/// assert_eq!(
|
||||||
/// ButtonColor::Background(Color::Primary).to_class(),
|
/// ButtonColor::Background(Color::Primary).to_class(),
|
||||||
|
|
@ -131,7 +131,7 @@ impl ButtonSize {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(ButtonSize::Small.to_class(), "btn-sm");
|
/// assert_eq!(ButtonSize::Small.to_class(), "btn-sm");
|
||||||
/// assert_eq!(ButtonSize::Large.to_class(), "btn-lg");
|
/// assert_eq!(ButtonSize::Large.to_class(), "btn-lg");
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ impl Color {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(Color::Primary.to_class(), "primary");
|
/// assert_eq!(Color::Primary.to_class(), "primary");
|
||||||
/// assert_eq!(Color::Danger.to_class(), "danger");
|
/// assert_eq!(Color::Danger.to_class(), "danger");
|
||||||
|
|
@ -123,7 +123,7 @@ impl Opacity {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(Opacity::Opaque.class_with(""), "opacity-100");
|
/// assert_eq!(Opacity::Opaque.class_with(""), "opacity-100");
|
||||||
/// assert_eq!(Opacity::Half.class_with("bg"), "bg-opacity-50");
|
/// assert_eq!(Opacity::Half.class_with("bg"), "bg-opacity-50");
|
||||||
|
|
@ -155,7 +155,7 @@ impl Opacity {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(Opacity::Opaque.to_class(), "opacity-100");
|
/// assert_eq!(Opacity::Opaque.to_class(), "opacity-100");
|
||||||
/// assert_eq!(Opacity::Half.to_class(), "opacity-50");
|
/// assert_eq!(Opacity::Half.to_class(), "opacity-50");
|
||||||
|
|
@ -236,7 +236,7 @@ impl ColorBg {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(ColorBg::Body.to_class(), "bg-body");
|
/// assert_eq!(ColorBg::Body.to_class(), "bg-body");
|
||||||
/// assert_eq!(ColorBg::Theme(Color::Primary).to_class(), "bg-primary");
|
/// assert_eq!(ColorBg::Theme(Color::Primary).to_class(), "bg-primary");
|
||||||
|
|
@ -320,7 +320,7 @@ impl ColorText {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(ColorText::Body.to_class(), "text-body");
|
/// assert_eq!(ColorText::Body.to_class(), "text-body");
|
||||||
/// assert_eq!(ColorText::Theme(Color::Primary).to_class(), "text-primary");
|
/// assert_eq!(ColorText::Theme(Color::Primary).to_class(), "text-primary");
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@ impl ScaleSize {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(ScaleSize::Auto.class_with("border"), "border");
|
/// assert_eq!(ScaleSize::Auto.class_with("border"), "border");
|
||||||
/// assert_eq!(ScaleSize::Zero.class_with("m"), "m-0");
|
/// assert_eq!(ScaleSize::Zero.class_with("m"), "m-0");
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@ impl RoundedRadius {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(RoundedRadius::Scale2.class_with(""), "rounded-2");
|
/// assert_eq!(RoundedRadius::Scale2.class_with(""), "rounded-2");
|
||||||
/// assert_eq!(RoundedRadius::Zero.class_with("rounded-top"), "rounded-top-0");
|
/// assert_eq!(RoundedRadius::Zero.class_with("rounded-top"), "rounded-top-0");
|
||||||
|
|
@ -102,7 +102,7 @@ impl RoundedRadius {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// assert_eq!(RoundedRadius::Default.to_class(), "rounded");
|
/// assert_eq!(RoundedRadius::Default.to_class(), "rounded");
|
||||||
/// assert_eq!(RoundedRadius::Zero.to_class(), "rounded-0");
|
/// assert_eq!(RoundedRadius::Zero.to_class(), "rounded-0");
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ use crate::theme::{ButtonAction, ButtonColor, ButtonSize};
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop::prelude::*;
|
/// use pagetop::prelude::*;
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
|
|
@ -47,8 +47,8 @@ use crate::theme::{ButtonAction, ButtonColor, ButtonSize};
|
||||||
pub struct Button {
|
pub struct Button {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del botón.
|
/// Devuelve las clases CSS del botón.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el comportamiento del botón al activarse.
|
/// Devuelve el comportamiento del botón al activarse.
|
||||||
kind: ButtonAction,
|
kind: ButtonAction,
|
||||||
/// Devuelve el esquema de color del botón.
|
/// Devuelve el esquema de color del botón.
|
||||||
|
|
@ -80,7 +80,7 @@ impl Component for Button {
|
||||||
let mut classes = "btn".to_string();
|
let mut classes = "btn".to_string();
|
||||||
(*self.color()).push_class(&mut classes);
|
(*self.color()).push_class(&mut classes);
|
||||||
(*self.size()).push_class(&mut classes);
|
(*self.size()).push_class(&mut classes);
|
||||||
self.alter_prop(PropsOp::prepend_classes(classes));
|
self.alter_classes(ClassesOp::Prepend, classes);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -88,7 +88,7 @@ impl Component for Button {
|
||||||
button
|
button
|
||||||
id=[self.id()]
|
id=[self.id()]
|
||||||
type=(self.kind())
|
type=(self.kind())
|
||||||
(self.props())
|
class=[self.classes().get()]
|
||||||
name=[self.name().get()]
|
name=[self.name().get()]
|
||||||
value=[self.value().get()]
|
value=[self.value().get()]
|
||||||
autofocus[*self.autofocus()]
|
autofocus[*self.autofocus()]
|
||||||
|
|
@ -147,10 +147,10 @@ impl Button {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del botón.
|
/// Modifica la lista de clases CSS aplicadas al botón.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ use crate::theme::attrs::{BorderColor, Opacity, ScaleSize, Side};
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
/// // Borde global.
|
/// // Borde global.
|
||||||
|
|
@ -145,7 +145,7 @@ impl Border {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// // Convertir explícitamente con `From::from`:
|
/// // Convertir explícitamente con `From::from`:
|
||||||
/// let b = classes::Border::from(ScaleSize::Two);
|
/// let b = classes::Border::from(ScaleSize::Two);
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ use crate::theme::attrs::{ScaleSize, Side};
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
/// let m = classes::Margin::with(Side::Top, ScaleSize::Three);
|
/// let m = classes::Margin::with(Side::Top, ScaleSize::Three);
|
||||||
|
|
@ -97,7 +97,7 @@ impl Margin {
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
/// let p = classes::Padding::with(Side::LeftAndRight, ScaleSize::Two);
|
/// let p = classes::Padding::with(Side::LeftAndRight, ScaleSize::Two);
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ use crate::theme::attrs::RoundedRadius;
|
||||||
///
|
///
|
||||||
/// # Ejemplos
|
/// # Ejemplos
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
/// // Radio global:
|
/// // Radio global:
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ use crate::theme::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
/// let main = Container::main()
|
/// let main = Container::main()
|
||||||
|
|
@ -22,8 +22,8 @@ use crate::theme::*;
|
||||||
pub struct Container {
|
pub struct Container {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor.
|
/// Devuelve las clases CSS asociadas al contenedor.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el tipo semántico del contenedor.
|
/// Devuelve el tipo semántico del contenedor.
|
||||||
container_kind: container::Kind,
|
container_kind: container::Kind,
|
||||||
/// Devuelve el comportamiento para el ancho del contenedor.
|
/// Devuelve el comportamiento para el ancho del contenedor.
|
||||||
|
|
@ -42,7 +42,7 @@ impl Component for Container {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes(self.container_width().to_class()));
|
self.alter_classes(ClassesOp::Prepend, self.container_width().to_class());
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -58,32 +58,32 @@ impl Component for Container {
|
||||||
};
|
};
|
||||||
Ok(match self.container_kind() {
|
Ok(match self.container_kind() {
|
||||||
container::Kind::Default => html! {
|
container::Kind::Default => html! {
|
||||||
div id=[self.id()] (self.props()) style=[style] {
|
div id=[self.id()] class=[self.classes().get()] style=[style] {
|
||||||
(output)
|
(output)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
container::Kind::Main => html! {
|
container::Kind::Main => html! {
|
||||||
main id=[self.id()] (self.props()) style=[style] {
|
main id=[self.id()] class=[self.classes().get()] style=[style] {
|
||||||
(output)
|
(output)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
container::Kind::Header => html! {
|
container::Kind::Header => html! {
|
||||||
header id=[self.id()] (self.props()) style=[style] {
|
header id=[self.id()] class=[self.classes().get()] style=[style] {
|
||||||
(output)
|
(output)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
container::Kind::Footer => html! {
|
container::Kind::Footer => html! {
|
||||||
footer id=[self.id()] (self.props()) style=[style] {
|
footer id=[self.id()] class=[self.classes().get()] style=[style] {
|
||||||
(output)
|
(output)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
container::Kind::Section => html! {
|
container::Kind::Section => html! {
|
||||||
section id=[self.id()] (self.props()) style=[style] {
|
section id=[self.id()] class=[self.classes().get()] style=[style] {
|
||||||
(output)
|
(output)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
container::Kind::Article => html! {
|
container::Kind::Article => html! {
|
||||||
article id=[self.id()] (self.props()) style=[style] {
|
article id=[self.id()] class=[self.classes().get()] style=[style] {
|
||||||
(output)
|
(output)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -141,7 +141,7 @@ impl Container {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor.
|
/// Modifica la lista de clases CSS aplicadas al contenedor.
|
||||||
///
|
///
|
||||||
/// También acepta clases predefinidas para:
|
/// También acepta clases predefinidas para:
|
||||||
///
|
///
|
||||||
|
|
@ -150,8 +150,8 @@ impl Container {
|
||||||
/// - Establecer bordes ([`classes::Border`]).
|
/// - Establecer bordes ([`classes::Border`]).
|
||||||
/// - Redondear las esquinas ([`classes::Rounded`]).
|
/// - Redondear las esquinas ([`classes::Rounded`]).
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ use crate::theme::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop::prelude::*;
|
/// use pagetop::prelude::*;
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
|
|
@ -40,8 +40,8 @@ use crate::theme::*;
|
||||||
pub struct Dropdown {
|
pub struct Dropdown {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del menú desplegable.
|
/// Devuelve las clases CSS asociadas al menú desplegable.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el título del menú desplegable.
|
/// Devuelve el título del menú desplegable.
|
||||||
title: L10n,
|
title: L10n,
|
||||||
/// Devuelve el tamaño configurado del botón.
|
/// Devuelve el tamaño configurado del botón.
|
||||||
|
|
@ -74,9 +74,10 @@ impl Component for Dropdown {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes(
|
self.alter_classes(
|
||||||
|
ClassesOp::Prepend,
|
||||||
self.direction().class_with(*self.button_grouped()),
|
self.direction().class_with(*self.button_grouped()),
|
||||||
));
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -90,23 +91,23 @@ impl Component for Dropdown {
|
||||||
let title = self.title().using(cx);
|
let title = self.title().using(cx);
|
||||||
|
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=[self.id()] (self.props()) {
|
div id=[self.id()] class=[self.classes().get()] {
|
||||||
@if !title.is_empty() {
|
@if !title.is_empty() {
|
||||||
@let btn_base = {
|
@let mut btn_classes = Classes::new({
|
||||||
let mut classes = "btn".to_string();
|
let mut classes = "btn".to_string();
|
||||||
self.button_size().push_class(&mut classes);
|
self.button_size().push_class(&mut classes);
|
||||||
self.button_color().push_class(&mut classes);
|
self.button_color().push_class(&mut classes);
|
||||||
classes
|
classes
|
||||||
};
|
});
|
||||||
@let pos = self.menu_position();
|
@let pos = self.menu_position();
|
||||||
@let offset = pos.data_offset();
|
@let offset = pos.data_offset();
|
||||||
@let reference = pos.data_reference();
|
@let reference = pos.data_reference();
|
||||||
@let auto_close = self.auto_close.as_str();
|
@let auto_close = self.auto_close.as_str();
|
||||||
@let menu_classes = {
|
@let menu_classes = Classes::new({
|
||||||
let mut classes = "dropdown-menu".to_string();
|
let mut classes = "dropdown-menu".to_string();
|
||||||
self.menu_align().push_class(&mut classes);
|
self.menu_align().push_class(&mut classes);
|
||||||
classes
|
classes
|
||||||
};
|
});
|
||||||
|
|
||||||
// Renderizado en modo split (dos botones) o simple (un botón).
|
// Renderizado en modo split (dos botones) o simple (un botón).
|
||||||
@if *self.button_split() {
|
@if *self.button_split() {
|
||||||
|
|
@ -114,18 +115,18 @@ impl Component for Dropdown {
|
||||||
@let btn = html! {
|
@let btn = html! {
|
||||||
button
|
button
|
||||||
type="button"
|
type="button"
|
||||||
class=(&btn_base)
|
class=[btn_classes.get()]
|
||||||
{
|
{
|
||||||
(title)
|
(title)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// Botón *toggle* que abre/cierra el menú asociado.
|
// Botón *toggle* que abre/cierra el menú asociado.
|
||||||
@let btn_toggle_classes =
|
|
||||||
util::join!(&btn_base, " dropdown-toggle dropdown-toggle-split");
|
|
||||||
@let btn_toggle = html! {
|
@let btn_toggle = html! {
|
||||||
button
|
button
|
||||||
type="button"
|
type="button"
|
||||||
class=(&btn_toggle_classes)
|
class=[btn_classes.alter_classes(
|
||||||
|
ClassesOp::Add, "dropdown-toggle dropdown-toggle-split"
|
||||||
|
).get()]
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
data-bs-offset=[offset]
|
data-bs-offset=[offset]
|
||||||
data-bs-reference=[reference]
|
data-bs-reference=[reference]
|
||||||
|
|
@ -141,21 +142,22 @@ impl Component for Dropdown {
|
||||||
@match self.direction() {
|
@match self.direction() {
|
||||||
dropdown::Direction::Dropstart => {
|
dropdown::Direction::Dropstart => {
|
||||||
(btn_toggle)
|
(btn_toggle)
|
||||||
ul class=(&menu_classes) { (items) }
|
ul class=[menu_classes.get()] { (items) }
|
||||||
(btn)
|
(btn)
|
||||||
}
|
}
|
||||||
_ => {
|
_ => {
|
||||||
(btn)
|
(btn)
|
||||||
(btn_toggle)
|
(btn_toggle)
|
||||||
ul class=(&menu_classes) { (items) }
|
ul class=[menu_classes.get()] { (items) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
// Botón único con funcionalidad de *toggle*.
|
// Botón único con funcionalidad de *toggle*.
|
||||||
@let btn_toggle_classes = util::join!(&btn_base, " dropdown-toggle");
|
|
||||||
button
|
button
|
||||||
type="button"
|
type="button"
|
||||||
class=(&btn_toggle_classes)
|
class=[btn_classes.alter_classes(
|
||||||
|
ClassesOp::Add, "dropdown-toggle"
|
||||||
|
).get()]
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
data-bs-offset=[offset]
|
data-bs-offset=[offset]
|
||||||
data-bs-reference=[reference]
|
data-bs-reference=[reference]
|
||||||
|
|
@ -164,7 +166,7 @@ impl Component for Dropdown {
|
||||||
{
|
{
|
||||||
(title)
|
(title)
|
||||||
}
|
}
|
||||||
ul class=(&menu_classes) { (items) }
|
ul class=[menu_classes.get()] { (items) }
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
// Sin botón: sólo el listado como menú contextual.
|
// Sin botón: sólo el listado como menú contextual.
|
||||||
|
|
@ -185,10 +187,10 @@ impl Dropdown {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del menú desplegable.
|
/// Modifica la lista de clases CSS aplicadas al menú desplegable.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -47,8 +47,8 @@ pub enum ItemKind {
|
||||||
pub struct Item {
|
pub struct Item {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del elemento.
|
/// Devuelve las clases CSS asociadas al elemento.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el tipo de elemento representado.
|
/// Devuelve el tipo de elemento representado.
|
||||||
item_kind: ItemKind,
|
item_kind: ItemKind,
|
||||||
}
|
}
|
||||||
|
|
@ -67,7 +67,7 @@ impl Component for Item {
|
||||||
ItemKind::Void => html! {},
|
ItemKind::Void => html! {},
|
||||||
|
|
||||||
ItemKind::Label(label) => html! {
|
ItemKind::Label(label) => html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
span class="dropdown-item-text" {
|
span class="dropdown-item-text" {
|
||||||
(label.using(cx))
|
(label.using(cx))
|
||||||
}
|
}
|
||||||
|
|
@ -101,7 +101,7 @@ impl Component for Item {
|
||||||
let tabindex = disabled.then_some("-1");
|
let tabindex = disabled.then_some("-1");
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
a
|
a
|
||||||
class=(classes)
|
class=(classes)
|
||||||
href=[href]
|
href=[href]
|
||||||
|
|
@ -127,7 +127,7 @@ impl Component for Item {
|
||||||
let disabled_attr = disabled.then_some("disabled");
|
let disabled_attr = disabled.then_some("disabled");
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
button
|
button
|
||||||
class=(classes)
|
class=(classes)
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -141,7 +141,7 @@ impl Component for Item {
|
||||||
}
|
}
|
||||||
|
|
||||||
ItemKind::Header(label) => html! {
|
ItemKind::Header(label) => html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
h6 class="dropdown-header" {
|
h6 class="dropdown-header" {
|
||||||
(label.using(cx))
|
(label.using(cx))
|
||||||
}
|
}
|
||||||
|
|
@ -149,7 +149,7 @@ impl Component for Item {
|
||||||
},
|
},
|
||||||
|
|
||||||
ItemKind::Divider => html! {
|
ItemKind::Divider => html! {
|
||||||
li id=[self.id()] (self.props()) { hr class="dropdown-divider" {} }
|
li id=[self.id()] class=[self.classes().get()] { hr class="dropdown-divider" {} }
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -267,10 +267,10 @@ impl Item {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del elemento.
|
/// Modifica la lista de clases CSS aplicadas al elemento.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ use pagetop::prelude::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let item = form::check::Item::new("apple", L10n::n("Apple")).with_checked(true);
|
/// let item = form::check::Item::new("apple", L10n::n("Apple")).with_checked(true);
|
||||||
|
|
@ -80,7 +80,7 @@ impl Item {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let interests = form::check::Field::new()
|
/// let interests = form::check::Field::new()
|
||||||
|
|
@ -110,8 +110,8 @@ impl Item {
|
||||||
pub struct Field {
|
pub struct Field {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor del grupo.
|
/// Devuelve las clases CSS del contenedor del grupo.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el nombre base compartido por todas las casillas del grupo.
|
/// Devuelve el nombre base compartido por todas las casillas del grupo.
|
||||||
name: AttrName,
|
name: AttrName,
|
||||||
/// Devuelve la etiqueta del grupo.
|
/// Devuelve la etiqueta del grupo.
|
||||||
|
|
@ -136,7 +136,7 @@ impl Component for Field {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-field form-field-checkboxes"));
|
self.alter_classes(ClassesOp::Prepend, "form-field form-field-checkboxes");
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -146,7 +146,7 @@ impl Component for Field {
|
||||||
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 3));
|
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 3));
|
||||||
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
|
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=(&container_id) (self.props()) {
|
div id=(&container_id) class=[self.classes().get()] {
|
||||||
@if let Some(label) = self.label().lookup(cx) {
|
@if let Some(label) = self.label().lookup(cx) {
|
||||||
label class="form-label" { (label) }
|
label class="form-label" { (label) }
|
||||||
}
|
}
|
||||||
|
|
@ -195,10 +195,10 @@ impl Field {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor del grupo de casillas.
|
/// Modifica la lista de clases CSS aplicadas al contenedor del grupo de casillas.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ use crate::theme::form;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let accept_terms = form::Checkbox::check() // También sirve new() o default().
|
/// let accept_terms = form::Checkbox::check() // También sirve new() o default().
|
||||||
|
|
@ -45,8 +45,8 @@ use crate::theme::form;
|
||||||
pub struct Checkbox {
|
pub struct Checkbox {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor del control.
|
/// Devuelve las clases CSS del contenedor del control.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve la variante visual del control.
|
/// Devuelve la variante visual del control.
|
||||||
checkbox_kind: form::CheckboxKind,
|
checkbox_kind: form::CheckboxKind,
|
||||||
/// Devuelve el nombre del campo.
|
/// Devuelve el nombre del campo.
|
||||||
|
|
@ -87,7 +87,7 @@ impl Component for Checkbox {
|
||||||
if *self.reverse() {
|
if *self.reverse() {
|
||||||
classes.push_str(" form-check-reverse");
|
classes.push_str(" form-check-reverse");
|
||||||
}
|
}
|
||||||
self.alter_prop(PropsOp::prepend_classes(classes));
|
self.alter_classes(ClassesOp::Prepend, classes);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -99,7 +99,7 @@ impl Component for Checkbox {
|
||||||
let checkbox_id = util::join!(&container_id, "-checkbox");
|
let checkbox_id = util::join!(&container_id, "-checkbox");
|
||||||
let is_switch = *self.checkbox_kind() == form::CheckboxKind::Switch;
|
let is_switch = *self.checkbox_kind() == form::CheckboxKind::Switch;
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=(&container_id) (self.props()) {
|
div id=(&container_id) class=[self.classes().get()] {
|
||||||
input
|
input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
role=[is_switch.then_some("switch")]
|
role=[is_switch.then_some("switch")]
|
||||||
|
|
@ -152,10 +152,10 @@ impl Checkbox {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor del control.
|
/// Modifica la lista de clases CSS aplicadas al contenedor del control.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ use crate::theme::form;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop::prelude::*;
|
/// use pagetop::prelude::*;
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
|
|
@ -49,8 +49,8 @@ use crate::theme::form;
|
||||||
pub struct Form {
|
pub struct Form {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del formulario.
|
/// Devuelve las clases CSS del formulario.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve la URL/ruta de destino del formulario.
|
/// Devuelve la URL/ruta de destino del formulario.
|
||||||
action: AttrValue,
|
action: AttrValue,
|
||||||
/// Devuelve el método para enviar el formulario.
|
/// Devuelve el método para enviar el formulario.
|
||||||
|
|
@ -72,7 +72,7 @@ impl Component for Form {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes("form"));
|
self.alter_classes(ClassesOp::Prepend, "form");
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -83,7 +83,7 @@ impl Component for Form {
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
form
|
form
|
||||||
id=[self.id()]
|
id=[self.id()]
|
||||||
(self.props())
|
class=[self.classes().get()]
|
||||||
action=[self.action().get()]
|
action=[self.action().get()]
|
||||||
method=[method]
|
method=[method]
|
||||||
accept-charset=[self.charset().get()]
|
accept-charset=[self.charset().get()]
|
||||||
|
|
@ -104,10 +104,10 @@ impl Form {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del formulario.
|
/// Modifica la lista de clases CSS aplicadas al formulario.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ use pagetop::prelude::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let personal_data = form::Fieldset::new()
|
/// let personal_data = form::Fieldset::new()
|
||||||
|
|
@ -26,8 +26,8 @@ use pagetop::prelude::*;
|
||||||
pub struct Fieldset {
|
pub struct Fieldset {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del `fieldset`.
|
/// Devuelve las clases CSS del `fieldset`.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve la leyenda del `fieldset`.
|
/// Devuelve la leyenda del `fieldset`.
|
||||||
legend: Attr<L10n>,
|
legend: Attr<L10n>,
|
||||||
/// Devuelve la descripción del `fieldset`.
|
/// Devuelve la descripción del `fieldset`.
|
||||||
|
|
@ -55,7 +55,7 @@ impl Component for Fieldset {
|
||||||
}
|
}
|
||||||
|
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
fieldset id=[self.id()] (self.props()) disabled[*self.disabled()] {
|
fieldset id=[self.id()] class=[self.classes().get()] disabled[*self.disabled()] {
|
||||||
@if let Some(legend) = self.legend().lookup(cx) {
|
@if let Some(legend) = self.legend().lookup(cx) {
|
||||||
legend { (legend) }
|
legend { (legend) }
|
||||||
}
|
}
|
||||||
|
|
@ -78,10 +78,10 @@ impl Fieldset {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del `fieldset`.
|
/// Modifica la lista de clases CSS aplicadas al `fieldset`.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ use pagetop::prelude::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let token = form::Hidden::new()
|
/// let token = form::Hidden::new()
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,7 @@ impl fmt::Display for Mode {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let email = form::input::Field::email()
|
/// let email = form::input::Field::email()
|
||||||
|
|
@ -128,8 +128,8 @@ impl fmt::Display for Mode {
|
||||||
pub struct Field {
|
pub struct Field {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor del campo.
|
/// Devuelve las clases CSS del contenedor del campo.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el tipo de campo.
|
/// Devuelve el tipo de campo.
|
||||||
kind: Kind,
|
kind: Kind,
|
||||||
/// Devuelve el nombre del campo.
|
/// Devuelve el nombre del campo.
|
||||||
|
|
@ -175,12 +175,12 @@ impl Component for Field {
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
if *self.floating_label() {
|
if *self.floating_label() {
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-floating"));
|
self.alter_classes(ClassesOp::Prepend, "form-floating");
|
||||||
}
|
}
|
||||||
self.alter_prop(PropsOp::prepend_classes(util::join!(
|
self.alter_classes(
|
||||||
"form-field form-field-",
|
ClassesOp::Prepend,
|
||||||
self.kind().to_string()
|
util::join!("form-field form-field-", self.kind().to_string()),
|
||||||
)));
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -217,7 +217,7 @@ impl Component for Field {
|
||||||
None => html! {},
|
None => html! {},
|
||||||
};
|
};
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=[container_id.as_deref()] (self.props()) {
|
div id=[container_id.as_deref()] class=[self.classes().get()] {
|
||||||
@if !*self.floating_label() {
|
@if !*self.floating_label() {
|
||||||
(label)
|
(label)
|
||||||
}
|
}
|
||||||
|
|
@ -320,10 +320,10 @@ impl Field {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor del campo.
|
/// Modifica la lista de clases CSS aplicadas al contenedor del campo.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@ pub enum CheckboxKind {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// // Correo electrónico con sugerencia semántica del navegador.
|
/// // Correo electrónico con sugerencia semántica del navegador.
|
||||||
|
|
@ -243,7 +243,7 @@ impl fmt::Display for Autocomplete {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let ac = form::Autocomplete::token(form::AutofillField::Username);
|
/// let ac = form::Autocomplete::token(form::AutofillField::Username);
|
||||||
/// let ac = form::Autocomplete::shipping(form::AutofillField::StreetAddress);
|
/// let ac = form::Autocomplete::shipping(form::AutofillField::StreetAddress);
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ use crate::LOCALES_BOOTSIER;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let item = form::radio::Item::new("monthly", L10n::n("Monthly")).with_checked(true);
|
/// let item = form::radio::Item::new("monthly", L10n::n("Monthly")).with_checked(true);
|
||||||
|
|
@ -74,7 +74,7 @@ impl Item {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let plan = form::radio::Field::new()
|
/// let plan = form::radio::Field::new()
|
||||||
|
|
@ -98,8 +98,8 @@ impl Item {
|
||||||
pub struct Field {
|
pub struct Field {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor del grupo.
|
/// Devuelve las clases CSS del contenedor del grupo.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el nombre compartido por todos los botones de opción del grupo.
|
/// Devuelve el nombre compartido por todos los botones de opción del grupo.
|
||||||
name: AttrName,
|
name: AttrName,
|
||||||
/// Devuelve la etiqueta del grupo.
|
/// Devuelve la etiqueta del grupo.
|
||||||
|
|
@ -126,7 +126,7 @@ impl Component for Field {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-field form-field-radios"));
|
self.alter_classes(ClassesOp::Prepend, "form-field form-field-radios");
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -136,7 +136,7 @@ impl Component for Field {
|
||||||
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 3));
|
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 3));
|
||||||
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
|
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=(&container_id) (self.props()) {
|
div id=(&container_id) class=[self.classes().get()] {
|
||||||
@if let Some(label) = self.label().lookup(cx) {
|
@if let Some(label) = self.label().lookup(cx) {
|
||||||
label class="form-label" {
|
label class="form-label" {
|
||||||
(label)
|
(label)
|
||||||
|
|
@ -197,10 +197,10 @@ impl Field {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor del grupo de opciones.
|
/// Modifica la lista de clases CSS aplicadas al contenedor del grupo de opciones.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ use pagetop::prelude::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let volume = form::Range::new()
|
/// let volume = form::Range::new()
|
||||||
|
|
@ -33,8 +33,8 @@ use pagetop::prelude::*;
|
||||||
pub struct Range {
|
pub struct Range {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor del control deslizante.
|
/// Devuelve las clases CSS del contenedor del control deslizante.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el nombre del campo.
|
/// Devuelve el nombre del campo.
|
||||||
name: AttrName,
|
name: AttrName,
|
||||||
/// Devuelve la etiqueta del campo.
|
/// Devuelve la etiqueta del campo.
|
||||||
|
|
@ -65,7 +65,7 @@ impl Component for Range {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-field form-field-range"));
|
self.alter_classes(ClassesOp::Prepend, "form-field form-field-range");
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -74,7 +74,7 @@ impl Component for Range {
|
||||||
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)));
|
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)));
|
||||||
let range_id = container_id.as_deref().map(|id| util::join!(id, "-range"));
|
let range_id = container_id.as_deref().map(|id| util::join!(id, "-range"));
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=[container_id.as_deref()] (self.props()) {
|
div id=[container_id.as_deref()] class=[self.classes().get()] {
|
||||||
@if let Some(label) = self.label().lookup(cx) {
|
@if let Some(label) = self.label().lookup(cx) {
|
||||||
label for=[range_id.as_deref()] class="form-label" { (label) }
|
label for=[range_id.as_deref()] class="form-label" { (label) }
|
||||||
}
|
}
|
||||||
|
|
@ -107,10 +107,10 @@ impl Range {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor del control deslizante.
|
/// Modifica la lista de clases CSS aplicadas al contenedor del control deslizante.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ use crate::theme::form;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let item = form::select::Item::new("es", L10n::n("Spanish")).with_selected(true);
|
/// let item = form::select::Item::new("es", L10n::n("Spanish")).with_selected(true);
|
||||||
|
|
@ -74,7 +74,7 @@ impl Item {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let group = form::select::Group::new(L10n::n("Europe"))
|
/// let group = form::select::Group::new(L10n::n("Europe"))
|
||||||
|
|
@ -147,7 +147,7 @@ pub enum Entry {
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let idioma = form::select::Field::new()
|
/// let idioma = form::select::Field::new()
|
||||||
|
|
@ -193,8 +193,8 @@ pub enum Entry {
|
||||||
pub struct Field {
|
pub struct Field {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor de la lista de selección.
|
/// Devuelve las clases CSS del contenedor de la lista de selección.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el nombre del campo.
|
/// Devuelve el nombre del campo.
|
||||||
name: AttrName,
|
name: AttrName,
|
||||||
/// Devuelve la etiqueta del campo.
|
/// Devuelve la etiqueta del campo.
|
||||||
|
|
@ -230,11 +230,11 @@ impl Component for Field {
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
if *self.floating_label() {
|
if *self.floating_label() {
|
||||||
self.alter_multiple(false);
|
self.multiple = false;
|
||||||
self.alter_rows(None::<u16>);
|
self.rows.alter_opt(None::<u16>);
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-floating"));
|
self.alter_classes(ClassesOp::Prepend, "form-floating");
|
||||||
}
|
}
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-field form-field-select"));
|
self.alter_classes(ClassesOp::Prepend, "form-field form-field-select");
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -259,7 +259,7 @@ impl Component for Field {
|
||||||
None => html! {},
|
None => html! {},
|
||||||
};
|
};
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=[container_id.as_deref()] (self.props()) {
|
div id=[container_id.as_deref()] class=[self.classes().get()] {
|
||||||
@if !*self.floating_label() {
|
@if !*self.floating_label() {
|
||||||
(label)
|
(label)
|
||||||
}
|
}
|
||||||
|
|
@ -325,10 +325,10 @@ impl Field {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor de la lista de selección.
|
/// Modifica la lista de clases CSS aplicadas al contenedor de la lista de selección.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ use crate::theme::form;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let descripcion = form::Textarea::new()
|
/// let descripcion = form::Textarea::new()
|
||||||
|
|
@ -36,8 +36,8 @@ use crate::theme::form;
|
||||||
pub struct Textarea {
|
pub struct Textarea {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del contenedor del área de texto.
|
/// Devuelve las clases CSS del contenedor del área de texto.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el nombre del campo.
|
/// Devuelve el nombre del campo.
|
||||||
name: AttrName,
|
name: AttrName,
|
||||||
/// Devuelve el valor inicial del área de texto.
|
/// Devuelve el valor inicial del área de texto.
|
||||||
|
|
@ -79,10 +79,10 @@ impl Component for Textarea {
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
if *self.floating_label() {
|
if *self.floating_label() {
|
||||||
self.alter_rows(None::<u16>);
|
self.rows.alter_opt(None::<u16>);
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-floating"));
|
self.alter_classes(ClassesOp::Prepend, "form-floating");
|
||||||
}
|
}
|
||||||
self.alter_prop(PropsOp::prepend_classes("form-field form-field-textarea"));
|
self.alter_classes(ClassesOp::Prepend, "form-field form-field-textarea");
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -116,7 +116,7 @@ impl Component for Textarea {
|
||||||
None => html! {},
|
None => html! {},
|
||||||
};
|
};
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
div id=[container_id.as_deref()] (self.props()) {
|
div id=[container_id.as_deref()] class=[self.classes().get()] {
|
||||||
@if !*self.floating_label() {
|
@if !*self.floating_label() {
|
||||||
(label)
|
(label)
|
||||||
}
|
}
|
||||||
|
|
@ -159,10 +159,10 @@ impl Textarea {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del contenedor del campo.
|
/// Modifica la lista de clases CSS aplicadas al contenedor del campo.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@ pub enum IconKind {
|
||||||
|
|
||||||
#[derive(AutoDefault, Clone, Debug, Getters)]
|
#[derive(AutoDefault, Clone, Debug, Getters)]
|
||||||
pub struct Icon {
|
pub struct Icon {
|
||||||
/// Devuelve los atributos HTML y clases CSS del icono.
|
/// Devuelve las clases CSS asociadas al icono.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
icon_kind: IconKind,
|
icon_kind: IconKind,
|
||||||
aria_label: AttrL10n,
|
aria_label: AttrL10n,
|
||||||
}
|
}
|
||||||
|
|
@ -28,10 +28,10 @@ impl Component for Icon {
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
if !matches!(self.icon_kind(), IconKind::None) {
|
if !matches!(self.icon_kind(), IconKind::None) {
|
||||||
self.alter_prop(PropsOp::prepend_classes("icon"));
|
self.alter_classes(ClassesOp::Prepend, "icon");
|
||||||
}
|
}
|
||||||
if let IconKind::Font(font_size) = self.icon_kind() {
|
if let IconKind::Font(font_size) = self.icon_kind() {
|
||||||
self.alter_prop(PropsOp::add_classes(font_size.as_str()));
|
self.alter_classes(ClassesOp::Add, font_size.as_str());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -43,7 +43,7 @@ impl Component for Icon {
|
||||||
let has_label = aria_label.is_some();
|
let has_label = aria_label.is_some();
|
||||||
html! {
|
html! {
|
||||||
i
|
i
|
||||||
(self.props())
|
class=[self.classes().get()]
|
||||||
role=[has_label.then_some("img")]
|
role=[has_label.then_some("img")]
|
||||||
aria-label=[aria_label]
|
aria-label=[aria_label]
|
||||||
aria-hidden=[(!has_label).then_some("true")]
|
aria-hidden=[(!has_label).then_some("true")]
|
||||||
|
|
@ -60,7 +60,7 @@ impl Component for Icon {
|
||||||
viewBox=(viewbox)
|
viewBox=(viewbox)
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
(self.props())
|
class=[self.classes().get()]
|
||||||
role=[has_label.then_some("img")]
|
role=[has_label.then_some("img")]
|
||||||
aria-label=[aria_label]
|
aria-label=[aria_label]
|
||||||
aria-hidden=[(!has_label).then_some("true")]
|
aria-hidden=[(!has_label).then_some("true")]
|
||||||
|
|
@ -98,10 +98,10 @@ impl Icon {
|
||||||
|
|
||||||
// **< Icon BUILDER >***************************************************************************
|
// **< Icon BUILDER >***************************************************************************
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del icono.
|
/// Modifica la lista de clases CSS aplicadas al icono.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_value(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@ use crate::theme::*;
|
||||||
pub struct Image {
|
pub struct Image {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS de la imagen.
|
/// Devuelve las clases CSS asociadas a la imagen.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve las dimensiones de la imagen.
|
/// Devuelve las dimensiones de la imagen.
|
||||||
size: image::Size,
|
size: image::Size,
|
||||||
/// Devuelve el origen de la imagen.
|
/// Devuelve el origen de la imagen.
|
||||||
|
|
@ -35,7 +35,7 @@ impl Component for Image {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes(self.source().to_class()));
|
self.alter_classes(ClassesOp::Prepend, self.source().to_class());
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -47,7 +47,7 @@ impl Component for Image {
|
||||||
return Ok(html! {
|
return Ok(html! {
|
||||||
span
|
span
|
||||||
id=[self.id()]
|
id=[self.id()]
|
||||||
(self.props())
|
class=[self.classes().get()]
|
||||||
style=[dimensions]
|
style=[dimensions]
|
||||||
role=[(!is_decorative).then_some("img")]
|
role=[(!is_decorative).then_some("img")]
|
||||||
aria-label=[(!is_decorative).then_some(alt_text)]
|
aria-label=[(!is_decorative).then_some(alt_text)]
|
||||||
|
|
@ -66,7 +66,7 @@ impl Component for Image {
|
||||||
src=[source]
|
src=[source]
|
||||||
alt=(alt_text)
|
alt=(alt_text)
|
||||||
id=[self.id()]
|
id=[self.id()]
|
||||||
(self.props())
|
class=[self.classes().get()]
|
||||||
style=[dimensions] {}
|
style=[dimensions] {}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -87,15 +87,15 @@ impl Image {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS de la imagen.
|
/// Modifica la lista de clases CSS aplicadas a la imagen.
|
||||||
///
|
///
|
||||||
/// También acepta clases predefinidas para:
|
/// También acepta clases predefinidas para:
|
||||||
///
|
///
|
||||||
/// - Establecer bordes ([`classes::Border`]).
|
/// - Establecer bordes ([`classes::Border`]).
|
||||||
/// - Redondear las esquinas ([`classes::Rounded`]).
|
/// - Redondear las esquinas ([`classes::Rounded`]).
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ use crate::theme::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop::prelude::*;
|
/// use pagetop::prelude::*;
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
|
|
@ -34,8 +34,8 @@ use crate::theme::*;
|
||||||
pub struct Nav {
|
pub struct Nav {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del menú.
|
/// Devuelve las clases CSS asociadas al menú.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el estilo visual seleccionado.
|
/// Devuelve el estilo visual seleccionado.
|
||||||
nav_kind: nav::Kind,
|
nav_kind: nav::Kind,
|
||||||
/// Devuelve la distribución y orientación seleccionada.
|
/// Devuelve la distribución y orientación seleccionada.
|
||||||
|
|
@ -54,12 +54,12 @@ impl Component for Nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes({
|
self.alter_classes(ClassesOp::Prepend, {
|
||||||
let mut classes = "nav".to_string();
|
let mut classes = "nav".to_string();
|
||||||
self.nav_kind().push_class(&mut classes);
|
self.nav_kind().push_class(&mut classes);
|
||||||
self.nav_layout().push_class(&mut classes);
|
self.nav_layout().push_class(&mut classes);
|
||||||
classes
|
classes
|
||||||
}));
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -69,7 +69,7 @@ impl Component for Nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
ul id=[self.id()] (self.props()) {
|
ul id=[self.id()] class=[self.classes().get()] {
|
||||||
(items)
|
(items)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -101,10 +101,10 @@ impl Nav {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del menú.
|
/// Modifica la lista de clases CSS aplicadas al menú.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -80,8 +80,8 @@ impl ItemKind {
|
||||||
pub struct Item {
|
pub struct Item {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del elemento.
|
/// Devuelve las clases CSS asociadas al elemento.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el tipo de elemento representado.
|
/// Devuelve el tipo de elemento representado.
|
||||||
item_kind: ItemKind,
|
item_kind: ItemKind,
|
||||||
}
|
}
|
||||||
|
|
@ -96,7 +96,7 @@ impl Component for Item {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes(self.item_kind().to_class()));
|
self.alter_classes(ClassesOp::Prepend, self.item_kind().to_class());
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -104,7 +104,7 @@ impl Component for Item {
|
||||||
ItemKind::Void => html! {},
|
ItemKind::Void => html! {},
|
||||||
|
|
||||||
ItemKind::Label(label) => html! {
|
ItemKind::Label(label) => html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
span class="nav-link disabled" aria-disabled="true" {
|
span class="nav-link disabled" aria-disabled="true" {
|
||||||
(label.using(cx))
|
(label.using(cx))
|
||||||
}
|
}
|
||||||
|
|
@ -137,7 +137,7 @@ impl Component for Item {
|
||||||
let aria_disabled = (*disabled).then_some("true");
|
let aria_disabled = (*disabled).then_some("true");
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
a
|
a
|
||||||
class=(classes)
|
class=(classes)
|
||||||
href=[href]
|
href=[href]
|
||||||
|
|
@ -153,7 +153,7 @@ impl Component for Item {
|
||||||
}
|
}
|
||||||
|
|
||||||
ItemKind::Html(html) => html! {
|
ItemKind::Html(html) => html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
(html.render(cx))
|
(html.render(cx))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -170,7 +170,7 @@ impl Component for Item {
|
||||||
.unwrap_or_else(|| "Dropdown".to_string())
|
.unwrap_or_else(|| "Dropdown".to_string())
|
||||||
});
|
});
|
||||||
html! {
|
html! {
|
||||||
li id=[self.id()] (self.props()) {
|
li id=[self.id()] class=[self.classes().get()] {
|
||||||
a
|
a
|
||||||
class="nav-link dropdown-toggle"
|
class="nav-link dropdown-toggle"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
|
|
@ -290,10 +290,10 @@ impl Item {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del elemento.
|
/// Modifica la lista de clases CSS aplicadas al elemento.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
||||||
///
|
///
|
||||||
/// Barra **simple**, sólo con un menú horizontal:
|
/// Barra **simple**, sólo con un menú horizontal:
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop::prelude::*;
|
/// use pagetop::prelude::*;
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
|
|
@ -33,7 +33,7 @@ const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
||||||
///
|
///
|
||||||
/// Barra **colapsable**, con botón de despliegue y contenido en el desplegable cuando colapsa:
|
/// Barra **colapsable**, con botón de despliegue y contenido en el desplegable cuando colapsa:
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let navbar = Navbar::simple_toggle()
|
/// let navbar = Navbar::simple_toggle()
|
||||||
|
|
@ -48,7 +48,7 @@ const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
||||||
///
|
///
|
||||||
/// Barra con **marca de identidad a la izquierda** y menú a la derecha, típica de una cabecera:
|
/// Barra con **marca de identidad a la izquierda** y menú a la derecha, típica de una cabecera:
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let brand = navbar::Brand::new()
|
/// let brand = navbar::Brand::new()
|
||||||
|
|
@ -75,7 +75,7 @@ const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
||||||
///
|
///
|
||||||
/// Barra con **botón de despliegue a la izquierda** y **marca de identidad a la derecha**:
|
/// Barra con **botón de despliegue a la izquierda** y **marca de identidad a la derecha**:
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let brand = navbar::Brand::new()
|
/// let brand = navbar::Brand::new()
|
||||||
|
|
@ -93,7 +93,7 @@ const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
||||||
///
|
///
|
||||||
/// Barra con el **contenido en un *offcanvas***, ideal para dispositivos móviles o menús largos:
|
/// Barra con el **contenido en un *offcanvas***, ideal para dispositivos móviles o menús largos:
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let oc = Offcanvas::new()
|
/// let oc = Offcanvas::new()
|
||||||
|
|
@ -118,7 +118,7 @@ const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
||||||
///
|
///
|
||||||
/// Barra **fija arriba**:
|
/// Barra **fija arriba**:
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// # use pagetop::prelude::*;
|
/// # use pagetop::prelude::*;
|
||||||
/// # use pagetop_bootsier::theme::*;
|
/// # use pagetop_bootsier::theme::*;
|
||||||
/// let brand = navbar::Brand::new()
|
/// let brand = navbar::Brand::new()
|
||||||
|
|
@ -138,8 +138,8 @@ const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
||||||
pub struct Navbar {
|
pub struct Navbar {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS de la barra de navegación.
|
/// Devuelve las clases CSS asociadas a la barra de navegación.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el punto de ruptura configurado.
|
/// Devuelve el punto de ruptura configurado.
|
||||||
expand: BreakPoint,
|
expand: BreakPoint,
|
||||||
/// Devuelve la disposición configurada para la barra de navegación.
|
/// Devuelve la disposición configurada para la barra de navegación.
|
||||||
|
|
@ -160,12 +160,12 @@ impl Component for Navbar {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes({
|
self.alter_classes(ClassesOp::Prepend, {
|
||||||
let mut classes = "navbar".to_string();
|
let mut classes = "navbar".to_string();
|
||||||
self.expand().push_class(&mut classes, "navbar-expand", "");
|
self.expand().push_class(&mut classes, "navbar-expand", "");
|
||||||
self.position().push_class(&mut classes);
|
self.position().push_class(&mut classes);
|
||||||
classes
|
classes
|
||||||
}));
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -202,7 +202,7 @@ impl Component for Navbar {
|
||||||
let id = cx.required_id::<Self>(self.id(), 1);
|
let id = cx.required_id::<Self>(self.id(), 1);
|
||||||
|
|
||||||
Ok(html! {
|
Ok(html! {
|
||||||
nav id=(&id) (self.props()) {
|
nav id=(&id) class=[self.classes().get()] {
|
||||||
div class="container-fluid" {
|
div class="container-fluid" {
|
||||||
@match self.layout() {
|
@match self.layout() {
|
||||||
// Barra más sencilla: sólo contenido.
|
// Barra más sencilla: sólo contenido.
|
||||||
|
|
@ -342,15 +342,15 @@ impl Navbar {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS de la barra de navegación.
|
/// Modifica la lista de clases CSS aplicadas a la barra de navegación.
|
||||||
///
|
///
|
||||||
/// También acepta clases predefinidas para:
|
/// También acepta clases predefinidas para:
|
||||||
///
|
///
|
||||||
/// - Modificar el color de fondo ([`classes::Background`]).
|
/// - Modificar el color de fondo ([`classes::Background`]).
|
||||||
/// - Definir la apariencia del texto ([`classes::Text`]).
|
/// - Definir la apariencia del texto ([`classes::Text`]).
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ impl Component for Item {
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
if let Self::Nav(nav) = self {
|
if let Self::Nav(nav) = self {
|
||||||
if let Some(mut nav) = nav.get() {
|
if let Some(mut nav) = nav.get() {
|
||||||
nav.alter_prop(PropsOp::prepend_classes("navbar-nav"));
|
nav.alter_classes(ClassesOp::Prepend, "navbar-nav");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -57,7 +57,7 @@ impl Component for Item {
|
||||||
return Ok(html! {});
|
return Ok(html! {});
|
||||||
}
|
}
|
||||||
html! {
|
html! {
|
||||||
ul id=[nav.id()] (nav.props()) {
|
ul id=[nav.id()] class=[nav.classes().get()] {
|
||||||
(items)
|
(items)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ use crate::theme::*;
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust
|
||||||
/// use pagetop::prelude::*;
|
/// use pagetop::prelude::*;
|
||||||
/// use pagetop_bootsier::theme::*;
|
/// use pagetop_bootsier::theme::*;
|
||||||
///
|
///
|
||||||
|
|
@ -45,8 +45,8 @@ use crate::theme::*;
|
||||||
pub struct Offcanvas {
|
pub struct Offcanvas {
|
||||||
#[getters(skip)]
|
#[getters(skip)]
|
||||||
id: AttrId,
|
id: AttrId,
|
||||||
/// Devuelve los atributos HTML y clases CSS del panel.
|
/// Devuelve las clases CSS asociadas al panel.
|
||||||
props: Props,
|
classes: Classes,
|
||||||
/// Devuelve el título del panel.
|
/// Devuelve el título del panel.
|
||||||
title: L10n,
|
title: L10n,
|
||||||
/// Devuelve el punto de ruptura configurado para cambiar el comportamiento del panel.
|
/// Devuelve el punto de ruptura configurado para cambiar el comportamiento del panel.
|
||||||
|
|
@ -73,13 +73,13 @@ impl Component for Offcanvas {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup(&mut self, _cx: &Context) {
|
fn setup(&mut self, _cx: &Context) {
|
||||||
self.alter_prop(PropsOp::prepend_classes({
|
self.alter_classes(ClassesOp::Prepend, {
|
||||||
let mut classes = "offcanvas".to_string();
|
let mut classes = "offcanvas".to_string();
|
||||||
self.breakpoint().push_class(&mut classes, "offcanvas", "");
|
self.breakpoint().push_class(&mut classes, "offcanvas", "");
|
||||||
self.placement().push_class(&mut classes);
|
self.placement().push_class(&mut classes);
|
||||||
self.visibility().push_class(&mut classes);
|
self.visibility().push_class(&mut classes);
|
||||||
classes
|
classes
|
||||||
}));
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||||
|
|
@ -97,10 +97,10 @@ impl Offcanvas {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Modifica los atributos HTML o las clases CSS del panel.
|
/// Modifica la lista de clases CSS aplicadas al panel.
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
||||||
self.props.alter_prop(op);
|
self.classes.alter_classes(op, classes);
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -192,7 +192,7 @@ impl Offcanvas {
|
||||||
html! {
|
html! {
|
||||||
div
|
div
|
||||||
id=(&id)
|
id=(&id)
|
||||||
(self.props())
|
class=[self.classes().get()]
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
data-bs-scroll=[body_scroll]
|
data-bs-scroll=[body_scroll]
|
||||||
data-bs-backdrop=[backdrop]
|
data-bs-backdrop=[backdrop]
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,80 @@
|
||||||
// Bootstrap utility extensions. Imported just before utilities/api so variable changes take effect.
|
// Enable CSS Grid
|
||||||
|
|
||||||
// CSS Grid (Bootstrap 5): disable legacy grid classes and enable native CSS Grid.
|
|
||||||
$enable-grid-classes: false;
|
$enable-grid-classes: false;
|
||||||
$enable-cssgrid: true;
|
$enable-cssgrid: true;
|
||||||
|
|
||||||
// Extend the $utilities map with additional classes.
|
// Opacity
|
||||||
|
.bg-opacity-0 {
|
||||||
|
--bs-bg-opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-opacity-0 {
|
||||||
|
--bs-border-opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-opacity-0 {
|
||||||
|
--bs-text-opacity: 0;
|
||||||
|
}
|
||||||
|
.text-opacity-10 {
|
||||||
|
--bs-text-opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// FORMS
|
||||||
|
|
||||||
|
// Required field indicator
|
||||||
|
.form-required {
|
||||||
|
color: var(--bs-danger);
|
||||||
|
margin: 0 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form fields
|
||||||
|
.form-field {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fieldset
|
||||||
|
fieldset {
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--bs-body-bg);
|
||||||
|
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||||
|
border-radius: var(--bs-border-radius);
|
||||||
|
padding: 2rem 1rem 1rem;
|
||||||
|
margin: 2rem 0 1rem;
|
||||||
|
}
|
||||||
|
fieldset > legend {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 1rem;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: var(--bs-body-bg);
|
||||||
|
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||||
|
border-radius: var(--bs-border-radius);
|
||||||
|
padding: 0.125rem 0.75rem;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
line-height: 1.25;
|
||||||
|
width: fit-content;
|
||||||
|
max-width: 75%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.fieldset-description {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check buttons, gap between label and first inline check
|
||||||
|
.form-label + .form-check-inline {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extending utilities
|
||||||
$utilities: map-merge(
|
$utilities: map-merge(
|
||||||
$utilities,
|
$utilities,
|
||||||
(
|
(
|
||||||
// Individual border widths per side.
|
// Individual border widths
|
||||||
"border-top": (
|
"border-top": (
|
||||||
property: border-top-width,
|
property: border-top-width,
|
||||||
class: border-top,
|
class: border-top,
|
||||||
|
|
@ -29,7 +95,7 @@ $utilities: map-merge(
|
||||||
class: border-start,
|
class: border-start,
|
||||||
values: $border-widths
|
values: $border-widths
|
||||||
),
|
),
|
||||||
// Individual corner radii.
|
// Individual rounded values
|
||||||
"rounded-top-start": (
|
"rounded-top-start": (
|
||||||
property: border-top-left-radius,
|
property: border-top-left-radius,
|
||||||
class: rounded-top-start,
|
class: rounded-top-start,
|
||||||
|
|
@ -90,18 +156,11 @@ $utilities: map-merge(
|
||||||
pill: var(--#{$prefix}border-radius-pill)
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
// Opacity: add missing values (0 for bg/border/text; 10 for text) not in Bootstrap defaults.
|
|
||||||
"bg-opacity": map-merge(
|
|
||||||
map-get($utilities, "bg-opacity"),
|
|
||||||
(values: map-merge(map-get(map-get($utilities, "bg-opacity"), "values"), (0: 0)))
|
|
||||||
),
|
|
||||||
"border-opacity": map-merge(
|
|
||||||
map-get($utilities, "border-opacity"),
|
|
||||||
(values: map-merge(map-get(map-get($utilities, "border-opacity"), "values"), (0: 0)))
|
|
||||||
),
|
|
||||||
"text-opacity": map-merge(
|
|
||||||
map-get($utilities, "text-opacity"),
|
|
||||||
(values: map-merge(map-get(map-get($utilities, "text-opacity"), "values"), (0: 0, 10: .1)))
|
|
||||||
),
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Region Footer
|
||||||
|
.region-footer {
|
||||||
|
padding: .75rem 0 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
55
extensions/pagetop-bootsier/static/scss/bootsier.scss
vendored
Normal file
55
extensions/pagetop-bootsier/static/scss/bootsier.scss
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
@import "bootstrap-5.3.8/mixins/banner";
|
||||||
|
@include bsBanner("");
|
||||||
|
|
||||||
|
|
||||||
|
// scss-docs-start import-stack
|
||||||
|
// Configuration
|
||||||
|
@import "bootstrap-5.3.8/functions";
|
||||||
|
@import "bootstrap-5.3.8/variables";
|
||||||
|
@import "bootstrap-5.3.8/variables-dark";
|
||||||
|
@import "bootstrap-5.3.8/maps";
|
||||||
|
@import "bootstrap-5.3.8/mixins";
|
||||||
|
@import "bootstrap-5.3.8/utilities";
|
||||||
|
|
||||||
|
// Layout & components
|
||||||
|
@import "bootstrap-5.3.8/root";
|
||||||
|
@import "bootstrap-5.3.8/reboot";
|
||||||
|
@import "bootstrap-5.3.8/type";
|
||||||
|
@import "bootstrap-5.3.8/images";
|
||||||
|
@import "bootstrap-5.3.8/containers";
|
||||||
|
@import "bootstrap-5.3.8/grid";
|
||||||
|
@import "bootstrap-5.3.8/tables";
|
||||||
|
@import "bootstrap-5.3.8/forms";
|
||||||
|
@import "bootstrap-5.3.8/buttons";
|
||||||
|
@import "bootstrap-5.3.8/transitions";
|
||||||
|
@import "bootstrap-5.3.8/dropdown";
|
||||||
|
@import "bootstrap-5.3.8/button-group";
|
||||||
|
@import "bootstrap-5.3.8/nav";
|
||||||
|
@import "bootstrap-5.3.8/navbar";
|
||||||
|
@import "bootstrap-5.3.8/card";
|
||||||
|
@import "bootstrap-5.3.8/accordion";
|
||||||
|
@import "bootstrap-5.3.8/breadcrumb";
|
||||||
|
@import "bootstrap-5.3.8/pagination";
|
||||||
|
@import "bootstrap-5.3.8/badge";
|
||||||
|
@import "bootstrap-5.3.8/alert";
|
||||||
|
@import "bootstrap-5.3.8/progress";
|
||||||
|
@import "bootstrap-5.3.8/list-group";
|
||||||
|
@import "bootstrap-5.3.8/close";
|
||||||
|
@import "bootstrap-5.3.8/toasts";
|
||||||
|
@import "bootstrap-5.3.8/modal";
|
||||||
|
@import "bootstrap-5.3.8/tooltip";
|
||||||
|
@import "bootstrap-5.3.8/popover";
|
||||||
|
@import "bootstrap-5.3.8/carousel";
|
||||||
|
@import "bootstrap-5.3.8/spinners";
|
||||||
|
@import "bootstrap-5.3.8/offcanvas";
|
||||||
|
@import "bootstrap-5.3.8/placeholders";
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
@import "bootstrap-5.3.8/helpers";
|
||||||
|
|
||||||
|
// Custom definitions
|
||||||
|
@import "customs";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@import "bootstrap-5.3.8/utilities/api";
|
||||||
|
// scss-docs-end import-stack
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue