git/metabuilder
1
0
Fork 0
mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-05-02 17:55:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

update: scss,nextjs,module (7 files)

Browse Source
This commit is contained in:
Richard Ward
2025-12-30 18:15:41 +00:00
parent 2238a8632b
commit d4dab550b1
7 changed files with 240 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontends/nextjs/src/components/ui/atoms/display/Avatar.module.scss
+26
View File
@@ -0,0 +1,26 @@
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--action-hover, #f5f5f5);
color: var(--text-primary, #333);
font-weight: 500;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
// Dark mode support
[data-theme='dark'] {
.avatar {
background-color: var(--action-hover-dark, #2c2c2c);
color: var(--text-primary-dark, #fff);
}
}
frontends/nextjs/src/components/ui/atoms/display/Badge.module.scss
+39
View File
@@ -0,0 +1,39 @@
.badge {
height: auto;
padding: 2px 6px;
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.default {
background-color: var(--primary-main, #1976d2);
color: var(--primary-contrast-text, #fff);
}
.secondary {
background-color: var(--secondary-main, #9c27b0);
color: var(--secondary-contrast-text, #fff);
}
.destructive {
background-color: var(--error-main, #d32f2f);
color: var(--error-contrast-text, #fff);
}
.outline {
background-color: transparent;
border: 1px solid var(--border-color, #e0e0e0);
color: var(--text-primary, #333);
}
// Dark mode support
[data-theme='dark'] {
.outline {
border-color: var(--border-color-dark, #424242);
color: var(--text-primary-dark, #fff);
}
}
frontends/nextjs/src/components/ui/atoms/display/Label.module.scss
+20
View File
@@ -0,0 +1,20 @@
.label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary, #333);
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
// Dark mode support
[data-theme='dark'] {
.label {
color: var(--text-primary-dark, #fff);
}
}
frontends/nextjs/src/components/ui/atoms/feedback/Separator.module.scss
+23
View File
@@ -0,0 +1,23 @@
.separator {
border: none;
background-color: var(--divider, #e0e0e0);
}
.horizontal {
width: 100%;
height: 1px;
margin: 16px 0;
}
.vertical {
width: 1px;
height: 100%;
margin: 0 16px;
}
// Dark mode support
[data-theme='dark'] {
.separator {
background-color: var(--divider-dark, #424242);
}
}
frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.module.scss
+11
View File
@@ -0,0 +1,11 @@
.skeleton {
background-color: var(--action-hover, rgba(0, 0, 0, 0.08));
border-radius: 4px;
}
// Dark mode support
[data-theme='dark'] {
.skeleton {
background-color: var(--action-hover-dark, rgba(255, 255, 255, 0.08));
}
}
frontends/nextjs/src/components/ui/atoms/inputs/Input.module.scss
+69
View File
@@ -0,0 +1,69 @@
.input {
width: 100%;
:global(.fakemui-input-base) {
padding: 8px 12px;
font-size: 0.875rem;
border: 1px solid var(--border-color, #e0e0e0);
border-radius: 4px;
background-color: var(--background-paper, #fff);
transition: border-color 0.2s, box-shadow 0.2s;
}
:global(.fakemui-input-base:hover) {
border-color: var(--text-primary, #333);
}
:global(.fakemui-input-base-input:focus) {
outline: none;
}
:global(.fakemui-input-base:focus-within) {
border-color: var(--primary-main, #1976d2);
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}
:global(.fakemui-input-base-disabled) {
opacity: 0.5;
cursor: not-allowed;
}
:global(.fakemui-input-base-input) {
padding: 0;
border: none;
background: transparent;
font-family: inherit;
font-size: inherit;
width: 100%;
}
&.error {
:global(.fakemui-input-base) {
border-color: var(--error-main, #d32f2f);
}
:global(.fakemui-input-base:hover) {
border-color: var(--error-main, #d32f2f);
}
:global(.fakemui-input-base:focus-within) {
border-color: var(--error-main, #d32f2f);
box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
}
}
}
// Dark mode support
[data-theme='dark'] {
.input {
:global(.fakemui-input-base) {
background-color: var(--background-paper-dark, #1e1e1e);
border-color: var(--border-color-dark, #424242);
color: var(--text-primary-dark, #fff);
}
:global(.fakemui-input-base:hover) {
border-color: var(--text-primary-dark, #fff);
}
}
}
frontends/nextjs/src/components/ui/atoms/inputs/Textarea.module.scss
+52
View File
@@ -0,0 +1,52 @@
.textarea {
width: 100%;
padding: 8px 12px;
font-size: 0.875rem;
border: 1px solid var(--border-color, #e0e0e0);
border-radius: 4px;
background-color: var(--background-paper, #fff);
font-family: inherit;
resize: vertical;
transition: border-color 0.2s, box-shadow 0.2s;
&:hover {
border-color: var(--text-primary, #333);
}
&:focus {
outline: none;
border-color: var(--primary-main, #1976d2);
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&.error {
border-color: var(--error-main, #d32f2f);
&:hover {
border-color: var(--error-main, #d32f2f);
}
&:focus {
border-color: var(--error-main, #d32f2f);
box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
}
}
}
// Dark mode support
[data-theme='dark'] {
.textarea {
background-color: var(--background-paper-dark, #1e1e1e);
border-color: var(--border-color-dark, #424242);
color: var(--text-primary-dark, #fff);
&:hover {
border-color: var(--text-primary-dark, #fff);
}
}
}