@metropolle/design-system 1.2025.0-8.28.1647 → 1.2025.0-8.29.1649
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/components.css +355 -0
- package/package.json +1 -1
package/dist/css/components.css
CHANGED
|
@@ -472,6 +472,103 @@
|
|
|
472
472
|
--mds-dashboard-control-option-color: #1a1a1a;
|
|
473
473
|
}
|
|
474
474
|
|
|
475
|
+
/* Form Input Styles */
|
|
476
|
+
.mds-input {
|
|
477
|
+
position: relative;
|
|
478
|
+
display: block;
|
|
479
|
+
width: 100%;
|
|
480
|
+
padding: var(--mds-spacing-md) var(--mds-spacing-md);
|
|
481
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
482
|
+
font-size: var(--mds-typography-fontSize-base);
|
|
483
|
+
font-weight: var(--mds-typography-fontWeight-normal);
|
|
484
|
+
line-height: var(--mds-typography-lineHeight-normal);
|
|
485
|
+
color: var(--mds-color-text-primary);
|
|
486
|
+
background-color: var(--mds-color-background-primary);
|
|
487
|
+
border: 2px solid var(--mds-color-border-medium);
|
|
488
|
+
border-radius: var(--mds-spacing-borderRadius-md);
|
|
489
|
+
outline: none;
|
|
490
|
+
transition: var(--mds-effects-transition-normal);
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.mds-input:focus {
|
|
494
|
+
border-color: var(--mds-color-brand-primary);
|
|
495
|
+
box-shadow: 0 0 0 3px rgba(0, 111, 238, 0.1);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.mds-input:disabled {
|
|
499
|
+
opacity: var(--mds-effects-opacity-disabled);
|
|
500
|
+
cursor: not-allowed;
|
|
501
|
+
background-color: var(--mds-color-background-secondary);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.mds-input--error {
|
|
505
|
+
border-color: #dc2626;
|
|
506
|
+
background-color: #fef2f2;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.mds-input--error:focus {
|
|
510
|
+
border-color: #dc2626;
|
|
511
|
+
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
/* Textarea specific styles */
|
|
515
|
+
.mds-textarea {
|
|
516
|
+
resize: vertical;
|
|
517
|
+
min-height: 80px;
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
/* Select specific styles */
|
|
521
|
+
.mds-select {
|
|
522
|
+
-webkit-appearance: none;
|
|
523
|
+
-moz-appearance: none;
|
|
524
|
+
appearance: none;
|
|
525
|
+
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='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
526
|
+
background-position: right var(--mds-spacing-md) center;
|
|
527
|
+
background-repeat: no-repeat;
|
|
528
|
+
background-size: 16px;
|
|
529
|
+
padding-right: calc(var(--mds-spacing-md) + 24px);
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.mds-select:disabled {
|
|
533
|
+
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='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/* Label styles */
|
|
537
|
+
.mds-label {
|
|
538
|
+
display: block;
|
|
539
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
540
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
541
|
+
font-weight: var(--mds-typography-fontWeight-medium);
|
|
542
|
+
color: var(--mds-color-text-primary);
|
|
543
|
+
margin-bottom: var(--mds-spacing-xs);
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
.mds-label--required::after {
|
|
547
|
+
content: " *";
|
|
548
|
+
color: #dc2626;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
/* Field group */
|
|
552
|
+
.mds-field {
|
|
553
|
+
margin-bottom: var(--mds-spacing-lg);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.mds-field-error {
|
|
557
|
+
display: block;
|
|
558
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
559
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
560
|
+
color: #dc2626;
|
|
561
|
+
margin-top: var(--mds-spacing-xs);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.mds-field-help {
|
|
565
|
+
display: block;
|
|
566
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
567
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
568
|
+
color: var(--mds-color-text-secondary);
|
|
569
|
+
margin-top: var(--mds-spacing-xs);
|
|
570
|
+
}
|
|
571
|
+
|
|
475
572
|
/* Dashboard Layout Utilities */
|
|
476
573
|
.mds-dashboard-grid {
|
|
477
574
|
display: grid;
|
|
@@ -497,6 +594,264 @@
|
|
|
497
594
|
gap: var(--mds-spacing-xl);
|
|
498
595
|
}
|
|
499
596
|
|
|
597
|
+
/* ========================================
|
|
598
|
+
Layout Utility Classes - @back optimization
|
|
599
|
+
======================================== */
|
|
600
|
+
|
|
601
|
+
/* Flexbox utilities */
|
|
602
|
+
.mds-flex {
|
|
603
|
+
display: flex;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.mds-flex-col {
|
|
607
|
+
display: flex;
|
|
608
|
+
flex-direction: column;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.mds-flex-center {
|
|
612
|
+
display: flex;
|
|
613
|
+
align-items: center;
|
|
614
|
+
justify-content: center;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.mds-flex-between {
|
|
618
|
+
display: flex;
|
|
619
|
+
align-items: center;
|
|
620
|
+
justify-content: space-between;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.mds-flex-start {
|
|
624
|
+
display: flex;
|
|
625
|
+
align-items: flex-start;
|
|
626
|
+
justify-content: flex-start;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.mds-flex-end {
|
|
630
|
+
display: flex;
|
|
631
|
+
align-items: center;
|
|
632
|
+
justify-content: flex-end;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
/* Spacing utilities */
|
|
636
|
+
.mds-gap-xs { gap: var(--mds-spacing-xs); }
|
|
637
|
+
.mds-gap-sm { gap: var(--mds-spacing-sm); }
|
|
638
|
+
.mds-gap-md { gap: var(--mds-spacing-md); }
|
|
639
|
+
.mds-gap-lg { gap: var(--mds-spacing-lg); }
|
|
640
|
+
.mds-gap-xl { gap: var(--mds-spacing-xl); }
|
|
641
|
+
|
|
642
|
+
/* Padding utilities */
|
|
643
|
+
.mds-p-xs { padding: var(--mds-spacing-xs); }
|
|
644
|
+
.mds-p-sm { padding: var(--mds-spacing-sm); }
|
|
645
|
+
.mds-p-md { padding: var(--mds-spacing-md); }
|
|
646
|
+
.mds-p-lg { padding: var(--mds-spacing-lg); }
|
|
647
|
+
.mds-p-xl { padding: var(--mds-spacing-xl); }
|
|
648
|
+
|
|
649
|
+
/* Margin utilities */
|
|
650
|
+
.mds-m-xs { margin: var(--mds-spacing-xs); }
|
|
651
|
+
.mds-m-sm { margin: var(--mds-spacing-sm); }
|
|
652
|
+
.mds-m-md { margin: var(--mds-spacing-md); }
|
|
653
|
+
.mds-m-lg { margin: var(--mds-spacing-lg); }
|
|
654
|
+
.mds-m-xl { margin: var(--mds-spacing-xl); }
|
|
655
|
+
|
|
656
|
+
/* Margin bottom utilities */
|
|
657
|
+
.mds-mb-xs { margin-bottom: var(--mds-spacing-xs); }
|
|
658
|
+
.mds-mb-sm { margin-bottom: var(--mds-spacing-sm); }
|
|
659
|
+
.mds-mb-md { margin-bottom: var(--mds-spacing-md); }
|
|
660
|
+
.mds-mb-lg { margin-bottom: var(--mds-spacing-lg); }
|
|
661
|
+
.mds-mb-xl { margin-bottom: var(--mds-spacing-xl); }
|
|
662
|
+
|
|
663
|
+
/* ========================================
|
|
664
|
+
Dashboard Layout Classes - @back optimization
|
|
665
|
+
======================================== */
|
|
666
|
+
|
|
667
|
+
/* Dashboard container */
|
|
668
|
+
.mds-dashboard-container {
|
|
669
|
+
display: flex;
|
|
670
|
+
min-height: 100vh;
|
|
671
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
672
|
+
transition: all 0.3s ease;
|
|
673
|
+
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
|
|
674
|
+
background-attachment: fixed;
|
|
675
|
+
background-repeat: no-repeat;
|
|
676
|
+
background-size: 100% 100%;
|
|
677
|
+
color: #ffffff;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
/* Light theme dashboard container */
|
|
681
|
+
html[data-theme="light"] .mds-dashboard-container {
|
|
682
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
|
|
683
|
+
color: #1a1a1a;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
/* Dashboard main content */
|
|
687
|
+
.mds-dashboard-main {
|
|
688
|
+
flex: 1;
|
|
689
|
+
margin-left: 260px;
|
|
690
|
+
margin-top: 60px;
|
|
691
|
+
display: flex;
|
|
692
|
+
flex-direction: column;
|
|
693
|
+
min-height: calc(100vh - 60px);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
/* Page header */
|
|
697
|
+
.mds-page-header {
|
|
698
|
+
padding: var(--mds-spacing-lg) var(--mds-spacing-xl) var(--mds-spacing-md) var(--mds-spacing-xl);
|
|
699
|
+
backdrop-filter: blur(10px);
|
|
700
|
+
-webkit-backdrop-filter: blur(10px);
|
|
701
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
/* Dark theme page header */
|
|
705
|
+
html[data-theme="dark"] .mds-page-header {
|
|
706
|
+
background-color: rgba(30, 41, 59, 0.4);
|
|
707
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
/* Light theme page header */
|
|
711
|
+
html[data-theme="light"] .mds-page-header {
|
|
712
|
+
background-color: rgba(255, 255, 255, 0.7);
|
|
713
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
/* Page title */
|
|
717
|
+
.mds-page-title {
|
|
718
|
+
margin: 0 0 var(--mds-spacing-xs) 0;
|
|
719
|
+
font-size: var(--mds-typography-fontSize-xl);
|
|
720
|
+
font-weight: var(--mds-typography-fontWeight-semibold);
|
|
721
|
+
color: var(--mds-colors-color-text-primary);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
/* Page description */
|
|
725
|
+
.mds-page-description {
|
|
726
|
+
margin: 0;
|
|
727
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
728
|
+
color: var(--mds-colors-color-text-secondary);
|
|
729
|
+
line-height: var(--mds-typography-lineHeight-normal);
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
/* Main content area */
|
|
733
|
+
.mds-main-content {
|
|
734
|
+
flex: 1;
|
|
735
|
+
padding: var(--mds-spacing-xl);
|
|
736
|
+
overflow-y: auto;
|
|
737
|
+
position: relative;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
/* ========================================
|
|
741
|
+
Navbar Classes - @back optimization
|
|
742
|
+
======================================== */
|
|
743
|
+
|
|
744
|
+
/* Fixed navbar */
|
|
745
|
+
.mds-navbar {
|
|
746
|
+
position: fixed;
|
|
747
|
+
top: 0;
|
|
748
|
+
left: 0;
|
|
749
|
+
right: 0;
|
|
750
|
+
height: 60px;
|
|
751
|
+
z-index: 1000;
|
|
752
|
+
backdrop-filter: blur(10px);
|
|
753
|
+
-webkit-backdrop-filter: blur(10px);
|
|
754
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
755
|
+
transition: all 0.3s ease;
|
|
756
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
/* Dark theme navbar */
|
|
760
|
+
html[data-theme="dark"] .mds-navbar {
|
|
761
|
+
background-color: rgba(30, 41, 59, 0.95);
|
|
762
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
/* Light theme navbar */
|
|
766
|
+
html[data-theme="light"] .mds-navbar {
|
|
767
|
+
background-color: rgba(255, 255, 255, 0.95);
|
|
768
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
/* Navbar content container */
|
|
772
|
+
.mds-navbar-content {
|
|
773
|
+
display: flex;
|
|
774
|
+
align-items: center;
|
|
775
|
+
justify-content: space-between;
|
|
776
|
+
height: 100%;
|
|
777
|
+
max-width: 100%;
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
/* Navbar brand section */
|
|
781
|
+
.mds-navbar-brand {
|
|
782
|
+
display: flex;
|
|
783
|
+
align-items: center;
|
|
784
|
+
gap: var(--mds-spacing-md);
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
/* Navbar actions section */
|
|
788
|
+
.mds-navbar-actions {
|
|
789
|
+
display: flex;
|
|
790
|
+
align-items: center;
|
|
791
|
+
gap: var(--mds-spacing-md);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
/* User info in navbar */
|
|
795
|
+
.mds-navbar-user {
|
|
796
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
797
|
+
color: var(--mds-colors-color-text-secondary);
|
|
798
|
+
margin-right: var(--mds-spacing-sm);
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
/* Sidebar-width brand section */
|
|
802
|
+
.mds-navbar-brand-section {
|
|
803
|
+
width: 260px;
|
|
804
|
+
display: flex;
|
|
805
|
+
align-items: center;
|
|
806
|
+
justify-content: center;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
/* Center user info section */
|
|
810
|
+
.mds-navbar-center {
|
|
811
|
+
flex: 1;
|
|
812
|
+
display: flex;
|
|
813
|
+
justify-content: center;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
/* User info badge */
|
|
817
|
+
.mds-navbar-user-badge {
|
|
818
|
+
display: flex;
|
|
819
|
+
align-items: center;
|
|
820
|
+
gap: var(--mds-spacing-sm);
|
|
821
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
822
|
+
padding: var(--mds-spacing-sm) var(--mds-spacing-md);
|
|
823
|
+
border-radius: 20px;
|
|
824
|
+
border: 1px solid;
|
|
825
|
+
font-weight: var(--mds-typography-fontWeight-medium);
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
/* Dark theme user badge */
|
|
829
|
+
html[data-theme="dark"] .mds-navbar-user-badge {
|
|
830
|
+
color: #888;
|
|
831
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
832
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
/* Light theme user badge */
|
|
836
|
+
html[data-theme="light"] .mds-navbar-user-badge {
|
|
837
|
+
color: #666;
|
|
838
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
839
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
/* User badge elements */
|
|
843
|
+
.mds-navbar-user-badge .user-name {
|
|
844
|
+
font-weight: var(--mds-typography-fontWeight-medium);
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
.mds-navbar-user-badge .user-separator {
|
|
848
|
+
opacity: 0.7;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.mds-navbar-user-badge .user-email {
|
|
852
|
+
opacity: 0.8;
|
|
853
|
+
}
|
|
854
|
+
|
|
500
855
|
/* Dark mode support (future) */
|
|
501
856
|
@media (prefers-color-scheme: dark) {
|
|
502
857
|
/* Enhanced styles for dark mode when implemented */
|