mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-07 21:44:51 +00:00
ad5a7e51b9
- Vite 6 → 8 (Rolldown bundler), laravel-vite-plugin 1 → 3, @vitejs/plugin-vue 5 → 6 - Tailwind CSS 3 → 4 with CSS-based config (@theme, @plugin, @utility) - Add @tailwindcss/vite plugin, remove postcss/autoprefixer/sass - Convert SCSS files to plain CSS (resources/sass → resources/css) - Migrate tailwind.config.js to CSS @theme directives - Rename deprecated utility classes (shadow-sm→shadow-xs, outline-none→outline-hidden, rounded-sm→rounded-xs, bg-gradient-to→bg-linear-to, ring→ring-3) - Migrate opacity utilities to color modifiers (bg-opacity, text-opacity, border-opacity, ring-opacity → color/N syntax) - Update primary color CSS vars to full rgb() values for TW4 color-mix() - Fix border-l color specificity for sidebar navigation (TW4 default border color changed from gray-200 to currentColor) - Fix invalid border color classes (border-grey-light, border-modal-bg, border--200) - Add @reference directive for @apply in Vue component style blocks - Convert Vue component <style lang="scss"> blocks to plain CSS
108 lines
2.4 KiB
CSS
Vendored
108 lines
2.4 KiB
CSS
Vendored
.tooltip {
|
|
display: block !important;
|
|
z-index: 10000;
|
|
|
|
.tooltip-inner {
|
|
background: black;
|
|
color: white;
|
|
border-radius: 16px;
|
|
padding: 5px 10px 4px;
|
|
}
|
|
|
|
.tooltip-arrow {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
position: absolute;
|
|
margin: 5px;
|
|
border-color: black;
|
|
z-index: 1;
|
|
}
|
|
|
|
&[x-placement^="top"] {
|
|
margin-bottom: 5px;
|
|
|
|
.tooltip-arrow {
|
|
border-width: 5px 5px 0 5px;
|
|
border-left-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-bottom-color: transparent !important;
|
|
bottom: -5px;
|
|
left: calc(50% - 5px);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&[x-placement^="bottom"] {
|
|
margin-top: 5px;
|
|
|
|
.tooltip-arrow {
|
|
border-width: 0 5px 5px 5px;
|
|
border-left-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-top-color: transparent !important;
|
|
top: -5px;
|
|
left: calc(50% - 5px);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&[x-placement^="right"] {
|
|
margin-left: 5px;
|
|
|
|
.tooltip-arrow {
|
|
border-width: 5px 5px 5px 0;
|
|
border-left-color: transparent !important;
|
|
border-top-color: transparent !important;
|
|
border-bottom-color: transparent !important;
|
|
left: -5px;
|
|
top: calc(50% - 5px);
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&[x-placement^="left"] {
|
|
margin-right: 5px;
|
|
|
|
.tooltip-arrow {
|
|
border-width: 5px 0 5px 5px;
|
|
border-top-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-bottom-color: transparent !important;
|
|
right: -5px;
|
|
top: calc(50% - 5px);
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&.popover {
|
|
.popover-inner {
|
|
background: #f9f9f9;
|
|
color: black;
|
|
padding: 24px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.popover-arrow {
|
|
border-color: #f9f9f9;
|
|
}
|
|
}
|
|
|
|
&[aria-hidden='true'] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity .15s, visibility .15s;
|
|
}
|
|
|
|
&[aria-hidden='false'] {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity .15s;
|
|
}
|
|
}
|