PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / gutenberg / blocks / faq / src / cssProperties.js

cssProperties.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/faq/src/cssProperties.js

362 lines 18.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import * as FAQ from "./constants";
2 import * as FAQTypo from "./typographyPrefixConstants";
3 import { addProperty } from "../../../helpers/helper";
4
5 export default ({ blockId, faqLayout }) => {
6
7 const containerSectionWrapper = `.${blockId}.betterdocs-faq-wrapper`;
8 const innerWrapperSelector = `.${blockId} .betterdocs-category-grid-list-inner-wrapper`;
9 const faqSectionTitle = `.${blockId}.betterdocs-faq-wrapper .betterdocs-faq-section-title`;
10 const faqGroupTitle = `.${blockId}.betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title .betterdocs-faq-title-tag`;
11 const faqSectionTitleHover = `.${blockId}.betterdocs-faq-wrapper .betterdocs-faq-section-title:hover`;
12 const faqTitle1 = `.${blockId}.betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post`;
13 const facIcon = `.${blockId}.betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post > svg, .${blockId}.betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-icon-group > svg`;
14 const faqTitle = `.${blockId}.betterdocs-faq-wrapper.betterdocs-shortcode .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name`;
15 const faqList = `.${blockId}.betterdocs-faq-wrapper.betterdocs-shortcode .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group`;
16 const faqContent = `.${blockId}.betterdocs-faq-wrapper.betterdocs-shortcode .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content`;
17 const faqIconTwo = `.${blockId}.betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-icon-group > svg path`;
18
19 const faqGroupTitleLayout4 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-title`;
20 const faqGroupTitleLayout4Two = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab .faq-tab-title`;
21 const faqGroupTitleLayout4Selector2 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab`;
22 const faqListLayout4 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group`;
23 const faqListLayout4Selector2 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name`;
24 const faqListContentLayout4 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group.active`;
25 const faqListContentLayout4Selector2 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content`;
26 const faqListIconLayout4 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus, .${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus`;
27 const faqListIconLayout4Selector2 = `.${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus g path, .${blockId}.betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus g path`;
28
29 return [
30 // addProperty('responsive', FAQ.COLUMNS, {
31 // defaultData: {
32 // desktop: 3,
33 // tab: 2,
34 // mobile: 1,
35 // },
36 // args: { property: '' },
37 // class: true,
38 // attr: true,
39 // attrPrefix: 'column',
40 // classPrefix: 'betterdocs-column-',
41 // filter: 'number',
42 // cssSelector: innerWrapperSelector
43 // }),
44 // addProperty('responsive', FAQ.FAQ_SPACE, {
45 // defaultData: {
46 // desktop: 10,
47 // tab: 10,
48 // mobile: 10,
49 // },
50
51 // args: { property: '' },
52 // attr: layoutMode !== 'handbook',
53 // filter: 'number',
54 // attrPrefix: 'column_space'
55 // }),
56 // addProperty('responsive', 'handbookSpaceMarginBottom', {
57 // defaultData: {
58 // desktop: 10,
59 // tab: 10,
60 // mobile: 10,
61 // },
62 // args: { property: "margin-bottom", controlName: FAQ.FAQ_SPACE, customUnit: 'px' },
63 // // filter: 'number',
64 // cssSelector: singleHandbookWrapperSelector,
65 // }),
66
67
68 addProperty('background', FAQ.CONTAINER_SECTION_BACKGROUND, {
69 args: { noOverlay: true },
70 cssSelector: containerSectionWrapper
71 }),
72 addProperty('dimension', FAQ.CONTAINER_SECTION_PADDING, {
73 args: { styleFor: "padding" },
74 cssSelector: containerSectionWrapper
75 }),
76 addProperty('dimension', FAQ.CONTAINER_SECTION_MARGIN, {
77 args: { styleFor: "margin" },
78 cssSelector: containerSectionWrapper
79 }),
80 // FAQ SECTION TITLE
81 addProperty('color', 'faqSectionTitleColor', {
82 args: { hover: 'faqSectionTitleHoverColor' },
83 cssSelector: faqSectionTitle
84 }),
85
86 addProperty('typography', faqLayout == 'layout-3' ? FAQTypo.typoPrefix_section_title_layout_3 : FAQTypo.typoPrefix_section_titele, {
87 args: faqLayout == 'layout-3' ? {
88 defaultFontSize: 24,
89 prefixConstant: FAQTypo.typoPrefix_section_titele,
90 } : {
91 defaultFontSize: 30,
92 prefixConstant: FAQTypo.typoPrefix_section_titele,
93 },
94 cssSelector: faqSectionTitle
95 }),
96
97 addProperty('dimension', FAQ.SECTION_TITLE_MARGIN, {
98 args: { styleFor: "margin" },
99 cssSelector: faqSectionTitle
100 }),
101
102 addProperty('dimension', FAQ.SECTION_TITLE_PADDING, {
103 args: { styleFor: "padding" },
104 cssSelector: faqSectionTitle
105 }),
106
107
108 // GROUP TITLE
109 addProperty('color', faqLayout == 'layout-4' ? 'faqGroupTitleLayout4Color' : 'faqGroupTitleColor', {
110 args: { hover: faqLayout == 'layout-4' ? 'faqGroupTitleLayout4HoverColor' : 'faqGroupTitleHoverColor' },
111 cssSelector: faqLayout == 'layout-4' ? faqGroupTitleLayout4+', '+faqGroupTitleLayout4Two : faqGroupTitle
112 }),
113
114 addProperty('typography', ( faqLayout == 'layout-4' ? FAQTypo.typoPrefix_group_title_layout_4 : FAQTypo.typoPrefix_group_title ), {
115 args: faqLayout == 'layout-4' ? {
116 defaultFontSize: 18,
117 prefixConstant: FAQTypo.typoPrefix_group_title_layout_4,
118 } : {
119 defaultFontSize: 25,
120 prefixConstant: FAQTypo.typoPrefix_group_title,
121 },
122 cssSelector: faqLayout == 'layout-4' ? faqGroupTitleLayout4+', '+faqGroupTitleLayout4Two : faqGroupTitle
123 }),
124
125 addProperty('dimension', faqLayout == 'layout-4' ? FAQ.GROUP_TITLE_MARGIN_LAYOUT_4 : FAQ.GROUP_TITLE_MARGIN, {
126 args: { styleFor: "margin" },
127 cssSelector: faqLayout == 'layout-4' ? faqGroupTitleLayout4Selector2 : faqGroupTitle
128 }),
129
130 addProperty('dimension', faqLayout == 'layout-4' ? FAQ.GROUP_TITLE_PADDING_LAYOUT_4 : FAQ.GROUP_TITLE_PADDING, {
131 args: { styleFor: "padding" },
132 cssSelector: faqLayout == 'layout-4' ? faqGroupTitleLayout4Selector2 : faqGroupTitle
133 }),
134
135
136 // FAQ LIST
137 addProperty('dimension', faqLayout == 'layout-4' ? FAQ.FAQ_LIST_PADDING_LAYOUT_4 : FAQ.FAQ_LIST_PADDING, {
138 args: { styleFor: "padding" },
139 cssSelector: faqLayout == 'layout-4' ? faqListLayout4 : faqList
140 }),
141 addProperty('dimension', faqLayout == 'layout-4' ? FAQ.FAQ_LIST_MARGIN_LAYOUT_4 : FAQ.FAQ_LIST_MARGIN, {
142 args: { styleFor: "margin" },
143 cssSelector: faqLayout == 'layout-4' ? faqListLayout4 : faqList
144 }),
145 addProperty('border', faqLayout == 'layout-4' ? FAQ.FAQ_BORDER_LAYOUT_4 : FAQ.FAQ_BORDER, {
146 cssSelector: faqLayout == 'layout-4' ? `${faqListLayout4}` : `${faqList}`
147 }),
148 addProperty('border', faqLayout == 'layout-4' ? FAQ.FAQ_CONTENT_BORDER_LAYOUT_4 : FAQ.FAQ_CONTENT_BORDER, {
149 cssSelector: faqLayout == 'layout-4' ? `${faqListContentLayout4}` : `${faqContent}`
150 }),
151 addProperty('background', faqLayout == 'layout-3' ? FAQ.FAQ_LIST_BACKGROUND_LAYOUT_3 : ( faqLayout == 'layout-4' ? FAQ.FAQ_LIST_BACKGROUND_LAYOUT_4 : FAQ.FAQ_LIST_BACKGROUND ), {
152 args: { noOverlay: true },
153 cssSelector: faqLayout == 'layout-4' ? faqListLayout4 : faqList
154 }),
155 addProperty('typography', faqLayout == 'layout-4' ? FAQTypo.typoPrefix_faq_title_layout_4 : FAQTypo.typoPrefix_faq_title, {
156 args: faqLayout == 'layout-4' ? {
157 defaultFontSize: 18,
158 prefixConstant: FAQTypo.typoPrefix_faq_title_layout_4,
159 }: {
160 defaultFontSize: 17,
161 prefixConstant: FAQTypo.typoPrefix_faq_title,
162 },
163 cssSelector: faqLayout == 'layout-4' ? faqListLayout4Selector2 : faqTitle
164 }),
165 addProperty('color', faqLayout == 'layout-4' ? 'faqListLayout4Color' : 'faqListColor', {
166 cssSelector: faqLayout == 'layout-4' ? faqListLayout4Selector2 : faqTitle
167 }),
168 // FAQ CONTENT
169 addProperty('dimension', faqLayout == 'layout-4' ? FAQ.FAQ_CONTENT_PADDING_LAYOUT_4 : FAQ.FAQ_CONTENT_PADDING, {
170 args: { styleFor: "padding" },
171 cssSelector: faqLayout == 'layout-4' ? faqListContentLayout4 : faqContent
172 }),
173 addProperty('dimension', faqLayout == 'layout-4'? FAQ.FAQ_CONTENT_MARGIN_LAYOUT_4 : FAQ.FAQ_CONTENT_MARGIN, {
174 args: { styleFor: "margin" },
175 cssSelector: faqLayout == 'layout-4' ? faqListContentLayout4 : faqContent
176 }),
177
178 addProperty('background', faqLayout == 'layout-4' ? FAQ.FAQ_CONTENT_BACKGROUND_LAYOUT_4: FAQ.FAQ_CONTENT_BACKGROUND, {
179 args: { noOverlay: true },
180 cssSelector: faqLayout == 'layout-4' ? faqListContentLayout4 : faqContent
181 }),
182 addProperty('typography', faqLayout == 'layout-4' ? FAQTypo.typoPrefix_faq_content_layout_4 : FAQTypo.typoPrefix_faq_content, {
183 args: faqLayout == 'layout-4' ? {
184 defaultFontSize: 16,
185 prefixConstant: FAQTypo.typoPrefix_faq_content_layout_4,
186 } :{
187 defaultFontSize: 17,
188 prefixConstant: FAQTypo.typoPrefix_faq_content,
189 },
190 cssSelector: faqLayout == 'layout-4' ? faqListContentLayout4Selector2 : `${faqContent} p, ${faqContent}`
191 }),
192 addProperty('color', faqContent == 'layout-4' ? 'faqContentLayout4Color' : 'faqContentColor', {
193 args: { hover: 'faqContentColor' },
194 cssSelector: faqContent == 'layout-4' ? faqListContentLayout4Selector2 : `${faqContent} p, ${faqContent}`
195 }),
196 // addProperty('dimension', FAQ.TITLE_PADDING, {
197 // args: { styleFor: "padding" },
198 // cssSelector: titleSelector3
199 // }),
200 // addProperty('dimension', FAQ.TITLE_MARGIN, {
201 // args: { styleFor: "margin" },
202 // cssSelector: titleSelector2
203 // }),
204 // addProperty('background', FAQ.TITLE_BACKGROUND, {
205 // args: { noOverlay: true, noMainBgi: true },
206 // cssSelector: titleSelector2
207 // }),
208 // addProperty('border', FAQ.TITLE_BORDER, {
209 // args: { noShadow: true },
210 // cssSelector: titleSelector3
211 // }),
212 // // DESCRIPTION
213 // addProperty('color', 'descriptionColor', {
214 // args: { hover: 'descriptionHoverColor' },
215 // cssSelector: descriptionSelector
216 // }),
217
218 // addProperty('typography', FAQTypo.typoPrefix_description, {
219 // args: {
220 // defaultFontSize: 18,
221 // prefixConstant: FAQTypo.typoPrefix_description,
222 // },
223 // cssSelector: descriptionSelector
224 // }),
225 // addProperty('dimension', FAQ.DESCRIPTION_PADDING, {
226 // args: { styleFor: "padding" },
227 // cssSelector: descriptionSelector
228 // }),
229 // addProperty('dimension', FAQ.DESCRIPTION_MARGIN, {
230 // args: { styleFor: "margin" },
231 // cssSelector: descriptionSelector
232 // }),
233 // addProperty('background', FAQ.DESCRIPTION_BACKGROUND, {
234 // args: { noOverlay: true, noMainBgi: true },
235 // cssSelector: descriptionSelector
236 // }),
237 // addProperty('border', FAQ.DESCRIPTION_BORDER, {
238 // args: { noShadow: true },
239 // cssSelector: descriptionSelector
240 // }),
241
242 // // Thumbail
243 // addProperty('responsive', 'thumbnailSize', {
244 // args: { property: "max-width", controlName: FAQ.THUMBNAIL_SIZE },
245 // cssSelector: thumbnailSelector
246 // }),
247
248
249 // // Count
250 // addProperty('typography', FAQTypo.typoPrefix_count, {
251 // args: {
252 // defaultFontSize: 15,
253 // prefixConstant: FAQTypo.typoPrefix_count,
254 // },
255 // cssSelector: countSelector2
256 // }),
257 // addProperty('responsive', 'countSizeHeight', {
258 // args: { property: "min-height", controlName: FAQ.COUNT_SIZE },
259 // cssSelector: countSelector2
260 // }),
261 // addProperty('responsive', 'countSizeWidth', {
262 // args: { property: "min-width", controlName: FAQ.COUNT_SIZE },
263 // cssSelector: countSelector2
264 // }),
265 // addProperty('color', 'countColor', {
266 // args: { hover: 'countHoverColor' },
267 // cssSelector: countSelector2
268 // }),
269 // addProperty('background', FAQ.COUNT_BACKGROUND, {
270 // args: { noOverlay: true, noMainBgi: true },
271 // cssSelector: countSelector1
272 // }),
273 // addProperty('border', FAQ.COUNT_BORDER, {
274 // args: { noShadow: true },
275 // cssSelector: countSelector1
276 // }),
277
278 // // Button
279
280 addProperty(faqLayout == 'layout-4' ? 'stroke' : 'fill', faqLayout == 'layout-4' ? 'buttonColorLayout4' : 'buttonColor', {
281 args: { hover: 'buttonHoverColor' },
282 cssSelector: faqLayout == 'layout-4' ? faqListIconLayout4Selector2 : faqIconTwo
283 }),
284
285 // //Button Icon Position Missing
286 // addProperty('alignment', 'buttonPosition', {
287 // args: { property: "text-align" },
288 // cssSelector:buttonSelector2
289 // } ),
290
291 // addProperty('typography', FAQTypo.typoPrefix_button, {
292 // args: {
293 // defaultFontSize: 16,
294 // prefixConstant: FAQTypo.typoPrefix_button,
295 // },
296 // cssSelector: buttonSelector
297 // }),
298 // addProperty('dimension', FAQ.BTN_PADDING, {
299 // args: { styleFor: "padding" },
300 // cssSelector: buttonSelector
301 // }),
302 // addProperty('dimension', FAQ.BTN_MARGIN, {
303 // args: { styleFor: "margin" },
304 // cssSelector: buttonSelector
305 // }),
306 // addProperty('background', FAQ.BTN_BACKGROUND, {
307 // args: { noOverlay: true, noMainBgi: true },
308 // cssSelector: buttonSelector
309 // }),
310 // addProperty('border', FAQ.BTN_BORDER, {
311 // args: { noShadow: true },
312 // cssSelector: buttonSelector
313 // }),
314
315 // // List
316 // addProperty('typography', FAQTypo.typoPrefix_list, {
317 // args: {
318 // defaultFontSize: 15,
319 // prefixConstant: FAQTypo.typoPrefix_list,
320 // },
321 // cssSelector: docListSelector2
322 // }),
323 // addProperty('color', 'listColor', {
324 // args: { hover: 'listHoverColor' },
325 // cssSelector: docListSelector2
326 // }),
327 // addProperty('dimension', FAQ.LIST_PADDING, {
328 // args: { styleFor: "padding" },
329 // cssSelector: docListSelector1
330 // }),
331 // addProperty('dimension', FAQ.LIST_MARGIN, {
332 // args: { styleFor: "margin" },
333 // cssSelector: docListSelector1
334 // }),
335 // addProperty('background', FAQ.LIST_BACKGROUND, {
336 // args: { noOverlay: true, noMainBgi: true },
337 // cssSelector: docListSelector3
338 // }),
339
340 // // List Icon
341 addProperty('responsive', FAQ.ICON_SIZE, {
342 args: { property: "width" },
343 cssSelector: faqLayout == 'layout-4' ? faqListIconLayout4 : facIcon
344 }),
345
346 addProperty('dimension', FAQ.ICON_MARGIN, {
347 args: { styleFor: "margin" },
348 cssSelector: faqLayout == 'layout-4' ? faqListIconLayout4 : facIcon
349 }),
350
351 // addProperty('color', 'iconColor', {
352 // cssSelector: docListSelector4
353 // }),
354
355 // // Wrapper Margin
356 // addProperty('dimension', FAQ.WRAPPER_MARGIN, {
357 // args: { styleFor: "margin" },
358 // cssSelector: `.${blockId} .betterdocs-category-grid-list-inner-wrapper`
359 // }),
360 ]
361 }
362