mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-04-18 06:50:05 +02:00
feat: first batch of work
This commit is contained in:
Herculino Trotta
@@ -1,3 +1,11 @@
|
||||
import * as autosize from "autosize/dist/autosize";
|
||||
document.addEventListener("input", function (e) {
|
||||
// Check if the element that triggered the input event is a <textarea>
|
||||
if (e.target.tagName.toLowerCase() === "textarea") {
|
||||
|
||||
window.autosize = autosize;
|
||||
// Reset height to 'auto' to allow the textarea to shrink
|
||||
e.target.style.height = "auto";
|
||||
|
||||
// Set the height to its scrollHeight (the full height of the content)
|
||||
e.target.style.height = (e.target.scrollHeight + 5) + "px";
|
||||
}
|
||||
}, false);
|
||||
2
frontend/src/bootstrap.js
vendored
2
frontend/src/bootstrap.js
vendored
@@ -3,7 +3,7 @@ import * as bootstrap from 'bootstrap'; // eslint-disable-line no-unused-vars
|
||||
window.bootstrap = bootstrap;
|
||||
|
||||
function initiateToasts() {
|
||||
const toastElList = document.querySelectorAll('.toast');
|
||||
const toastElList = document.querySelectorAll('.toasty');
|
||||
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl)); // eslint-disable-line no-undef
|
||||
|
||||
for (let i = 0; i < toastList.length; i++) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import 'tom-select/dist/css/tom-select.bootstrap5.min.css';
|
||||
// import 'tom-select/dist/css/tom-select.default.min.css';
|
||||
|
||||
import TomSelect from "tom-select";
|
||||
import * as Popper from "@popperjs/core";
|
||||
@@ -9,6 +9,7 @@ window.TomSelect = function createDynamicTomSelect(element) {
|
||||
const config = {
|
||||
plugins: {},
|
||||
maxOptions: null,
|
||||
dropdownParent: 'body',
|
||||
|
||||
// Extract 'create' option from data attribute
|
||||
create: element.dataset.create === 'true',
|
||||
@@ -30,7 +31,7 @@ window.TomSelect = function createDynamicTomSelect(element) {
|
||||
{
|
||||
name: "sameWidth",
|
||||
enabled: true,
|
||||
fn: ({state}) => {
|
||||
fn: ({ state }) => {
|
||||
state.styles.popper.width = `${state.rects.reference.width}px`;
|
||||
},
|
||||
phase: "beforeWrite",
|
||||
@@ -79,8 +80,8 @@ window.TomSelect = function createDynamicTomSelect(element) {
|
||||
.then(json => {
|
||||
callback(json);
|
||||
}).catch(() => {
|
||||
callback();
|
||||
});
|
||||
callback();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// Import our custom CSS
|
||||
import './styles/style.scss';
|
||||
import '@fontsource-variable/jetbrains-mono/wght-italic.css';
|
||||
import '@fontsource-variable/jetbrains-mono';
|
||||
import './styles/tailwind.css';
|
||||
import './styles/style.scss';
|
||||
|
||||
@@ -1,51 +1,15 @@
|
||||
@use "sass:map";
|
||||
@import "variables";
|
||||
@import "bootstrap/scss/bootstrap-utilities";
|
||||
// Bootstrap Utilities and Custom Bootstrap Components
|
||||
// This file imports standalone implementations of Bootstrap components
|
||||
// and contains Bootstrap-related utilities
|
||||
|
||||
// Import all of Bootstrap's CSS
|
||||
// @import "bootstrap/scss/bootstrap";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
// @import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
// Standalone component implementations
|
||||
@use "offcanvas";
|
||||
@use "transitions";
|
||||
|
||||
// @import "bootstrap/scss/"
|
||||
|
||||
.form-label {
|
||||
font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
$theme-colors: map.merge($theme-colors,
|
||||
("primary": $primary ));
|
||||
|
||||
.table .col-auto {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.offcanvas-size-xl {
|
||||
--#{$prefix}offcanvas-width: min(95vw, 700px) !important;
|
||||
}
|
||||
|
||||
.offcanvas-size-xxl {
|
||||
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
|
||||
}
|
||||
|
||||
.offcanvas-size-md {
|
||||
/* add Responsivenes to default offcanvas */
|
||||
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
|
||||
}
|
||||
|
||||
.offcanvas-size-sm {
|
||||
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
|
||||
}
|
||||
// Bootstrap utilities (if needed)
|
||||
// @import "bootstrap/scss/bootstrap-utilities";
|
||||
|
||||
// Bootstrap-specific utility classes
|
||||
.dropdown-toggle.dropdown-toggle-no-icon::after {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,89 +1,92 @@
|
||||
@import 'air-datepicker/air-datepicker.css';
|
||||
|
||||
.air-datepicker-global-container {
|
||||
z-index: 2000; // Allows the datepicker to be shown on top of offcanvas
|
||||
/* Allows the datepicker to be shown on top of offcanvas */
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.air-datepicker {
|
||||
--adp-accent-color: #fbb700;
|
||||
--adp-day-name-color: #fbb700;
|
||||
--adp-background-color: #303030; /* $gray-800 */
|
||||
--adp-color: #fff;
|
||||
--adb-color-other-month: #888; /* $gray-600 */
|
||||
--adp-cell-background-color-selected: #fbb700;
|
||||
--adp-accent-color: var(--color-primary);
|
||||
--adp-day-name-color: var(--color-primary);
|
||||
--adp-background-color: var(--color-base-100);
|
||||
--adp-color: var(--color-base-content);
|
||||
--adb-color-other-month: color-mix(in oklab, var(--color-base-content) 50%, transparent);
|
||||
--adp-cell-background-color-selected: var(--color-primary);
|
||||
|
||||
--adp-border-color-inline: #444;
|
||||
--adp-border-color-inline: var(--color-base-300);
|
||||
|
||||
--adp-background-color-selected-other-month-focused: #e6a600; /* Slightly darker than $yellow */
|
||||
--adp-background-color-selected-other-month: #fbb700;
|
||||
--adp-background-color-selected-other-month-focused: oklch(from var(--color-primary) calc(l * 0.9) c h);
|
||||
--adp-background-color-selected-other-month: var(--color-primary);
|
||||
|
||||
--adp-color-secondary: #adb5bd; /* $gray-500 */
|
||||
--adp-background-color-hover: #444;
|
||||
--adp-background-color-active: #3c3c3c;
|
||||
--adp-cell-background-color-selected-hover: #e6a600;
|
||||
--adp-color-other-month: #888; /* $gray-600 */
|
||||
--adp-color-disabled: #444; /* $gray-700 */
|
||||
--adp-color-disabled-in-range: #666; /* Between $gray-600 and $gray-700 */
|
||||
--adp-color-other-month-hover: #ced4da; /* $gray-400 */
|
||||
--adp-time-track-color: #444; /* $gray-700 */
|
||||
--adp-time-track-color-hover: #888; /* $gray-600 */
|
||||
--adp-color-secondary: color-mix(in oklab, var(--color-base-content) 60%, transparent);
|
||||
--adp-background-color-hover: var(--color-base-200);
|
||||
--adp-background-color-active: var(--color-base-300);
|
||||
--adp-cell-background-color-selected-hover: oklch(from var(--color-primary) calc(l * 0.9) c h);
|
||||
--adp-color-other-month: color-mix(in oklab, var(--color-base-content) 50%, transparent);
|
||||
--adp-color-disabled: color-mix(in oklab, var(--color-base-content) 30%, transparent);
|
||||
--adp-color-disabled-in-range: color-mix(in oklab, var(--color-base-content) 40%, transparent);
|
||||
--adp-color-other-month-hover: color-mix(in oklab, var(--color-base-content) 70%, transparent);
|
||||
--adp-time-track-color: var(--color-base-300);
|
||||
--adp-time-track-color-hover: var(--color-base-content);
|
||||
}
|
||||
|
||||
.air-datepicker-cell.-selected-,
|
||||
.air-datepicker-cell.-selected-.-current-,
|
||||
.-selected-.air-datepicker-cell.-year-.-other-decade-,
|
||||
.-selected-.air-datepicker-cell.-day-.-other-month-{
|
||||
color: #222; /* $gray-900 */
|
||||
.-selected-.air-datepicker-cell.-day-.-other-month- {
|
||||
color: var(--color-primary-content);
|
||||
}
|
||||
|
||||
/* Additional styles for better dark theme integration */
|
||||
.air-datepicker {
|
||||
border-color: #444; /* $gray-700 */
|
||||
border-color: var(--color-base-300);
|
||||
border-radius: var(--radius-box, 0.5rem);
|
||||
}
|
||||
|
||||
.air-datepicker-body--day-names {
|
||||
color: #fbb700; /* $yellow */
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.air-datepicker-cell:hover {
|
||||
background-color: #444; /* $gray-700 */
|
||||
background-color: var(--color-base-200);
|
||||
}
|
||||
|
||||
.air-datepicker-cell.-current- {
|
||||
color: #fbb700; /* $yellow */
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.air-datepicker-cell.-range-from-,
|
||||
.air-datepicker-cell.-range-to- {
|
||||
border: 1px solid #fbb700; /* $yellow */
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.air-datepicker-cell.-range-from-::before,
|
||||
.air-datepicker-cell.-range-to-::before {
|
||||
background-color: rgba(251, 183, 0, 0.1); /* $yellow with opacity */
|
||||
background-color: oklch(from var(--color-primary) l c h / 10%);
|
||||
}
|
||||
|
||||
.air-datepicker-cell.-in-range- {
|
||||
background-color: rgba(251, 183, 0, 0.1); /* $yellow with opacity */
|
||||
background-color: oklch(from var(--color-primary) l c h / 10%);
|
||||
}
|
||||
|
||||
.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {
|
||||
background-color: #fbb700; /* $yellow */
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.air-datepicker-time--row input[type='range']::-moz-range-thumb {
|
||||
background-color: #fbb700; /* $yellow */
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.air-datepicker-button,
|
||||
.air-datepicker-button:hover {
|
||||
color: #fbb700; /* $yellow */
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.air-datepicker-button:hover {
|
||||
background-color: #444; /* $gray-700 */
|
||||
background-color: var(--color-base-200);
|
||||
}
|
||||
|
||||
.air-datepicker--pointer:after {
|
||||
background: #303030
|
||||
}
|
||||
background: var(--color-base-100);
|
||||
}
|
||||
@@ -1 +1,22 @@
|
||||
@use "@fortawesome/fontawesome-free/css/all.css";
|
||||
@use "@fortawesome/fontawesome-free/css/fontawesome.css"; // Core FontAwesome styles
|
||||
@use "@fortawesome/fontawesome-free/css/solid.css"; // Solid icons (fas)
|
||||
@use "@fortawesome/fontawesome-free/css/regular.css"; // Regular icons (far)
|
||||
|
||||
|
||||
// Override FontAwesome's .fab class to avoid conflict with DaisyUI
|
||||
// This removes the FontAwesome Brand icons styling from .fab, allowing DaisyUI to style it
|
||||
.fab {
|
||||
font-family: unset;
|
||||
font-weight: unset;
|
||||
-moz-osx-font-smoothing: unset;
|
||||
-webkit-font-smoothing: unset;
|
||||
display: revert-layer;
|
||||
font-style: unset;
|
||||
font-variant: unset;
|
||||
line-height: unset;
|
||||
text-rendering: unset;
|
||||
}
|
||||
|
||||
.fab::before {
|
||||
content: unset;
|
||||
}
|
||||
326
frontend/src/styles/_offcanvas.scss
Normal file
326
frontend/src/styles/_offcanvas.scss
Normal file
@@ -0,0 +1,326 @@
|
||||
// Offcanvas component - Standalone implementation
|
||||
// Decoupled from Bootstrap 5, integrated with DaisyUI colors
|
||||
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
|
||||
// Variables
|
||||
$offcanvas-z-index: 1045 !default;
|
||||
$offcanvas-backdrop-z-index: 1040 !default;
|
||||
$offcanvas-width: 400px !default;
|
||||
$offcanvas-height: 30vh !default;
|
||||
$offcanvas-padding: 1rem !default;
|
||||
$offcanvas-transition-duration: 0.3s !default;
|
||||
$offcanvas-backdrop-opacity: 0.5 !default;
|
||||
|
||||
// Breakpoints
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px) !default;
|
||||
|
||||
// Mixins
|
||||
@mixin media-breakpoint-up($name) {
|
||||
$min: map.get($breakpoints, $name
|
||||
);
|
||||
|
||||
@if $min and $min >0 {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-breakpoint-down($name) {
|
||||
$breakpoint-names: map.keys($breakpoints);
|
||||
$n: list.index($breakpoint-names, $name);
|
||||
|
||||
@if $n and $n < list.length($breakpoint-names) {
|
||||
$next: list.nth($breakpoint-names, $n + 1);
|
||||
$max: map.get($breakpoints, $next);
|
||||
|
||||
@if $max {
|
||||
@media (max-width: calc($max - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Base offcanvas CSS variables
|
||||
%offcanvas-css-vars {
|
||||
--offcanvas-z-index: #{$offcanvas-z-index};
|
||||
--offcanvas-width: #{$offcanvas-width};
|
||||
--offcanvas-height: #{$offcanvas-height};
|
||||
--offcanvas-padding-x: #{$offcanvas-padding};
|
||||
--offcanvas-padding-y: #{$offcanvas-padding};
|
||||
--offcanvas-color: var(--color-base-content);
|
||||
--offcanvas-bg: var(--color-base-300);
|
||||
--offcanvas-border-width: 1px;
|
||||
--offcanvas-border-color: var(--color-base-300);
|
||||
--offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--offcanvas-transition: transform #{$offcanvas-transition-duration} ease-in-out;
|
||||
--offcanvas-title-line-height: 1.5;
|
||||
}
|
||||
|
||||
// Apply CSS variables to all breakpoint classes
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$breakpoint-names: map.keys($breakpoints);
|
||||
$n: list.index($breakpoint-names, $breakpoint);
|
||||
$next: null;
|
||||
$infix: "";
|
||||
|
||||
@if $n < list.length($breakpoint-names) {
|
||||
$next: list.nth($breakpoint-names, $n + 1);
|
||||
$infix: "-#{$next}";
|
||||
}
|
||||
|
||||
.offcanvas#{$infix} {
|
||||
@extend %offcanvas-css-vars;
|
||||
}
|
||||
}
|
||||
|
||||
// Generate offcanvas classes for each breakpoint
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$breakpoint-names: map.keys($breakpoints);
|
||||
$n: list.index($breakpoint-names, $breakpoint);
|
||||
$next: null;
|
||||
$infix: "";
|
||||
|
||||
@if $n < list.length($breakpoint-names) {
|
||||
$next: list.nth($breakpoint-names, $n + 1);
|
||||
$infix: "-#{$next}";
|
||||
}
|
||||
|
||||
.offcanvas#{$infix} {
|
||||
@if $next {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: var(--offcanvas-z-index);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
color: var(--offcanvas-color);
|
||||
visibility: hidden;
|
||||
background-color: var(--offcanvas-bg);
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
box-shadow: var(--offcanvas-box-shadow);
|
||||
transition: var(--offcanvas-transition);
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--offcanvas-width);
|
||||
border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: var(--offcanvas-width);
|
||||
border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&.showing,
|
||||
&.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.showing,
|
||||
&.hiding,
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@if $infix !="" {
|
||||
@include media-breakpoint-up($next) {
|
||||
--offcanvas-height: auto;
|
||||
--offcanvas-border-width: 0;
|
||||
background-color: transparent !important;
|
||||
|
||||
.offcanvas-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
padding: 0;
|
||||
overflow-y: visible;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
// For the last breakpoint (no infix)
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: var(--offcanvas-z-index);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
color: var(--offcanvas-color);
|
||||
visibility: hidden;
|
||||
background-color: var(--offcanvas-bg);
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
box-shadow: var(--offcanvas-box-shadow);
|
||||
transition: var(--offcanvas-transition);
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--offcanvas-width);
|
||||
border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: var(--offcanvas-width);
|
||||
border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&.showing,
|
||||
&.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.showing,
|
||||
&.hiding,
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Offcanvas backdrop
|
||||
.offcanvas-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $offcanvas-backdrop-z-index;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--color-neutral, #000);
|
||||
|
||||
&.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.show {
|
||||
opacity: $offcanvas-backdrop-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// Offcanvas header
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
|
||||
|
||||
.btn-close {
|
||||
padding: calc(var(--offcanvas-padding-y) * 0.5) calc(var(--offcanvas-padding-x) * 0.5);
|
||||
margin-top: calc(-0.5 * var(--offcanvas-padding-y));
|
||||
margin-right: calc(-0.5 * var(--offcanvas-padding-x));
|
||||
margin-bottom: calc(-0.5 * var(--offcanvas-padding-y));
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Offcanvas title
|
||||
.offcanvas-title {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--offcanvas-title-line-height);
|
||||
}
|
||||
|
||||
// Offcanvas body
|
||||
.offcanvas-body {
|
||||
flex-grow: 1;
|
||||
padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Custom size modifiers (from existing bootstrap.scss)
|
||||
.offcanvas-size-xl {
|
||||
--offcanvas-width: min(95vw, 700px);
|
||||
}
|
||||
|
||||
.offcanvas-size-xxl {
|
||||
--offcanvas-width: min(95vw, 90vw);
|
||||
}
|
||||
|
||||
.offcanvas-size-md {
|
||||
--offcanvas-width: min(95vw, 400px);
|
||||
}
|
||||
|
||||
.offcanvas-size-sm {
|
||||
--offcanvas-width: min(95vw, 250px);
|
||||
}
|
||||
@@ -1,57 +1,426 @@
|
||||
//@use "tom-select/dist/css/tom-select.default.min.css";
|
||||
//@use "tom-select/dist/css/tom-select.bootstrap5.min.css";
|
||||
//@use "variables";
|
||||
//
|
||||
///* FIX BOOTSTRAP STYLING FOR TOM SELECT */
|
||||
//.ts-dropdown,
|
||||
//.ts-control,
|
||||
//.ts-control input {
|
||||
// color: var(--bs-body-color);
|
||||
//}
|
||||
//
|
||||
///* stylelint-disable-next-line selector-class-pattern */
|
||||
////.ts-wrapper.plugin-remove_button .item .remove {
|
||||
//// color: $red;
|
||||
////}
|
||||
//
|
||||
///* stylelint-disable-next-line selector-class-pattern */
|
||||
////.plugin-clear_button .clear-button {
|
||||
//// color: $red;
|
||||
//// right: 60px;
|
||||
////}
|
||||
//
|
||||
//.ts-wrapper.multi .ts-control > div.active {
|
||||
// //background: $primary;
|
||||
// //color: $body-color;
|
||||
// border: 0 solid #0000;
|
||||
//}
|
||||
//
|
||||
//.focus .ts-control {
|
||||
// //color: $input-focus-color;
|
||||
// //background-color: $input-focus-bg;
|
||||
// //border-color: $input-focus-border-color;
|
||||
// outline: 0;
|
||||
//
|
||||
// @if $enable-shadows {
|
||||
// @include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||
// } @else {
|
||||
// // Avoid using mixin so we can pass custom focus shadow properly
|
||||
// box-shadow: $input-focus-box-shadow;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.focus.ts-wrapper {
|
||||
// border-color: $form-select-focus-border-color;
|
||||
// outline: 0;
|
||||
//
|
||||
// @if $enable-shadows {
|
||||
// @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||
// } @else {
|
||||
// // Avoid using mixin so we can pass custom focus shadow properly
|
||||
// box-shadow: $form-select-focus-box-shadow;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.ts-control > .clear-button {
|
||||
// color: $red !important;
|
||||
//}
|
||||
@layer components {
|
||||
/* ============================================
|
||||
Tom-Select DaisyUI Theme
|
||||
Complete override of tom-select default styles
|
||||
============================================ */
|
||||
|
||||
/* Base Control Styles */
|
||||
.ts-control {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: var(--size, calc(var(--size-field, 0.25rem) * 10));
|
||||
padding: 0.5rem 0.75rem;
|
||||
gap: 0.375rem;
|
||||
|
||||
/* DaisyUI input styling */
|
||||
border: var(--border, 1px) solid transparent;
|
||||
border-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, transparent));
|
||||
border-radius: var(--radius-field, 0.5rem);
|
||||
background-color: var(--color-base-100);
|
||||
color: var(--color-base-content);
|
||||
|
||||
/* DaisyUI depth effect */
|
||||
box-shadow:
|
||||
0 1px color-mix(in oklab, var(--input-color) calc(var(--depth, 0) * 10%), transparent) inset,
|
||||
0 -1px oklch(100% 0 0 / calc(var(--depth, 0) * 0.1)) inset;
|
||||
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Multi-select with items */
|
||||
.ts-wrapper.multi.has-items .ts-control {
|
||||
padding: calc(0.5rem - 2px - 0px) 0.75rem calc(0.5rem - 2px - 3px - 0px);
|
||||
}
|
||||
|
||||
/* Control input field */
|
||||
.ts-control>input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 7rem;
|
||||
display: inline-flex !important;
|
||||
padding: 0 !important;
|
||||
padding-right: 1.25rem !important;
|
||||
margin: 0 !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
border: 0 none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
|
||||
font-size: 0.875rem !important;
|
||||
line-height: inherit !important;
|
||||
color: inherit;
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
.ts-control>input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ts-control>input:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.has-items .ts-control>input {
|
||||
margin: 0 0.25rem !important;
|
||||
}
|
||||
|
||||
/* Focus states - DaisyUI style */
|
||||
.ts-control:focus-within,
|
||||
.ts-control:focus,
|
||||
.focus .ts-control {
|
||||
--input-color: var(--color-base-content);
|
||||
border-color: var(--input-color);
|
||||
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth, 0) * 10%), transparent) inset;
|
||||
outline: 2px solid var(--input-color);
|
||||
outline-offset: 2px;
|
||||
isolation: isolate;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* .focus.ts-wrapper {
|
||||
border-color: var(--color-primary);
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
} */
|
||||
|
||||
/* Disabled state */
|
||||
.disabled .ts-control,
|
||||
.disabled .ts-control * {
|
||||
cursor: not-allowed !important;
|
||||
border-color: var(--color-base-200);
|
||||
background-color: var(--color-base-200);
|
||||
color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Multi-select items (badges) */
|
||||
.ts-wrapper.multi .ts-control>div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin: 0 0.25rem 0.25rem 0;
|
||||
padding: 0.25rem 0.75rem;
|
||||
gap: 0.25rem;
|
||||
|
||||
/* DaisyUI badge styling */
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-secondary-content);
|
||||
border-radius: var(--radius-field, 0.5rem);
|
||||
border: 0 solid transparent;
|
||||
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* Active multi-select item */
|
||||
.ts-wrapper.multi .ts-control>div.active {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-content);
|
||||
border: 0 solid transparent;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Disabled multi-select items */
|
||||
.ts-wrapper.multi.disabled .ts-control>div,
|
||||
.ts-wrapper.multi.disabled .ts-control>div.active {
|
||||
background-color: var(--color-base-200);
|
||||
color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
|
||||
border: 0 solid transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Remove button on items */
|
||||
.ts-wrapper.plugin-remove_button .item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ts-wrapper.plugin-remove_button .item .remove {
|
||||
display: inline-block;
|
||||
padding: 0 0.375rem;
|
||||
margin-left: 0.375rem;
|
||||
border: none;
|
||||
border-left: 1px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
|
||||
border-radius: 0 var(--radius-field, 0.5rem) var(--radius-field, 0.5rem) 0;
|
||||
|
||||
color: var(--color-error);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ts-wrapper.plugin-remove_button .item .remove:hover {
|
||||
opacity: 1;
|
||||
background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
|
||||
}
|
||||
|
||||
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
|
||||
background: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* RTL support for remove button */
|
||||
.ts-control.rtl .ts-wrapper.plugin-remove_button .item {
|
||||
padding-left: 0 !important;
|
||||
padding-right: initial;
|
||||
}
|
||||
|
||||
.ts-control.rtl .ts-wrapper.plugin-remove_button .item .remove {
|
||||
border-left: none;
|
||||
border-right: 1px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
|
||||
border-radius: var(--radius-field, 0.5rem) 0 0 var(--radius-field, 0.5rem);
|
||||
margin-left: 0;
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.ts-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1100;
|
||||
margin: 0.25rem 0 0;
|
||||
|
||||
/* DaisyUI dropdown styling */
|
||||
background-color: var(--color-base-100);
|
||||
color: var(--color-base-content);
|
||||
border: var(--border, 1px) solid var(--color-base-300);
|
||||
border-radius: var(--radius-box, 0.5rem);
|
||||
|
||||
/* DaisyUI shadow */
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgb(0 0 0 / calc(var(--depth, 0) * 0.1)),
|
||||
0 8px 10px -6px rgb(0 0 0 / calc(var(--depth, 0) * 0.1));
|
||||
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Dropdown content scrolling */
|
||||
.ts-dropdown-content {
|
||||
max-height: 40dvh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Dropdown options */
|
||||
.ts-dropdown .option,
|
||||
.ts-dropdown .optgroup-header,
|
||||
.ts-dropdown .no-results,
|
||||
.ts-dropdown .create {
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ts-dropdown [data-selectable].option {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.ts-dropdown [data-selectable].option:first-child {
|
||||
border-top-left-radius: var(--radius-box, 0.5rem);
|
||||
border-top-right-radius: var(--radius-box, 0.5rem);
|
||||
}
|
||||
|
||||
.ts-dropdown [data-selectable].option:last-child {
|
||||
border-bottom-left-radius: var(--radius-box, 0.5rem);
|
||||
border-bottom-right-radius: var(--radius-box, 0.5rem);
|
||||
}
|
||||
|
||||
/* Disabled options */
|
||||
.ts-dropdown .option,
|
||||
.ts-dropdown [data-disabled],
|
||||
.ts-dropdown [data-disabled] [data-selectable].option {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Hover and active states */
|
||||
.ts-dropdown [data-selectable].option:hover,
|
||||
.ts-dropdown .option:hover,
|
||||
.ts-dropdown .create:hover,
|
||||
.ts-dropdown .active {
|
||||
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
|
||||
.ts-dropdown .active.create {
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
|
||||
/* Optgroup styling */
|
||||
.ts-dropdown .optgroup-header {
|
||||
color: var(--color-base-content);
|
||||
background-color: var(--color-base-200);
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.ts-dropdown .optgroup:first-child .optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
/* Create option */
|
||||
.ts-dropdown .create {
|
||||
color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
|
||||
}
|
||||
|
||||
/* Highlight in search */
|
||||
.ts-dropdown [data-selectable] .highlight {
|
||||
background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.ts-dropdown .spinner {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.ts-dropdown .spinner::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: 0.1875rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-primary);
|
||||
border-color: var(--color-primary) transparent var(--color-primary) transparent;
|
||||
animation: ts-spin 1.2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ts-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Single select dropdown arrow */
|
||||
.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
|
||||
padding-right: 2.5rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 0.75rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.25em 1.25em;
|
||||
}
|
||||
|
||||
/* Dark theme arrow */
|
||||
[data-theme="dark"] .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a6adba' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Clear button plugin */
|
||||
.plugin-clear_button {
|
||||
--ts-pr-clear-button: 1em;
|
||||
}
|
||||
|
||||
.plugin-clear_button .clear-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc(0.75rem - 6px);
|
||||
transform: translateY(-50%);
|
||||
|
||||
color: var(--color-error);
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
opacity: 0;
|
||||
margin-right: 0 !important;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.plugin-clear_button.single .clear-button {
|
||||
right: max(2.5rem, 0.75rem);
|
||||
}
|
||||
|
||||
.plugin-clear_button.focus.has-items .clear-button,
|
||||
.plugin-clear_button:not(.disabled):hover.has-items .clear-button {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.plugin-clear_button .clear-button:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Full width control */
|
||||
.full .ts-control {
|
||||
background-color: var(--color-base-100);
|
||||
}
|
||||
|
||||
/* Input hidden state */
|
||||
.input-hidden .ts-control>input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
}
|
||||
|
||||
/* RTL support */
|
||||
.ts-control.rtl {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ts-control.rtl .ts-control>input {
|
||||
margin: 0 0.25rem 0 -0.125rem !important;
|
||||
}
|
||||
|
||||
/* Wrapper positioning */
|
||||
.ts-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ts-wrapper.single .ts-control,
|
||||
.ts-wrapper.single .ts-control input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hidden accessibility */
|
||||
.ts-hidden-accessible {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.tomselect-checkbox {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
56
frontend/src/styles/_transitions.scss
Normal file
56
frontend/src/styles/_transitions.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
// Transitions - Standalone implementation
|
||||
// Decoupled from Bootstrap 5
|
||||
|
||||
// Variables
|
||||
$enable-transitions: true !default;
|
||||
$enable-reduced-motion: true !default;
|
||||
|
||||
$transition-fade: opacity 0.15s linear !default;
|
||||
$transition-collapse: height 0.35s ease !default;
|
||||
$transition-collapse-width: width 0.35s ease !default;
|
||||
|
||||
// Fade transition
|
||||
.fade {
|
||||
transition: $transition-fade;
|
||||
|
||||
@if $enable-reduced-motion {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapse transitions
|
||||
.collapse {
|
||||
&:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: $transition-collapse;
|
||||
|
||||
@if $enable-reduced-motion {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: $transition-collapse-width;
|
||||
|
||||
@if $enable-reduced-motion {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "variables";
|
||||
@use "font-awesome";
|
||||
@use "bootstrap";
|
||||
@use "datepicker";
|
||||
@use "tom-select";
|
||||
// @use "datepicker";
|
||||
// @use "tom-select";
|
||||
@use "animations";
|
||||
@use "scrollbar";
|
||||
|
||||
@@ -12,13 +12,15 @@
|
||||
}
|
||||
|
||||
// Somewhat prevents flickering when replacing with Tom-select
|
||||
select[multiple] {
|
||||
select[multiple],
|
||||
select {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ts-dropdown-content {
|
||||
max-height: 50vh;
|
||||
}
|
||||
// .ts-dropdown-content {
|
||||
// max-height: 50vh;
|
||||
// }
|
||||
|
||||
//.font-base {
|
||||
// font-family: bootstrap.$font-family-base;
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
@import "tailwindcss" prefix(tw) source("../../../app/templates/");
|
||||
@import "tailwindcss" source("../../../app/templates/");
|
||||
@import "./_tom-select.scss";
|
||||
@import "./_datepicker.scss";
|
||||
|
||||
@plugin "daisyui" {
|
||||
themes: dark --default, light;
|
||||
themes: wygiwyh_dark --default, wygiwyh_light;
|
||||
logs: true;
|
||||
}
|
||||
@plugin "tw-bootstrap-grid";
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "light";
|
||||
name: "wygiwyh_light";
|
||||
default: false;
|
||||
prefersdark: false;
|
||||
color-scheme: "light";
|
||||
--color-base-100: oklch(100% 0 0);
|
||||
--color-base-200: oklch(98% 0 0);
|
||||
--color-base-300: oklch(95% 0 0);
|
||||
--color-base-300: oklch(96% 0 0);
|
||||
--color-base-content: oklch(21% 0.006 285.885);
|
||||
--color-primary: oklch(87% 0.169 91.605);
|
||||
--color-primary-content: oklch(41% 0.112 45.904);
|
||||
@@ -36,20 +38,21 @@
|
||||
--radius-box: 0.5rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--border: 2px;
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
--root-bg: oklch(93% 0 0);
|
||||
}
|
||||
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "dark";
|
||||
name: "wygiwyh_dark";
|
||||
default: true;
|
||||
prefersdark: true;
|
||||
color-scheme: "dark";
|
||||
--color-base-100: oklch(25.33% 0.016 252.42);
|
||||
--color-base-200: oklch(23.26% 0.014 253.1);
|
||||
--color-base-300: oklch(21.15% 0.012 254.09);
|
||||
--color-base-100: oklch(32.33% 0.016 252.42);
|
||||
--color-base-200: oklch(30.26% 0.016 252.42);
|
||||
--color-base-300: oklch(28.15% 0.016 252.42);
|
||||
--color-base-content: oklch(97.807% 0.029 256.847);
|
||||
--color-primary: oklch(87% 0.169 91.605);
|
||||
--color-primary-content: oklch(41% 0.112 45.904);
|
||||
@@ -72,9 +75,10 @@
|
||||
--radius-box: 0.5rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--border: 2px;
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
--root-bg: oklch(26.33% 0.016 252.42);
|
||||
}
|
||||
|
||||
|
||||
@@ -82,147 +86,171 @@
|
||||
@custom-variant hover (&:hover);
|
||||
|
||||
|
||||
@theme {
|
||||
--font-mono: "JetBrains Mono Variable", monospace;
|
||||
}
|
||||
|
||||
|
||||
@layer utilities {
|
||||
.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
|
||||
background-color: --alpha(var(--color-primary) / 15%);
|
||||
background-color: oklch(from var(--color-primary) l c h / 15%);
|
||||
}
|
||||
|
||||
|
||||
.bg-root {
|
||||
background-color: var(--root-bg) !important;
|
||||
}
|
||||
|
||||
.fieldset-legend {
|
||||
@apply text-xs;
|
||||
@apply justify-start;
|
||||
}
|
||||
|
||||
.fieldset-legend .asteriskField {
|
||||
@apply text-error;
|
||||
}
|
||||
|
||||
.hr {
|
||||
@apply text-base-content/60;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@layer components {
|
||||
/* === Sidebar styles === */
|
||||
.sidebar-active {
|
||||
@apply tw:text-primary-content tw:bg-primary;
|
||||
@apply text-primary-content bg-primary;
|
||||
}
|
||||
|
||||
.sidebar-item:not(.sidebar-active) {
|
||||
@apply tw:text-base-content/80 tw:hover:text-base-content;
|
||||
@apply text-base-content/80 hover:text-base-content;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@apply tw:z-1020 tw:fixed tw:top-0 tw:start-0 tw:h-full tw:transition-all tw:duration-100;
|
||||
@apply z-1020 fixed top-0 start-0 h-full transition-all duration-100;
|
||||
}
|
||||
|
||||
.sidebar-floating {
|
||||
/* Establishes the hover group and sets the collapsed/hover widths for the container */
|
||||
@apply tw:lg:w-16 tw:lg:hover:w-112;
|
||||
@apply lg:w-16 lg:hover:w-112;
|
||||
}
|
||||
|
||||
.sidebar-floating #sidebar {
|
||||
/* Sets the collapsed/hover widths for the inner navigation element */
|
||||
@apply tw:lg:w-16 tw:lg:group-hover:w-104 tw:transition-all tw:duration-100 tw:overflow-hidden;
|
||||
@apply lg:w-16 lg:group-hover:w-104 transition-all duration-100 overflow-hidden;
|
||||
}
|
||||
|
||||
.sidebar-floating + main {
|
||||
/* Adjusts the main content margin to account for the collapsed sidebar */
|
||||
@apply tw:lg:ml-16 tw:transition-all tw:duration-100;
|
||||
@apply lg:ml-16 transition-all duration-100;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-item span {
|
||||
/* Hides the text labels and reveals them only on hover */
|
||||
@apply tw:lg:invisible tw:lg:group-hover:visible;
|
||||
@apply lg:invisible lg:group-hover:visible;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-invisible {
|
||||
/* Hides the text labels and reveals them only on hover */
|
||||
@apply tw:lg:invisible tw:lg:group-hover:visible;
|
||||
@apply lg:invisible lg:group-hover:visible;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-menu-header {
|
||||
/* Hides the menu headers and reveals them only on hover */
|
||||
@apply tw:lg:hidden tw:lg:group-hover:inline;
|
||||
@apply lg:hidden lg:group-hover:inline;
|
||||
}
|
||||
|
||||
.sidebar-floating #sidebar-toggle-btn .fa-thumbtack-slash {
|
||||
/* Hides the 'pin' icon in the floating state */
|
||||
@apply tw:hidden!;
|
||||
@apply hidden!;
|
||||
}
|
||||
|
||||
.sidebar-floating #sidebar-toggle-btn .fa-thumbtack {
|
||||
/* Shows the 'expand' icon in the floating state */
|
||||
@apply tw:inline-block!;
|
||||
@apply inline-block!;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-title span {
|
||||
@apply tw:lg:invisible tw:lg:group-hover:visible
|
||||
@apply lg:invisible lg:group-hover:visible
|
||||
}
|
||||
|
||||
.sidebar-submenu-header {
|
||||
@apply tw:flex;
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-submenu-header {
|
||||
@apply tw:lg:hidden tw:lg:group-hover:flex;
|
||||
@apply lg:hidden lg:group-hover:flex;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-submenu-header h5 {
|
||||
@apply tw:lg:invisible tw:lg:group-hover:visible;
|
||||
@apply lg:invisible lg:group-hover:visible;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-submenu-header button {
|
||||
@apply tw:lg:hidden tw:lg:group-hover:inline;
|
||||
@apply lg:hidden lg:group-hover:inline;
|
||||
}
|
||||
|
||||
.sidebar-floating .list-unstyled {
|
||||
@apply tw:group-hover:lg:overflow-y-auto tw:lg:overflow-y-hidden tw:overflow-y-auto tw:overflow-x-hidden;
|
||||
@apply group-hover:lg:overflow-y-auto lg:overflow-y-hidden overflow-y-auto overflow-x-hidden;
|
||||
}
|
||||
|
||||
.sidebar-floating .sidebar-item {
|
||||
@apply tw:text-wrap tw:lg:text-nowrap ;
|
||||
@apply text-wrap lg:text-nowrap ;
|
||||
}
|
||||
|
||||
|
||||
/* --- STATE 2: Fixed (Permanently Expanded) --- */
|
||||
.sidebar-fixed {
|
||||
/* Sets the fixed, expanded width for the container */
|
||||
@apply tw:lg:w-[17%] tw:transition-all tw:duration-100;
|
||||
@apply lg:w-[17%] transition-all duration-100;
|
||||
}
|
||||
|
||||
.sidebar-fixed #sidebar {
|
||||
/* Sets the fixed, expanded width for the inner navigation */
|
||||
@apply tw:lg:w-[17%] tw:transition-all tw:duration-100;
|
||||
@apply lg:w-[17%] transition-all duration-100;
|
||||
}
|
||||
|
||||
.sidebar-fixed + main {
|
||||
/* Adjusts the main content margin to account for the expanded sidebar */
|
||||
@apply tw:lg:ml-[17%] tw:transition-all tw:duration-100;
|
||||
@apply lg:ml-[17%] transition-all duration-100;
|
||||
|
||||
/* Using 16vw to account for padding/margins */
|
||||
}
|
||||
|
||||
.sidebar-fixed .sidebar-item {
|
||||
@apply tw:text-wrap;
|
||||
@apply text-wrap;
|
||||
}
|
||||
|
||||
.sidebar-fixed .sidebar-item span {
|
||||
/* Ensures text labels are always visible */
|
||||
@apply tw:lg:visible;
|
||||
@apply lg:visible;
|
||||
}
|
||||
|
||||
.sidebar-fixed .sidebar-menu-header {
|
||||
/* Ensures menu headers are always visible */
|
||||
@apply tw:lg:inline;
|
||||
@apply lg:inline;
|
||||
}
|
||||
|
||||
.sidebar-fixed #sidebar-toggle-btn .fa-thumbtack-slash {
|
||||
/* Shows the 'pin' icon in the fixed state */
|
||||
@apply tw:inline-block!;
|
||||
@apply inline-block!;
|
||||
}
|
||||
|
||||
.sidebar-fixed #sidebar-toggle-btn .fa-thumbtack {
|
||||
/* Hides the 'expand' icon in the fixed state */
|
||||
@apply tw:hidden!;
|
||||
@apply hidden!;
|
||||
}
|
||||
|
||||
.sidebar-fixed .sidebar-title span {
|
||||
@apply tw:lg:visible;
|
||||
@apply lg:visible;
|
||||
}
|
||||
|
||||
.sidebar-fixed .sidebar-submenu-header {
|
||||
/* Ensures menu headers are always visible */
|
||||
@apply tw:lg:flex;
|
||||
@apply lg:flex;
|
||||
}
|
||||
|
||||
.sidebar-fixed .list-unstyled {
|
||||
@apply tw:overflow-y-auto tw:overflow-x-hidden;
|
||||
@apply overflow-y-auto overflow-x-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user