appscms-tools-theme 4.7.4 → 4.7.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,35 +1,35 @@
1
-
2
1
  <style>
3
- .mobile-search-bar{
2
+ .mobile-search-bar {
4
3
  position: relative;
5
4
  height: 100px;
6
5
  width: 100%;
7
- display: none;
6
+ display: none;
8
7
  }
8
+
9
9
  .mobile-search-container {
10
10
  display: flex;
11
11
  border: 1px solid #ccc;
12
12
  border-radius: 5px;
13
13
  overflow: hidden;
14
14
  height: 38px;
15
- margin:20px 0px 20px 0px;
15
+ margin: 20px 0px 20px 0px;
16
16
  background-color: white;
17
17
  position: relative;
18
- }
18
+ }
19
19
 
20
- .mobile-search-input {
20
+ .mobile-search-input {
21
21
  flex: 1;
22
22
  border: none;
23
23
  padding: 12px 16px;
24
24
  font-size: 16px;
25
25
  outline: none;
26
- }
26
+ }
27
27
 
28
- .mobile-search-input::placeholder {
28
+ .mobile-search-input::placeholder {
29
29
  color: #888;
30
- }
30
+ }
31
31
 
32
- .mobile-search-button {
32
+ .mobile-search-button {
33
33
  background-color: #000;
34
34
  border: none;
35
35
  padding: 0 16px;
@@ -38,27 +38,31 @@
38
38
  justify-content: center;
39
39
  cursor: pointer;
40
40
  outline: none;
41
- }
41
+ }
42
42
 
43
- .mobile-search-button svg {
43
+ .mobile-search-button svg {
44
44
  /* fill: #fff; */
45
45
  height: 20px;
46
- }
46
+ }
47
47
 
48
- .mobile-search-button:active {
48
+ .mobile-search-button:active {
49
49
  background-color: #555;
50
- }
51
- .mobile-nav-search{
52
- position: relative;
53
- }
54
- .mobile-result-item{
55
- padding: 9px 12px;
56
- }
57
- .mobile-result-item a{
58
- color: #222325;
59
- }
60
- .mobile-searchbarResults{
61
- background-color: #fff;
50
+ }
51
+
52
+ .mobile-nav-search {
53
+ position: relative;
54
+ }
55
+
56
+ .mobile-result-item {
57
+ padding: 9px 12px;
58
+ }
59
+
60
+ .mobile-result-item a {
61
+ color: #222325;
62
+ }
63
+
64
+ .mobile-searchbarResults {
65
+ background-color: #fff;
62
66
  border: 1px solid #e4e5e7;
63
67
  border-radius: 6px;
64
68
  -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
@@ -72,51 +76,47 @@
72
76
  position: fixed;
73
77
  margin-top: 42px;
74
78
  width: 244px;
75
- height: 400px;
76
- overflow-y: scroll;
79
+ height: 400px;
80
+ overflow-y: scroll;
77
81
  z-index: 101;
78
82
  display: none;
79
- }
83
+ }
80
84
  </style>
81
85
 
82
86
  {%- if site.newToolBar and page.lang == 'en' -%}
83
- <div class="appscms-toolbar">
87
+ <div class="appscms-toolbar">
84
88
  <div class="row">
85
89
  <div class="col-11 mx-auto">
86
-
87
90
  <div class="appscms-toolbar-list">
88
91
  <button class="scroll-left">&#10094;</button>
89
92
  <div id="close-nav-ham" data-open="1" class="close-nav-ham">
90
- <img
91
- class="mt-3"
92
- style="cursor: pointer"
93
- height="30px"
94
- width="30px"
95
- src="/assets/images/close-button.svg"
96
- alt="close-button"
97
- />
93
+ <img class="mt-3" style="cursor: pointer" height="30px" width="30px" src="/assets/images/close-button.svg"
94
+ alt="close-button" />
98
95
  </div>
99
96
  {%- if site.navigationSearch -%}
100
97
  <div class="mobile-search-bar">
101
-
102
98
  <div class="mobile-search-container">
103
99
  <input type="text" class="mobile-search-input" placeholder="Search Tools">
104
-
105
100
  <button class="mobile-search-button">
106
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
101
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
102
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
103
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
104
+ <g id="SVGRepo_iconCarrier">
105
+ <path
106
+ d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
107
+ stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
108
+ </g>
109
+ </svg>
107
110
  </button>
108
-
109
-
110
- <div id="mobile-results" class="mobile-searchbarResults"></div>
111
+ <div id="mobile-results" class="mobile-searchbarResults"></div>
112
+ </div>
111
113
  </div>
112
- </div>
113
114
  {%- endif -%}
