mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-24 13:34:55 +00:00
johndoe6345789
9ae6776f37
- Added stylelint scripts to package.json for linting SCSS and CSS files. - Updated global styles to remove quotes from font-family declarations and changed `currentColor` to `currentcolor`. - Refactored theme.scss to use shorthand hex color codes and updated font-family declarations. - Modified carousel component to remove unnecessary onSelect call. - Enhanced useSnippetForm hook with comments and ESLint disable/enable for clarity. - Improved mixins in _mixins.scss for flexbox and responsive breakpoints. - Updated color definitions in _variables.scss to use the `hsl()` format with degrees. - Changed button and dialog styles to use `currentcolor` for background. - Adjusted header styles for box-shadow and gradient backgrounds. - Refined typography styles to ensure consistent font-family usage. - Enhanced utility classes in _utilities.scss for better readability and maintainability.
465 lines
9.4 KiB
SCSS
465 lines
9.4 KiB
SCSS
@use '../abstracts' as *;
|
|
|
|
// ============================================
|
|
// Material Design 3 Dialog/Modal Styles
|
|
// ============================================
|
|
|
|
// Scrim/Overlay
|
|
[data-slot="dialog-overlay"],
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 50;
|
|
background-color: rgba($scrim, 0.32); // MD3 scrim opacity
|
|
animation: md3-fade-in $duration-medium-2 $easing-emphasized-decelerate;
|
|
}
|
|
|
|
// Dialog Content (MD3 Basic Dialog)
|
|
[data-slot="dialog"],
|
|
.dialog-content {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 50;
|
|
transform: translate(-50%, -50%);
|
|
width: calc(100% - 48px);
|
|
max-width: 560px;
|
|
max-height: calc(100vh - 96px);
|
|
overflow-y: auto;
|
|
background: $surface-container-high;
|
|
border: none;
|
|
border-radius: $radius-extra-large;
|
|
box-shadow: $elevation-3;
|
|
padding: $size-6;
|
|
animation: md3-dialog-enter $duration-medium-2 $easing-emphasized-decelerate;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Dialog Header
|
|
[data-slot="dialog-header"],
|
|
.dialog-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $size-4;
|
|
margin-bottom: $size-6;
|
|
}
|
|
|
|
// Dialog Title (MD3 Headline Small)
|
|
[data-slot="dialog-title"],
|
|
.dialog-title {
|
|
font-size: $font-headline-small;
|
|
line-height: $line-height-headline-small;
|
|
font-weight: 400;
|
|
color: $on-surface;
|
|
margin: 0;
|
|
}
|
|
|
|
// Dialog Description (MD3 Body Medium)
|
|
[data-slot="dialog-description"],
|
|
.dialog-description {
|
|
font-size: $font-body-medium;
|
|
line-height: $line-height-body-medium;
|
|
color: $on-surface-variant;
|
|
margin: 0;
|
|
}
|
|
|
|
// Dialog Footer (Actions)
|
|
[data-slot="dialog-footer"],
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: $size-2;
|
|
margin-top: $size-6;
|
|
}
|
|
|
|
// Dialog Close Button
|
|
[data-slot="dialog-close"],
|
|
.dialog-close {
|
|
position: absolute;
|
|
top: $size-4;
|
|
right: $size-4;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: $radius-full;
|
|
border: none;
|
|
background: transparent;
|
|
color: $on-surface-variant;
|
|
cursor: pointer;
|
|
transition: background-color $duration-short-4 $easing-standard;
|
|
|
|
&:hover {
|
|
background-color: rgba($on-surface, $state-hover-opacity);
|
|
}
|
|
|
|
&:focus-visible {
|
|
background-color: rgba($on-surface, $state-focus-opacity);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// MD3 Dropdown Menu
|
|
// ============================================
|
|
[data-slot="dropdown-menu-content"],
|
|
.dropdown-content {
|
|
z-index: 50;
|
|
min-width: 112px;
|
|
max-width: 280px;
|
|
overflow: hidden;
|
|
border-radius: $radius-extra-small;
|
|
border: none;
|
|
background: $surface-container;
|
|
box-shadow: $elevation-2;
|
|
padding: $size-2 0;
|
|
animation: md3-menu-enter $duration-short-4 $easing-emphasized-decelerate;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Dropdown Menu Item
|
|
[data-slot="dropdown-menu-item"],
|
|
.dropdown-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $size-3;
|
|
min-height: 48px;
|
|
padding: 0 $size-3;
|
|
font-size: $font-body-large;
|
|
line-height: $line-height-body-large;
|
|
color: $on-surface;
|
|
cursor: pointer;
|
|
transition: background-color $duration-short-4 $easing-standard;
|
|
user-select: none;
|
|
outline: none;
|
|
|
|
&:hover {
|
|
background-color: rgba($on-surface, $state-hover-opacity);
|
|
}
|
|
|
|
&:focus {
|
|
background-color: rgba($on-surface, $state-focus-opacity);
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgba($on-surface, $state-pressed-opacity);
|
|
}
|
|
|
|
&[data-disabled] {
|
|
pointer-events: none;
|
|
opacity: $state-disabled-opacity;
|
|
}
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: $on-surface-variant;
|
|
}
|
|
}
|
|
|
|
// Dropdown Menu Separator
|
|
[data-slot="dropdown-menu-separator"],
|
|
.dropdown-separator {
|
|
height: 1px;
|
|
background: $outline-variant;
|
|
margin: $size-2 0;
|
|
}
|
|
|
|
// Dropdown Menu Label
|
|
[data-slot="dropdown-menu-label"],
|
|
.dropdown-label {
|
|
padding: $size-2 $size-3;
|
|
font-size: $font-label-large;
|
|
font-weight: 500;
|
|
color: $on-surface-variant;
|
|
}
|
|
|
|
// ============================================
|
|
// MD3 Popover
|
|
// ============================================
|
|
[data-slot="popover-content"],
|
|
.popover-content {
|
|
z-index: 50;
|
|
width: auto;
|
|
min-width: 112px;
|
|
border-radius: $radius-medium;
|
|
border: none;
|
|
background: $surface-container;
|
|
box-shadow: $elevation-2;
|
|
padding: $size-4;
|
|
animation: md3-menu-enter $duration-short-4 $easing-emphasized-decelerate;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// MD3 Select
|
|
// ============================================
|
|
[data-slot="select-trigger"],
|
|
.select-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
min-height: 56px;
|
|
padding: $size-4;
|
|
font-size: $font-body-large;
|
|
border-radius: $radius-extra-small;
|
|
border: 1px solid $outline;
|
|
background: transparent;
|
|
color: $on-surface;
|
|
cursor: pointer;
|
|
transition: border-color $duration-short-4 $easing-standard;
|
|
|
|
&:hover {
|
|
border-color: $on-surface;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: $primary;
|
|
border-width: 2px;
|
|
padding: calc(#{$size-4} - 1px);
|
|
}
|
|
|
|
&[data-disabled] {
|
|
pointer-events: none;
|
|
opacity: $state-disabled-opacity;
|
|
}
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: $on-surface-variant;
|
|
}
|
|
}
|
|
|
|
[data-slot="select-content"],
|
|
.select-content {
|
|
z-index: 50;
|
|
min-width: 112px;
|
|
overflow: hidden;
|
|
border-radius: $radius-extra-small;
|
|
border: none;
|
|
background: $surface-container;
|
|
box-shadow: $elevation-2;
|
|
padding: $size-2 0;
|
|
animation: md3-menu-enter $duration-short-4 $easing-emphasized-decelerate;
|
|
}
|
|
|
|
[data-slot="select-item"],
|
|
.select-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
padding: 0 $size-3;
|
|
font-size: $font-body-large;
|
|
color: $on-surface;
|
|
cursor: pointer;
|
|
transition: background-color $duration-short-4 $easing-standard;
|
|
outline: none;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
background-color: rgba($on-surface, $state-hover-opacity);
|
|
}
|
|
|
|
&:focus {
|
|
background-color: rgba($on-surface, $state-focus-opacity);
|
|
}
|
|
|
|
&[data-state="checked"] {
|
|
background-color: rgba($primary, 0.12);
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: $primary;
|
|
}
|
|
}
|
|
|
|
&[data-disabled] {
|
|
pointer-events: none;
|
|
opacity: $state-disabled-opacity;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// MD3 Alert Dialog
|
|
// ============================================
|
|
[data-slot="alert-dialog-content"],
|
|
.alert-dialog-content {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 50;
|
|
transform: translate(-50%, -50%);
|
|
width: calc(100% - 48px);
|
|
max-width: 560px;
|
|
background: $surface-container-high;
|
|
border: none;
|
|
border-radius: $radius-extra-large;
|
|
box-shadow: $elevation-3;
|
|
padding: $size-6;
|
|
animation: md3-dialog-enter $duration-medium-2 $easing-emphasized-decelerate;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Alert Dialog with icon (optional)
|
|
.alert-dialog-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: $size-4;
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: $on-surface-variant;
|
|
}
|
|
|
|
&--error svg {
|
|
color: $destructive;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// MD3 Snackbar/Toast
|
|
// ============================================
|
|
.snackbar,
|
|
[data-slot="toast"] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $size-2;
|
|
min-height: 48px;
|
|
padding: $size-3-5 $size-4;
|
|
background: $inverse-surface;
|
|
color: $inverse-on-surface;
|
|
border-radius: $radius-extra-small;
|
|
box-shadow: $elevation-3;
|
|
font-size: $font-body-medium;
|
|
animation: md3-snackbar-enter $duration-medium-1 $easing-emphasized-decelerate;
|
|
}
|
|
|
|
.snackbar-action {
|
|
margin-left: auto;
|
|
padding: 0 $size-2;
|
|
font-size: $font-label-large;
|
|
font-weight: 500;
|
|
color: $inverse-primary;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: opacity $duration-short-4 $easing-standard;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Namespace Selector (MD3 styled)
|
|
// ============================================
|
|
.namespace-select {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: $size-2;
|
|
padding: $size-2 $size-4;
|
|
font-size: $font-label-large;
|
|
font-weight: 500;
|
|
border-radius: $radius-small;
|
|
border: 1px solid $outline-variant;
|
|
background: $surface-container;
|
|
color: $on-surface;
|
|
cursor: pointer;
|
|
transition: all $duration-short-4 $easing-standard;
|
|
|
|
svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: $on-surface-variant;
|
|
transition: color $duration-short-4 $easing-standard;
|
|
}
|
|
|
|
&:hover {
|
|
background: $surface-container-high;
|
|
border-color: $outline;
|
|
|
|
svg {
|
|
color: $on-surface;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: $primary;
|
|
box-shadow: 0 0 0 2px rgba($primary, 0.2);
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Animations
|
|
// ============================================
|
|
@keyframes md3-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes md3-dialog-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -48%) scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes md3-menu-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes md3-snackbar-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|