Initial commit - Angular library: ui-essentials
🎯 Implementation Complete! This library has been extracted from the monorepo and is ready for Git submodule distribution. Features: - Standardized SCSS imports (no relative paths) - Optimized public-api.ts exports - Independent Angular library structure - Ready for consumer integration as submodule 🚀 Generated with Claude Code (https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jules
235
src/lib/components/feedback/snackbar/snackbar.component.scss
Normal file
235
src/lib/components/feedback/snackbar/snackbar.component.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.ui-snackbar {
|
||||
// Core Structure
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: $semantic-spacing-layout-section-md;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: $semantic-z-index-modal;
|
||||
max-width: 90vw;
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
|
||||
// Layout & Spacing
|
||||
padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
|
||||
// Visual Design
|
||||
background: $semantic-color-surface-elevated;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-secondary;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
box-shadow: $semantic-shadow-elevation-4;
|
||||
|
||||
// Typography
|
||||
font-family: map-get($semantic-typography-body-medium, font-family);
|
||||
font-size: map-get($semantic-typography-body-medium, font-size);
|
||||
font-weight: map-get($semantic-typography-body-medium, font-weight);
|
||||
line-height: map-get($semantic-typography-body-medium, line-height);
|
||||
color: $semantic-color-text-primary;
|
||||
|
||||
// Transitions
|
||||
transition: all $semantic-motion-duration-normal $semantic-motion-easing-ease;
|
||||
|
||||
// Size Variants
|
||||
&--sm {
|
||||
min-height: $semantic-sizing-button-height-sm;
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-md;
|
||||
font-family: map-get($semantic-typography-body-small, font-family);
|
||||
font-size: map-get($semantic-typography-body-small, font-size);
|
||||
font-weight: map-get($semantic-typography-body-small, font-weight);
|
||||
line-height: map-get($semantic-typography-body-small, line-height);
|
||||
}
|
||||
|
||||
&--md {
|
||||
min-height: $semantic-sizing-button-height-md;
|
||||
padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
|
||||
}
|
||||
|
||||
&--lg {
|
||||
min-height: $semantic-sizing-button-height-lg;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
font-family: map-get($semantic-typography-body-large, font-family);
|
||||
font-size: map-get($semantic-typography-body-large, font-size);
|
||||
font-weight: map-get($semantic-typography-body-large, font-weight);
|
||||
line-height: map-get($semantic-typography-body-large, line-height);
|
||||
}
|
||||
|
||||
// Color Variants
|
||||
&--primary {
|
||||
background: $semantic-color-primary;
|
||||
color: $semantic-color-on-primary;
|
||||
border-color: $semantic-color-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: $semantic-color-success;
|
||||
color: $semantic-color-on-success;
|
||||
border-color: $semantic-color-success;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: $semantic-color-warning;
|
||||
color: $semantic-color-on-warning;
|
||||
border-color: $semantic-color-warning;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: $semantic-color-danger;
|
||||
color: $semantic-color-on-danger;
|
||||
border-color: $semantic-color-danger;
|
||||
}
|
||||
|
||||
&--info {
|
||||
background: $semantic-color-info;
|
||||
color: $semantic-color-on-info;
|
||||
border-color: $semantic-color-info;
|
||||
}
|
||||
|
||||
// Position Variants
|
||||
&--top {
|
||||
top: $semantic-spacing-layout-section-md;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
&--left {
|
||||
left: $semantic-spacing-layout-section-md;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: $semantic-spacing-layout-section-md;
|
||||
left: auto;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// Animation States
|
||||
&--entering {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
}
|
||||
|
||||
&--exiting {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
}
|
||||
|
||||
// BEM Elements
|
||||
&__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
&--multiline {
|
||||
padding: $semantic-spacing-content-line-tight 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $semantic-spacing-component-xs;
|
||||
margin-left: $semantic-spacing-component-sm;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__action {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: $semantic-spacing-component-xs;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
cursor: pointer;
|
||||
transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
||||
|
||||
// Use inherited text color with opacity for actions
|
||||
color: inherit;
|
||||
font-weight: $semantic-typography-font-weight-medium;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $semantic-color-focus;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__dismiss {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: $semantic-spacing-component-xs;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
cursor: pointer;
|
||||
margin-left: $semantic-spacing-component-sm;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $semantic-color-focus;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon styling
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
color: inherit;
|
||||
font-size: $semantic-sizing-icon-inline;
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@media (max-width: $semantic-breakpoint-md - 1) {
|
||||
bottom: $semantic-spacing-layout-section-sm;
|
||||
left: $semantic-spacing-layout-section-sm;
|
||||
right: $semantic-spacing-layout-section-sm;
|
||||
transform: translateX(0);
|
||||
max-width: none;
|
||||
|
||||
&--left,
|
||||
&--right {
|
||||
left: $semantic-spacing-layout-section-sm;
|
||||
right: $semantic-spacing-layout-section-sm;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $semantic-breakpoint-sm - 1) {
|
||||
padding: $semantic-spacing-component-sm;
|
||||
bottom: $semantic-spacing-layout-section-xs;
|
||||
left: $semantic-spacing-layout-section-xs;
|
||||
right: $semantic-spacing-layout-section-xs;
|
||||
|
||||
font-family: map-get($semantic-typography-body-small, font-family);
|
||||
font-size: map-get($semantic-typography-body-small, font-size);
|
||||
font-weight: map-get($semantic-typography-body-small, font-weight);
|
||||
line-height: map-get($semantic-typography-body-small, line-height);
|
||||
|
||||
&__actions {
|
||||
margin-left: $semantic-spacing-component-xs;
|
||||
gap: $semantic-spacing-component-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user