114
-
115
- {%- if Data.megaMenu -%} {%- for item in Data.megaMenu.dropdown -%}
115
+
116
+ {%- if Data.megaMenu -%}
117
+ {%- for item in Data.megaMenu.dropdown -%}
116
118
  <li class="appscms-toolbar-list-item">
117
- <span
118
- class="appscms-toolbar-list-item-span d-flex justify-content-between"
119
- >
119
+ <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
120
120
  {{ item.categoryName }}
121
121
  </span>
122
122
  <div class="list-item-dropdown">
@@ -148,7 +148,7 @@
148
148
 
149
149
  {% assign array_size = item.links | size %}
150
150
  {% assign half_size = array_size | divided_by: 2 %}
151
-
151
+
152
152
  {% assign first_half = item.links | slice: 0, half_size %}
153
153
  {% assign second_half = item.links | slice: half_size, array_size %}
154
154
 
@@ -159,10 +159,10 @@
159
159
  {%- for i in first_half | slice: 0, half -%}
160
160
  <li>
161
161
  <a href="{{ i.url }}">{{ i.name }}</a>
162
-
162
+
163
163
  </li>
164
- {%- endfor -%}
165
-
164
+ {%- endfor -%}
165
+
166
166
  </ul>
167
167
  </div>
168
168
  <div class="col-md-6">
@@ -170,28 +170,27 @@
170
170
  {%- for i in second_half -%}
171
171
  <li>
172
172
  <a href="{{ i.url }}">{{ i.name }}</a>
173
-
173
+
174
174
  </li>
175
175
  {%- endfor -%}
176
176
  </ul>
177
177
  </div>
178
-
179
-
178
+
179
+
180
180
  </div>
181
-
181
+
182
182
  </div>
183
183
  </div>
184
184
  {%- endif -%}
185
-
186
185
  </div>
187
186
  </div>
188
187
  </li>
189
- {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
190
- -%}
188
+ {%- endfor -%}
189
+ {%- endif -%}
190
+
191
+ {%- for item in siteData.megaMenu.dropdown -%}
191
192
  <li class="appscms-toolbar-list-item">
192
- <span
193
- class="appscms-toolbar-list-item-span d-flex justify-content-between"
194
- >
193
+ <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
195
194
  {{ item.categoryName }}
196
195
  </span>
197
196
  <div class="list-item-dropdown">
@@ -216,45 +215,45 @@
216
215
  </div>
217
216
  </div>
218
217
  {%- endif -%}
219
- {%- if item.links.size > 0 -%}
220
- <div class="col-lg-6">
221
- <div class="appscms-other-tools">
222
- <div class="expand_menu-name-categiry">OTHER TOOLS</div>
223
- {% assign array_size = item.links | size %}
224
- {% assign half_size = array_size | divided_by: 2 %}
225
-
226
- {% assign first_half = item.links | slice: 0, half_size %}
227
- {% assign second_half = item.links | slice: half_size, array_size %}
228
-
229
- <div class="row">
230
- <div class="col-md-6">
231
- <ul class="mega_menu">
232
- {%- for i in first_half | slice: 0, half -%}
233
- <li>
234
- <a href="{{ i.url }}">{{ i.name }}</a>
235
-
236
- </li>
237
- {%- endfor -%}
238
- </ul>
239
- </div>
240
- <div class="col-md-6">
241
- <ul class="mega_menu">
242
-
243
- {%- for i in second_half -%}
244
- <li>
245
- <a href="{{ i.url }}">{{ i.name }}</a>
246
-
247
- </li>
248
- {%- endfor -%}
249
- </ul>
218
+ {%- if item.links.size > 0 -%}
219
+ <div class="col-lg-6">
220
+ <div class="appscms-other-tools">
221
+ <div class="expand_menu-name-categiry">OTHER TOOLS</div>
222
+ {% assign array_size = item.links | size %}
223
+ {% assign half_size = array_size | divided_by: 2 %}
224
+
225
+ {% assign first_half = item.links | slice: 0, half_size %}
226
+ {% assign second_half = item.links | slice: half_size, array_size %}
227
+
228
+ <div class="row">
229
+ <div class="col-md-6">
230
+ <ul class="mega_menu">
231
+ {%- for i in first_half | slice: 0, half -%}
232
+ <li>
233
+ <a href="{{ i.url }}">{{ i.name }}</a>
234
+
235
+ </li>
236
+ {%- endfor -%}
237
+ </ul>
238
+ </div>
239
+ <div class="col-md-6">
240
+ <ul class="mega_menu">
241
+
242
+ {%- for i in second_half -%}
243
+ <li>
244
+ <a href="{{ i.url }}">{{ i.name }}</a>
245
+
246
+ </li>
247
+ {%- endfor -%}
248
+ </ul>
249
+ </div>
250
+
251
+
252
+ </div>
250
253
  </div>
