@keenmate/pure-admin-core 1.5.1 → 2.0.1

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.
Files changed (16) hide show
  1. package/README.md +19 -2
  2. package/dist/css/main.css +788 -20
  3. package/package.json +5 -1
  4. package/schemas/base-variables.schema.json +623 -0
  5. package/schemas/component-variables.schema.json +80 -0
  6. package/schemas/pure-admin-theme.schema.json +325 -0
  7. package/scripts/pack-theme.js +397 -0
  8. package/src/scss/_core.scss +3 -0
  9. package/src/scss/core-components/_buttons.scss +2 -0
  10. package/src/scss/core-components/_cards.scss +78 -2
  11. package/src/scss/core-components/_data-display.scss +237 -0
  12. package/src/scss/core-components/_data-viz.scss +608 -0
  13. package/src/scss/core-components/_grid.scss +4 -2
  14. package/src/scss/core-components/_statistics.scss +11 -10
  15. package/src/scss/core-components/layout/_layout-container.scss +1 -0
  16. package/src/scss/variables/_components.scss +67 -0
package/src/scss/core-components/_data-display.scss CHANGED
@@ -4,6 +4,22 @@
4
4
  ======================================== */
5
5
  @use '../variables' as *;
6
6
 
7
+ // Copy button base styles (shared across data display patterns)
8
+ @mixin _copy-btn-base {
9
+ flex-shrink: 0;
10
+ padding: $field-copy-padding;
11
+ background: transparent;
12
+ border: none;
13
+ border-radius: $border-radius;
14
+ cursor: pointer;
15
+ transition: opacity $field-copy-transition, background $field-copy-transition;
16
+
17
+ &:hover {
18
+ opacity: $field-copy-hover-opacity;
19
+ background: $field-copy-hover-bg;
20
+ }
21
+ }
22
+
7
23
  // ============================================================================
8
24
  // SINGLE FIELD (.pa-field)
9
25
  // Default: stacked (label on top, value below)
@@ -579,6 +595,65 @@
579
595
  grid-column: 2;
580
596
  }
581
597
  }
598
+
599
+ // ------------------------------------------------------------------
600
+ // COPYABLE
601
+ // ------------------------------------------------------------------
602
+
603
+ &__copy {
604
+ @include _copy-btn-base;
605
+ }
606
+
607
+ &__value--copy-btn,
608
+ &__value--copy-hover {
609
+ display: flex;
610
+ align-items: center;
611
+ gap: $spacing-sm;
612
+ }
613
+
614
+ &__value--copy-btn .pa-desc-table__copy {
615
+ opacity: $field-copy-opacity;
616
+ }
617
+
618
+ &__value--copy-hover .pa-desc-table__copy {
619
+ opacity: 0;
620
+ }
621
+
622
+ &__value--copy-hover:hover .pa-desc-table__copy {
623
+ opacity: $field-copy-opacity;
624
+
625
+ &:hover {
626
+ opacity: $field-copy-hover-opacity;
627
+ background: $field-copy-hover-bg;
628
+ }
629
+ }
630
+
631
+ &__value--copy-click {
632
+ cursor: pointer;
633
+ transition: opacity $field-copy-transition;
634
+
635
+ &:hover {
636
+ opacity: $field-copy-click-hover-opacity;
637
+ }
638
+
639
+ &::after {
640
+ content: 'Click to copy';
641
+ font-size: $font-size-2xs;
642
+ opacity: 0;
643
+ margin-inline-start: $spacing-sm;
644
+ transition: opacity $field-copy-transition;
645
+ }
646
+
647
+ &:hover::after {
648
+ opacity: $field-copy-hint-opacity;
649
+ }
650
+ }
651
+
652
+ &__value--copied::after {
653
+ content: 'Copied!' !important;
654
+ opacity: 1 !important;
655
+ color: var(--pa-color-4, #28a745);
656
+ }
582
657
  }
583
658
 
584
659
  // ============================================================================
@@ -690,6 +765,52 @@
690
765
  font-weight: $font-weight-bold;
691
766
  }
692
767
  }
768
+
769
+ // ------------------------------------------------------------------
770
+ // COPYABLE
771
+ // ------------------------------------------------------------------
772
+
773
+ &__copy {
774
+ @include _copy-btn-base;
775
+ }
776
+
777
+ &__row--copy-btn &__value,
778
+ &__row--copy-hover &__value {
779
+ display: flex;
780
+ align-items: center;
781
+ gap: $spacing-sm;
782
+ }
783
+
784
+ &__row--copy-btn .pa-prop-card__copy,
785
+ &__row--copy-hover .pa-prop-card__copy {
786
+ order: -1;
787
+ }
788
+
789
+ &__row--copy-btn .pa-prop-card__copy {
790
+ opacity: $field-copy-opacity;
791
+ }
792
+
793
+ &__row--copy-hover .pa-prop-card__copy {
794
+ opacity: 0;
795
+ }
796
+
797
+ &__row--copy-hover:hover .pa-prop-card__copy {
798
+ opacity: $field-copy-opacity;
799
+
800
+ &:hover {
801
+ opacity: $field-copy-hover-opacity;
802
+ background: $field-copy-hover-bg;
803
+ }
804
+ }
805
+
806
+ &__row--copy-click &__value {
807
+ cursor: pointer;
808
+ transition: opacity $field-copy-transition;
809
+
810
+ &:hover {
811
+ opacity: $field-copy-click-hover-opacity;
812
+ }
813
+ }
693
814
  }
