mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-06-09 08:02:52 +02:00
feat: another batch
This commit is contained in:
Herculino Trotta
Vendored
+11
-5
@@ -1,10 +1,16 @@
|
||||
// Import all of Bootstrap's JS
|
||||
import * as bootstrap from 'bootstrap'; // eslint-disable-line no-unused-vars
|
||||
window.bootstrap = bootstrap;
|
||||
import './js/_tooltip.js';
|
||||
import 'bootstrap/js/dist/dropdown';
|
||||
import Toast from 'bootstrap/js/dist/toast';
|
||||
import 'bootstrap/js/dist/dropdown';
|
||||
import 'bootstrap/js/dist/collapse';
|
||||
import Offcanvas from 'bootstrap/js/dist/offcanvas';
|
||||
|
||||
window.Offcanvas = Offcanvas;
|
||||
|
||||
|
||||
function initiateToasts() {
|
||||
const toastElList = document.querySelectorAll('.toasty');
|
||||
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl)); // eslint-disable-line no-undef
|
||||
const toastList = [...toastElList].map(toastEl => new Toast(toastEl)); // eslint-disable-line no-undef
|
||||
|
||||
for (let i = 0; i < toastList.length; i++) {
|
||||
if (toastList[i].isShown() === false) {
|
||||
@@ -18,4 +24,4 @@ function initiateToasts() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initiateToasts, false);
|
||||
document.addEventListener('htmx:afterSwap', initiateToasts, false);
|
||||
initiateToasts();
|
||||
initiateToasts();
|
||||
@@ -0,0 +1,21 @@
|
||||
import tippy from 'tippy.js';
|
||||
import 'tippy.js/dist/tippy.css';
|
||||
import 'tippy.js/themes/light-border.css';
|
||||
|
||||
|
||||
function initiateTooltips() {
|
||||
const currentDataTheme = document.documentElement.getAttribute('data-theme') || '';
|
||||
let theme;
|
||||
|
||||
if (currentDataTheme.endsWith('_dark')) {
|
||||
theme = 'light-border';
|
||||
} else if (currentDataTheme.endsWith('_light')) {
|
||||
theme = 'dark';
|
||||
}
|
||||
|
||||
tippy('[data-tippy-content]', {
|
||||
theme: theme
|
||||
});
|
||||
}
|
||||
|
||||
window.initiateTooltips = initiateTooltips;
|
||||
@@ -4,10 +4,9 @@
|
||||
|
||||
// Standalone component implementations
|
||||
@use "offcanvas";
|
||||
@use "dropdown";
|
||||
@use "transitions";
|
||||
|
||||
// Bootstrap utilities (if needed)
|
||||
// @import "bootstrap/scss/bootstrap-utilities";
|
||||
|
||||
// Bootstrap-specific utility classes
|
||||
.dropdown-toggle.dropdown-toggle-no-icon::after {
|
||||
|
||||
@@ -0,0 +1,402 @@
|
||||
// Dropdown component - Standalone implementation
|
||||
// Decoupled from Bootstrap 5, integrated with DaisyUI colors
|
||||
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
|
||||
// Variables
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-x: 0.5rem !default;
|
||||
$dropdown-padding-y: 0.5rem !default;
|
||||
$dropdown-spacer: 0.125rem !default;
|
||||
$dropdown-font-size: 1rem !default;
|
||||
$dropdown-border-radius: 0.375rem !default;
|
||||
$dropdown-border-width: 1px !default;
|
||||
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
|
||||
$dropdown-divider-margin-y: 0.5rem !default;
|
||||
$dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !default;
|
||||
$dropdown-item-padding-y: 0.25rem !default;
|
||||
$dropdown-item-padding-x: 1rem !default;
|
||||
$dropdown-header-padding-x: 1rem !default;
|
||||
$dropdown-header-padding-y: 0.5rem !default;
|
||||
$dropdown-z-index: 1000 !default;
|
||||
|
||||
// Caret variables
|
||||
$caret-width: 0.3em !default;
|
||||
$caret-vertical-align: 0.255em !default;
|
||||
$caret-spacing: 0.255em !default;
|
||||
$enable-caret: true !default;
|
||||
|
||||
// Font
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-size-sm: 0.875rem !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;
|
||||
}
|
||||
}
|
||||
|
||||
// Caret mixins
|
||||
@mixin caret-down($width: $caret-width) {
|
||||
border-top: $width solid;
|
||||
border-right: $width solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: $width solid transparent;
|
||||
}
|
||||
|
||||
@mixin caret-up($width: $caret-width) {
|
||||
border-top: 0;
|
||||
border-right: $width solid transparent;
|
||||
border-bottom: $width solid;
|
||||
border-left: $width solid transparent;
|
||||
}
|
||||
|
||||
@mixin caret-end($width: $caret-width) {
|
||||
border-top: $width solid transparent;
|
||||
border-right: 0;
|
||||
border-bottom: $width solid transparent;
|
||||
border-left: $width solid;
|
||||
}
|
||||
|
||||
@mixin caret-start($width: $caret-width) {
|
||||
border-top: $width solid transparent;
|
||||
border-right: $width solid;
|
||||
border-bottom: $width solid transparent;
|
||||
}
|
||||
|
||||
@mixin caret($direction: down,
|
||||
$width: $caret-width,
|
||||
$spacing: $caret-spacing,
|
||||
$vertical-align: $caret-vertical-align) {
|
||||
@if $enable-caret {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: $spacing;
|
||||
vertical-align: $vertical-align;
|
||||
content: "";
|
||||
|
||||
@if $direction ==down {
|
||||
@include caret-down($width);
|
||||
}
|
||||
|
||||
@else if $direction ==up {
|
||||
@include caret-up($width);
|
||||
}
|
||||
|
||||
@else if $direction ==end {
|
||||
@include caret-end($width);
|
||||
}
|
||||
}
|
||||
|
||||
@if $direction ==start {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: $spacing;
|
||||
vertical-align: $vertical-align;
|
||||
content: "";
|
||||
@include caret-start($width);
|
||||
}
|
||||
}
|
||||
|
||||
&:empty::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($radius: $dropdown-border-radius) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin gradient-bg($color) {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@mixin box-shadow($shadow) {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@mixin font-size($size) {
|
||||
font-size: $size;
|
||||
}
|
||||
|
||||
// Breakpoint infix function
|
||||
@function breakpoint-infix($name, $breakpoints) {
|
||||
@if $name ==xs {
|
||||
@return "";
|
||||
}
|
||||
|
||||
@return "-#{$name}";
|
||||
}
|
||||
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropend,
|
||||
.dropdown,
|
||||
.dropstart,
|
||||
.dropup-center,
|
||||
.dropdown-center {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
white-space: nowrap;
|
||||
|
||||
// Generate the caret automatically
|
||||
@include caret();
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
// CSS variables using DaisyUI colors
|
||||
--dropdown-z-index: #{$dropdown-z-index};
|
||||
--dropdown-min-width: #{$dropdown-min-width};
|
||||
--dropdown-padding-x: #{$dropdown-padding-x};
|
||||
--dropdown-padding-y: #{$dropdown-padding-y};
|
||||
--dropdown-spacer: #{$dropdown-spacer};
|
||||
--dropdown-font-size: #{$dropdown-font-size};
|
||||
--dropdown-color: var(--color-base-content);
|
||||
--dropdown-bg: var(--color-base-300);
|
||||
--dropdown-border-color: var(--color-base-300);
|
||||
--dropdown-border-radius: #{$dropdown-border-radius};
|
||||
--dropdown-border-width: #{$dropdown-border-width};
|
||||
--dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
|
||||
--dropdown-divider-bg: var(--color-base-300);
|
||||
--dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
|
||||
--dropdown-box-shadow: #{$dropdown-box-shadow};
|
||||
--dropdown-link-color: var(--color-base-content);
|
||||
--dropdown-link-hover-color: var(--color-base-content);
|
||||
--dropdown-link-hover-bg: var(--color-base-200);
|
||||
--dropdown-link-active-color: var(--color-primary-content);
|
||||
--dropdown-link-active-bg: var(--color-primary);
|
||||
--dropdown-link-disabled-color: var(--color-base-content, #adb5bd);
|
||||
--dropdown-item-padding-x: #{$dropdown-item-padding-x};
|
||||
--dropdown-item-padding-y: #{$dropdown-item-padding-y};
|
||||
--dropdown-header-color: var(--color-base-content);
|
||||
--dropdown-header-padding-x: #{$dropdown-header-padding-x};
|
||||
--dropdown-header-padding-y: #{$dropdown-header-padding-y};
|
||||
|
||||
position: absolute;
|
||||
z-index: var(--dropdown-z-index);
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
min-width: var(--dropdown-min-width);
|
||||
padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
|
||||
margin: 0; // Override default margin of ul
|
||||
color: var(--dropdown-color);
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: var(--dropdown-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--dropdown-border-width) solid var(--dropdown-border-color);
|
||||
@include border-radius(var(--dropdown-border-radius));
|
||||
@include box-shadow(var(--dropdown-box-shadow));
|
||||
|
||||
&[data-bs-popper] {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
@if $dropdown-padding-y ==0 {
|
||||
|
||||
>.dropdown-item:first-child,
|
||||
>li:first-child .dropdown-item {
|
||||
@include border-top-radius(var(--dropdown-inner-border-radius));
|
||||
}
|
||||
|
||||
>.dropdown-item:last-child,
|
||||
>li:last-child .dropdown-item {
|
||||
@include border-bottom-radius(var(--dropdown-inner-border-radius));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive positioning
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
.dropdown-menu#{$infix}-start {
|
||||
--bs-position: start;
|
||||
|
||||
&[data-bs-popper] {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu#{$infix}-end {
|
||||
--bs-position: end;
|
||||
|
||||
&[data-bs-popper] {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
.dropup {
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(up);
|
||||
}
|
||||
}
|
||||
|
||||
.dropend {
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
right: auto;
|
||||
left: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(end);
|
||||
|
||||
&::after {
|
||||
vertical-align: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropstart {
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
margin-top: 0;
|
||||
margin-right: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(start);
|
||||
|
||||
&::before {
|
||||
vertical-align: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
height: 0;
|
||||
margin: var(--dropdown-divider-margin-y) 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--dropdown-divider-bg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--dropdown-link-color);
|
||||
text-align: inherit; // For `<button>`s
|
||||
text-decoration: none;
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
@include border-radius(0);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--dropdown-link-hover-color);
|
||||
@include gradient-bg(var(--dropdown-link-hover-bg));
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: var(--dropdown-link-active-color);
|
||||
text-decoration: none;
|
||||
@include gradient-bg(var(--dropdown-link-active-bg));
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--dropdown-link-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
color: var(--dropdown-header-color);
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
||||
// Dropdown text
|
||||
.dropdown-item-text {
|
||||
display: block;
|
||||
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
|
||||
color: var(--dropdown-link-color);
|
||||
}
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
--dropdown-color: #dee2e6;
|
||||
--dropdown-bg: #343a40;
|
||||
--dropdown-border-color: var(--color-base-300);
|
||||
--dropdown-box-shadow: #{$dropdown-box-shadow};
|
||||
--dropdown-link-color: #dee2e6;
|
||||
--dropdown-link-hover-color: #fff;
|
||||
--dropdown-divider-bg: var(--color-base-300);
|
||||
--dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
|
||||
--dropdown-link-active-color: var(--color-primary-content);
|
||||
--dropdown-link-active-bg: var(--color-primary);
|
||||
--dropdown-link-disabled-color: #adb5bd;
|
||||
--dropdown-header-color: #adb5bd;
|
||||
}
|
||||
Reference in New Issue
Block a user