251
-
252
-
253
254
  </div>
254
- </div>
255
- </div>
256
- {%- endif -%}
257
-
255
+ {%- endif -%}
256
+
258
257
  </div>
259
258
  </div>
260
259
  </li>
@@ -272,7 +271,8 @@
272
271
  <div class="appscms-toolbar-list">
273
272
  <button class="scroll-left">&#10094;</button>
274
273
  <div id="close-nav-ham" data-open="1" class="close-nav-ham">
275
- <img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg" alt="close-button">
274
+ <img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg"
275
+ alt="close-button">
276
276
  </div>
277
277
  {%- if Data.megaMenu -%}
278
278
  {%- for item in Data.megaMenu.dropdown -%}
@@ -285,30 +285,30 @@
285
285
  {{ Data.nav-link-name }}
286
286
  </h4>
287
287
  <div class="row">
288
- {%- assign count = 0 -%}
289
- {%- for i in item.links -%}
290
- {%- assign count = count | plus: 1 -%}
288
+ {%- assign count = 0 -%}
289
+ {%- for i in item.links -%}
290
+ {%- assign count = count | plus: 1 -%}
291
291
  {%- if count == 1 -%}
292
- {%- if site.name == "olarandoms" -%}
293
- <div class="col-xl-6">
292
+ {%- if site.name == "olarandoms" -%}
293
+ <div class="col-xl-6">
294
294
  {%- else -%}
295
295
  <div class="col-md-6 col-lg-4">
296
- {%- endif -%}
297
- {%- endif -%}
298
- {%- if count == 6 -%}
296
+ {%- endif -%}
297
+ {%- endif -%}
298
+ {%- if count == 6 -%}
299
299
  <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
300
300
  </div>
301
- {%- assign count = 0 -%}
302
- {%- else -%}
303
- <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
304
- {%- endif -%}
305
- {%- endfor -%}
301
+ {%- assign count = 0 -%}
302
+ {%- else -%}
303
+ <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
304
+ {%- endif -%}
305
+ {%- endfor -%}
306
+ </div>
306
307
  </div>
307
- </div>
308
308
  </li>
309
309
  {%- endfor -%}
310
310
  {%- endif -%}
311
-
311
+
312
312
  {%- for item in siteData.megaMenu.dropdown -%}
313
313
  <li class="appscms-toolbar-list-item">
314
314
  <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
@@ -319,26 +319,26 @@
319
319
  {{ siteData.megaMenu.nav-link-name }}
320
320
  </h4>
321
321
  <div class="row">
322
- {%- assign count = 0 -%}
323
- {%- for i in item.links -%}
324
- {%- assign count = count | plus: 1 -%}
322
+ {%- assign count = 0 -%}
323
+ {%- for i in item.links -%}
324
+ {%- assign count = count | plus: 1 -%}
325
325
  {%- if count == 1 -%}
326
- {%- if site.name == "olarandoms" -%}
327
- <div class="col-xl-6">
326
+ {%- if site.name == "olarandoms" -%}
327
+ <div class="col-xl-6">
328
328
  {%- else -%}
329
329
  <div class="col-md-6 col-lg-4">
330
- {%- endif -%}
331
- {%- endif -%}
332
- {%- if count == 6 -%}
330
+ {%- endif -%}
331
+ {%- endif -%}
332
+ {%- if count == 6 -%}
333
333
  <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
334
334
  </div>
335
- {%- assign count = 0 -%}
336
- {%- else -%}
337
- <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
338
- {%- endif -%}
339
- {%- endfor -%}
335
+ {%- assign count = 0 -%}
336
+ {%- else -%}
337
+ <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
338
+ {%- endif -%}
339
+ {%- endfor -%}
340
+ </div>
340
341
  </div>
341
- </div>
342
342
  </li>
343
343
  {%- endfor -%}
344
344
  <button class="scroll-right">&#10095;</button>
@@ -353,97 +353,89 @@
353
353
 
354
354
  <script>