694
815
 
695
816
  // ============================================================================
@@ -801,6 +922,63 @@
801
922
  display: block;
802
923
  }
803
924
  }
925
+
926
+ // ------------------------------------------------------------------
927
+ // COPYABLE
928
+ // ------------------------------------------------------------------
929
+
930
+ &__copy {
931
+ @include _copy-btn-base;
932
+ }
933
+
934
+ &__row--copy-btn &__value,
935
+ &__row--copy-hover &__value {
936
+ gap: $spacing-sm;
937
+ }
938
+
939
+ &__row--copy-btn .pa-banded__copy {
940
+ opacity: $field-copy-opacity;
941
+ }
942
+
943
+ &__row--copy-hover .pa-banded__copy {
944
+ opacity: 0;
945
+ }
946
+
947
+ &__row--copy-hover:hover .pa-banded__copy {
948
+ opacity: $field-copy-opacity;
949
+
950
+ &:hover {
951
+ opacity: $field-copy-hover-opacity;
952
+ background: $field-copy-hover-bg;
953
+ }
954
+ }
955
+
956
+ &__row--copy-click &__value {
957
+ cursor: pointer;
958
+ transition: opacity $field-copy-transition;
959
+
960
+ &:hover {
961
+ opacity: $field-copy-click-hover-opacity;
962
+ }
963
+
964
+ &::after {
965
+ content: 'Click to copy';
966
+ font-size: $font-size-2xs;
967
+ opacity: 0;
968
+ margin-inline-start: $spacing-sm;
969
+ transition: opacity $field-copy-transition;
970
+ }
971
+
972
+ &:hover::after {
973
+ opacity: $field-copy-hint-opacity;
974
+ }
975
+ }
976
+
977
+ &__row--copied &__value::after {
978
+ content: 'Copied!' !important;
979
+ opacity: 1 !important;
980
+ color: var(--pa-color-4, #28a745);
981
+ }
804
982
  }
805
983
 
806
984
  // ============================================================================
@@ -839,4 +1017,63 @@
839
1017
  color: var(--pa-text-color-1);
840
1018
  line-height: $accent-grid-value-line-height;
841
1019
  }
1020
+
1021
+ // ------------------------------------------------------------------
1022
+ // COPYABLE
1023
+ // ------------------------------------------------------------------
1024
+
1025
+ &__copy {
1026
+ @include _copy-btn-base;
1027
+ }
1028
+
1029
+ &__item--copy-btn &__value,
1030
+ &__item--copy-hover &__value {
1031
+ display: flex;
1032
+ align-items: center;
1033
+ gap: $spacing-sm;
1034
+ }
1035
+
1036
+ &__item--copy-btn .pa-accent-grid__copy {
1037
+ opacity: $field-copy-opacity;
1038
+ }
1039
+
1040
+ &__item--copy-hover .pa-accent-grid__copy {
1041
+ opacity: 0;
1042
+ }
1043
+
1044
+ &__item--copy-hover:hover .pa-accent-grid__copy {
1045
+ opacity: $field-copy-opacity;
1046
+
1047
+ &:hover {
1048
+ opacity: $field-copy-hover-opacity;
1049
+ background: $field-copy-hover-bg;
1050
+ }
1051
+ }
1052
+
1053
+ &__item--copy-click &__value {
1054
+ cursor: pointer;
1055
+ transition: opacity $field-copy-transition;
1056
+
1057
+ &:hover {
1058
+ opacity: $field-copy-click-hover-opacity;
1059
+ }
1060
+
1061
+ &::after {
1062
+ content: 'Click to copy';
1063
+ font-size: $font-size-2xs;
1064
+ opacity: 0;
1065
+ margin-inline-start: $spacing-sm;
1066
+ transition: opacity $field-copy-transition;
1067
+ }
1068
+
1069
+ &:hover::after {
1070
+ opacity: $field-copy-hint-opacity;
1071
+ }
1072
+ }
1073
+
1074
+ &__item--copied &__value::after {
1075
+ content: 'Copied!' !important;
1076
+ opacity: 1 !important;
1077
+ color: var(--pa-color-4, #28a745);
1078
+ }
842
1079
  }