@innovastudio/contentbox 1.5.11 → 1.5.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10786,9 +10786,9 @@ class EditBox {
|
|
|
10786
10786
|
html += (this.builder.settings.enableContentStyle ? '<div style="padding-top:10px;display:flex;flex-direction: column;">' + // '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' +
|
|
10787
10787
|
'<div style="display:flex">' + '<button title="' + out('Typography Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Typography Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>';
|
|
10788
10788
|
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">↖</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">↑</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">↗</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">←</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">☉</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">→</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">↙</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">↓</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">↘</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>';
|
|
10789
|
-
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div style="display:
|
|
10790
|
-
|
|
10791
|
-
'<button title="
|
|
10789
|
+
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div style="display:none;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button>' + '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' + '<button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button>' + '<button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button>' + '<button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button>' + '<button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button>' + '<button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-spacing" data-value="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom:0;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Top') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-topspacing on" data-value="0" style="width:40px">0</button>' + '<button title="10" class="cmd-box-content-topspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-topspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-topspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-topspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-topspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-topspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-topspacing" data-value="80" style="width:40px">80</button>' +
|
|
10790
|
+
'<button title="' + out('Not Set') + '" class="cmd-box-content-topspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Bottom') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-bottomspacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-bottomspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-bottomspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-bottomspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-bottomspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-bottomspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-bottomspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-bottomspacing" data-value="80" style="width:40px">80</button>' +
|
|
10791
|
+
'<button title="' + out('Not Set') + '" class="cmd-box-content-bottomspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>';
|
|
10792
10792
|
html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') +
|
|
10793
10793
|
/*
|
|
10794
10794
|
'<label for="rdoKenBurns" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
@@ -11436,6 +11436,78 @@ class EditBox {
|
|
|
11436
11436
|
this.builder.settings.onChange();
|
|
11437
11437
|
});
|
|
11438
11438
|
});
|
|
11439
|
+
const btnContentTopSpacing = modalEditBox.querySelectorAll('.cmd-box-content-topspacing');
|
|
11440
|
+
btnContentTopSpacing.forEach(btn => {
|
|
11441
|
+
btn.addEventListener('click', () => {
|
|
11442
|
+
this.builder.editor.saveForUndo();
|
|
11443
|
+
let s = btn.getAttribute('data-value');
|
|
11444
|
+
let activeBox = this.builder.activeBox;
|
|
11445
|
+
let container = activeBox.querySelector('.is-container'); // cleanup old
|
|
11446
|
+
|
|
11447
|
+
container.classList.remove('content-py-0');
|
|
11448
|
+
container.classList.remove('content-py-10');
|
|
11449
|
+
container.classList.remove('content-py-20');
|
|
11450
|
+
container.classList.remove('content-py-30');
|
|
11451
|
+
container.classList.remove('content-py-40');
|
|
11452
|
+
container.classList.remove('content-py-50');
|
|
11453
|
+
container.classList.remove('content-py-60');
|
|
11454
|
+
container.classList.remove('content-py-70');
|
|
11455
|
+
container.classList.remove('content-py-80');
|
|
11456
|
+
container.classList.remove('content-pt-0');
|
|
11457
|
+
container.classList.remove('content-pt-10');
|
|
11458
|
+
container.classList.remove('content-pt-20');
|
|
11459
|
+
container.classList.remove('content-pt-30');
|
|
11460
|
+
container.classList.remove('content-pt-40');
|
|
11461
|
+
container.classList.remove('content-pt-50');
|
|
11462
|
+
container.classList.remove('content-pt-60');
|
|
11463
|
+
container.classList.remove('content-pt-70');
|
|
11464
|
+
container.classList.remove('content-pt-80');
|
|
11465
|
+
if (s !== '') container.classList.add(`content-pt-${s}`);
|
|
11466
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-box-content-topspacing');
|
|
11467
|
+
btnPos.forEach(btn => {
|
|
11468
|
+
dom$l.removeClass(btn, 'on');
|
|
11469
|
+
});
|
|
11470
|
+
dom$l.addClass(btn, 'on'); //Trigger Change event
|
|
11471
|
+
|
|
11472
|
+
this.builder.settings.onChange();
|
|
11473
|
+
});
|
|
11474
|
+
});
|
|
11475
|
+
const btnContentBottomSpacing = modalEditBox.querySelectorAll('.cmd-box-content-bottomspacing');
|
|
11476
|
+
btnContentBottomSpacing.forEach(btn => {
|
|
11477
|
+
btn.addEventListener('click', () => {
|
|
11478
|
+
this.builder.editor.saveForUndo();
|
|
11479
|
+
let s = btn.getAttribute('data-value');
|
|
11480
|
+
let activeBox = this.builder.activeBox;
|
|
11481
|
+
let container = activeBox.querySelector('.is-container'); // cleanup old
|
|
11482
|
+
|
|
11483
|
+
container.classList.remove('content-py-0');
|
|
11484
|
+
container.classList.remove('content-py-10');
|
|
11485
|
+
container.classList.remove('content-py-20');
|
|
11486
|
+
container.classList.remove('content-py-30');
|
|
11487
|
+
container.classList.remove('content-py-40');
|
|
11488
|
+
container.classList.remove('content-py-50');
|
|
11489
|
+
container.classList.remove('content-py-60');
|
|
11490
|
+
container.classList.remove('content-py-70');
|
|
11491
|
+
container.classList.remove('content-py-80');
|
|
11492
|
+
container.classList.remove('content-pb-0');
|
|
11493
|
+
container.classList.remove('content-pb-10');
|
|
11494
|
+
container.classList.remove('content-pb-20');
|
|
11495
|
+
container.classList.remove('content-pb-30');
|
|
11496
|
+
container.classList.remove('content-pb-40');
|
|
11497
|
+
container.classList.remove('content-pb-50');
|
|
11498
|
+
container.classList.remove('content-pb-60');
|
|
11499
|
+
container.classList.remove('content-pb-70');
|
|
11500
|
+
container.classList.remove('content-pb-80');
|
|
11501
|
+
if (s !== '') container.classList.add(`content-pb-${s}`);
|
|
11502
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-box-content-bottomspacing');
|
|
11503
|
+
btnPos.forEach(btn => {
|
|
11504
|
+
dom$l.removeClass(btn, 'on');
|
|
11505
|
+
});
|
|
11506
|
+
dom$l.addClass(btn, 'on'); //Trigger Change event
|
|
11507
|
+
|
|
11508
|
+
this.builder.settings.onChange();
|
|
11509
|
+
});
|
|
11510
|
+
});
|
|
11439
11511
|
const btnBoxContentPos = modalEditBox.querySelectorAll('.cmd-box-content-pos');
|
|
11440
11512
|
btnBoxContentPos.forEach(btn => {
|
|
11441
11513
|
btn.addEventListener('click', () => {
|
|
@@ -13226,6 +13298,92 @@ class EditBox {
|
|
|
13226
13298
|
}
|
|
13227
13299
|
}
|
|
13228
13300
|
|
|
13301
|
+
const btnContentTopSpacing = modalEditBox.querySelectorAll('.cmd-box-content-topspacing');
|
|
13302
|
+
btnContentTopSpacing.forEach(btn => {
|
|
13303
|
+
dom$l.removeClass(btn, 'on');
|
|
13304
|
+
});
|
|
13305
|
+
|
|
13306
|
+
if (container) {
|
|
13307
|
+
if (container.classList.contains('content-pt-0')) {
|
|
13308
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="0"]'), 'on');
|
|
13309
|
+
}
|
|
13310
|
+
|
|
13311
|
+
if (container.classList.contains('content-pt-10')) {
|
|
13312
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="10"]'), 'on');
|
|
13313
|
+
}
|
|
13314
|
+
|
|
13315
|
+
if (container.classList.contains('content-pt-20')) {
|
|
13316
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="20"]'), 'on');
|
|
13317
|
+
}
|
|
13318
|
+
|
|
13319
|
+
if (container.classList.contains('content-pt-30')) {
|
|
13320
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="30"]'), 'on');
|
|
13321
|
+
}
|
|
13322
|
+
|
|
13323
|
+
if (container.classList.contains('content-pt-40')) {
|
|
13324
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="40"]'), 'on');
|
|
13325
|
+
}
|
|
13326
|
+
|
|
13327
|
+
if (container.classList.contains('content-pt-50')) {
|
|
13328
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="50"]'), 'on');
|
|
13329
|
+
}
|
|
13330
|
+
|
|
13331
|
+
if (container.classList.contains('content-pt-60')) {
|
|
13332
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="60"]'), 'on');
|
|
13333
|
+
}
|
|
13334
|
+
|
|
13335
|
+
if (container.classList.contains('content-pt-70')) {
|
|
13336
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="70"]'), 'on');
|
|
13337
|
+
}
|
|
13338
|
+
|
|
13339
|
+
if (container.classList.contains('content-pt-80')) {
|
|
13340
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="80"]'), 'on');
|
|
13341
|
+
}
|
|
13342
|
+
}
|
|
13343
|
+
|
|
13344
|
+
const btnContentBottomSpacing = modalEditBox.querySelectorAll('.cmd-box-content-bottomspacing');
|
|
13345
|
+
btnContentBottomSpacing.forEach(btn => {
|
|
13346
|
+
dom$l.removeClass(btn, 'on');
|
|
13347
|
+
});
|
|
13348
|
+
|
|
13349
|
+
if (container) {
|
|
13350
|
+
if (container.classList.contains('content-pb-0')) {
|
|
13351
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="0"]'), 'on');
|
|
13352
|
+
}
|
|
13353
|
+
|
|
13354
|
+
if (container.classList.contains('content-pb-10')) {
|
|
13355
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="10"]'), 'on');
|
|
13356
|
+
}
|
|
13357
|
+
|
|
13358
|
+
if (container.classList.contains('content-pb-20')) {
|
|
13359
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="20"]'), 'on');
|
|
13360
|
+
}
|
|
13361
|
+
|
|
13362
|
+
if (container.classList.contains('content-pb-30')) {
|
|
13363
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="30"]'), 'on');
|
|
13364
|
+
}
|
|
13365
|
+
|
|
13366
|
+
if (container.classList.contains('content-pb-40')) {
|
|
13367
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="40"]'), 'on');
|
|
13368
|
+
}
|
|
13369
|
+
|
|
13370
|
+
if (container.classList.contains('content-pb-50')) {
|
|
13371
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="50"]'), 'on');
|
|
13372
|
+
}
|
|
13373
|
+
|
|
13374
|
+
if (container.classList.contains('content-pb-60')) {
|
|
13375
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="60"]'), 'on');
|
|
13376
|
+
}
|
|
13377
|
+
|
|
13378
|
+
if (container.classList.contains('content-pb-70')) {
|
|
13379
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="70"]'), 'on');
|
|
13380
|
+
}
|
|
13381
|
+
|
|
13382
|
+
if (container.classList.contains('content-pb-80')) {
|
|
13383
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="80"]'), 'on');
|
|
13384
|
+
}
|
|
13385
|
+
}
|
|
13386
|
+
|
|
13229
13387
|
if (modalEditBox.querySelector('#divBoxImage').style.display === 'flex' && modalEditBox.querySelector('#tabBoxImage').style.display === 'none') {
|
|
13230
13388
|
modalEditBox.querySelector('#tabBoxGeneral').click();
|
|
13231
13389
|
}
|
|
@@ -66467,138 +66625,138 @@ class ButtonEditor {
|
|
|
66467
66625
|
/* rounded */
|
|
66468
66626
|
{
|
|
66469
66627
|
html: `
|
|
66470
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
|
|
66628
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
|
|
66471
66629
|
`
|
|
66472
66630
|
}, {
|
|
66473
66631
|
html: `
|
|
66474
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
|
|
66632
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
|
|
66475
66633
|
`
|
|
66476
66634
|
}, {
|
|
66477
66635
|
html: `
|
|
66478
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
|
|
66636
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
|
|
66479
66637
|
`
|
|
66480
66638
|
}, {
|
|
66481
66639
|
html: `
|
|
66482
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
|
|
66640
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
|
|
66483
66641
|
`
|
|
66484
66642
|
}, {
|
|
66485
66643
|
html: `
|
|
66486
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
|
|
66644
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
|
|
66487
66645
|
`
|
|
66488
66646
|
}, {
|
|
66489
66647
|
html: `
|
|
66490
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
|
|
66648
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
|
|
66491
66649
|
`
|
|
66492
66650
|
},
|
|
66493
66651
|
/* colors */
|
|
66494
66652
|
{
|
|
66495
66653
|
html: `
|
|
66496
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
|
|
66654
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
|
|
66497
66655
|
`
|
|
66498
66656
|
}, {
|
|
66499
66657
|
html: `
|
|
66500
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
|
|
66658
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
|
|
66501
66659
|
`
|
|
66502
66660
|
}, {
|
|
66503
66661
|
html: `
|
|
66504
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
|
|
66662
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
|
|
66505
66663
|
`
|
|
66506
66664
|
}, {
|
|
66507
66665
|
html: `
|
|
66508
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
|
|
66666
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
|
|
66509
66667
|
`
|
|
66510
66668
|
},
|
|
66511
66669
|
/* square */
|
|
66512
66670
|
{
|
|
66513
66671
|
html: `
|
|
66514
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
|
|
66672
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
|
|
66515
66673
|
`
|
|
66516
66674
|
}, {
|
|
66517
66675
|
html: `
|
|
66518
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
|
|
66676
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
|
|
66519
66677
|
`
|
|
66520
66678
|
}, {
|
|
66521
66679
|
html: `
|
|
66522
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
|
|
66680
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
|
|
66523
66681
|
`
|
|
66524
66682
|
}, {
|
|
66525
66683
|
html: `
|
|
66526
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
|
|
66684
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
|
|
66527
66685
|
`
|
|
66528
66686
|
}, {
|
|
66529
66687
|
html: `
|
|
66530
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
|
|
66688
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
|
|
66531
66689
|
`
|
|
66532
66690
|
}, {
|
|
66533
66691
|
html: `
|
|
66534
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
|
|
66692
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
|
|
66535
66693
|
`
|
|
66536
66694
|
},
|
|
66537
66695
|
/* colors */
|
|
66538
66696
|
{
|
|
66539
66697
|
html: `
|
|
66540
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
|
|
66698
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
|
|
66541
66699
|
`
|
|
66542
66700
|
}, {
|
|
66543
66701
|
html: `
|
|
66544
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
|
|
66702
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
|
|
66545
66703
|
`
|
|
66546
66704
|
}, {
|
|
66547
66705
|
html: `
|
|
66548
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
|
|
66706
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
|
|
66549
66707
|
`
|
|
66550
66708
|
}, {
|
|
66551
66709
|
html: `
|
|
66552
|
-
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
|
|
66710
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
|
|
66553
66711
|
`
|
|
66554
66712
|
}, {
|
|
66555
66713
|
text: 'Order Now',
|
|
66556
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
|
|
66714
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
|
|
66557
66715
|
}, {
|
|
66558
66716
|
text: 'Explore',
|
|
66559
|
-
className: 'transition-all inline-block cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
|
|
66717
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
|
|
66560
66718
|
}, {
|
|
66561
66719
|
text: 'View Demo',
|
|
66562
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
|
|
66720
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
|
|
66563
66721
|
}, {
|
|
66564
66722
|
text: 'Get Started',
|
|
66565
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
|
|
66723
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
|
|
66566
66724
|
}, {
|
|
66567
66725
|
text: 'Create',
|
|
66568
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
|
|
66726
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
|
|
66569
66727
|
}, {
|
|
66570
66728
|
text: 'Hello!',
|
|
66571
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
|
|
66729
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
|
|
66572
66730
|
}, {
|
|
66573
66731
|
text: 'Build',
|
|
66574
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
|
|
66732
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
|
|
66575
66733
|
}, {
|
|
66576
66734
|
text: 'Contact',
|
|
66577
|
-
className: 'transition-all inline-block border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
|
|
66735
|
+
className: 'transition-all inline-block whitespace-nowrap border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
|
|
66578
66736
|
}, {
|
|
66579
66737
|
text: 'Read More',
|
|
66580
|
-
className: 'transition-all inline-block cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
|
|
66738
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
|
|
66581
66739
|
}, {
|
|
66582
66740
|
text: 'Send a Message',
|
|
66583
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
|
|
66741
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
|
|
66584
66742
|
}, {
|
|
66585
66743
|
text: 'Our Works',
|
|
66586
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
|
|
66744
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
|
|
66587
66745
|
}, {
|
|
66588
66746
|
text: 'Read More',
|
|
66589
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
|
|
66747
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
|
|
66590
66748
|
}, {
|
|
66591
66749
|
text: 'Get a Quote',
|
|
66592
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
|
|
66750
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
|
|
66593
66751
|
}, {
|
|
66594
66752
|
text: 'Try Demo',
|
|
66595
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
|
|
66753
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
|
|
66596
66754
|
}, {
|
|
66597
66755
|
text: 'Buy Now',
|
|
66598
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
|
|
66756
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
|
|
66599
66757
|
}, {
|
|
66600
66758
|
text: 'Play',
|
|
66601
|
-
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
|
|
66759
|
+
className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
|
|
66602
66760
|
}];
|
|
66603
66761
|
let html = '';
|
|
66604
66762
|
|
|
@@ -66764,15 +66922,16 @@ class ButtonEditor {
|
|
|
66764
66922
|
}
|
|
66765
66923
|
|
|
66766
66924
|
applyDefault(link) {
|
|
66767
|
-
|
|
66768
|
-
// dom.addClass(link, 'transition-all');
|
|
66925
|
+
const dom = this.dom; // dom.addClass(link, 'transition-all');
|
|
66769
66926
|
// if(!dom.hasClass(link,'flex')) dom.addClass(link, 'inline-block');
|
|
66770
66927
|
// dom.addClass(link, 'cursor-pointer');
|
|
66771
66928
|
// dom.addClass(link, 'border-solid');
|
|
66772
66929
|
// dom.addClass(link, 'leading-relaxed');
|
|
66930
|
+
|
|
66773
66931
|
link.removeAttribute('data-hover-bgcolor');
|
|
66774
66932
|
link.removeAttribute('data-hover-color');
|
|
66775
66933
|
link.removeAttribute('data-hover-bordercolor');
|
|
66934
|
+
dom.addClass(link, 'whitespace-nowrap');
|
|
66776
66935
|
}
|
|
66777
66936
|
|
|
66778
66937
|
cleanupOldClasses(link) {
|
|
@@ -71547,6 +71706,22 @@ class RowTool {
|
|
|
71547
71706
|
<label class="label-row-grayscale label-checkbox" for="chkRowGrayscale"><input id="chkRowGrayscale" class="chk-row-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
|
|
71548
71707
|
</div>
|
|
71549
71708
|
|
|
71709
|
+
<div class="div-row-wrapcolumns" style="display:flex;flex-direction:column;padding-bottom:7px">
|
|
71710
|
+
<div style="padding-top:20px;padding-bottom:3px;">${util.out('Wrap Columns (Breakpoint)')}:</div>
|
|
71711
|
+
<div style="padding-top:3px;display:flex;align-items: center;">
|
|
71712
|
+
<button title="${util.out('Tablet (Landscape)')}" class="input-breakpoint" data-value="md" style="width:40px;height:25px;">
|
|
71713
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
71714
|
+
</button>
|
|
71715
|
+
<button title="${util.out('Tablet (Portrait)')}" class="input-breakpoint" data-value="sm" style="width:40px;height:25px;">
|
|
71716
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
71717
|
+
</button>
|
|
71718
|
+
<button title="${util.out('Mobile')}" class="input-breakpoint on" data-value="xs" style="width:40px;height:25px;">
|
|
71719
|
+
<svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
|
|
71720
|
+
</button>
|
|
71721
|
+
|
|
71722
|
+
</div>
|
|
71723
|
+
</div>
|
|
71724
|
+
|
|
71550
71725
|
<div class="is-separator"></div>
|
|
71551
71726
|
|
|
71552
71727
|
<div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
|
|
@@ -71579,6 +71754,8 @@ class RowTool {
|
|
|
71579
71754
|
</button>
|
|
71580
71755
|
</div>
|
|
71581
71756
|
|
|
71757
|
+
<label for="chkReverseColumns" style="margin:20px 0 0;display:flex"><input id="chkReverseColumns" type="checkbox" style="margin:0 7px 0 0"/><span>${util.out('Reverse Columns')}</span></label>
|
|
71758
|
+
|
|
71582
71759
|
</div>
|
|
71583
71760
|
|
|
71584
71761
|
<div id="divRowMore" class="is-tab-content" data-group="rowsettings" tabindex="-1">
|
|
@@ -71791,9 +71968,75 @@ class RowTool {
|
|
|
71791
71968
|
|
|
71792
71969
|
|
|
71793
71970
|
this.builder.opts.onChange();
|
|
71971
|
+
}); // Breakpoint
|
|
71972
|
+
|
|
71973
|
+
let btns = this.rowSettings.querySelectorAll('.input-breakpoint');
|
|
71974
|
+
btns.forEach(btn => {
|
|
71975
|
+
btn.addEventListener('click', () => {
|
|
71976
|
+
let row = util.rowSelected();
|
|
71977
|
+
if (!row) return;
|
|
71978
|
+
this.builder.uo.saveForUndo();
|
|
71979
|
+
let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
|
|
71980
|
+
elms.forEach(elm => {
|
|
71981
|
+
elm.classList.remove('on');
|
|
71982
|
+
});
|
|
71983
|
+
btn.classList.add('on');
|
|
71984
|
+
let target = btn.getAttribute('data-value');
|
|
71985
|
+
|
|
71986
|
+
if (target === 'xs') {
|
|
71987
|
+
row.classList.remove('sm-wrap');
|
|
71988
|
+
row.classList.remove('md-wrap');
|
|
71989
|
+
} else if (target === 'sm') {
|
|
71990
|
+
row.classList.remove('md-wrap');
|
|
71991
|
+
row.classList.add('sm-wrap');
|
|
71992
|
+
} else if (target === 'md') {
|
|
71993
|
+
row.classList.remove('smd-wrap');
|
|
71994
|
+
row.classList.add('md-wrap');
|
|
71995
|
+
} //Trigger Change event
|
|
71996
|
+
|
|
71997
|
+
|
|
71998
|
+
this.builder.onChange();
|
|
71999
|
+
});
|
|
72000
|
+
});
|
|
72001
|
+
const chkReverseBoxes = this.rowSettings.querySelector('#chkReverseColumns');
|
|
72002
|
+
chkReverseBoxes.addEventListener('click', () => {
|
|
72003
|
+
let row = util.rowSelected();
|
|
72004
|
+
if (!row) return;
|
|
72005
|
+
this.builder.uo.saveForUndo();
|
|
72006
|
+
let divTarget = this.rowSettings.querySelector('.div-target');
|
|
72007
|
+
let target = this.builder.responsive.readTarget(divTarget);
|
|
72008
|
+
|
|
72009
|
+
if (target === 'xs') {
|
|
72010
|
+
if (chkReverseBoxes.checked) {
|
|
72011
|
+
row.classList.add('xs-column-reverse');
|
|
72012
|
+
} else {
|
|
72013
|
+
row.classList.remove('xs-column-reverse');
|
|
72014
|
+
}
|
|
72015
|
+
} else if (target === 'sm') {
|
|
72016
|
+
if (chkReverseBoxes.checked) {
|
|
72017
|
+
row.classList.add('sm-column-reverse');
|
|
72018
|
+
} else {
|
|
72019
|
+
row.classList.remove('sm-column-reverse');
|
|
72020
|
+
}
|
|
72021
|
+
} else if (target === 'md') {
|
|
72022
|
+
if (chkReverseBoxes.checked) {
|
|
72023
|
+
row.classList.add('md-column-reverse');
|
|
72024
|
+
} else {
|
|
72025
|
+
row.classList.remove('md-column-reverse');
|
|
72026
|
+
}
|
|
72027
|
+
} else if (target === '') {
|
|
72028
|
+
if (chkReverseBoxes.checked) {
|
|
72029
|
+
row.classList.add('desktop-column-reverse');
|
|
72030
|
+
} else {
|
|
72031
|
+
row.classList.remove('desktop-column-reverse');
|
|
72032
|
+
}
|
|
72033
|
+
} //Trigger Change event
|
|
72034
|
+
|
|
72035
|
+
|
|
72036
|
+
this.builder.settings.onChange();
|
|
71794
72037
|
}); // Responsive Visibility
|
|
71795
72038
|
|
|
71796
|
-
|
|
72039
|
+
btns = this.rowSettings.querySelectorAll('.input-device');
|
|
71797
72040
|
btns.forEach(btn => {
|
|
71798
72041
|
btn.addEventListener('click', () => {
|
|
71799
72042
|
let row = util.rowSelected();
|
|
@@ -71998,7 +72241,22 @@ class RowTool {
|
|
|
71998
72241
|
let divVisibility = this.rowSettings.querySelector('.div-visibility');
|
|
71999
72242
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
72000
72243
|
let valVisibility = this.builder.responsive.getVisibility(row, target);
|
|
72001
|
-
this.builder.responsive.showVisibility(divVisibility, valVisibility);
|
|
72244
|
+
this.builder.responsive.showVisibility(divVisibility, valVisibility); // Column reverse
|
|
72245
|
+
|
|
72246
|
+
let valReverse = false;
|
|
72247
|
+
|
|
72248
|
+
if (target === 'xs') {
|
|
72249
|
+
valReverse = row.classList.contains('xs-column-reverse');
|
|
72250
|
+
} else if (target === 'sm') {
|
|
72251
|
+
valReverse = row.classList.contains('sm-column-reverse');
|
|
72252
|
+
} else if (target === 'md') {
|
|
72253
|
+
valReverse = row.classList.contains('md-column-reverse');
|
|
72254
|
+
} else {
|
|
72255
|
+
valReverse = row.classList.contains('desktop-column-reverse');
|
|
72256
|
+
}
|
|
72257
|
+
|
|
72258
|
+
const chkReverseColumns = this.rowSettings.querySelector('#chkReverseColumns');
|
|
72259
|
+
chkReverseColumns.checked = valReverse;
|
|
72002
72260
|
}
|
|
72003
72261
|
|
|
72004
72262
|
render(row) {
|
|
@@ -88797,7 +89055,8 @@ class Resizeable {
|
|
|
88797
89055
|
minWidth: 50,
|
|
88798
89056
|
minHeight: 50,
|
|
88799
89057
|
adj: 4,
|
|
88800
|
-
onResize: function () {}
|
|
89058
|
+
onResize: function () {},
|
|
89059
|
+
resizeHeight: false
|
|
88801
89060
|
};
|
|
88802
89061
|
this.opts = Object.assign(this, defaults, opts);
|
|
88803
89062
|
const pane = this.pane;
|
|
@@ -88914,8 +89173,7 @@ class Resizeable {
|
|
|
88914
89173
|
if (clicked && clicked.isResizing) {
|
|
88915
89174
|
let newWidth;
|
|
88916
89175
|
let newWHeight;
|
|
88917
|
-
|
|
88918
|
-
if (clicked.onBottomEdge) {
|
|
89176
|
+
if (this.resizeHeight) if (clicked.onBottomEdge) {
|
|
88919
89177
|
newWHeight = Math.max(y / scale, minHeight) + adj;
|
|
88920
89178
|
pane.style.height = newWHeight + 'px';
|
|
88921
89179
|
}
|
|
@@ -88944,13 +89202,13 @@ class Resizeable {
|
|
|
88944
89202
|
|
|
88945
89203
|
|
|
88946
89204
|
if (onRightEdge && onBottomEdge) {
|
|
88947
|
-
pane.style.cursor = 'nwse-resize';
|
|
89205
|
+
if (this.resizeHeight) pane.style.cursor = 'nwse-resize';
|
|
88948
89206
|
} else if (onBottomEdge && onLeftEdge) {
|
|
88949
|
-
pane.style.cursor = 'nesw-resize';
|
|
89207
|
+
if (this.resizeHeight) pane.style.cursor = 'nesw-resize';
|
|
88950
89208
|
} else if (onRightEdge || onLeftEdge) {
|
|
88951
89209
|
pane.style.cursor = 'ew-resize';
|
|
88952
89210
|
} else if (onBottomEdge) {
|
|
88953
|
-
pane.style.cursor = 'ns-resize';
|
|
89211
|
+
if (this.resizeHeight) pane.style.cursor = 'ns-resize';
|
|
88954
89212
|
} else {
|
|
88955
89213
|
pane.style.cursor = '';
|
|
88956
89214
|
}
|
|
@@ -88999,6 +89257,7 @@ class Resize {
|
|
|
88999
89257
|
const row = col.parentNode;
|
|
89000
89258
|
this.resize = new Resizeable({
|
|
89001
89259
|
pane: col,
|
|
89260
|
+
resizeHeight: this.builder.resizeHeight,
|
|
89002
89261
|
onResize: (width, height) => {
|
|
89003
89262
|
this.builder.util.hideControls();
|
|
89004
89263
|
let numOfCols = 1;
|
|
@@ -90988,6 +91247,7 @@ class ContentBuilder {
|
|
|
90988
91247
|
toolbar: 'top',
|
|
90989
91248
|
toolbarDisplay: 'auto',
|
|
90990
91249
|
shortenHTML: true,
|
|
91250
|
+
resizeHeight: false,
|
|
90991
91251
|
snippetsSidebarDisplay: 'auto',
|
|
90992
91252
|
// snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
|
|
90993
91253
|
// onImageSelectClick: function () { },
|