@cyberpunk-vue/theme-chalk 1.13.6 → 1.13.8
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/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/components/date-picker.scss +206 -101
- package/src/components/dialog.scss +23 -12
- package/src/components/table.scss +41 -26
|
@@ -156,10 +156,24 @@
|
|
|
156
156
|
.cp-date-picker__cell.is-selected,
|
|
157
157
|
.cp-date-picker__month-cell.is-selected,
|
|
158
158
|
.cp-date-picker__year-cell.is-selected,
|
|
159
|
-
.cp-date-picker__time-option.is-selected
|
|
159
|
+
.cp-date-picker__time-option.is-selected,
|
|
160
|
+
.cp-date-picker__panel-month.is-selected,
|
|
161
|
+
.cp-date-picker__panel-year.is-selected {
|
|
162
|
+
border-color: var(--cp-date-picker-custom-color);
|
|
163
|
+
color: var(--cp-date-picker-custom-color);
|
|
164
|
+
box-shadow: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.cp-date-picker__panel-day-cell.is-today .cp-date-picker__panel-day-btn,
|
|
168
|
+
.cp-date-picker__panel-day-cell.is-selected .cp-date-picker__panel-day-btn {
|
|
160
169
|
border-color: var(--cp-date-picker-custom-color);
|
|
161
170
|
color: var(--cp-date-picker-custom-color);
|
|
162
|
-
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.cp-date-picker__panel-day-cell.is-selected .cp-date-picker__panel-day-btn,
|
|
174
|
+
.cp-date-picker__panel-month.is-selected,
|
|
175
|
+
.cp-date-picker__panel-year.is-selected {
|
|
176
|
+
background: var(--cp-date-picker-custom-color-light);
|
|
163
177
|
}
|
|
164
178
|
}
|
|
165
179
|
|
|
@@ -595,17 +609,19 @@
|
|
|
595
609
|
@include m(panel) {
|
|
596
610
|
display: inline-flex;
|
|
597
611
|
flex-direction: column;
|
|
598
|
-
width:
|
|
612
|
+
width: 360px;
|
|
599
613
|
max-width: 100%;
|
|
600
614
|
background: var(--cp-bg-elevated);
|
|
601
615
|
border: 1px solid var(--cp-border);
|
|
602
616
|
color: var(--cp-text-primary);
|
|
603
|
-
box-shadow:
|
|
604
|
-
0 6px 22px rgba(0, 0, 0, 0.42),
|
|
605
|
-
0 0 1px var(--cp-color-primary),
|
|
606
|
-
inset 0 0 22px color-mix(in srgb, var(--cp-color-primary) 4%, transparent);
|
|
617
|
+
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.42);
|
|
607
618
|
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
|
|
608
619
|
|
|
620
|
+
&::before,
|
|
621
|
+
&::after {
|
|
622
|
+
display: none;
|
|
623
|
+
}
|
|
624
|
+
|
|
609
625
|
.cp-date-picker__panel {
|
|
610
626
|
opacity: 1;
|
|
611
627
|
transform: none;
|
|
@@ -615,129 +631,125 @@
|
|
|
615
631
|
}
|
|
616
632
|
|
|
617
633
|
@include e(panel-header) {
|
|
618
|
-
padding:
|
|
619
|
-
|
|
620
|
-
background:
|
|
621
|
-
linear-gradient(90deg, color-mix(in srgb, var(--cp-color-primary) 8%, transparent), transparent 60%),
|
|
622
|
-
var(--cp-bg-base);
|
|
634
|
+
padding: 16px 24px 12px;
|
|
635
|
+
background: var(--cp-bg-elevated);
|
|
623
636
|
}
|
|
624
637
|
|
|
625
638
|
@include e(panel-title) {
|
|
626
|
-
color: var(--cp-text-
|
|
627
|
-
font-size:
|
|
639
|
+
color: var(--cp-text-primary);
|
|
640
|
+
font-size: 13px;
|
|
628
641
|
font-weight: 700;
|
|
629
|
-
letter-spacing: 0;
|
|
642
|
+
letter-spacing: 0.12em;
|
|
630
643
|
}
|
|
631
644
|
|
|
632
645
|
@include e(panel-selected) {
|
|
633
|
-
margin-top:
|
|
646
|
+
margin-top: 28px;
|
|
634
647
|
color: var(--cp-text-primary);
|
|
635
|
-
font-size:
|
|
636
|
-
font-weight:
|
|
637
|
-
line-height:
|
|
648
|
+
font-size: 32px;
|
|
649
|
+
font-weight: 400;
|
|
650
|
+
line-height: 40px;
|
|
638
651
|
}
|
|
639
652
|
|
|
640
653
|
@include e(panel-layout) {
|
|
641
|
-
display:
|
|
642
|
-
grid-template-columns: 168px 1fr;
|
|
643
|
-
min-height: 388px;
|
|
644
|
-
}
|
|
645
|
-
|
|
646
|
-
@include e(year-pane) {
|
|
647
|
-
padding: 14px;
|
|
648
|
-
border-right: 1px solid var(--cp-border);
|
|
649
|
-
background: color-mix(in srgb, var(--cp-bg-base) 72%, transparent);
|
|
654
|
+
display: block;
|
|
650
655
|
}
|
|
651
656
|
|
|
652
657
|
@include e(month-pane) {
|
|
653
658
|
min-width: 0;
|
|
654
|
-
padding:
|
|
659
|
+
padding: 0 12px 8px;
|
|
655
660
|
}
|
|
656
661
|
|
|
657
|
-
@include e(
|
|
662
|
+
@include e(controls) {
|
|
658
663
|
display: grid;
|
|
659
|
-
grid-template-columns:
|
|
664
|
+
grid-template-columns: 1fr 1fr;
|
|
660
665
|
align-items: center;
|
|
661
|
-
|
|
662
|
-
|
|
666
|
+
height: 56px;
|
|
667
|
+
column-gap: 18px;
|
|
668
|
+
padding: 4px 0;
|
|
663
669
|
}
|
|
664
670
|
|
|
665
|
-
@include e(
|
|
666
|
-
min-width: 0;
|
|
667
|
-
height: 28px;
|
|
668
|
-
padding: 0;
|
|
669
|
-
background: transparent;
|
|
670
|
-
border: 0;
|
|
671
|
-
color: var(--cp-text-secondary);
|
|
672
|
-
font: inherit;
|
|
673
|
-
font-size: var(--cp-font-size-sm);
|
|
674
|
-
cursor: pointer;
|
|
675
|
-
|
|
676
|
-
&:hover {
|
|
677
|
-
color: var(--cp-color-primary);
|
|
678
|
-
}
|
|
679
|
-
}
|
|
680
|
-
|
|
681
|
-
@include e(year-list) {
|
|
671
|
+
@include e(control-group) {
|
|
682
672
|
display: grid;
|
|
683
|
-
grid-template-columns: 1fr;
|
|
684
|
-
|
|
673
|
+
grid-template-columns: 32px minmax(0, 1fr) 32px;
|
|
674
|
+
align-items: center;
|
|
675
|
+
gap: 2px;
|
|
685
676
|
|
|
686
677
|
.cp-button {
|
|
687
|
-
|
|
678
|
+
width: 32px;
|
|
679
|
+
min-width: 32px;
|
|
680
|
+
height: 32px;
|
|
681
|
+
padding: 0;
|
|
682
|
+
border-color: transparent;
|
|
683
|
+
border-radius: 9999px;
|
|
684
|
+
color: var(--cp-text-secondary);
|
|
685
|
+
font-family: var(--cp-font-family-ui);
|
|
686
|
+
font-size: 18px;
|
|
687
|
+
line-height: 1;
|
|
688
|
+
letter-spacing: 0;
|
|
689
|
+
text-transform: none;
|
|
690
|
+
box-shadow: none;
|
|
691
|
+
text-shadow: none;
|
|
692
|
+
filter: none;
|
|
693
|
+
|
|
694
|
+
&:hover:not(.is-disabled) {
|
|
695
|
+
background: color-mix(in srgb, var(--cp-text-primary) 8%, transparent);
|
|
696
|
+
color: var(--cp-text-primary);
|
|
697
|
+
box-shadow: none;
|
|
698
|
+
text-shadow: none;
|
|
699
|
+
filter: none;
|
|
700
|
+
}
|
|
688
701
|
}
|
|
689
702
|
}
|
|
690
703
|
|
|
691
|
-
@include e(controls) {
|
|
692
|
-
display: grid;
|
|
693
|
-
grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr);
|
|
694
|
-
gap: 12px;
|
|
695
|
-
margin-bottom: 16px;
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
@include e(control-group) {
|
|
699
|
-
display: grid;
|
|
700
|
-
grid-template-columns: 28px 1fr 28px;
|
|
701
|
-
align-items: center;
|
|
702
|
-
gap: 4px;
|
|
703
|
-
}
|
|
704
|
-
|
|
705
704
|
@include e(control-label) {
|
|
706
|
-
|
|
707
|
-
|
|
705
|
+
min-width: 40px;
|
|
706
|
+
height: 32px;
|
|
707
|
+
padding: 0 6px;
|
|
708
708
|
background: transparent;
|
|
709
709
|
border: 0;
|
|
710
710
|
color: var(--cp-text-primary);
|
|
711
|
-
font:
|
|
711
|
+
font-family: var(--cp-font-family-ui);
|
|
712
|
+
font-size: 14px;
|
|
712
713
|
font-weight: 600;
|
|
714
|
+
line-height: 32px;
|
|
713
715
|
cursor: pointer;
|
|
716
|
+
border-radius: 9999px;
|
|
714
717
|
|
|
715
718
|
&:hover {
|
|
719
|
+
background: color-mix(in srgb, var(--cp-text-primary) 8%, transparent);
|
|
716
720
|
color: var(--cp-color-primary);
|
|
717
721
|
}
|
|
718
722
|
}
|
|
719
723
|
|
|
724
|
+
@include e(view-body) {
|
|
725
|
+
height: 288px;
|
|
726
|
+
}
|
|
727
|
+
|
|
720
728
|
@include e(panel-weekdays) {
|
|
721
729
|
display: grid;
|
|
722
|
-
grid-template-columns: repeat(7, 1fr);
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
730
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
731
|
+
height: 32px;
|
|
732
|
+
align-items: center;
|
|
733
|
+
color: var(--cp-text-primary);
|
|
734
|
+
font-size: 14px;
|
|
726
735
|
font-weight: 700;
|
|
727
736
|
text-align: center;
|
|
728
737
|
}
|
|
729
738
|
|
|
730
739
|
@include e(panel-days) {
|
|
731
740
|
display: grid;
|
|
732
|
-
grid-template-columns: repeat(7, 1fr);
|
|
733
|
-
gap:
|
|
741
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
742
|
+
row-gap: 4px;
|
|
743
|
+
justify-items: center;
|
|
734
744
|
}
|
|
735
745
|
|
|
736
|
-
@include e(panel-day) {
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
746
|
+
@include e(panel-day-cell) {
|
|
747
|
+
display: flex;
|
|
748
|
+
align-items: center;
|
|
749
|
+
justify-content: center;
|
|
750
|
+
width: 40px;
|
|
751
|
+
height: 40px;
|
|
752
|
+
position: relative;
|
|
741
753
|
|
|
742
754
|
@include when(adjacent) {
|
|
743
755
|
opacity: 0.42;
|
|
@@ -748,34 +760,136 @@
|
|
|
748
760
|
}
|
|
749
761
|
|
|
750
762
|
@include when(today) {
|
|
751
|
-
|
|
763
|
+
.cp-date-picker__panel-day-btn {
|
|
764
|
+
border-color: var(--cp-color-primary);
|
|
765
|
+
color: var(--cp-color-primary);
|
|
766
|
+
}
|
|
752
767
|
}
|
|
753
768
|
|
|
754
769
|
@include when(selected) {
|
|
755
|
-
|
|
756
|
-
|
|
770
|
+
.cp-date-picker__panel-day-btn {
|
|
771
|
+
background: color-mix(in srgb, var(--cp-color-primary) 18%, transparent);
|
|
772
|
+
border-color: var(--cp-color-primary);
|
|
773
|
+
color: var(--cp-color-primary);
|
|
774
|
+
}
|
|
775
|
+
}
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
@include e(panel-day-btn) {
|
|
779
|
+
width: 32px;
|
|
780
|
+
min-width: 32px;
|
|
781
|
+
height: 32px;
|
|
782
|
+
min-height: 32px;
|
|
783
|
+
padding: 0;
|
|
784
|
+
border-color: transparent;
|
|
785
|
+
color: var(--cp-text-primary);
|
|
786
|
+
font-family: var(--cp-font-family-ui);
|
|
787
|
+
font-size: 14px;
|
|
788
|
+
font-weight: 700;
|
|
789
|
+
line-height: 1;
|
|
790
|
+
letter-spacing: 0;
|
|
791
|
+
text-transform: none;
|
|
792
|
+
box-shadow: none;
|
|
793
|
+
text-shadow: none;
|
|
794
|
+
filter: none;
|
|
795
|
+
|
|
796
|
+
&::after {
|
|
797
|
+
display: none;
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
.cp-button__content {
|
|
801
|
+
display: flex;
|
|
802
|
+
align-items: center;
|
|
803
|
+
justify-content: center;
|
|
804
|
+
width: 100%;
|
|
805
|
+
height: 100%;
|
|
806
|
+
gap: 0;
|
|
807
|
+
line-height: 1;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
&:hover:not(.is-disabled) {
|
|
811
|
+
background: color-mix(in srgb, var(--cp-text-primary) 8%, transparent);
|
|
812
|
+
color: var(--cp-text-primary);
|
|
813
|
+
box-shadow: none;
|
|
814
|
+
text-shadow: none;
|
|
815
|
+
filter: none;
|
|
757
816
|
}
|
|
758
817
|
}
|
|
759
818
|
|
|
760
819
|
@include e(panel-months) {
|
|
761
820
|
display: grid;
|
|
762
|
-
grid-template-columns: repeat(
|
|
763
|
-
|
|
764
|
-
|
|
821
|
+
grid-template-columns: repeat(2, 1fr);
|
|
822
|
+
align-items: center;
|
|
823
|
+
height: 100%;
|
|
824
|
+
gap: 0 24px;
|
|
825
|
+
padding: 0 36px;
|
|
826
|
+
|
|
827
|
+
.cp-button {
|
|
828
|
+
height: 36px;
|
|
829
|
+
padding: 0 8px;
|
|
830
|
+
font-family: var(--cp-font-family-ui);
|
|
831
|
+
font-size: 14px;
|
|
832
|
+
font-weight: 600;
|
|
833
|
+
letter-spacing: 0;
|
|
834
|
+
text-transform: none;
|
|
835
|
+
box-shadow: none;
|
|
836
|
+
text-shadow: none;
|
|
837
|
+
filter: none;
|
|
838
|
+
|
|
839
|
+
&:hover:not(.is-disabled) {
|
|
840
|
+
box-shadow: none;
|
|
841
|
+
text-shadow: none;
|
|
842
|
+
filter: none;
|
|
843
|
+
}
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
.cp-date-picker__panel-month.is-selected {
|
|
847
|
+
background: color-mix(in srgb, var(--cp-color-primary) 18%, transparent);
|
|
848
|
+
border-color: var(--cp-color-primary);
|
|
849
|
+
color: var(--cp-color-primary);
|
|
850
|
+
}
|
|
765
851
|
}
|
|
766
852
|
|
|
767
853
|
@include e(panel-years) {
|
|
768
854
|
display: grid;
|
|
769
855
|
grid-template-columns: repeat(3, 1fr);
|
|
770
|
-
gap:
|
|
771
|
-
|
|
856
|
+
gap: 8px 24px;
|
|
857
|
+
height: 100%;
|
|
858
|
+
padding: 0 32px;
|
|
859
|
+
overflow-y: auto;
|
|
860
|
+
@include scrollbar('thin');
|
|
861
|
+
|
|
862
|
+
.cp-button {
|
|
863
|
+
height: 36px;
|
|
864
|
+
padding: 0 8px;
|
|
865
|
+
font-family: var(--cp-font-family-ui);
|
|
866
|
+
font-size: 14px;
|
|
867
|
+
font-weight: 600;
|
|
868
|
+
letter-spacing: 0;
|
|
869
|
+
text-transform: none;
|
|
870
|
+
box-shadow: none;
|
|
871
|
+
text-shadow: none;
|
|
872
|
+
filter: none;
|
|
873
|
+
|
|
874
|
+
&:hover:not(.is-disabled) {
|
|
875
|
+
box-shadow: none;
|
|
876
|
+
text-shadow: none;
|
|
877
|
+
filter: none;
|
|
878
|
+
}
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
.cp-date-picker__panel-year.is-selected {
|
|
882
|
+
background: color-mix(in srgb, var(--cp-color-primary) 18%, transparent);
|
|
883
|
+
border-color: var(--cp-color-primary);
|
|
884
|
+
color: var(--cp-color-primary);
|
|
885
|
+
}
|
|
772
886
|
}
|
|
773
887
|
|
|
774
888
|
@include e(panel-actions) {
|
|
775
889
|
display: flex;
|
|
776
890
|
justify-content: flex-end;
|
|
777
891
|
gap: 8px;
|
|
778
|
-
padding:
|
|
892
|
+
padding: 8px 12px;
|
|
779
893
|
border-top: 1px solid var(--cp-border);
|
|
780
894
|
}
|
|
781
895
|
|
|
@@ -788,18 +902,9 @@
|
|
|
788
902
|
grid-template-columns: 1fr;
|
|
789
903
|
}
|
|
790
904
|
|
|
791
|
-
.cp-date-picker__year-pane {
|
|
792
|
-
border-right: 0;
|
|
793
|
-
border-bottom: 1px solid var(--cp-border);
|
|
794
|
-
}
|
|
795
|
-
|
|
796
|
-
.cp-date-picker__year-list {
|
|
797
|
-
grid-template-columns: repeat(4, 1fr);
|
|
798
|
-
}
|
|
799
|
-
|
|
800
905
|
.cp-date-picker__controls {
|
|
801
|
-
grid-template-columns: 1fr;
|
|
802
|
-
gap:
|
|
906
|
+
grid-template-columns: 1fr 1fr;
|
|
907
|
+
column-gap: 16px;
|
|
803
908
|
}
|
|
804
909
|
|
|
805
910
|
.cp-date-picker__panel,
|
|
@@ -92,10 +92,21 @@
|
|
|
92
92
|
min-height: 100%;
|
|
93
93
|
padding: 16px;
|
|
94
94
|
|
|
95
|
-
&.is-fullscreen {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
95
|
+
&.is-fullscreen {
|
|
96
|
+
--cp-dialog-fullscreen-inset-top: env(safe-area-inset-top, 0px);
|
|
97
|
+
--cp-dialog-fullscreen-inset-right: env(safe-area-inset-right, 0px);
|
|
98
|
+
--cp-dialog-fullscreen-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
99
|
+
--cp-dialog-fullscreen-inset-left: env(safe-area-inset-left, 0px);
|
|
100
|
+
|
|
101
|
+
align-items: stretch;
|
|
102
|
+
min-height: 100vh;
|
|
103
|
+
padding:
|
|
104
|
+
var(--cp-dialog-fullscreen-inset-top)
|
|
105
|
+
var(--cp-dialog-fullscreen-inset-right)
|
|
106
|
+
var(--cp-dialog-fullscreen-inset-bottom)
|
|
107
|
+
var(--cp-dialog-fullscreen-inset-left);
|
|
108
|
+
box-sizing: border-box;
|
|
109
|
+
}
|
|
99
110
|
|
|
100
111
|
&.is-align-center {
|
|
101
112
|
align-items: center;
|
|
@@ -130,14 +141,14 @@
|
|
|
130
141
|
transition: transform 0s;
|
|
131
142
|
|
|
132
143
|
// 全屏
|
|
133
|
-
&.is-fullscreen {
|
|
134
|
-
width: 100% !important;
|
|
135
|
-
max-width: 100vw;
|
|
136
|
-
max-height: 100vh;
|
|
137
|
-
height: 100vh;
|
|
138
|
-
margin-top: 0 !important;
|
|
139
|
-
clip-path: none;
|
|
140
|
-
border-radius: 0;
|
|
144
|
+
&.is-fullscreen {
|
|
145
|
+
width: 100% !important;
|
|
146
|
+
max-width: calc(100vw - var(--cp-dialog-fullscreen-inset-left, 0px) - var(--cp-dialog-fullscreen-inset-right, 0px));
|
|
147
|
+
max-height: calc(100vh - var(--cp-dialog-fullscreen-inset-top, 0px) - var(--cp-dialog-fullscreen-inset-bottom, 0px));
|
|
148
|
+
height: calc(100vh - var(--cp-dialog-fullscreen-inset-top, 0px) - var(--cp-dialog-fullscreen-inset-bottom, 0px));
|
|
149
|
+
margin-top: 0 !important;
|
|
150
|
+
clip-path: none;
|
|
151
|
+
border-radius: 0;
|
|
141
152
|
}
|
|
142
153
|
|
|
143
154
|
// 居中对齐模式
|
|
@@ -82,12 +82,13 @@ $table-sizes: (
|
|
|
82
82
|
--cp-table-row-current-bg: color-mix(in srgb, #{$type-color} 10%, transparent);
|
|
83
83
|
--cp-table-row-selected-bg: color-mix(in srgb, #{$type-color} 8%, transparent);
|
|
84
84
|
|
|
85
|
-
.cp-table__sort-caret {
|
|
86
|
-
&.is-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
85
|
+
.cp-table__sort-caret {
|
|
86
|
+
&.is-active {
|
|
87
|
+
color: #{$type-color};
|
|
88
|
+
opacity: 1;
|
|
89
|
+
filter: drop-shadow(0 0 6px #{$type-color});
|
|
90
|
+
}
|
|
91
|
+
}
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
|
|
@@ -174,17 +175,31 @@ $table-sizes: (
|
|
|
174
175
|
@include when(sortable) {
|
|
175
176
|
cursor: pointer;
|
|
176
177
|
|
|
177
|
-
&:hover {
|
|
178
|
-
color: var(--cp-text-primary);
|
|
179
|
-
text-shadow: 0 0 12px var(--cp-table-color);
|
|
180
|
-
background: rgba(255, 255, 255, 0.03);
|
|
181
|
-
|
|
182
|
-
.cp-table__sort-caret {
|
|
183
|
-
opacity: 0.
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
178
|
+
&:hover {
|
|
179
|
+
color: var(--cp-text-primary);
|
|
180
|
+
text-shadow: 0 0 12px var(--cp-table-color);
|
|
181
|
+
background: rgba(255, 255, 255, 0.03);
|
|
182
|
+
|
|
183
|
+
.cp-table__sort-caret {
|
|
184
|
+
opacity: 0.26;
|
|
185
|
+
color: var(--cp-text-muted);
|
|
186
|
+
filter: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.cp-table__sort-caret.is-active {
|
|
190
|
+
opacity: 1;
|
|
191
|
+
color: var(--cp-table-color);
|
|
192
|
+
filter: drop-shadow(0 0 7px var(--cp-table-color));
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
&:not(.is-ascending):not(.is-descending):hover {
|
|
197
|
+
.cp-table__sort-caret {
|
|
198
|
+
opacity: 0.32;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
188
203
|
|
|
189
204
|
@include e(header-label) {
|
|
190
205
|
display: inline-flex;
|
|
@@ -201,18 +216,18 @@ $table-sizes: (
|
|
|
201
216
|
gap: 2px;
|
|
202
217
|
}
|
|
203
218
|
|
|
204
|
-
@include e(sort-caret) {
|
|
205
|
-
opacity: 0.
|
|
206
|
-
transition:
|
|
219
|
+
@include e(sort-caret) {
|
|
220
|
+
opacity: 0.28;
|
|
221
|
+
transition: opacity 0.2s ease, color 0.2s ease, filter 0.2s ease;
|
|
207
222
|
display: block;
|
|
208
223
|
color: var(--cp-text-muted);
|
|
209
224
|
|
|
210
|
-
&.is-active {
|
|
211
|
-
opacity: 1;
|
|
212
|
-
color: var(--cp-table-color);
|
|
213
|
-
filter: drop-shadow(0 0
|
|
214
|
-
}
|
|
215
|
-
}
|
|
225
|
+
&.is-active {
|
|
226
|
+
opacity: 1;
|
|
227
|
+
color: var(--cp-table-color);
|
|
228
|
+
filter: drop-shadow(0 0 6px var(--cp-table-color));
|
|
229
|
+
}
|
|
230
|
+
}
|
|
216
231
|
|
|
217
232
|
|
|
218
233
|
|