1 |
|
2 | @import './base/checked.scss';
|
3 |
|
4 |
|
5 | .vxe-cell--filter {
|
6 | padding: 0 0.1em 0 0.25em;
|
7 | text-align: center;
|
8 | vertical-align: middle;
|
9 | display: inline-block;
|
10 | line-height: 0;
|
11 | &.col--active {
|
12 | .vxe-filter--btn {
|
13 | color: $vxe-table-font-color;
|
14 | }
|
15 | }
|
16 | .vxe-filter--btn {
|
17 | color: $vxe-table-column-icon-border-color;
|
18 | cursor: pointer;
|
19 | &:hover {
|
20 | color: $vxe-table-font-color;
|
21 | }
|
22 | }
|
23 | }
|
24 | .is--filter-active {
|
25 | .vxe-cell--filter {
|
26 | .vxe-filter--btn {
|
27 | color: $vxe-primary-color;
|
28 | }
|
29 | }
|
30 | }
|
31 |
|
32 |
|
33 | .vxe-table--filter-wrapper {
|
34 | display: none;
|
35 | position: absolute;
|
36 | top: 0;
|
37 | min-width: 100px;
|
38 | border-radius: $vxe-border-radius;
|
39 | background-color: $vxe-table-filter-panel-background-color;
|
40 | border: 1px solid $vxe-table-popup-border-color;
|
41 | box-shadow: 0 1px 6px rgba(0,0,0,.2);
|
42 | z-index: 10;
|
43 | &:not(.is--multiple) {
|
44 | text-align: center;
|
45 | }
|
46 | &.is--active {
|
47 | display: block;
|
48 | }
|
49 | .vxe-table--filter-header,
|
50 | .vxe-table--filter-body {
|
51 | & > li {
|
52 | overflow: hidden;
|
53 | text-overflow: ellipsis;
|
54 | white-space: nowrap;
|
55 | max-width: 360px;
|
56 | padding: 0.25em 0.8em;
|
57 | cursor: pointer;
|
58 | &.is--checked {
|
59 | color: $vxe-primary-color;
|
60 | }
|
61 | &:hover {
|
62 | background-color: $vxe-table-row-hover-background-color;
|
63 | }
|
64 | }
|
65 | }
|
66 | .vxe-table--filter-header {
|
67 | padding-top: 0.2em;
|
68 | }
|
69 | .vxe-table--filter-body {
|
70 | max-height: 200px;
|
71 | padding-bottom: 0.2em;
|
72 | }
|
73 | & > ul {
|
74 | list-style-type: none;
|
75 | padding: 0;
|
76 | margin: 0;
|
77 | overflow: auto;
|
78 | user-select: none;
|
79 | }
|
80 | &.is--multiple {
|
81 | & > ul {
|
82 | & > li {
|
83 | padding: 0.25em 0.8em 0.25em 2.3em;
|
84 | }
|
85 | }
|
86 | }
|
87 | .vxe-table--filter-footer {
|
88 | border-top: 1px solid $vxe-table-popup-border-color;
|
89 | padding: 0.6em;
|
90 | user-select: none;
|
91 | button {
|
92 | background-color: transparent;
|
93 | padding: 0 0.4em;
|
94 | border: 0;
|
95 | color: $vxe-table-font-color;
|
96 | cursor: pointer;
|
97 | &:focus {
|
98 | outline: none;
|
99 | }
|
100 | &:hover {
|
101 | color: $vxe-primary-color;
|
102 | }
|
103 | &.is--disabled {
|
104 | color: $vxe-disabled-color;
|
105 | cursor: not-allowed;
|
106 | }
|
107 | }
|
108 | }
|
109 | }
|
110 |
|
111 | .vxe-table--filter-option {
|
112 | @extend %XECheckbox;
|
113 | .vxe-checkbox--icon {
|
114 | left: 0.6em;
|
115 | top: 0.38em;
|
116 | }
|
117 | }
|
118 |
|
119 | .vxe-table {
|
120 | .vxe-table--filter-option {
|
121 | & > .vxe-checkbox--icon {
|
122 | font-size: $vxe-checkbox-font-size-default;
|
123 | }
|
124 | }
|
125 | &.size--medium {
|
126 | .vxe-table--filter-option {
|
127 | & > .vxe-checkbox--icon {
|
128 | font-size: $vxe-checkbox-font-size-medium;
|
129 | }
|
130 | }
|
131 | }
|
132 | &.size--small {
|
133 | .vxe-table--filter-option {
|
134 | & > .vxe-checkbox--icon {
|
135 | font-size: $vxe-checkbox-font-size-small;
|
136 | }
|
137 | }
|
138 | }
|
139 | &.size--mini {
|
140 | .vxe-table--filter-option {
|
141 | & > .vxe-checkbox--icon {
|
142 | font-size: $vxe-checkbox-font-size-mini;
|
143 | }
|
144 | }
|
145 | }
|
146 | } |
\ | No newline at end of file |