1 |
|
2 | @import './base/checked.scss';
|
3 |
|
4 |
|
5 | .vxe-toolbar {
|
6 | position: relative;
|
7 | display: flex;
|
8 | flex-direction: row;
|
9 | align-items: center;
|
10 | color: $vxe-font-color;
|
11 | font-family: $vxe-font-family;
|
12 | background-color: $vxe-toolbar-background-color;
|
13 | &:after {
|
14 | content: "";
|
15 | display: block;
|
16 | clear: both;
|
17 | height: 0;
|
18 | overflow: hidden;
|
19 | visibility: hidden;
|
20 | }
|
21 | &.is--perfect {
|
22 | border: 1px solid $vxe-table-border-color;
|
23 | border-bottom-width: 0;
|
24 | background-color: $vxe-table-header-background-color;
|
25 | }
|
26 | &.is--loading {
|
27 | &:before {
|
28 | content: "";
|
29 | position: absolute;
|
30 | top: 0;
|
31 | left: 0;
|
32 | width: 100%;
|
33 | height: 100%;
|
34 | z-index: $vxe-loading-z-index;
|
35 | user-select: none;
|
36 | background-color: $vxe-loading-background-color;
|
37 | }
|
38 | }
|
39 | .vxe-buttons--wrapper {
|
40 | flex-grow: 1;
|
41 | & > .vxe-button+.vxe-button--item,
|
42 | & > .vxe-button--item+.vxe-button,
|
43 | & > .vxe-button--item+.vxe-button--item {
|
44 | margin-left: 0.8em;
|
45 | }
|
46 | & > .vxe-button--item {
|
47 | display: inline-block;
|
48 | }
|
49 | }
|
50 | .vxe-tools--wrapper {
|
51 | & > .vxe-button+.vxe-tool--item,
|
52 | & > .vxe-tool--item+.vxe-button,
|
53 | & > .vxe-tool--item+.vxe-tool--item {
|
54 | margin-left: 0.8em;
|
55 | }
|
56 | & > .vxe-tool--item {
|
57 | display: inline-block;
|
58 | }
|
59 | }
|
60 | .vxe-tools--wrapper {
|
61 | & > .vxe-button {
|
62 | display: flex;
|
63 | align-items: center;
|
64 | justify-content: center;
|
65 | }
|
66 | }
|
67 | .vxe-tools--wrapper,
|
68 | .vxe-tools--operate {
|
69 | display: flex;
|
70 | flex-shrink: 0;
|
71 | align-items: center;
|
72 | }
|
73 | .vxe-custom--wrapper {
|
74 | position: relative;
|
75 | margin-left: 0.8em;
|
76 | &.is--active {
|
77 | & > .vxe-button {
|
78 | background-color: $vxe-toolbar-custom-active-background-color;
|
79 | border-radius: 50%;
|
80 | }
|
81 | .vxe-custom--option-wrapper {
|
82 | display: block;
|
83 | }
|
84 | }
|
85 | }
|
86 | .vxe-custom--option-wrapper {
|
87 | display: none;
|
88 | position: absolute;
|
89 | right: 2px;
|
90 | text-align: left;
|
91 | background-color: $vxe-toolbar-panel-background-color;
|
92 | z-index: 19;
|
93 | border: 1px solid $vxe-table-border-color;
|
94 | border-radius: $vxe-border-radius;
|
95 | box-shadow: 0 1px 6px rgba(0,0,0,.2);
|
96 | .vxe-custom--header {
|
97 | padding: 0.28em 0;
|
98 | font-weight: 700;
|
99 | border-bottom: 1px solid $vxe-table-popup-border-color;
|
100 | }
|
101 | .vxe-custom--body {
|
102 | padding: 0.2em 0;
|
103 | max-height: 17.6em;
|
104 | .vxe-custom--option {
|
105 | &:hover {
|
106 | background-color: $vxe-table-row-hover-background-color;
|
107 | }
|
108 | }
|
109 | }
|
110 | .vxe-custom--header,
|
111 | .vxe-custom--body {
|
112 | & > li {
|
113 | max-width: 16em;
|
114 | min-width: 12.5em;
|
115 | padding: 0.2em 1em 0.2em 2.3em;
|
116 | @for $i from 2 through 8 {
|
117 | $interval: $i - 1 + 0.2;
|
118 | &.level--#{$i}{
|
119 | padding-left: #{$interval + 2.3}em;
|
120 | .vxe-checkbox--icon {
|
121 | left: #{$interval + 0.6}em;
|
122 | }
|
123 | }
|
124 | }
|
125 | }
|
126 | }
|
127 | .vxe-custom--footer {
|
128 | border-top: 1px solid $vxe-table-popup-border-color;
|
129 | text-align: right;
|
130 | button {
|
131 | background-color: transparent;
|
132 | width: 50%;
|
133 | height: 2.5em;
|
134 | border: 0;
|
135 | color: $vxe-font-color;
|
136 | text-align: center;
|
137 | cursor: pointer;
|
138 | &:focus {
|
139 | outline: none;
|
140 | }
|
141 | &:hover {
|
142 | color: $vxe-primary-color;
|
143 | }
|
144 | }
|
145 | }
|
146 | }
|
147 | }
|
148 |
|
149 | .vxe-custom--option-wrapper .vxe-custom--header,
|
150 | .vxe-custom--option-wrapper .vxe-custom--body {
|
151 | list-style-type: none;
|
152 | overflow-x: hidden;
|
153 | overflow-y: auto;
|
154 | margin: 0;
|
155 | padding: 0;
|
156 | user-select: none;
|
157 | & > li {
|
158 | overflow: hidden;
|
159 | text-overflow: ellipsis;
|
160 | white-space: nowrap;
|
161 | }
|
162 | }
|
163 |
|
164 | .vxe-custom--option {
|
165 | @extend %XECheckbox;
|
166 | .vxe-checkbox--icon {
|
167 | left: 0.6em;
|
168 | top: 0.38em;
|
169 | }
|
170 | }
|
171 |
|
172 | .vxe-toolbar {
|
173 | font-size: $vxe-font-size;
|
174 | height: $vxe-toolbar-height-default;
|
175 | .vxe-custom--option {
|
176 | & > .vxe-checkbox--icon {
|
177 | font-size: $vxe-checkbox-font-size-default;
|
178 | }
|
179 | }
|
180 | &.size--medium {
|
181 | font-size: $vxe-font-size-medium;
|
182 | height: $vxe-toolbar-height-medium;
|
183 | .vxe-custom--option {
|
184 | & > .vxe-checkbox--icon {
|
185 | font-size: $vxe-checkbox-font-size-medium;
|
186 | }
|
187 | }
|
188 | }
|
189 | &.size--small {
|
190 | font-size: $vxe-font-size-small;
|
191 | height: $vxe-toolbar-height-small;
|
192 | .vxe-custom--option {
|
193 | & > .vxe-checkbox--icon {
|
194 | font-size: $vxe-checkbox-font-size-small;
|
195 | }
|
196 | }
|
197 | }
|
198 | &.size--mini {
|
199 | font-size: $vxe-font-size-mini;
|
200 | height: $vxe-toolbar-height-mini;
|
201 | .vxe-custom--option {
|
202 | & > .vxe-checkbox--icon {
|
203 | font-size: $vxe-checkbox-font-size-mini;
|
204 | }
|
205 | }
|
206 | }
|
207 | } |
\ | No newline at end of file |