matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix SCSS syntax error in BentoGrid component
Build And Push Image / docker (push) Successful in 1m55s Details 

- Fixed :deep() selector usage with parent selectors
- Separated each modifier class into its own :deep() selector
- Resolves build error with Sass compilation

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt 2025-08-31 13:53:05 +02:00
parent 4d0591ce7d
commit 41eeb8650c
1 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
components/dashboard/BentoGrid.vue
View File

@ -87,78 +87,78 @@ const gridClass = computed(() => {
// Global Bento Item Classes
:deep(.bento-item) {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
// Size variants
&--small {
}
// Size variants
:deep(.bento-item--small) {
grid-column: span 3;
}
:deep(.bento-item--medium) {
grid-column: span 4;
}
:deep(.bento-item--large) {
grid-column: span 6;
}
:deep(.bento-item--xlarge) {
grid-column: span 8;
}
:deep(.bento-item--full) {
grid-column: span 12;
}
// Height variants
:deep(.bento-item--tall) {
grid-row: span 2;
}
:deep(.bento-item--xtall) {
grid-row: span 3;
}
// Responsive overrides
@media (max-width: 640px) {
:deep(.bento-item--small),
:deep(.bento-item--medium),
:deep(.bento-item--large),
:deep(.bento-item--xlarge) {
grid-column: span 12;
}
}
@media (min-width: 641px) and (max-width: 768px) {
:deep(.bento-item--small) {
grid-column: span 3;
}
&--medium {
grid-column: span 4;
}
&--large {
:deep(.bento-item--medium),
:deep(.bento-item--large) {
grid-column: span 6;
}
&--xlarge {
:deep(.bento-item--xlarge) {
grid-column: span 6;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
:deep(.bento-item--small) {
grid-column: span 3;
}
:deep(.bento-item--medium) {
grid-column: span 4;
}
:deep(.bento-item--large) {
grid-column: span 6;
}
:deep(.bento-item--xlarge) {
grid-column: span 8;
}
&--full {
grid-column: span 12;
}
// Height variants
&--tall {
grid-row: span 2;
}
&--xtall {
grid-row: span 3;
}
// Responsive overrides
@media (max-width: 640px) {
&--small,
&--medium,
&--large,
&--xlarge {
grid-column: span 12;
}
}
@media (min-width: 641px) and (max-width: 768px) {
&--small {
grid-column: span 3;
}
&--medium,
&--large {
grid-column: span 6;
}
&--xlarge {
grid-column: span 6;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
&--small {
grid-column: span 3;
}
&--medium {
grid-column: span 4;
}
&--large {
grid-column: span 6;
}
&--xlarge {
grid-column: span 8;
}
}
}
</style>