PluginProbe
ElasticPress / 5.3.5
ElasticPress v5.3.5
5.3.5 5.3.4 3.6.5 3.6.6 4.0.0 4.0.1 4.1.0 4.2.0 4.2.1 4.2.2 4.3.0 4.3.1 4.4.0 4.4.1 4.5.0 4.5.1 4.5.2 4.6.0 4.6.1 4.7.0 4.7.1 4.7.2 5.0.0 5.0.1 5.0.2 All 108 releases
elasticpress / assets / css / facets.css

facets.css in ElasticPress 5.3.5, at assets/css/facets.css

216 lines 3.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @import "./global/colors.css";
2
3 :root {
4
5 @media ( min-width: 768px ) {
6 --ep-range-slider-thumb-size: 1.25em;
7 --ep-range-slider-track-size: 0.5em;
8 }
9 }
10
11 /* stylelint-disable-next-line selector-class-pattern */
12 .widget_ep-facet,
13 .wp-block-elasticpress-facet,
14 .wp-widget-elasticpress-facet,
15 [class*="elementor-widget-wp-widget-ep-facet"] {
16
17 & input[type="search"] {
18 margin-bottom: 1rem;
19 }
20
21 & .searchable .inner {
22 max-height: 20em;
23 overflow: scroll;
24 }
25
26 & .term.hide {
27 display: none;
28 }
29
30 & .empty-term {
31 opacity: 0.5;
32 position: relative;
33 }
34
35 & .empty-term::after {
36 bottom: 0;
37 content: " ";
38 display: block;
39 left: 0;
40 position: absolute;
41 right: 0;
42 top: 0;
43 width: 100%;
44 z-index: 2;
45 }
46
47 & .level-1 {
48 padding-left: 20px;
49 }
50
51 & .level-2 {
52 padding-left: 40px;
53 }
54
55 & .level-3 {
56 padding-left: 60px;
57 }
58
59 & .level-4 {
60 padding-left: 80px;
61 }
62
63 & .level-5 {
64 padding-left: 100px;
65 }
66
67 & input[disabled] {
68 cursor: pointer;
69 opacity: 1;
70 }
71
72 & .term a {
73 align-items: center;
74 display: flex;
75 position: relative;
76 }
77
78 & .term a:hover .ep-checkbox {
79 background-color: var(--ep-c-white-gray);
80 }
81 }
82
83 /* stylelint-disable-next-line no-descending-specificity */
84 .ep-checkbox {
85 align-items: center;
86 background-color: var(--ep-c-medium-white);
87 display: flex;
88 flex-shrink: 0;
89 height: 1em;
90 justify-content: center;
91 margin-right: 0.25em;
92 width: 1em;
93 }
94
95 .ep-checkbox::after {
96 border: solid #fff;
97 border-width: 0 0.125em 0.125em 0;
98 content: "";
99 display: none;
100 height: 0.5em;
101 transform: rotate(45deg);
102 width: 0.25em;
103 }
104
105 .ep-checkbox.checked {
106 background-color: var(--ep-c-medium-gray);
107 }
108
109 .ep-checkbox.checked::after {
110 display: block;
111 }
112
113 .ep-range-facet {
114 align-items: center;
115 display: grid;
116 grid-template-columns: 1fr max-content;
117 }
118
119 .ep-range-facet__slider {
120 grid-column: 1 / -1;
121 }
122
123 .ep-range-facet__actions {
124 justify-content: end;
125 }
126
127 .ep-range-slider {
128 align-items: center;
129 display: flex;
130 margin: 0.5em 0;
131 min-height: var(--ep-range-slider-thumb-size);
132 }
133
134 .ep-range-slider__track {
135 background: var(--ep-c-medium-white);
136 border-radius: calc(var(--ep-range-slider-track-size) / 2);
137 height: var(--ep-range-slider-track-size);
138 }
139
140 .ep-range-slider__track-1 {
141 background-color: currentcolor;
142 }
143
144 .ep-range-slider__thumb {
145 background-color: currentcolor;
146 border-radius: calc(var(--ep-range-slider-thumb-size) / 2);
147 box-shadow:
148 inset 0 0 0 calc(var(--ep-range-slider-thumb-size) / 10) currentcolor,
149 inset 0 0 0 calc((var(--ep-range-slider-thumb-size) - var(--ep-range-slider-track-size)) / 2) var(--ep-c-white);
150 height: var(--ep-range-slider-thumb-size);
151 width: var(--ep-range-slider-thumb-size);
152 }
153
154 .ep-facet-date-option {
155
156 & label {
157 align-items: center;
158 display: flex;
159
160 & .ep-radio {
161 appearance: none;
162 border: 1px solid var(--ep-c-medium-white);
163 border-radius: 50%;
164 height: 1em;
165 margin-right: 0.25em;
166 outline: transparent;
167 position: relative;
168 width: 1em;
169
170 &:checked {
171 background-color: transparent;
172 border: 5px solid var(--ep-c-medium-gray);
173
174 /* stylelint-disable-next-line max-nesting-depth */
175 &::after {
176 opacity: 0;
177 }
178 }
179 }
180 }
181 }
182
183 .ep-date-range-picker {
184 column-gap: 1rem;
185 display: grid;
186 grid-template-columns: 1fr 1fr;
187 margin-top: 1rem;
188
189 &.is-hidden {
190 display: none;
191 }
192
193 & label {
194 margin-right: 0.5rem;
195 }
196 }
197
198 .ep-date-range-picker__from,
199 .ep-date-range-picker__to {
200 align-items: baseline;
201 display: grid;
202 grid-template-columns: max-content 1fr;
203 }
204
205 .ep-date-range-picker__action {
206 grid-column: 1 / -1;
207 text-align: right;
208 }
209
210 .ep-facet-date-form__action {
211 align-items: center;
212 display: flex;
213 gap: 1.5rem;
214 margin-top: 0.75rem;
215 }
216