git/snippet-pastebin
1
0
Fork 0
mirror of https://github.com/johndoe6345789/snippet-pastebin.git synced 2026-04-24 13:34:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove unused SCSS module files in favor of M3 classes

Browse Source 
Co-authored-by: aider (openrouter/anthropic/claude-sonnet-4.5) <aider@aider.chat>
This commit is contained in:
johndoe6345789
2026-01-20 16:41:55 +00:00
parent b4379fde9b
commit de566714c5
5 changed files with 20 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/ui/accordion.module.scss
View File

@@ -1,70 +1,4 @@
.accordion {
width: 100%;
}
.item {
border-bottom: 1px solid var(--mat-sys-outline-variant);
&:last-child {
border-bottom: none;
}
}
.trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 0;
background: transparent;
border: none;
cursor: pointer;
font-family: var(--mat-sys-body-large-font);
font-size: var(--mat-sys-body-large-size);
font-weight: var(--mat-sys-body-large-weight);
color: var(--mat-sys-on-surface);
text-align: left;
transition: color 200ms;
&:hover {
color: var(--mat-sys-primary);
}
&:focus-visible {
outline: 2px solid var(--mat-sys-primary);
outline-offset: 2px;
}
&:disabled {
opacity: 0.38;
cursor: not-allowed;
}
}
.icon {
width: 20px;
height: 20px;
transition: transform 200ms;
color: var(--mat-sys-on-surface-variant);
}
.iconOpen {
transform: rotate(180deg);
}
.content {
overflow: hidden;
transition: max-height 300ms ease-in-out;
max-height: 1000px;
}
.contentClosed {
max-height: 0;
}
.contentInner {
padding: 0 0 16px;
font-family: var(--mat-sys-body-medium-font);
font-size: var(--mat-sys-body-medium-size);
color: var(--mat-sys-on-surface-variant);
}
// This file is no longer needed.
// The accordion component uses .mat-accordion and .mat-expansion-panel classes
// from src/styles/m3-scss/material/expansion/ instead.
// You can safely delete this file.

21
src/components/ui/button.module.scss
View File

@@ -1,17 +1,4 @@
.button {
// base button styles
}
.default {
// default variant styles
}
.destructive {
// destructive variant styles
}
.outline {
// outline variant styles
}
// ... other variant styles
// This file is no longer needed.
// The button component uses .mat-mdc-button, .mat-mdc-unelevated-button, etc.
// from src/styles/m3-scss/material/button/ instead.
// You can safely delete this file.

55
src/components/ui/checkbox.module.scss
View File

@@ -1,51 +1,4 @@
.container {
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
}
.input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
&:focus-visible + .indicator {
outline: 2px solid var(--mat-sys-primary);
outline-offset: 2px;
}
}
.indicator {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 2px solid var(--mat-sys-on-surface-variant);
border-radius: var(--mat-sys-corner-extra-small);
background-color: transparent;
transition: all 200ms;
.input:hover + & {
border-color: var(--mat-sys-on-surface);
background-color: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
}
.input:checked + & {
border-color: var(--mat-sys-primary);
background-color: var(--mat-sys-primary);
}
.input:disabled + & {
opacity: 0.38;
cursor: not-allowed;
}
}
.icon {
width: 14px;
height: 14px;
color: var(--mat-sys-on-primary);
}
// This file is no longer needed.
// The checkbox component uses .mat-mdc-checkbox and .mdc-checkbox classes
// from src/styles/m3-scss/material/checkbox/ instead.
// You can safely delete this file.

131
src/components/ui/select.module.scss
View File

@@ -1,127 +1,4 @@
.trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 120px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--mat-sys-outline);
border-radius: var(--mat-sys-corner-small);
background-color: var(--mat-sys-surface);
color: var(--mat-sys-on-surface);
font-family: var(--mat-sys-body-large-font);
font-size: var(--mat-sys-body-large-size);
cursor: pointer;
transition: all 200ms;
&:hover {
border-color: var(--mat-sys-on-surface);
background-color: var(--mat-sys-surface-variant);
}
&:focus-visible {
outline: 2px solid var(--mat-sys-primary);
border-color: var(--mat-sys-primary);
}
&:disabled {
opacity: 0.38;
cursor: not-allowed;
}
}
.triggerSm {
height: 32px;
font-size: var(--mat-sys-body-medium-size);
}
.icon {
width: 16px;
height: 16px;
color: var(--mat-sys-on-surface-variant);
}
.overlay {
position: fixed;
inset: 0;
z-index: 1000;
background-color: transparent;
}
.content {
position: fixed;
z-index: 1001;
min-width: 180px;
max-height: 400px;
overflow-y: auto;
padding: 8px;
background-color: var(--mat-sys-surface-container);
border-radius: var(--mat-sys-corner-small);
box-shadow: var(--mat-sys-level2);
animation: slideIn 200ms;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 12px 16px;
border-radius: var(--mat-sys-corner-extra-small);
cursor: pointer;
font-family: var(--mat-sys-body-large-font);
font-size: var(--mat-sys-body-large-size);
color: var(--mat-sys-on-surface);
transition: background-color 200ms;
&:hover {
background-color: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
}
&:focus-visible {
background-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
}
}
.itemSelected {
background-color: var(--mat-sys-secondary-container);
color: var(--mat-sys-on-secondary-container);
}
.checkmark {
width: 20px;
height: 20px;
color: var(--mat-sys-primary);
}
.group {
padding: 8px 0;
}
.label {
padding: 8px 16px;
font-family: var(--mat-sys-label-small-font);
font-size: var(--mat-sys-label-small-size);
font-weight: var(--mat-sys-label-small-weight);
color: var(--mat-sys-on-surface-variant);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.separator {
height: 1px;
margin: 8px 0;
background-color: var(--mat-sys-outline-variant);
}
@keyframes slideIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
// This file is no longer needed.
// The select component uses .mat-mdc-select-trigger and .mat-mdc-select-panel classes
// from src/styles/m3-scss/material/select/ instead.
// You can safely delete this file.

62
src/components/ui/switch.module.scss
View File

@@ -1,58 +1,4 @@
.container {
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
}
.input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
&:focus-visible + .track {
outline: 2px solid var(--mat-sys-primary);
outline-offset: 2px;
}
}
.track {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
border-radius: var(--mat-sys-corner-full);
background-color: var(--mat-sys-surface-variant);
border: 2px solid var(--mat-sys-outline);
transition: all 200ms;
.input:checked + & {
background-color: var(--mat-sys-primary);
border-color: var(--mat-sys-primary);
}
.input:disabled + & {
opacity: 0.38;
cursor: not-allowed;
}
}
.thumb {
position: absolute;
top: 50%;
left: 8px;
transform: translateY(-50%);
width: 16px;
height: 16px;
border-radius: var(--mat-sys-corner-full);
background-color: var(--mat-sys-outline);
transition: all 200ms;
.input:checked + .track & {
left: 24px;
width: 24px;
height: 24px;
background-color: var(--mat-sys-on-primary);
}
}
// This file is no longer needed.
// The switch component uses .mat-mdc-slide-toggle and .mdc-switch classes
// from src/styles/m3-scss/material/slide-toggle/ instead.
// You can safely delete this file.