ui
This commit is contained in:
Gaurav Kumar
602
frontend/angular-clarity-master/src/styles/_animations.scss
Normal file
602
frontend/angular-clarity-master/src/styles/_animations.scss
Normal file
@@ -0,0 +1,602 @@
|
||||
// ========================================
|
||||
// ANIMATIONS - Smooth & Modern Transitions
|
||||
// ========================================
|
||||
|
||||
@import './design-tokens';
|
||||
|
||||
// Fade Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Scale Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleUp {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleDown {
|
||||
from {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Slide Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutUp {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutDown {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
// Rotation Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinReverse {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: translate3d(0, -8px, 0);
|
||||
}
|
||||
70% {
|
||||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 7% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
15% {
|
||||
transform: rotateZ(-15deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotateZ(10deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotateZ(-10deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotateZ(6deg);
|
||||
}
|
||||
35% {
|
||||
transform: rotateZ(-4deg);
|
||||
}
|
||||
40%, 100% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer2 {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dots {
|
||||
0%, 20% {
|
||||
color: transparent;
|
||||
text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
|
||||
}
|
||||
40% {
|
||||
color: currentColor;
|
||||
text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
|
||||
}
|
||||
60% {
|
||||
text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 transparent;
|
||||
}
|
||||
80%, 100% {
|
||||
text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0%, 60%, 100% {
|
||||
transform: initial;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 5px rgba($primary-500, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba($primary-500, 0.8), 0 0 30px rgba($primary-500, 0.6);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba($primary-500, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation Classes
|
||||
// ========================================
|
||||
|
||||
// Fade Classes
|
||||
.animate-fade-in {
|
||||
animation: fadeIn $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-out {
|
||||
animation: fadeOut $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fadeInDown $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-left {
|
||||
animation: fadeInLeft $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-right {
|
||||
animation: fadeInRight $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
// Scale Classes
|
||||
.animate-scale-in {
|
||||
animation: scaleIn $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-out {
|
||||
animation: scaleOut $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-up {
|
||||
animation: scaleUp $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-down {
|
||||
animation: scaleDown $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
// Slide Classes
|
||||
.animate-slide-in-up {
|
||||
animation: slideInUp $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-down {
|
||||
animation: slideInDown $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-left {
|
||||
animation: slideInLeft $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slideInRight $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-up {
|
||||
animation: slideOutUp $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-down {
|
||||
animation: slideOutDown $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-left {
|
||||
animation: slideOutLeft $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-right {
|
||||
animation: slideOutRight $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
// Rotation Classes
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.animate-spin-reverse {
|
||||
animation: spinReverse 1s linear infinite;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-wiggle {
|
||||
animation: wiggle 1s ease-in-out;
|
||||
}
|
||||
|
||||
// Loading Classes
|
||||
.animate-shimmer {
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer2 {
|
||||
animation: shimmer2 1.5s infinite;
|
||||
}
|
||||
|
||||
.animate-dots {
|
||||
animation: dots 1.4s infinite;
|
||||
}
|
||||
|
||||
.animate-wave {
|
||||
animation: wave 1.4s infinite;
|
||||
}
|
||||
|
||||
// Hover Classes
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-glow {
|
||||
animation: glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-ripple {
|
||||
animation: ripple 0.6s linear;
|
||||
}
|
||||
|
||||
// Transition Classes
|
||||
// ========================================
|
||||
|
||||
.transition-all {
|
||||
transition: all $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: color $duration-200 $ease-out, background-color $duration-200 $ease-out, border-color $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.transition-shadow {
|
||||
transition: box-shadow $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
// Hover Effects
|
||||
// ========================================
|
||||
|
||||
.hover-lift {
|
||||
transition: transform $duration-200 $ease-out, box-shadow $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
transition: box-shadow $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 20px rgba($primary-500, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate {
|
||||
transition: transform $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-bounce {
|
||||
transition: transform $duration-200 $ease-bounce;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
// Staggered Animations
|
||||
// ========================================
|
||||
|
||||
.stagger-1 { animation-delay: 0.1s; }
|
||||
.stagger-2 { animation-delay: 0.2s; }
|
||||
.stagger-3 { animation-delay: 0.3s; }
|
||||
.stagger-4 { animation-delay: 0.4s; }
|
||||
.stagger-5 { animation-delay: 0.5s; }
|
||||
.stagger-6 { animation-delay: 0.6s; }
|
||||
.stagger-7 { animation-delay: 0.7s; }
|
||||
.stagger-8 { animation-delay: 0.8s; }
|
||||
|
||||
// Animation States
|
||||
// ========================================
|
||||
|
||||
.animation-paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.animation-running {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
// Reduced Motion Support
|
||||
// ========================================
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.animate-spin,
|
||||
.animate-pulse,
|
||||
.animate-bounce,
|
||||
.animate-float,
|
||||
.animate-glow {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
411
frontend/angular-clarity-master/src/styles/_base.scss
Normal file
411
frontend/angular-clarity-master/src/styles/_base.scss
Normal file
@@ -0,0 +1,411 @@
|
||||
// ========================================
|
||||
// BASE STYLES - Modern UI Foundation
|
||||
// ========================================
|
||||
|
||||
@import './design-tokens';
|
||||
|
||||
|
||||
// CSS Reset & Base Styles
|
||||
// ========================================
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-primary;
|
||||
font-size: $text-base;
|
||||
font-weight: $font-normal;
|
||||
line-height: $leading-normal;
|
||||
color: $gray-900;
|
||||
background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Typography
|
||||
// ========================================
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-secondary;
|
||||
font-weight: $font-semibold;
|
||||
line-height: $leading-tight;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 { font-size: $text-4xl; }
|
||||
h2 { font-size: $text-3xl; }
|
||||
h3 { font-size: $text-2xl; }
|
||||
h4 { font-size: $text-xl; }
|
||||
h5 { font-size: $text-lg; }
|
||||
h6 { font-size: $text-base; }
|
||||
|
||||
p {
|
||||
margin: 0 0 $space-4 0;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-600;
|
||||
text-decoration: none;
|
||||
transition: color $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
color: $primary-700;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Images
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Form Elements
|
||||
// ========================================
|
||||
|
||||
input, textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Focus Styles
|
||||
// ========================================
|
||||
|
||||
:focus {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Selection Styles
|
||||
// ========================================
|
||||
|
||||
::selection {
|
||||
background-color: $primary-100;
|
||||
color: $primary-900;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: $primary-100;
|
||||
color: $primary-900;
|
||||
}
|
||||
|
||||
// Scrollbar Styles
|
||||
// ========================================
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $gray-100;
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $gray-300;
|
||||
border-radius: $radius-full;
|
||||
transition: background-color $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $gray-400;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $gray-100;
|
||||
}
|
||||
|
||||
// Utility Classes
|
||||
// ========================================
|
||||
|
||||
// Display
|
||||
.d-block { display: block; }
|
||||
.d-inline { display: inline; }
|
||||
.d-inline-block { display: inline-block; }
|
||||
.d-flex { display: flex; }
|
||||
.d-inline-flex { display: inline-flex; }
|
||||
.d-grid { display: grid; }
|
||||
.d-none { display: none; }
|
||||
|
||||
// Flexbox
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-center { align-items: center; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
.flex-1 { flex: 1 1 0%; }
|
||||
.flex-auto { flex: 1 1 auto; }
|
||||
.flex-initial { flex: 0 1 auto; }
|
||||
.flex-none { flex: none; }
|
||||
|
||||
// Spacing
|
||||
.m-0 { margin: 0; }
|
||||
.m-1 { margin: $space-1; }
|
||||
.m-2 { margin: $space-2; }
|
||||
.m-3 { margin: $space-3; }
|
||||
.m-4 { margin: $space-4; }
|
||||
.m-5 { margin: $space-5; }
|
||||
.m-6 { margin: $space-6; }
|
||||
.m-8 { margin: $space-8; }
|
||||
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mt-1 { margin-top: $space-1; }
|
||||
.mt-2 { margin-top: $space-2; }
|
||||
.mt-3 { margin-top: $space-3; }
|
||||
.mt-4 { margin-top: $space-4; }
|
||||
.mt-5 { margin-top: $space-5; }
|
||||
.mt-6 { margin-top: $space-6; }
|
||||
.mt-8 { margin-top: $space-8; }
|
||||
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.mb-1 { margin-bottom: $space-1; }
|
||||
.mb-2 { margin-bottom: $space-2; }
|
||||
.mb-3 { margin-bottom: $space-3; }
|
||||
.mb-4 { margin-bottom: $space-4; }
|
||||
.mb-5 { margin-bottom: $space-5; }
|
||||
.mb-6 { margin-bottom: $space-6; }
|
||||
.mb-8 { margin-bottom: $space-8; }
|
||||
|
||||
.ml-0 { margin-left: 0; }
|
||||
.ml-1 { margin-left: $space-1; }
|
||||
.ml-2 { margin-left: $space-2; }
|
||||
.ml-3 { margin-left: $space-3; }
|
||||
.ml-4 { margin-left: $space-4; }
|
||||
.ml-5 { margin-left: $space-5; }
|
||||
.ml-6 { margin-left: $space-6; }
|
||||
.ml-8 { margin-left: $space-8; }
|
||||
|
||||
.mr-0 { margin-right: 0; }
|
||||
.mr-1 { margin-right: $space-1; }
|
||||
.mr-2 { margin-right: $space-2; }
|
||||
.mr-3 { margin-right: $space-3; }
|
||||
.mr-4 { margin-right: $space-4; }
|
||||
.mr-5 { margin-right: $space-5; }
|
||||
.mr-6 { margin-right: $space-6; }
|
||||
.mr-8 { margin-right: $space-8; }
|
||||
|
||||
.p-0 { padding: 0; }
|
||||
.p-1 { padding: $space-1; }
|
||||
.p-2 { padding: $space-2; }
|
||||
.p-3 { padding: $space-3; }
|
||||
.p-4 { padding: $space-4; }
|
||||
.p-5 { padding: $space-5; }
|
||||
.p-6 { padding: $space-6; }
|
||||
.p-8 { padding: $space-8; }
|
||||
|
||||
.pt-0 { padding-top: 0; }
|
||||
.pt-1 { padding-top: $space-1; }
|
||||
.pt-2 { padding-top: $space-2; }
|
||||
.pt-3 { padding-top: $space-3; }
|
||||
.pt-4 { padding-top: $space-4; }
|
||||
.pt-5 { padding-top: $space-5; }
|
||||
.pt-6 { padding-top: $space-6; }
|
||||
.pt-8 { padding-top: $space-8; }
|
||||
|
||||
.pb-0 { padding-bottom: 0; }
|
||||
.pb-1 { padding-bottom: $space-1; }
|
||||
.pb-2 { padding-bottom: $space-2; }
|
||||
.pb-3 { padding-bottom: $space-3; }
|
||||
.pb-4 { padding-bottom: $space-4; }
|
||||
.pb-5 { padding-bottom: $space-5; }
|
||||
.pb-6 { padding-bottom: $space-6; }
|
||||
.pb-8 { padding-bottom: $space-8; }
|
||||
|
||||
.pl-0 { padding-left: 0; }
|
||||
.pl-1 { padding-left: $space-1; }
|
||||
.pl-2 { padding-left: $space-2; }
|
||||
.pl-3 { padding-left: $space-3; }
|
||||
.pl-4 { padding-left: $space-4; }
|
||||
.pl-5 { padding-left: $space-5; }
|
||||
.pl-6 { padding-left: $space-6; }
|
||||
.pl-8 { padding-left: $space-8; }
|
||||
|
||||
.pr-0 { padding-right: 0; }
|
||||
.pr-1 { padding-right: $space-1; }
|
||||
.pr-2 { padding-right: $space-2; }
|
||||
.pr-3 { padding-right: $space-3; }
|
||||
.pr-4 { padding-right: $space-4; }
|
||||
.pr-5 { padding-right: $space-5; }
|
||||
.pr-6 { padding-right: $space-6; }
|
||||
.pr-8 { padding-right: $space-8; }
|
||||
|
||||
// Text
|
||||
.text-xs { font-size: $text-xs; }
|
||||
.text-sm { font-size: $text-sm; }
|
||||
.text-base { font-size: $text-base; }
|
||||
.text-lg { font-size: $text-lg; }
|
||||
.text-xl { font-size: $text-xl; }
|
||||
.text-2xl { font-size: $text-2xl; }
|
||||
.text-3xl { font-size: $text-3xl; }
|
||||
.text-4xl { font-size: $text-4xl; }
|
||||
|
||||
.font-thin { font-weight: $font-thin; }
|
||||
.font-light { font-weight: $font-light; }
|
||||
.font-normal { font-weight: $font-normal; }
|
||||
.font-medium { font-weight: $font-medium; }
|
||||
.font-semibold { font-weight: $font-semibold; }
|
||||
.font-bold { font-weight: $font-bold; }
|
||||
.font-extrabold { font-weight: $font-extrabold; }
|
||||
.font-black { font-weight: $font-black; }
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-justify { text-align: justify; }
|
||||
|
||||
.text-primary { color: $primary-600; }
|
||||
.text-secondary { color: $secondary-600; }
|
||||
.text-success { color: $success; }
|
||||
.text-warning { color: $warning; }
|
||||
.text-error { color: $error; }
|
||||
.text-gray-500 { color: $gray-500; }
|
||||
.text-gray-600 { color: $gray-600; }
|
||||
.text-gray-700 { color: $gray-700; }
|
||||
.text-gray-900 { color: $gray-900; }
|
||||
|
||||
// Border Radius
|
||||
.rounded-none { border-radius: $radius-none; }
|
||||
.rounded-sm { border-radius: $radius-sm; }
|
||||
.rounded { border-radius: $radius-base; }
|
||||
.rounded-md { border-radius: $radius-md; }
|
||||
.rounded-lg { border-radius: $radius-lg; }
|
||||
.rounded-xl { border-radius: $radius-xl; }
|
||||
.rounded-2xl { border-radius: $radius-2xl; }
|
||||
.rounded-3xl { border-radius: $radius-3xl; }
|
||||
.rounded-full { border-radius: $radius-full; }
|
||||
|
||||
// Shadows
|
||||
.shadow-sm { box-shadow: $shadow-sm; }
|
||||
.shadow { box-shadow: $shadow-base; }
|
||||
.shadow-md { box-shadow: $shadow-md; }
|
||||
.shadow-lg { box-shadow: $shadow-lg; }
|
||||
.shadow-xl { box-shadow: $shadow-xl; }
|
||||
.shadow-2xl { box-shadow: $shadow-2xl; }
|
||||
.shadow-inner { box-shadow: $shadow-inner; }
|
||||
|
||||
// Transitions
|
||||
.transition { transition: all $duration-200 $ease-out; }
|
||||
.transition-fast { transition: all $duration-150 $ease-out; }
|
||||
.transition-slow { transition: all $duration-300 $ease-out; }
|
||||
|
||||
// Responsive Utilities
|
||||
// ========================================
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
.sm\:hidden { display: none; }
|
||||
.sm\:block { display: block; }
|
||||
.sm\:flex { display: flex; }
|
||||
.sm\:text-sm { font-size: $text-sm; }
|
||||
.sm\:text-base { font-size: $text-base; }
|
||||
.sm\:p-2 { padding: $space-2; }
|
||||
.sm\:p-4 { padding: $space-4; }
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.md\:hidden { display: none; }
|
||||
.md\:block { display: block; }
|
||||
.md\:flex { display: flex; }
|
||||
.md\:text-sm { font-size: $text-sm; }
|
||||
.md\:text-base { font-size: $text-base; }
|
||||
.md\:p-2 { padding: $space-2; }
|
||||
.md\:p-4 { padding: $space-4; }
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.lg\:hidden { display: none; }
|
||||
.lg\:block { display: block; }
|
||||
.lg\:flex { display: flex; }
|
||||
.lg\:text-sm { font-size: $text-sm; }
|
||||
.lg\:text-base { font-size: $text-base; }
|
||||
.lg\:p-2 { padding: $space-2; }
|
||||
.lg\:p-4 { padding: $space-4; }
|
||||
}
|
||||
|
||||
// Accessibility
|
||||
// ========================================
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Reduced Motion
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
709
frontend/angular-clarity-master/src/styles/_components.scss
Normal file
709
frontend/angular-clarity-master/src/styles/_components.scss
Normal file
@@ -0,0 +1,709 @@
|
||||
// ========================================
|
||||
// COMPONENT STYLES - Modern UI Components
|
||||
// ========================================
|
||||
|
||||
|
||||
@import './design-tokens';
|
||||
|
||||
// Card Components
|
||||
// ========================================
|
||||
|
||||
.modern-card {
|
||||
background: $card-bg;
|
||||
backdrop-filter: $backdrop-blur-md;
|
||||
border: 1px solid $card-border;
|
||||
border-radius: $radius-xl;
|
||||
box-shadow: $card-shadow;
|
||||
padding: $space-6;
|
||||
transition: all $duration-300 $ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $glass-gradient;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-xl;
|
||||
border-color: rgba($primary-500, 0.2);
|
||||
}
|
||||
|
||||
&.glassmorphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: $backdrop-blur-lg;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.gradient {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
&::before {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $space-4;
|
||||
padding-bottom: $space-4;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
.card-title {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: $space-2;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: $gray-700;
|
||||
line-height: $leading-relaxed;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: $space-4;
|
||||
padding-top: $space-4;
|
||||
border-top: 1px solid $gray-200;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $space-3;
|
||||
}
|
||||
|
||||
// Button Components
|
||||
// ========================================
|
||||
|
||||
.modern-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $space-2;
|
||||
padding: $space-3 $space-6;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
line-height: 1;
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all $duration-200 $ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.btn-sm {
|
||||
padding: $space-2 $space-4;
|
||||
font-size: $text-xs;
|
||||
height: $btn-height-sm;
|
||||
}
|
||||
|
||||
&.btn-md {
|
||||
padding: $space-3 $space-6;
|
||||
font-size: $text-sm;
|
||||
height: $btn-height-md;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
padding: $space-4 $space-8;
|
||||
font-size: $text-base;
|
||||
height: $btn-height-lg;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.btn-primary {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border-color: $primary-600;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, $primary-600 0%, $primary-800 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: $white;
|
||||
color: $gray-700;
|
||||
border-color: $gray-300;
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
border-color: $gray-400;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-outline {
|
||||
background: transparent;
|
||||
color: $primary-600;
|
||||
border-color: $primary-600;
|
||||
|
||||
&:hover {
|
||||
background: $primary-50;
|
||||
border-color: $primary-700;
|
||||
color: $primary-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-ghost {
|
||||
background: transparent;
|
||||
color: $gray-600;
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $gray-100;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background: $gradient-success;
|
||||
color: $white;
|
||||
border-color: $accent-green;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
background: $gradient-warning;
|
||||
color: $white;
|
||||
border-color: $accent-orange;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-error {
|
||||
background: $gradient-error;
|
||||
color: $white;
|
||||
border-color: $accent-red;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&.loading {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Form Components
|
||||
// ========================================
|
||||
|
||||
.modern-form-group {
|
||||
margin-bottom: $space-6;
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: $gray-700;
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: $space-3 $space-4;
|
||||
font-size: $text-sm;
|
||||
line-height: $leading-normal;
|
||||
color: $gray-900;
|
||||
background: $white;
|
||||
border: 1px solid $input-border;
|
||||
border-radius: $radius-lg;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $input-border-focus;
|
||||
box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: $gray-100;
|
||||
color: $gray-500;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: $input-border-error;
|
||||
box-shadow: 0 0 0 3px rgba($error, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
@extend .form-input;
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@extend .form-input;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right $space-3 center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: $space-10;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
margin-top: $space-1;
|
||||
font-size: $text-xs;
|
||||
color: $error;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
margin-top: $space-1;
|
||||
font-size: $text-xs;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
// Input Group
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.input-group-prepend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $space-3 $space-4;
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-300;
|
||||
border-right: none;
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $space-3 $space-4;
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-300;
|
||||
border-left: none;
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table Components
|
||||
// ========================================
|
||||
|
||||
.modern-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: $white;
|
||||
border-radius: $radius-xl;
|
||||
overflow: hidden;
|
||||
box-shadow: $shadow-lg;
|
||||
|
||||
thead {
|
||||
background: $gray-50;
|
||||
|
||||
th {
|
||||
padding: $space-4 $space-6;
|
||||
text-align: left;
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $space-8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $space-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
transition: background-color $duration-150 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $space-4 $space-6;
|
||||
font-size: $text-sm;
|
||||
color: $gray-700;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $space-8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $space-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Badge Components
|
||||
// ========================================
|
||||
|
||||
.modern-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $space-1 $space-3;
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-medium;
|
||||
border-radius: $radius-full;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&.badge-primary {
|
||||
background: $primary-100;
|
||||
color: $primary-800;
|
||||
}
|
||||
|
||||
&.badge-secondary {
|
||||
background: $secondary-100;
|
||||
color: $secondary-800;
|
||||
}
|
||||
|
||||
&.badge-success {
|
||||
background: rgba($accent-green, 0.1);
|
||||
color: $accent-green;
|
||||
}
|
||||
|
||||
&.badge-warning {
|
||||
background: rgba($accent-orange, 0.1);
|
||||
color: $accent-orange;
|
||||
}
|
||||
|
||||
&.badge-error {
|
||||
background: rgba($accent-red, 0.1);
|
||||
color: $accent-red;
|
||||
}
|
||||
|
||||
&.badge-gray {
|
||||
background: $gray-100;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Alert Components
|
||||
// ========================================
|
||||
|
||||
.modern-alert {
|
||||
padding: $space-4 $space-6;
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid;
|
||||
margin-bottom: $space-4;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $space-3;
|
||||
|
||||
.alert-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
|
||||
.alert-title {
|
||||
font-weight: $font-semibold;
|
||||
margin-bottom: $space-1;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: $text-sm;
|
||||
line-height: $leading-relaxed;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-info {
|
||||
background: rgba($primary-500, 0.05);
|
||||
border-color: rgba($primary-500, 0.2);
|
||||
color: $primary-800;
|
||||
|
||||
.alert-icon {
|
||||
color: $primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background: rgba($accent-green, 0.05);
|
||||
border-color: rgba($accent-green, 0.2);
|
||||
color: #065f46;
|
||||
|
||||
.alert-icon {
|
||||
color: $accent-green;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
background: rgba($accent-orange, 0.05);
|
||||
border-color: rgba($accent-orange, 0.2);
|
||||
color: #92400e;
|
||||
|
||||
.alert-icon {
|
||||
color: $accent-orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
background: rgba($accent-red, 0.05);
|
||||
border-color: rgba($accent-red, 0.2);
|
||||
color: #991b1b;
|
||||
|
||||
.alert-icon {
|
||||
color: $accent-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Components
|
||||
// ========================================
|
||||
|
||||
.modern-modal {
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba($black, 0.5);
|
||||
backdrop-filter: $backdrop-blur-sm;
|
||||
z-index: $z-modal-backdrop;
|
||||
animation: fadeIn $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: $white;
|
||||
border-radius: $radius-2xl;
|
||||
box-shadow: $shadow-2xl;
|
||||
z-index: $z-modal;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
animation: slideIn $duration-300 $ease-out;
|
||||
|
||||
.modal-header {
|
||||
padding: $space-6 $space-8;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.modal-title {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $gray-400;
|
||||
cursor: pointer;
|
||||
padding: $space-2;
|
||||
border-radius: $radius-md;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: $gray-100;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: $space-6 $space-8;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: $space-6 $space-8;
|
||||
border-top: 1px solid $gray-200;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $space-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -60%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading Components
|
||||
// ========================================
|
||||
|
||||
.modern-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $gray-200;
|
||||
border-top: 2px solid $primary-500;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
|
||||
&.spinner-sm {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
&.spinner-lg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-skeleton {
|
||||
background: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: $radius-md;
|
||||
|
||||
&.skeleton-text {
|
||||
height: 1em;
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
&.skeleton-title {
|
||||
height: 1.5em;
|
||||
margin-bottom: $space-4;
|
||||
}
|
||||
|
||||
&.skeleton-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.skeleton-button {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
258
frontend/angular-clarity-master/src/styles/_design-tokens.scss
Normal file
258
frontend/angular-clarity-master/src/styles/_design-tokens.scss
Normal file
@@ -0,0 +1,258 @@
|
||||
// ========================================
|
||||
// DESIGN TOKENS - Modern UI Design System
|
||||
// ========================================
|
||||
|
||||
// Dynamic Theme Variables (CSS Custom Properties)
|
||||
// ========================================
|
||||
:root {
|
||||
// Default theme colors (fallback)
|
||||
--theme-primary: #0ea5e9;
|
||||
--theme-secondary: #64748b;
|
||||
--theme-accent: #8b5cf6;
|
||||
--theme-error: #ef4444;
|
||||
--theme-error-dark: #dc2626;
|
||||
--theme-background: #f8fafc;
|
||||
--theme-surface: #ffffff;
|
||||
--theme-text: #1f2937;
|
||||
--theme-text-secondary: #6b7280;
|
||||
--theme-border-radius: 0.5rem;
|
||||
--theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
}
|
||||
|
||||
// Color Palette
|
||||
// ========================================
|
||||
|
||||
// Primary Colors (with theme support)
|
||||
$primary-50: #f0f9ff;
|
||||
$primary-100: #e0f2fe;
|
||||
$primary-200: #bae6fd;
|
||||
$primary-300: #7dd3fc;
|
||||
$primary-400: #38bdf8;
|
||||
$primary-500: var(--theme-primary, #0ea5e9); // Dynamic primary
|
||||
$primary-600: #0284c7;
|
||||
$primary-700: #0369a1;
|
||||
$primary-800: #075985;
|
||||
$primary-900: #0c4a6e;
|
||||
|
||||
// Secondary Colors (with theme support)
|
||||
$secondary-50: #f8fafc;
|
||||
$secondary-100: #f1f5f9;
|
||||
$secondary-200: #e2e8f0;
|
||||
$secondary-300: #cbd5e1;
|
||||
$secondary-400: #94a3b8;
|
||||
$secondary-500: var(--theme-secondary, #64748b); // Dynamic secondary
|
||||
$secondary-600: #475569;
|
||||
$secondary-700: #334155;
|
||||
$secondary-800: #1e293b;
|
||||
$secondary-900: #0f172a;
|
||||
|
||||
// Accent Colors (with theme support)
|
||||
$accent-purple: var(--theme-accent, #8b5cf6);
|
||||
$accent-green: #10b981;
|
||||
$accent-orange: #f59e0b;
|
||||
$accent-red: #ef4444;
|
||||
$accent-pink: #ec4899;
|
||||
|
||||
// Neutral Colors (with theme support)
|
||||
$white: #ffffff;
|
||||
$gray-50: #f9fafb;
|
||||
$gray-100: #f3f4f6;
|
||||
$gray-200: #e5e7eb;
|
||||
$gray-300: #d1d5db;
|
||||
$gray-400: #9ca3af;
|
||||
$gray-500: #6b7280;
|
||||
$gray-600: #4b5563;
|
||||
$gray-700: #374151;
|
||||
$gray-800: #1f2937;
|
||||
$gray-900: var(--theme-text, #111827); // Dynamic text color
|
||||
$black: #000000;
|
||||
|
||||
// Theme-aware colors
|
||||
$theme-background: var(--theme-background, #f8fafc);
|
||||
$theme-surface: var(--theme-surface, #ffffff);
|
||||
$theme-text: var(--theme-text, #1f2937);
|
||||
$theme-text-secondary: var(--theme-text-secondary, #6b7280);
|
||||
|
||||
// Semantic Colors
|
||||
$success: $accent-green;
|
||||
$warning: $accent-orange;
|
||||
$error: $accent-red;
|
||||
$info: $primary-500;
|
||||
|
||||
// Typography
|
||||
// ========================================
|
||||
|
||||
// Font Families (with theme support)
|
||||
$font-primary: var(--theme-font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
||||
$font-secondary: var(--theme-font-secondary, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
||||
$font-mono: var(--theme-font-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace);
|
||||
|
||||
// Font Sizes
|
||||
$text-xs: 0.75rem; // 12px
|
||||
$text-sm: 0.875rem; // 14px
|
||||
$text-base: 1rem; // 16px
|
||||
$text-lg: 1.125rem; // 18px
|
||||
$text-xl: 1.25rem; // 20px
|
||||
$text-2xl: 1.5rem; // 24px
|
||||
$text-3xl: 1.875rem; // 30px
|
||||
$text-4xl: 2.25rem; // 36px
|
||||
$text-5xl: 3rem; // 48px
|
||||
$text-6xl: 3.75rem; // 60px
|
||||
|
||||
// Font Weights
|
||||
$font-thin: 100;
|
||||
$font-light: 300;
|
||||
$font-normal: 400;
|
||||
$font-medium: 500;
|
||||
$font-semibold: 600;
|
||||
$font-bold: 700;
|
||||
$font-extrabold: 800;
|
||||
$font-black: 900;
|
||||
|
||||
// Line Heights
|
||||
$leading-none: 1;
|
||||
$leading-tight: 1.25;
|
||||
$leading-snug: 1.375;
|
||||
$leading-normal: 1.5;
|
||||
$leading-relaxed: 1.625;
|
||||
$leading-loose: 2;
|
||||
|
||||
// Spacing System
|
||||
// ========================================
|
||||
|
||||
$space-0: 0;
|
||||
$space-1: 0.25rem; // 4px
|
||||
$space-2: 0.5rem; // 8px
|
||||
$space-3: 0.75rem; // 12px
|
||||
$space-4: 1rem; // 16px
|
||||
$space-5: 1.25rem; // 20px
|
||||
$space-6: 1.5rem; // 24px
|
||||
$space-8: 2rem; // 32px
|
||||
$space-10: 2.5rem; // 40px
|
||||
$space-12: 3rem; // 48px
|
||||
$space-16: 4rem; // 64px
|
||||
$space-20: 5rem; // 80px
|
||||
$space-24: 6rem; // 96px
|
||||
$space-32: 8rem; // 128px
|
||||
|
||||
// Border Radius (with theme support)
|
||||
// ========================================
|
||||
|
||||
$radius-none: 0;
|
||||
$radius-sm: 0.125rem; // 2px
|
||||
$radius-base: 0.25rem; // 4px
|
||||
$radius-md: 0.375rem; // 6px
|
||||
$radius-lg: var(--theme-border-radius, 0.5rem); // Dynamic border radius
|
||||
$radius-xl: 0.75rem; // 12px
|
||||
$radius-2xl: 1rem; // 16px
|
||||
$radius-3xl: 1.5rem; // 24px
|
||||
$radius-full: 9999px;
|
||||
|
||||
// Shadows (with theme support)
|
||||
// ========================================
|
||||
|
||||
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
$shadow-lg: var(--theme-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)); // Dynamic shadow
|
||||
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
|
||||
|
||||
// Glassmorphism Shadows
|
||||
$glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
$glass-shadow-lg: 0 20px 40px 0 rgba(31, 38, 135, 0.4);
|
||||
|
||||
// Animation
|
||||
// ========================================
|
||||
|
||||
// Timing Functions
|
||||
$ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
$ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
$ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
// Duration
|
||||
$duration-75: 75ms;
|
||||
$duration-100: 100ms;
|
||||
$duration-150: 150ms;
|
||||
$duration-200: 200ms;
|
||||
$duration-300: 300ms;
|
||||
$duration-500: 500ms;
|
||||
$duration-700: 700ms;
|
||||
$duration-1000: 1000ms;
|
||||
|
||||
// Responsive Breakpoints
|
||||
// ========================================
|
||||
|
||||
$breakpoint-sm: 640px; // Small devices
|
||||
$breakpoint-md: 768px; // Medium devices
|
||||
$breakpoint-lg: 1024px; // Large devices
|
||||
$breakpoint-xl: 1280px; // Extra large devices
|
||||
$breakpoint-2xl: 1536px; // 2X large devices
|
||||
|
||||
// Z-Index Scale
|
||||
// ========================================
|
||||
|
||||
$z-dropdown: 1000;
|
||||
$z-sticky: 1020;
|
||||
$z-fixed: 1030;
|
||||
$z-modal-backdrop: 1040;
|
||||
$z-modal: 1050;
|
||||
$z-popover: 1060;
|
||||
$z-tooltip: 1070;
|
||||
$z-toast: 1080;
|
||||
|
||||
// Component Specific Variables
|
||||
// ========================================
|
||||
|
||||
// Header
|
||||
$header-height: 4rem; // 64px
|
||||
$header-bg: rgba(255, 255, 255, 0.95);
|
||||
$header-border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Sidebar
|
||||
$sidebar-width: 16rem; // 256px
|
||||
$sidebar-width-collapsed: 4rem; // 64px
|
||||
$sidebar-bg: rgba(255, 255, 255, 0.98);
|
||||
$sidebar-border: rgba(0, 0, 0, 0.05);
|
||||
|
||||
// Cards
|
||||
$card-bg: rgba(255, 255, 255, 0.9);
|
||||
$card-border: rgba(0, 0, 0, 0.05);
|
||||
$card-shadow: $shadow-lg;
|
||||
|
||||
// Buttons
|
||||
$btn-height-sm: 2rem; // 32px
|
||||
$btn-height-md: 2.5rem; // 40px
|
||||
$btn-height-lg: 3rem; // 48px
|
||||
|
||||
// Form Elements
|
||||
$input-height: 2.5rem; // 40px
|
||||
$input-border: rgba(0, 0, 0, 0.1);
|
||||
$input-border-focus: $primary-500;
|
||||
$input-border-error: $error;
|
||||
|
||||
// Gradients
|
||||
// ========================================
|
||||
|
||||
$gradient-primary: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
|
||||
$gradient-secondary: linear-gradient(135deg, $secondary-500 0%, $secondary-700 100%);
|
||||
$gradient-accent: linear-gradient(135deg, $accent-purple 0%, $accent-pink 100%);
|
||||
$gradient-success: linear-gradient(135deg, $accent-green 0%, #059669 100%);
|
||||
$gradient-warning: linear-gradient(135deg, $accent-orange 0%, #d97706 100%);
|
||||
$gradient-error: linear-gradient(135deg, $accent-red 0%, #dc2626 100%);
|
||||
|
||||
// Glassmorphism Gradients
|
||||
$glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
$glass-gradient-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
|
||||
|
||||
// Backdrop Blur
|
||||
$backdrop-blur-sm: blur(4px);
|
||||
$backdrop-blur-md: blur(8px);
|
||||
$backdrop-blur-lg: blur(16px);
|
||||
$backdrop-blur-xl: blur(24px);
|
||||
367
frontend/angular-clarity-master/src/styles/_theme-variables.scss
Normal file
367
frontend/angular-clarity-master/src/styles/_theme-variables.scss
Normal file
@@ -0,0 +1,367 @@
|
||||
// ========================================
|
||||
// DYNAMIC THEME VARIABLES
|
||||
// ========================================
|
||||
@import './design-tokens';
|
||||
// CSS Custom Properties for Dynamic Theming
|
||||
// These variables will be set by the ThemeService at runtime
|
||||
|
||||
:root {
|
||||
// Default theme variables (fallback values)
|
||||
--theme-primary: #0ea5e9;
|
||||
--theme-secondary: #64748b;
|
||||
--theme-accent: #8b5cf6;
|
||||
--theme-background: #f8fafc;
|
||||
--theme-surface: #ffffff;
|
||||
--theme-text: #111827;
|
||||
--theme-text-secondary: #6b7280;
|
||||
|
||||
// Font variables
|
||||
--theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
|
||||
// Other theme properties
|
||||
--theme-border-radius: 0.75rem;
|
||||
--theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Derived colors for better theme integration
|
||||
--theme-primary-50: #{rgba(#0ea5e9, 0.05)};
|
||||
--theme-primary-100: #{rgba(#0ea5e9, 0.1)};
|
||||
--theme-primary-200: #{rgba(#0ea5e9, 0.2)};
|
||||
--theme-primary-300: #{rgba(#0ea5e9, 0.3)};
|
||||
--theme-primary-500: #0ea5e9;
|
||||
--theme-primary-600: #{darken(#0ea5e9, 10%)};
|
||||
--theme-primary-700: #{darken(#0ea5e9, 20%)};
|
||||
--theme-primary-800: #{darken(#0ea5e9, 30%)};
|
||||
--theme-primary-900: #{darken(#0ea5e9, 40%)};
|
||||
|
||||
// Gradient definitions using theme colors
|
||||
--theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-700) 100%);
|
||||
--theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, #{darken(#64748b, 20%)} 100%);
|
||||
--theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, #{darken(#8b5cf6, 20%)} 100%);
|
||||
|
||||
// Glassmorphism effects
|
||||
--theme-glass-bg: rgba(255, 255, 255, 0.1);
|
||||
--theme-glass-border: rgba(255, 255, 255, 0.2);
|
||||
--theme-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
}
|
||||
|
||||
// Dark theme overrides
|
||||
[data-theme="dark"] {
|
||||
--theme-background: #111827;
|
||||
--theme-surface: #1f2937;
|
||||
--theme-text: #f9fafb;
|
||||
--theme-text-secondary: #d1d5db;
|
||||
--theme-glass-bg: rgba(0, 0, 0, 0.1);
|
||||
--theme-glass-border: rgba(255, 255, 255, 0.1);
|
||||
--theme-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
// Theme-aware utility classes
|
||||
// ========================================
|
||||
|
||||
// Background colors
|
||||
.bg-theme-primary { background-color: var(--theme-primary) !important; }
|
||||
.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
|
||||
.bg-theme-accent { background-color: var(--theme-accent) !important; }
|
||||
.bg-theme-background { background-color: var(--theme-background) !important; }
|
||||
.bg-theme-surface { background-color: var(--theme-surface) !important; }
|
||||
|
||||
// Text colors
|
||||
.text-theme-primary { color: var(--theme-primary) !important; }
|
||||
.text-theme-secondary { color: var(--theme-secondary) !important; }
|
||||
.text-theme-accent { color: var(--theme-accent) !important; }
|
||||
.text-theme-text { color: var(--theme-text) !important; }
|
||||
.text-theme-text-secondary { color: var(--theme-text-secondary) !important; }
|
||||
|
||||
// Border colors
|
||||
.border-theme-primary { border-color: var(--theme-primary) !important; }
|
||||
.border-theme-secondary { border-color: var(--theme-secondary) !important; }
|
||||
.border-theme-accent { border-color: var(--theme-accent) !important; }
|
||||
|
||||
// Gradients
|
||||
.bg-gradient-theme-primary { background: var(--theme-gradient-primary) !important; }
|
||||
.bg-gradient-theme-secondary { background: var(--theme-gradient-secondary) !important; }
|
||||
.bg-gradient-theme-accent { background: var(--theme-gradient-accent) !important; }
|
||||
|
||||
// Font families
|
||||
.font-theme-primary { font-family: var(--theme-font-primary) !important; }
|
||||
.font-theme-secondary { font-family: var(--theme-font-secondary) !important; }
|
||||
.font-theme-mono { font-family: var(--theme-font-mono) !important; }
|
||||
|
||||
// Border radius
|
||||
.rounded-theme { border-radius: var(--theme-border-radius) !important; }
|
||||
|
||||
// Shadows
|
||||
.shadow-theme { box-shadow: var(--theme-shadow) !important; }
|
||||
|
||||
// Glassmorphism effects
|
||||
.glass-theme {
|
||||
background: var(--theme-glass-bg) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid var(--theme-glass-border) !important;
|
||||
box-shadow: var(--theme-glass-shadow) !important;
|
||||
}
|
||||
|
||||
// Theme-aware component overrides
|
||||
// ========================================
|
||||
|
||||
// Update existing component styles to use theme variables
|
||||
.modern-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
box-shadow: var(--theme-shadow);
|
||||
}
|
||||
|
||||
.modern-btn {
|
||||
&.btn-primary {
|
||||
background: var(--theme-gradient-primary);
|
||||
color: white;
|
||||
border-color: var(--theme-primary-600);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
}
|
||||
|
||||
&.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-primary);
|
||||
border-color: var(--theme-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-form-group {
|
||||
.form-label {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-primary-100);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-table {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
thead {
|
||||
background: var(--theme-background);
|
||||
|
||||
th {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-alert {
|
||||
&.alert-info {
|
||||
background: var(--theme-primary-100);
|
||||
border-color: var(--theme-primary-200);
|
||||
color: var(--theme-primary-800);
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
color: #991b1b;
|
||||
}
|
||||
}
|
||||
|
||||
// Layout component theme integration
|
||||
// ========================================
|
||||
|
||||
.modern-layout {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.modern-header {
|
||||
background: rgba(var(--theme-surface), 0.95);
|
||||
border-bottom: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-branding {
|
||||
.company-title {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.company-subtitle {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-sidebar {
|
||||
background: rgba(var(--theme-surface), 0.98);
|
||||
border-right: 1px solid rgba(var(--theme-text-secondary), 0.05);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-nav-link,
|
||||
.modern-nav-link-single {
|
||||
color: var(--theme-text-secondary);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-primary-100);
|
||||
color: var(--theme-primary-700);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--theme-primary-100);
|
||||
color: var(--theme-primary-800);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-user-button {
|
||||
background: transparent;
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-dropdown-menu {
|
||||
background: var(--theme-surface);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-dropdown-item {
|
||||
color: var(--theme-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
// Dashboard theme integration
|
||||
// ========================================
|
||||
|
||||
.modern-dashboard {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
background: var(--theme-gradient-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
|
||||
.stats-value {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-primary-300);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
.activity-item {
|
||||
border-bottom-color: rgba(var(--theme-text-secondary), 0.1);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive theme adjustments
|
||||
// ========================================
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--theme-background: #111827;
|
||||
--theme-surface: #1f2937;
|
||||
--theme-text: #f9fafb;
|
||||
--theme-text-secondary: #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
// Print styles
|
||||
// ========================================
|
||||
|
||||
@media print {
|
||||
:root {
|
||||
--theme-background: white;
|
||||
--theme-surface: white;
|
||||
--theme-text: black;
|
||||
--theme-text-secondary: #666;
|
||||
--theme-shadow: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user