355
355
  document.addEventListener("DOMContentLoaded", function () {
356
- const scrollContainer = document.querySelector(".appscms-toolbar-list");
357
- const scrollLeft = document.querySelector(".scroll-left");
358
- const scrollRight = document.querySelector(".scroll-right");
359
-
360
- function updateScrollButtons() {
361
- scrollLeft.style.display =
362
- scrollContainer.scrollLeft > 0 ? "block" : "none";
363
- scrollRight.style.display =
364
- scrollContainer.scrollWidth >
365
- scrollContainer.clientWidth + scrollContainer.scrollLeft
366
- ? "block"
367
- : "none";
368
- }
369
-
370
- scrollLeft.addEventListener("click", function () {
371
- scrollContainer.scrollLeft -= 120; // Adjust this value as needed
372
- updateScrollButtons();
373
- });
374
-
375
- scrollRight.addEventListener("click", function () {
376
- scrollContainer.scrollLeft += 120; // Adjust this value as needed
356
+ const scrollContainer = document.querySelector(".appscms-toolbar-list");
357
+ const scrollLeft = document.querySelector(".scroll-left");
358
+ const scrollRight = document.querySelector(".scroll-right");
359
+
360
+ function updateScrollButtons() {
361
+ scrollLeft.style.display =
362
+ scrollContainer.scrollLeft > 0 ? "block" : "none";
363
+ scrollRight.style.display =
364
+ scrollContainer.scrollWidth >
365
+ scrollContainer.clientWidth + scrollContainer.scrollLeft
366
+ ? "block"
367
+ : "none";
368
+ }
369
+
370
+ scrollLeft.addEventListener("click", function () {
371
+ scrollContainer.scrollLeft -= 120; // Adjust this value as needed
372
+ updateScrollButtons();
373
+ });
374
+
375
+ scrollRight.addEventListener("click", function () {
376
+ scrollContainer.scrollLeft += 120; // Adjust this value as needed
377
+ updateScrollButtons();
378
+ });
379
+
380
+ scrollContainer.addEventListener("scroll", updateScrollButtons);
381
+
382
+ // Initial check to hide buttons if necessary
377
383
  updateScrollButtons();
378
384
  });
379
385
 
380
- scrollContainer.addEventListener("scroll", updateScrollButtons);
381
-
382
- // Initial check to hide buttons if necessary
383
- updateScrollButtons();
384
- });
385
-
386
386
  </script>
387
387
 
388
388
  <style>
389
-
390
-
391
- .scroll-container {
392
- display: flex;
393
- align-items: center;
394
- background-color: #333;
395
- position: relative;
396
- }
397
-
398
- .scroll-left,
399
- .scroll-right {
400
- background-color: #4456f6f7;
401
- color: white;
402
- border: none;
403
- height: 40px;
404
- cursor: pointer;
405
- position: absolute;
406
- width: 40px;
407
- top: 50%;
408
- z-index: 100;
409
- transform: translateY(-50%);
410
- }
411
-
412
- .scroll-left {
413
- left: 0;
414
- }
415
-
416
- .scroll-right {
417
- right: 0;
418
- }
419
-
420
- .scroll-left:hover,
421
- .scroll-right:hover {
422
- background-color:#8691f6f7 ;
423
- }
424
-
425
- .navbar {
426
- overflow-x: auto;
427
- white-space: nowrap;
428
- flex-grow: 1;
429
- scroll-behavior: smooth;
430
- display: flex;
431
- }
432
-
433
- .navbar ul {
434
- padding: 0;
435
- margin: 0;
436
- display: flex;
437
- list-style-type: none;
438
- }
439
-
440
- .navbar li {
441
- display: inline;
442
- }
389
+ .scroll-container {
390
+ display: flex;
391
+ align-items: center;
392
+ background-color: #333;
393
+ position: relative;
394
+ }
443
395
 
396
+ .scroll-left,
397
+ .scroll-right {
398
+ background-color: #4456f6f7;
399
+ color: white;
400
+ border: none;
401
+ height: 40px;
402
+ cursor: pointer;
403
+ position: absolute;
404
+ width: 40px;
405
+ top: 50%;
406
+ z-index: 100;
407
+ transform: translateY(-50%);
408
+ }
444
409
 
410
+ .scroll-left {
411
+ left: 0;
412
+ }
445
413
 
414
+ .scroll-right {
415
+ right: 0;
416
+ }
446
417
 
418
+ .scroll-left:hover,
419
+ .scroll-right:hover {
420
+ background-color: #8691f6f7;
421
+ }
447
422
 
423
+ .navbar {
424
+ /* overflow-x: auto; */
425
+ white-space: nowrap;
426
+ flex-grow: 1;
427
+ scroll-behavior: smooth;
428
+ display: flex;
429
+ }
430
+
431
+ .navbar ul {
432
+ padding: 0;
433
+ margin: 0;
434
+ display: flex;
435
+ list-style-type: none;
436
+ }
448
437
 
438
+ .navbar li {
439
+ display: inline;
440
+ }
449
441
  </style>
@@ -80,6 +80,10 @@
80
80
 
81
81
  <link rel="canonical" href="{{site.url | append: page.url}}" />
82
82
 
83
+
84
+ <link rel="stylesheet" href="/assets/css/appscms-variables.css" />
85
+
86
+
83
87
  {%- if site.versioning -%}
84
88
 
85
89
  <link