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

70
components/dashboard/BentoGrid.vue
View File

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