@innovastudio/contentbox 1.6.159 → 1.6.161

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.
Files changed (5) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.css +3 -12
  3. package/public/contentbox/contentbox.esm.js +948 -295
  4. package/public/contentbox/contentbox.min.js +4 -4
  5. package/readme.txt +1 -1
package/public/contentbox/contentbox.esm.js CHANGED
@@ -4666,6 +4666,7 @@ class EditSection {
4666
4666
  dom$k.appendHtml(builderStuff, html);
4667
4667
  let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
4668
4668
  this.modalEditSection = modalEditSection;
4669
+ this.builder.editor.draggable('.is-modal.editsection .is-draggable');
4669
4670
  const btnClose = modalEditSection.querySelector('.is-modal-close');
4670
4671
  if (btnClose) btnClose.addEventListener('click', () => {
4671
4672
  this.close();
@@ -5310,6 +5311,7 @@ class EditSection {
5310
5311
  close() {
5311
5312
  const modalEditSection = this.modalEditSection;
5312
5313
  modalEditSection.style.display = '';
5314
+ modalEditSection.setAttribute('aria-hidden', true);
5313
5315
  }
5314
5316
 
5315
5317
  edit() {
@@ -5323,6 +5325,7 @@ class EditSection {
5323
5325
  // });
5324
5326
 
5325
5327
  modalEditSection.focus();
5328
+ modalEditSection.setAttribute('aria-hidden', false);
5326
5329
  this.read(); // Animate
5327
5330
 
5328
5331
  const activeSection = this.builder.activeSection;
@@ -5409,6 +5412,7 @@ class EditBox {
5409
5412
  this.modalEditBox = modalEditBox;
5410
5413
  const modalEditCode = builderStuff.querySelector('.is-modal.editcustomcode');
5411
5414
  const modalEditModule = builderStuff.querySelector('.is-modal.editmodule');
5415
+ this.builder.editor.draggable('.is-modal.editbox .is-draggable');
5412
5416
  const divBoxClick = modalEditBox.querySelector('#divBoxClick');
5413
5417
  this.divBoxClick = divBoxClick;
5414
5418
  const divBoxGeneral = modalEditBox.querySelector('#divBoxGeneral');
@@ -5417,21 +5421,7 @@ class EditBox {
5417
5421
  if (btnClose) btnClose.addEventListener('click', () => {
5418
5422
  this.close();
5419
5423
  });
5420
- new Tabs$1(modalEditBox); // Backward compatibility
5421
-
5422
- let s = '<div class="feature-master-style"></div>';
5423
- dom$j.appendHtml(modalEditBox, s);
5424
- const stamp = modalEditBox.querySelector('.feature-master-style');
5425
- let d = window.getComputedStyle(stamp, null).getPropertyValue('display');
5426
-
5427
- if (d === 'none') ; else {
5428
- const divContainerParagraphSize = modalEditBox.querySelector('#divContainerParagraphSize');
5429
- const divContainerLineHeight = modalEditBox.querySelector('#divContainerLineHeight');
5430
- divContainerParagraphSize.style.display = 'none';
5431
- divContainerLineHeight.style.display = 'none';
5432
- }
5433
-
5434
- stamp.parentNode.removeChild(stamp);
5424
+ new Tabs$1(modalEditBox);
5435
5425
  const tabs = modalEditBox.querySelectorAll('.is-tabs a');
5436
5426
  tabs.forEach(tab => {
5437
5427
  tab.addEventListener('click', e => {
@@ -6366,8 +6356,21 @@ class EditBox {
6366
6356
  // let activeModule = activeBox.querySelector('.is-overlay-content[data-module]');
6367
6357
  let activeModule = this.builder.doc.querySelector('[data-module-active="1"]');
6368
6358
  this.builder.editor.saveForUndo();
6369
- let modalIframe = modalEditModule.querySelector('iframe');
6370
- if (modalIframe.contentWindow.construct) modalIframe.contentWindow.construct();
6359
+ let modalIframe = modalEditModule.querySelector('iframe'); // if(modalIframe.contentWindow.construct) modalIframe.contentWindow.construct();
6360
+
6361
+ if (modalIframe.contentWindow.construct) {
6362
+ const result = modalIframe.contentWindow.construct(); // transfer module code to hidContentModuleCode & hidContentModuleSettings for saving
6363
+
6364
+ if (typeof result === 'object' && result !== null) {
6365
+ if (result.error) {
6366
+ alert(result.error);
6367
+ return;
6368
+ }
6369
+ }
6370
+ } else {
6371
+ return;
6372
+ }
6373
+
6371
6374
  this.builder.editor.saveForUndo(); //REVIEW
6372
6375
  // if (moduleName == 'code') {
6373
6376
  // let codeEditor = builderStuff.querySelector('#txtBoxCustomCode').getAttribute('data-CodeMirrorInstance');
@@ -7138,6 +7141,7 @@ class EditBox {
7138
7141
  close() {
7139
7142
  const modalEditBox = this.modalEditBox;
7140
7143
  modalEditBox.style.display = '';
7144
+ modalEditBox.setAttribute('aria-hidden', true);
7141
7145
  }
7142
7146
 
7143
7147
  edit() {
@@ -7158,6 +7162,7 @@ class EditBox {
7158
7162
  document.body.classList.add('box-modal-open'); // see .box-modal-open (gives outline to div.is-container when Box Settings is opened)
7159
7163
 
7160
7164
  modalEditBox.focus();
7165
+ modalEditBox.setAttribute('aria-hidden', false);
7161
7166
  } //edit
7162
7167
 
7163
7168
 
@@ -27869,8 +27874,8 @@ const renderQuickAdd = builder => {
27869
27874
  dom.addEventListener(elm, 'click', () => {
27870
27875
  const mode = quickadd.getAttribute('data-mode');
27871
27876
  let html = `<div>
27872
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);">Read More</a>
27873
- </div>`;
27877
+ <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(24, 24, 27); background-color: rgb(240, 240, 241);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(240, 240, 241)" data-hover-bg="rgb(236, 236, 238)">Read More</a>
27878
+ </div>`;
27874
27879
  if (builder.opts.emailMode) {
27875
27880
  html = '<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
27876
27881
  }
@@ -27879,10 +27884,10 @@ const renderQuickAdd = builder => {
27879
27884
  elm = quickadd.querySelector('.add-twobutton');
27880
27885
  dom.addEventListener(elm, 'click', () => {
27881
27886
  const mode = quickadd.getAttribute('data-mode');
27882
- let html = `<div>
27883
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);">Read More</a>
27884
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
27885
- </div>`;
27887
+ let html = `<div class="space-x-1">
27888
+ <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(24, 24, 27); background-color: rgb(240, 240, 241);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(240, 240, 241)" data-hover-bg="rgb(236, 236, 238)">Read More</a>
27889
+ <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(24, 24, 27)" data-hover-bg="rgb(63, 63, 70)">Get Started</a>
27890
+ </div>`;
27886
27891
  if (builder.opts.emailMode) {
27887
27892
  html = `<div>
27888
27893
  <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
@@ -74223,7 +74228,7 @@ class ButtonEditor {
74223
74228
  </div>
74224
74229
  <div id="divButtonTemplates" class="is-tab-content" tabindex="-1" data-group="button">
74225
74230
 
74226
- <div id="divButtonTemplateList" class="is-container"></div>
74231
+ <div id="divButtonTemplateList"></div>
74227
74232
 
74228
74233
  </div>
74229
74234
  </div>
@@ -75198,334 +75203,953 @@ class ButtonEditor {
75198
75203
  callback(currColor);
75199
75204
  this.builderStuff.removeChild(elm);
75200
75205
  }
75201
- renderTemplates() {
75202
- const templates = [/* rounded */
75203
75206
 
75207
+ // Button generator function
75208
+ generateButton(config) {
75209
+ const {
75210
+ type = 'outline',
75211
+ shape = 'rounded',
75212
+ size = 'medium',
75213
+ text = 'Button',
75214
+ color,
75215
+ bg,
75216
+ hoverBg,
75217
+ borderColor,
75218
+ // hoverBorderColor,
75219
+ customClasses = '',
75220
+ href = '#'
75221
+ } = config;
75222
+
75223
+ // Base classes that all buttons share
75224
+ const baseClasses = 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal';
75225
+
75226
+ // Shape classes
75227
+ const shapeClasses = {
75228
+ 'rounded': 'rounded-full',
75229
+ 'square': '',
75230
+ 'slightly-rounded': 'rounded-lg'
75231
+ };
75232
+
75233
+ // Size classes - adjust padding, font size, and line height
75234
+ const sizeClasses = {
75235
+ 'small': 'py-1 px-4 size-14 leading-13',
75236
+ 'medium': 'py-2 px-6 size-15 leading-14',
75237
+ 'large': 'py-2 px-7 size-16 leading-16'
75238
+ };
75239
+
75240
+ // Build the final class string
75241
+ // let classes = `${baseClasses} ${shapeClasses[shape] || ''} ${customClasses}`.trim();
75242
+ let classes = `${baseClasses} ${shapeClasses[shape] || ''} ${sizeClasses[size] || sizeClasses.medium} ${customClasses}`.trim();
75243
+
75244
+ // 🔹 Remove 'no-underline' if 'underline' exists in customClasses
75245
+ if (/\bunderline\b/.test(customClasses)) {
75246
+ classes = classes.replace(/\bno-underline\b/, '').trim();
75247
+ }
75248
+
75249
+ // Build style and attributes based on type
75250
+ if (type === 'outline') {
75251
+ // Outline button
75252
+ const borderClass = borderColor ? '' : 'border-current hover:border-current';
75253
+ classes += ` ${borderClass}`;
75254
+
75255
+ // const styleAttr = borderColor ? `style="border-color: ${borderColor};"` : '';
75256
+ const styleAttr = color ? `style="color: ${color};"` : '';
75257
+ return {
75258
+ html: `<a href="${href}" role="button" class="${classes}"${styleAttr ? ' ' + styleAttr : ''}>${text}</a>`
75259
+ };
75260
+ } else if (type === 'solid') {
75261
+ // Solid button with background
75262
+ classes += ' border-transparent hover:border-transparent';
75263
+ let html = '<a\n';
75264
+ html += ` href="${href}"\n`;
75265
+ html += ' role="button"\n';
75266
+ html += ` class="${classes}"\n`;
75267
+ if (color || bg) {
75268
+ const styles = [];
75269
+ if (color) styles.push(`color: ${color}`);
75270
+ if (bg) styles.push(`background-color: ${bg}`);
75271
+ html += ` style="${styles.join('; ')};"`;
75272
+ }
75273
+ if (bg && hoverBg) {
75274
+ html += `\n data-bg="${bg}"`;
75275
+ html += `\n data-hover-bg="${hoverBg}"`;
75276
+ html += '\n onmouseover="if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');"';
75277
+ html += '\n onmouseout="if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\';"';
75278
+ }
75279
+ html += '>\n';
75280
+ html += ` ${text}\n`;
75281
+ html += '</a>';
75282
+ return {
75283
+ html
75284
+ };
75285
+ }
75286
+ }
75287
+ renderTemplates() {
75288
+ // Button configuration
75289
+ const buttonConfigs = [
75290
+ // Rounded buttons
75204
75291
  {
75205
- html: `
75206
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-7 border-current hover:border-current font-normal leading-14 rounded-full tracking-wide">Read More</a>
75207
- `
75292
+ type: 'solid',
75293
+ shape: 'rounded',
75294
+ text: 'Read More',
75295
+ color: 'rgb(24, 24, 27)',
75296
+ bg: 'transparent',
75297
+ hoverBg: 'transparent',
75298
+ customClasses: 'underline'
75299
+ }, {
75300
+ type: 'outline',
75301
+ shape: 'rounded',
75302
+ text: 'Read More'
75208
75303
  }, {
75209
- html: `
75210
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-7 text-black leading-14 rounded-full border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
75211
- `
75304
+ type: 'solid',
75305
+ shape: 'rounded',
75306
+ text: 'Read More',
75307
+ color: 'rgb(24, 24, 27)',
75308
+ bg: 'rgb(240, 240, 241)',
75309
+ hoverBg: 'rgb(236, 236, 238)'
75212
75310
  }, {
75213
- html: `
75214
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
75215
- `
75311
+ type: 'solid',
75312
+ shape: 'rounded',
75313
+ text: 'Read More',
75314
+ color: 'rgb(250, 250, 250)',
75315
+ bg: 'rgb(24, 24, 27)',
75316
+ hoverBg: 'rgb(63, 63, 70)'
75216
75317
  }, {
75217
- html: `
75218
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
75219
- `
75318
+ type: 'outline',
75319
+ shape: 'rounded',
75320
+ text: 'Read More',
75321
+ color: 'rgb(250, 250, 250)',
75322
+ bg: 'transparent',
75323
+ hoverBg: 'transparent'
75220
75324
  }, {
75221
- html: `
75222
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
75223
- `
75325
+ type: 'solid',
75326
+ shape: 'rounded',
75327
+ text: 'Read More',
75328
+ color: '#ffffff',
75329
+ bg: 'rgba(13, 151, 255, 1)',
75330
+ hoverBg: 'rgba(7, 138, 237, 1)'
75224
75331
  }, {
75225
- html: `
75226
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-7 border-current hover:border-current font-normal leading-14 tracking-wide rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
75227
- `
75228
- }, /* colors */
75332
+ type: 'solid',
75333
+ shape: 'rounded',
75334
+ text: 'Read More',
75335
+ color: '#ffffff',
75336
+ bg: '#3b82f6',
75337
+ hoverBg: 'rgba(47, 116, 228, 1)'
75338
+ }, {
75339
+ type: 'solid',
75340
+ shape: 'rounded',
75341
+ text: 'Read More',
75342
+ color: 'rgb(24, 24, 27)',
75343
+ bg: '#fff',
75344
+ hoverBg: 'rgba(248, 248, 250, 1)'
75345
+ },
75346
+ // Colors
75229
75347
  {
75230
- html: `
75231
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
75232
- `
75348
+ type: 'solid',
75349
+ shape: 'rounded',
75350
+ size: 'medium',
75351
+ text: 'Read More',
75352
+ color: 'rgb(24, 24, 27)',
75353
+ bg: 'rgba(111, 235, 255, 1)',
75354
+ hoverBg: 'rgba(98, 230, 252, 1)'
75355
+ }, {
75356
+ type: 'solid',
75357
+ shape: 'rounded',
75358
+ size: 'medium',
75359
+ text: 'Read More',
75360
+ color: '#ffffff',
75361
+ bg: 'rgba(19, 166, 27, 1)',
75362
+ hoverBg: 'rgba(17, 155, 25, 1)'
75363
+ }, {
75364
+ type: 'solid',
75365
+ shape: 'rounded',
75366
+ size: 'medium',
75367
+ text: 'Read More',
75368
+ color: 'rgb(24, 24, 27)',
75369
+ bg: 'rgba(254, 235, 101, 1)',
75370
+ hoverBg: 'rgba(249, 229, 85, 1)'
75371
+ }, {
75372
+ type: 'solid',
75373
+ shape: 'rounded',
75374
+ size: 'medium',
75375
+ text: 'Read More',
75376
+ color: '#ffffff',
75377
+ bg: 'rgba(251, 45, 45, 1)',
75378
+ hoverBg: 'rgba(239, 38, 36, 1)'
75233
75379
  }, {
75234
- html: `
75235
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
75236
- `
75380
+ type: 'solid',
75381
+ shape: 'rounded',
75382
+ size: 'medium',
75383
+ text: 'Read More',
75384
+ color: '#ffffff',
75385
+ bg: 'rgba(255, 122, 0, 1)',
75386
+ hoverBg: 'rgba(248, 109, 2, 1)'
75237
75387
  }, {
75238
- html: `
75239
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
75240
- `
75388
+ type: 'solid',
75389
+ shape: 'rounded',
75390
+ size: 'medium',
75391
+ text: 'Read More',
75392
+ color: '#ffffff',
75393
+ bg: 'rgba(255, 68, 179, 1)',
75394
+ hoverBg: 'rgba(240, 46, 169, 1)'
75241
75395
  }, {
75242
- html: `
75243
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
75244
- `
75245
- }, /* square */
75396
+ type: 'solid',
75397
+ shape: 'rounded',
75398
+ size: 'medium',
75399
+ text: 'Read More',
75400
+ color: 'rgb(24, 24, 27)',
75401
+ bg: 'rgba(148, 251, 208, 1)',
75402
+ hoverBg: 'rgba(133, 244, 198, 1)'
75403
+ }, {
75404
+ type: 'solid',
75405
+ shape: 'rounded',
75406
+ size: 'medium',
75407
+ text: 'Read More',
75408
+ color: '#ffffff',
75409
+ bg: 'rgba(91, 73, 228, 1)',
75410
+ hoverBg: 'rgba(77, 59, 208, 1)'
75411
+ }, {
75412
+ type: 'solid',
75413
+ shape: 'rounded',
75414
+ size: 'medium',
75415
+ text: 'Read More',
75416
+ color: '#ffffff',
75417
+ bg: 'rgba(142, 67, 237, 1)',
75418
+ hoverBg: 'rgba(122, 52, 212, 1)'
75419
+ }, {
75420
+ type: 'solid',
75421
+ shape: 'rounded',
75422
+ size: 'medium',
75423
+ text: 'Read More',
75424
+ color: 'rgb(24, 24, 27)',
75425
+ bg: 'rgba(191, 245, 110, 1)',
75426
+ hoverBg: 'rgba(183, 236, 103, 1)'
75427
+ },
75428
+ // Slightly Rounded buttons
75246
75429
  {
75247
- html: `
75248
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Read More</a>
75249
- `
75430
+ type: 'solid',
75431
+ shape: 'slightly-rounded',
75432
+ text: 'Read More',
75433
+ color: 'rgb(24, 24, 27)',
75434
+ bg: 'transparent',
75435
+ hoverBg: 'transparent',
75436
+ customClasses: 'underline'
75437
+ }, {
75438
+ type: 'outline',
75439
+ shape: 'slightly-rounded',
75440
+ text: 'Read More'
75250
75441
  }, {
75251
- html: `
75252
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
75253
- `
75442
+ type: 'solid',
75443
+ shape: 'slightly-rounded',
75444
+ text: 'Read More',
75445
+ color: 'rgb(24, 24, 27)',
75446
+ bg: 'rgb(240, 240, 241)',
75447
+ hoverBg: 'rgb(236, 236, 238)'
75254
75448
  }, {
75255
- html: `
75256
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
75257
- `
75449
+ type: 'solid',
75450
+ shape: 'slightly-rounded',
75451
+ text: 'Read More',
75452
+ color: 'rgb(250, 250, 250)',
75453
+ bg: 'rgb(24, 24, 27)',
75454
+ hoverBg: 'rgb(63, 63, 70)'
75258
75455
  }, {
75259
- html: `
75260
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
75261
- `
75456
+ type: 'outline',
75457
+ shape: 'slightly-rounded',
75458
+ text: 'Read More',
75459
+ color: 'rgb(250, 250, 250)',
75460
+ bg: 'transparent',
75461
+ hoverBg: 'transparent'
75262
75462
  }, {
75263
- html: `
75264
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
75265
- `
75463
+ type: 'solid',
75464
+ shape: 'slightly-rounded',
75465
+ text: 'Read More',
75466
+ color: '#ffffff',
75467
+ bg: 'rgba(13, 151, 255, 1)',
75468
+ hoverBg: 'rgba(7, 138, 237, 1)'
75266
75469
  }, {
75267
- html: `
75268
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 border-current hover:border-current font-normal leading-14 tracking-wide rounded" style="color: rgb(255, 255, 255);">Get Started</a>
75269
- `
75270
- }, /* colors */
75470
+ type: 'solid',
75471
+ shape: 'slightly-rounded',
75472
+ text: 'Read More',
75473
+ color: '#ffffff',
75474
+ bg: '#3b82f6',
75475
+ hoverBg: 'rgba(47, 116, 228, 1)'
75476
+ }, {
75477
+ type: 'solid',
75478
+ shape: 'slightly-rounded',
75479
+ text: 'Read More',
75480
+ color: 'rgb(24, 24, 27)',
75481
+ bg: '#fff',
75482
+ hoverBg: 'rgba(248, 248, 250, 1)'
75483
+ },
75484
+ // Colors
75271
75485
  {
75272
- html: `
75273
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
75274
- `
75486
+ type: 'solid',
75487
+ shape: 'slightly-rounded',
75488
+ size: 'medium',
75489
+ text: 'Read More',
75490
+ color: 'rgb(24, 24, 27)',
75491
+ bg: 'rgba(111, 235, 255, 1)',
75492
+ hoverBg: 'rgba(98, 230, 252, 1)'
75275
75493
  }, {
75276
- html: `
75277
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
75278
- `
75494
+ type: 'solid',
75495
+ shape: 'slightly-rounded',
75496
+ size: 'medium',
75497
+ text: 'Read More',
75498
+ color: '#ffffff',
75499
+ bg: 'rgba(19, 166, 27, 1)',
75500
+ hoverBg: 'rgba(17, 155, 25, 1)'
75279
75501
  }, {
75280
- html: `
75281
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
75282
- `
75502
+ type: 'solid',
75503
+ shape: 'slightly-rounded',
75504
+ size: 'medium',
75505
+ text: 'Read More',
75506
+ color: 'rgb(24, 24, 27)',
75507
+ bg: 'rgba(254, 235, 101, 1)',
75508
+ hoverBg: 'rgba(249, 229, 85, 1)'
75283
75509
  }, {
75284
- html: `
75285
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded ml-0 mt-1 size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
75286
- `
75287
- }, /* MEDIUM */
75288
-
75289
- /* rounded */
75290
-
75510
+ type: 'solid',
75511
+ shape: 'slightly-rounded',
75512
+ size: 'medium',
75513
+ text: 'Read More',
75514
+ color: '#ffffff',
75515
+ bg: 'rgba(251, 45, 45, 1)',
75516
+ hoverBg: 'rgba(239, 38, 36, 1)'
75517
+ }, {
75518
+ type: 'solid',
75519
+ shape: 'slightly-rounded',
75520
+ size: 'medium',
75521
+ text: 'Read More',
75522
+ color: '#ffffff',
75523
+ bg: 'rgba(255, 122, 0, 1)',
75524
+ hoverBg: 'rgba(248, 109, 2, 1)'
75525
+ }, {
75526
+ type: 'solid',
75527
+ shape: 'slightly-rounded',
75528
+ size: 'medium',
75529
+ text: 'Read More',
75530
+ color: '#ffffff',
75531
+ bg: 'rgba(255, 68, 179, 1)',
75532
+ hoverBg: 'rgba(240, 46, 169, 1)'
75533
+ }, {
75534
+ type: 'solid',
75535
+ shape: 'slightly-rounded',
75536
+ size: 'medium',
75537
+ text: 'Read More',
75538
+ color: 'rgb(24, 24, 27)',
75539
+ bg: 'rgba(148, 251, 208, 1)',
75540
+ hoverBg: 'rgba(133, 244, 198, 1)'
75541
+ }, {
75542
+ type: 'solid',
75543
+ shape: 'slightly-rounded',
75544
+ size: 'medium',
75545
+ text: 'Read More',
75546
+ color: '#ffffff',
75547
+ bg: 'rgba(91, 73, 228, 1)',
75548
+ hoverBg: 'rgba(77, 59, 208, 1)'
75549
+ }, {
75550
+ type: 'solid',
75551
+ shape: 'slightly-rounded',
75552
+ size: 'medium',
75553
+ text: 'Read More',
75554
+ color: '#ffffff',
75555
+ bg: 'rgba(142, 67, 237, 1)',
75556
+ hoverBg: 'rgba(122, 52, 212, 1)'
75557
+ }, {
75558
+ type: 'solid',
75559
+ shape: 'slightly-rounded',
75560
+ size: 'medium',
75561
+ text: 'Read More',
75562
+ color: 'rgb(24, 24, 27)',
75563
+ bg: 'rgba(191, 245, 110, 1)',
75564
+ hoverBg: 'rgba(183, 236, 103, 1)'
75565
+ },
75566
+ // Rounded buttons - Small
75291
75567
  {
75292
- html: `
75293
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-9 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-wide">Read More</a>
75294
- `
75568
+ type: 'solid',
75569
+ shape: 'rounded',
75570
+ size: 'small',
75571
+ text: 'Read More',
75572
+ color: 'rgb(24, 24, 27)',
75573
+ bg: 'transparent',
75574
+ hoverBg: 'transparent',
75575
+ customClasses: 'underline'
75576
+ }, {
75577
+ type: 'outline',
75578
+ shape: 'rounded',
75579
+ size: 'small',
75580
+ text: 'Read More'
75581
+ }, {
75582
+ type: 'solid',
75583
+ shape: 'rounded',
75584
+ size: 'small',
75585
+ text: 'Read More',
75586
+ color: 'rgb(24, 24, 27)',
75587
+ bg: 'rgb(240, 240, 241)',
75588
+ hoverBg: 'rgb(236, 236, 238)'
75295
75589
  }, {
75296
- html: `
75297
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-9 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
75298
- `
75590
+ type: 'solid',
75591
+ shape: 'rounded',
75592
+ size: 'small',
75593
+ text: 'Read More',
75594
+ color: 'rgb(250, 250, 250)',
75595
+ bg: 'rgb(24, 24, 27)',
75596
+ hoverBg: 'rgb(63, 63, 70)'
75299
75597
  }, {
75300
- html: `
75301
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-9 font-normal leading-relaxed border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
75302
- `
75598
+ type: 'outline',
75599
+ shape: 'rounded',
75600
+ size: 'small',
75601
+ text: 'Read More',
75602
+ color: 'rgb(250, 250, 250)',
75603
+ bg: 'transparent',
75604
+ hoverBg: 'transparent'
75303
75605
  }, {
75304
- html: `
75305
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-9 font-normal leading-relaxed border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
75306
- `
75606
+ type: 'solid',
75607
+ shape: 'rounded',
75608
+ size: 'small',
75609
+ text: 'Read More',
75610
+ color: '#ffffff',
75611
+ bg: 'rgba(13, 151, 255, 1)',
75612
+ hoverBg: 'rgba(7, 138, 237, 1)'
75307
75613
  }, {
75308
- html: `
75309
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-9 font-normal leading-relaxed border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
75310
- `
75614
+ type: 'solid',
75615
+ shape: 'rounded',
75616
+ size: 'small',
75617
+ text: 'Read More',
75618
+ color: '#ffffff',
75619
+ bg: '#3b82f6',
75620
+ hoverBg: 'rgba(47, 116, 228, 1)'
75311
75621
  }, {
75312
- html: `
75313
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-9 border-current hover:border-current font-normal leading-relaxed tracking-wide rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
75314
- `
75315
- }, /* colors */
75622
+ type: 'solid',
75623
+ shape: 'rounded',
75624
+ size: 'small',
75625
+ text: 'Read More',
75626
+ color: 'rgb(24, 24, 27)',
75627
+ bg: '#fff',
75628
+ hoverBg: 'rgba(248, 248, 250, 1)'
75629
+ },
75630
+ // Colors
75316
75631
  {
75317
- html: `
75318
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-9 font-normal leading-relaxed border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
75319
- `
75632
+ type: 'solid',
75633
+ shape: 'rounded',
75634
+ size: 'small',
75635
+ text: 'Read More',
75636
+ color: 'rgb(24, 24, 27)',
75637
+ bg: 'rgba(111, 235, 255, 1)',
75638
+ hoverBg: 'rgba(98, 230, 252, 1)'
75639
+ }, {
75640
+ type: 'solid',
75641
+ shape: 'rounded',
75642
+ size: 'small',
75643
+ text: 'Read More',
75644
+ color: '#ffffff',
75645
+ bg: 'rgba(19, 166, 27, 1)',
75646
+ hoverBg: 'rgba(17, 155, 25, 1)'
75647
+ }, {
75648
+ type: 'solid',
75649
+ shape: 'rounded',
75650
+ size: 'small',
75651
+ text: 'Read More',
75652
+ color: 'rgb(24, 24, 27)',
75653
+ bg: 'rgba(254, 235, 101, 1)',
75654
+ hoverBg: 'rgba(249, 229, 85, 1)'
75655
+ }, {
75656
+ type: 'solid',
75657
+ shape: 'rounded',
75658
+ size: 'small',
75659
+ text: 'Read More',
75660
+ color: '#ffffff',
75661
+ bg: 'rgba(251, 45, 45, 1)',
75662
+ hoverBg: 'rgba(239, 38, 36, 1)'
75663
+ }, {
75664
+ type: 'solid',
75665
+ shape: 'rounded',
75666
+ size: 'small',
75667
+ text: 'Read More',
75668
+ color: '#ffffff',
75669
+ bg: 'rgba(255, 122, 0, 1)',
75670
+ hoverBg: 'rgba(248, 109, 2, 1)'
75671
+ }, {
75672
+ type: 'solid',
75673
+ shape: 'rounded',
75674
+ size: 'small',
75675
+ text: 'Read More',
75676
+ color: '#ffffff',
75677
+ bg: 'rgba(255, 68, 179, 1)',
75678
+ hoverBg: 'rgba(240, 46, 169, 1)'
75679
+ }, {
75680
+ type: 'solid',
75681
+ shape: 'rounded',
75682
+ size: 'small',
75683
+ text: 'Read More',
75684
+ color: 'rgb(24, 24, 27)',
75685
+ bg: 'rgba(148, 251, 208, 1)',
75686
+ hoverBg: 'rgba(133, 244, 198, 1)'
75320
75687
  }, {
75321
- html: `
75322
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-9 font-normal leading-relaxed border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
75323
- `
75688
+ type: 'solid',
75689
+ shape: 'rounded',
75690
+ size: 'small',
75691
+ text: 'Read More',
75692
+ color: '#ffffff',
75693
+ bg: 'rgba(91, 73, 228, 1)',
75694
+ hoverBg: 'rgba(77, 59, 208, 1)'
75324
75695
  }, {
75325
- html: `
75326
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-9 font-normal leading-relaxed border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
75327
- `
75696
+ type: 'solid',
75697
+ shape: 'rounded',
75698
+ size: 'small',
75699
+ text: 'Read More',
75700
+ color: '#ffffff',
75701
+ bg: 'rgba(142, 67, 237, 1)',
75702
+ hoverBg: 'rgba(122, 52, 212, 1)'
75328
75703
  }, {
75329
- html: `
75330
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-9 font-normal leading-relaxed border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
75331
- `
75332
- }, /* square */
75704
+ type: 'solid',
75705
+ shape: 'rounded',
75706
+ size: 'small',
75707
+ text: 'Read More',
75708
+ color: 'rgb(24, 24, 27)',
75709
+ bg: 'rgba(191, 245, 110, 1)',
75710
+ hoverBg: 'rgba(183, 236, 103, 1)'
75711
+ },
75712
+ // Slightly Rounded buttons - Small
75333
75713
  {
75334
- html: `
75335
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-wide">Read More</a>
75336
- `
75714
+ type: 'solid',
75715
+ shape: 'slightly-rounded',
75716
+ size: 'small',
75717
+ text: 'Read More',
75718
+ color: 'rgb(24, 24, 27)',
75719
+ bg: 'transparent',
75720
+ hoverBg: 'transparent',
75721
+ customClasses: 'underline'
75722
+ }, {
75723
+ type: 'outline',
75724
+ shape: 'slightly-rounded',
75725
+ size: 'small',
75726
+ text: 'Read More'
75727
+ }, {
75728
+ type: 'solid',
75729
+ shape: 'slightly-rounded',
75730
+ size: 'small',
75731
+ text: 'Read More',
75732
+ color: 'rgb(24, 24, 27)',
75733
+ bg: 'rgb(240, 240, 241)',
75734
+ hoverBg: 'rgb(236, 236, 238)'
75337
75735
  }, {
75338
- html: `
75339
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
75340
- `
75736
+ type: 'solid',
75737
+ shape: 'slightly-rounded',
75738
+ size: 'small',
75739
+ text: 'Read More',
75740
+ color: 'rgb(250, 250, 250)',
75741
+ bg: 'rgb(24, 24, 27)',
75742
+ hoverBg: 'rgb(63, 63, 70)'
75341
75743
  }, {
75342
- html: `
75343
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
75344
- `
75744
+ type: 'outline',
75745
+ shape: 'slightly-rounded',
75746
+ size: 'small',
75747
+ text: 'Read More',
75748
+ color: 'rgb(250, 250, 250)',
75749
+ bg: 'transparent',
75750
+ hoverBg: 'transparent'
75345
75751
  }, {
75346
- html: `
75347
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
75348
- `
75752
+ type: 'solid',
75753
+ shape: 'slightly-rounded',
75754
+ size: 'small',
75755
+ text: 'Read More',
75756
+ color: '#ffffff',
75757
+ bg: 'rgba(13, 151, 255, 1)',
75758
+ hoverBg: 'rgba(7, 138, 237, 1)'
75349
75759
  }, {
75350
- html: `
75351
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
75352
- `
75760
+ type: 'solid',
75761
+ shape: 'slightly-rounded',
75762
+ size: 'small',
75763
+ text: 'Read More',
75764
+ color: '#ffffff',
75765
+ bg: '#3b82f6',
75766
+ hoverBg: 'rgba(47, 116, 228, 1)'
75353
75767
  }, {
75354
- html: `
75355
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-8 border-current hover:border-current font-normal leading-relaxed tracking-wide rounded" style="color: rgb(255, 255, 255);">Get Started</a>
75356
- `
75357
- }, /* colors */
75768
+ type: 'solid',
75769
+ shape: 'slightly-rounded',
75770
+ size: 'small',
75771
+ text: 'Read More',
75772
+ color: 'rgb(24, 24, 27)',
75773
+ bg: '#fff',
75774
+ hoverBg: 'rgba(248, 248, 250, 1)'
75775
+ },
75776
+ // Colors
75358
75777
  {
75359
- html: `
75360
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
75361
- `
75778
+ type: 'solid',
75779
+ shape: 'slightly-rounded',
75780
+ size: 'small',
75781
+ text: 'Read More',
75782
+ color: 'rgb(24, 24, 27)',
75783
+ bg: 'rgba(111, 235, 255, 1)',
75784
+ hoverBg: 'rgba(98, 230, 252, 1)'
75362
75785
  }, {
75363
- html: `
75364
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
75365
- `
75786
+ type: 'solid',
75787
+ shape: 'slightly-rounded',
75788
+ size: 'small',
75789
+ text: 'Read More',
75790
+ color: '#ffffff',
75791
+ bg: 'rgba(19, 166, 27, 1)',
75792
+ hoverBg: 'rgba(17, 155, 25, 1)'
75366
75793
  }, {
75367
- html: `
75368
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
75369
- `
75794
+ type: 'solid',
75795
+ shape: 'slightly-rounded',
75796
+ size: 'small',
75797
+ text: 'Read More',
75798
+ color: 'rgb(24, 24, 27)',
75799
+ bg: 'rgba(254, 235, 101, 1)',
75800
+ hoverBg: 'rgba(249, 229, 85, 1)'
75370
75801
  }, {
75371
- html: `
75372
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
75373
- `
75374
- }, /* LARGER */
75375
-
75376
- /* rounded */
75377
-
75802
+ type: 'solid',
75803
+ shape: 'slightly-rounded',
75804
+ size: 'small',
75805
+ text: 'Read More',
75806
+ color: '#ffffff',
75807
+ bg: 'rgba(251, 45, 45, 1)',
75808
+ hoverBg: 'rgba(239, 38, 36, 1)'
75809
+ }, {
75810
+ type: 'solid',
75811
+ shape: 'slightly-rounded',
75812
+ size: 'small',
75813
+ text: 'Read More',
75814
+ color: '#ffffff',
75815
+ bg: 'rgba(255, 122, 0, 1)',
75816
+ hoverBg: 'rgba(248, 109, 2, 1)'
75817
+ }, {
75818
+ type: 'solid',
75819
+ shape: 'slightly-rounded',
75820
+ size: 'small',
75821
+ text: 'Read More',
75822
+ color: '#ffffff',
75823
+ bg: 'rgba(255, 68, 179, 1)',
75824
+ hoverBg: 'rgba(240, 46, 169, 1)'
75825
+ }, {
75826
+ type: 'solid',
75827
+ shape: 'slightly-rounded',
75828
+ size: 'small',
75829
+ text: 'Read More',
75830
+ color: 'rgb(24, 24, 27)',
75831
+ bg: 'rgba(148, 251, 208, 1)',
75832
+ hoverBg: 'rgba(133, 244, 198, 1)'
75833
+ }, {
75834
+ type: 'solid',
75835
+ shape: 'slightly-rounded',
75836
+ size: 'small',
75837
+ text: 'Read More',
75838
+ color: '#ffffff',
75839
+ bg: 'rgba(91, 73, 228, 1)',
75840
+ hoverBg: 'rgba(77, 59, 208, 1)'
75841
+ }, {
75842
+ type: 'solid',
75843
+ shape: 'slightly-rounded',
75844
+ size: 'small',
75845
+ text: 'Read More',
75846
+ color: '#ffffff',
75847
+ bg: 'rgba(142, 67, 237, 1)',
75848
+ hoverBg: 'rgba(122, 52, 212, 1)'
75849
+ }, {
75850
+ type: 'solid',
75851
+ shape: 'slightly-rounded',
75852
+ size: 'small',
75853
+ text: 'Read More',
75854
+ color: 'rgb(24, 24, 27)',
75855
+ bg: 'rgba(191, 245, 110, 1)',
75856
+ hoverBg: 'rgba(183, 236, 103, 1)'
75857
+ },
75858
+ // Rounded buttons - Large
75378
75859
  {
75379
- html: `
75380
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-12 uppercase border-current hover:border-current font-normal leading-relaxed rounded-full tracking-75">Read More</a>
75381
- `
75860
+ type: 'solid',
75861
+ shape: 'rounded',
75862
+ size: 'large',
75863
+ text: 'Read More',
75864
+ color: 'rgb(24, 24, 27)',
75865
+ bg: 'transparent',
75866
+ hoverBg: 'transparent',
75867
+ customClasses: 'underline'
75868
+ }, {
75869
+ type: 'outline',
75870
+ shape: 'rounded',
75871
+ size: 'large',
75872
+ text: 'Read More'
75382
75873
  }, {
75383
- html: `
75384
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-12 uppercase text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-75" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
75385
- `
75874
+ type: 'solid',
75875
+ shape: 'rounded',
75876
+ size: 'large',
75877
+ text: 'Read More',
75878
+ color: 'rgb(24, 24, 27)',
75879
+ bg: 'rgb(240, 240, 241)',
75880
+ hoverBg: 'rgb(236, 236, 238)'
75386
75881
  }, {
75387
- html: `
75388
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-12 uppercase font-normal leading-relaxed border-transparent rounded-full size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
75389
- `
75882
+ type: 'solid',
75883
+ shape: 'rounded',
75884
+ size: 'large',
75885
+ text: 'Read More',
75886
+ color: 'rgb(250, 250, 250)',
75887
+ bg: 'rgb(24, 24, 27)',
75888
+ hoverBg: 'rgb(63, 63, 70)'
75390
75889
  }, {
75391
- html: `
75392
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-12 uppercase font-normal leading-relaxed border-transparent rounded-full size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
75393
- `
75890
+ type: 'outline',
75891
+ shape: 'rounded',
75892
+ size: 'large',
75893
+ text: 'Read More',
75894
+ color: 'rgb(250, 250, 250)',
75895
+ bg: 'transparent',
75896
+ hoverBg: 'transparent'
75394
75897
  }, {
75395
- html: `
75396
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-12 uppercase font-normal leading-relaxed border-transparent rounded-full size-16 tracking-75 hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
75397
- `
75898
+ type: 'solid',
75899
+ shape: 'rounded',
75900
+ size: 'large',
75901
+ text: 'Read More',
75902
+ color: '#ffffff',
75903
+ bg: 'rgba(13, 151, 255, 1)',
75904
+ hoverBg: 'rgba(7, 138, 237, 1)'
75398
75905
  }, {
75399
- html: `
75400
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-12 uppercase border-current hover:border-current font-normal leading-relaxed tracking-75 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
75401
- `
75402
- }, /* colors */
75906
+ type: 'solid',
75907
+ shape: 'rounded',
75908
+ size: 'large',
75909
+ text: 'Read More',
75910
+ color: '#ffffff',
75911
+ bg: '#3b82f6',
75912
+ hoverBg: 'rgba(47, 116, 228, 1)'
75913
+ }, {
75914
+ type: 'solid',
75915
+ shape: 'rounded',
75916
+ size: 'large',
75917
+ text: 'Read More',
75918
+ color: 'rgb(24, 24, 27)',
75919
+ bg: '#fff',
75920
+ hoverBg: 'rgba(248, 248, 250, 1)'
75921
+ },
75922
+ // Colors
75403
75923
  {
75404
- html: `
75405
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-12 uppercase font-normal leading-relaxed border-transparent rounded-full size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
75406
- `
75924
+ type: 'solid',
75925
+ shape: 'rounded',
75926
+ size: 'large',
75927
+ text: 'Read More',
75928
+ color: 'rgb(24, 24, 27)',
75929
+ bg: 'rgba(111, 235, 255, 1)',
75930
+ hoverBg: 'rgba(98, 230, 252, 1)'
75931
+ }, {
75932
+ type: 'solid',
75933
+ shape: 'rounded',
75934
+ size: 'large',
75935
+ text: 'Read More',
75936
+ color: '#ffffff',
75937
+ bg: 'rgba(19, 166, 27, 1)',
75938
+ hoverBg: 'rgba(17, 155, 25, 1)'
75939
+ }, {
75940
+ type: 'solid',
75941
+ shape: 'rounded',
75942
+ size: 'large',
75943
+ text: 'Read More',
75944
+ color: 'rgb(24, 24, 27)',
75945
+ bg: 'rgba(254, 235, 101, 1)',
75946
+ hoverBg: 'rgba(249, 229, 85, 1)'
75947
+ }, {
75948
+ type: 'solid',
75949
+ shape: 'rounded',
75950
+ size: 'large',
75951
+ text: 'Read More',
75952
+ color: '#ffffff',
75953
+ bg: 'rgba(251, 45, 45, 1)',
75954
+ hoverBg: 'rgba(239, 38, 36, 1)'
75407
75955
  }, {
75408
- html: `
75409
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-12 uppercase font-normal leading-relaxed border-transparent rounded-full size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
75410
- `
75956
+ type: 'solid',
75957
+ shape: 'rounded',
75958
+ size: 'large',
75959
+ text: 'Read More',
75960
+ color: '#ffffff',
75961
+ bg: 'rgba(255, 122, 0, 1)',
75962
+ hoverBg: 'rgba(248, 109, 2, 1)'
75411
75963
  }, {
75412
- html: `
75413
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-12 uppercase font-normal leading-relaxed border-transparent rounded-full size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
75414
- `
75964
+ type: 'solid',
75965
+ shape: 'rounded',
75966
+ size: 'large',
75967
+ text: 'Read More',
75968
+ color: '#ffffff',
75969
+ bg: 'rgba(255, 68, 179, 1)',
75970
+ hoverBg: 'rgba(240, 46, 169, 1)'
75415
75971
  }, {
75416
- html: `
75417
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-12 uppercase font-normal leading-relaxed border-transparent rounded-full size-16 tracking-75 hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
75418
- `
75419
- }, /* square */
75972
+ type: 'solid',
75973
+ shape: 'rounded',
75974
+ size: 'large',
75975
+ text: 'Read More',
75976
+ color: 'rgb(24, 24, 27)',
75977
+ bg: 'rgba(148, 251, 208, 1)',
75978
+ hoverBg: 'rgba(133, 244, 198, 1)'
75979
+ }, {
75980
+ type: 'solid',
75981
+ shape: 'rounded',
75982
+ size: 'large',
75983
+ text: 'Read More',
75984
+ color: '#ffffff',
75985
+ bg: 'rgba(91, 73, 228, 1)',
75986
+ hoverBg: 'rgba(77, 59, 208, 1)'
75987
+ }, {
75988
+ type: 'solid',
75989
+ shape: 'rounded',
75990
+ size: 'large',
75991
+ text: 'Read More',
75992
+ color: '#ffffff',
75993
+ bg: 'rgba(142, 67, 237, 1)',
75994
+ hoverBg: 'rgba(122, 52, 212, 1)'
75995
+ }, {
75996
+ type: 'solid',
75997
+ shape: 'rounded',
75998
+ size: 'large',
75999
+ text: 'Read More',
76000
+ color: 'rgb(24, 24, 27)',
76001
+ bg: 'rgba(191, 245, 110, 1)',
76002
+ hoverBg: 'rgba(183, 236, 103, 1)'
76003
+ },
76004
+ // Slightly Rounded buttons - Large
75420
76005
  {
75421
- html: `
75422
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-11 uppercase border-current hover:border-current font-normal leading-relaxed rounded tracking-75">Read More</a>
75423
- `
76006
+ type: 'solid',
76007
+ shape: 'slightly-rounded',
76008
+ size: 'large',
76009
+ text: 'Read More',
76010
+ color: 'rgb(24, 24, 27)',
76011
+ bg: 'transparent',
76012
+ hoverBg: 'transparent',
76013
+ customClasses: 'underline'
76014
+ }, {
76015
+ type: 'outline',
76016
+ shape: 'slightly-rounded',
76017
+ size: 'large',
76018
+ text: 'Read More'
75424
76019
  }, {
75425
- html: `
75426
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-11 uppercase text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-75" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
75427
- `
76020
+ type: 'solid',
76021
+ shape: 'slightly-rounded',
76022
+ size: 'large',
76023
+ text: 'Read More',
76024
+ color: 'rgb(24, 24, 27)',
76025
+ bg: 'rgb(240, 240, 241)',
76026
+ hoverBg: 'rgb(236, 236, 238)'
75428
76027
  }, {
75429
- html: `
75430
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
75431
- `
76028
+ type: 'solid',
76029
+ shape: 'slightly-rounded',
76030
+ size: 'large',
76031
+ text: 'Read More',
76032
+ color: 'rgb(250, 250, 250)',
76033
+ bg: 'rgb(24, 24, 27)',
76034
+ hoverBg: 'rgb(63, 63, 70)'
75432
76035
  }, {
75433
- html: `
75434
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
75435
- `
76036
+ type: 'outline',
76037
+ shape: 'slightly-rounded',
76038
+ size: 'large',
76039
+ text: 'Read More',
76040
+ color: 'rgb(250, 250, 250)',
76041
+ bg: 'transparent',
76042
+ hoverBg: 'transparent'
75436
76043
  }, {
75437
- html: `
75438
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded size-16 tracking-75 hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
75439
- `
76044
+ type: 'solid',
76045
+ shape: 'slightly-rounded',
76046
+ size: 'large',
76047
+ text: 'Read More',
76048
+ color: '#ffffff',
76049
+ bg: 'rgba(13, 151, 255, 1)',
76050
+ hoverBg: 'rgba(7, 138, 237, 1)'
75440
76051
  }, {
75441
- html: `
75442
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-11 uppercase border-current hover:border-current font-normal leading-relaxed tracking-75 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
75443
- `
75444
- }, /* colors */
76052
+ type: 'solid',
76053
+ shape: 'slightly-rounded',
76054
+ size: 'large',
76055
+ text: 'Read More',
76056
+ color: '#ffffff',
76057
+ bg: '#3b82f6',
76058
+ hoverBg: 'rgba(47, 116, 228, 1)'
76059
+ }, {
76060
+ type: 'solid',
76061
+ shape: 'slightly-rounded',
76062
+ size: 'large',
76063
+ text: 'Read More',
76064
+ color: 'rgb(24, 24, 27)',
76065
+ bg: '#fff',
76066
+ hoverBg: 'rgba(248, 248, 250, 1)'
76067
+ },
76068
+ // Colors
75445
76069
  {
75446
- html: `
75447
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
75448
- `
76070
+ type: 'solid',
76071
+ shape: 'slightly-rounded',
76072
+ size: 'large',
76073
+ text: 'Read More',
76074
+ color: 'rgb(24, 24, 27)',
76075
+ bg: 'rgba(111, 235, 255, 1)',
76076
+ hoverBg: 'rgba(98, 230, 252, 1)'
75449
76077
  }, {
75450
- html: `
75451
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
75452
- `
76078
+ type: 'solid',
76079
+ shape: 'slightly-rounded',
76080
+ size: 'large',
76081
+ text: 'Read More',
76082
+ color: '#ffffff',
76083
+ bg: 'rgba(19, 166, 27, 1)',
76084
+ hoverBg: 'rgba(17, 155, 25, 1)'
75453
76085
  }, {
75454
- html: `
75455
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded size-16 tracking-75 hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
75456
- `
76086
+ type: 'solid',
76087
+ shape: 'slightly-rounded',
76088
+ size: 'large',
76089
+ text: 'Read More',
76090
+ color: 'rgb(24, 24, 27)',
76091
+ bg: 'rgba(254, 235, 101, 1)',
76092
+ hoverBg: 'rgba(249, 229, 85, 1)'
75457
76093
  }, {
75458
- html: `
75459
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-16 tracking-75 hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
75460
- `
75461
- }
75462
-
75463
- // {
75464
- // text: 'Order Now',
75465
- // 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'
75466
- // },
75467
- // {
75468
- // text: 'Explore',
75469
- // 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'
75470
- // },
75471
- // {
75472
- // text: 'View Demo',
75473
- // 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'
75474
- // },
75475
- // {
75476
- // text: 'Get Started',
75477
- // 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'
75478
- // },
75479
- // {
75480
- // text: 'Create',
75481
- // 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'
75482
- // },
75483
- // {
75484
- // text: 'Hello!',
75485
- // 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'
75486
- // },
75487
- // {
75488
- // text: 'Build',
75489
- // 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'
75490
- // },
75491
- // {
75492
- // text: 'Contact',
75493
- // 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'
75494
- // },
75495
- // {
75496
- // text: 'Read More',
75497
- // 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'
75498
- // },
75499
- // {
75500
- // text: 'Send a Message',
75501
- // 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'
75502
- // },
75503
- // {
75504
- // text: 'Our Works',
75505
- // 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'
75506
- // },
75507
- // {
75508
- // text: 'Read More',
75509
- // 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'
75510
- // },
75511
- // {
75512
- // text: 'Get a Quote',
75513
- // 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'
75514
- // },
75515
- // {
75516
- // text: 'Try Demo',
75517
- // 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'
75518
- // },
75519
- // {
75520
- // text: 'Buy Now',
75521
- // 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'
75522
- // },
75523
- // {
75524
- // text: 'Play',
75525
- // 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'
75526
- // },
75527
- ];
75528
-
76094
+ type: 'solid',
76095
+ shape: 'slightly-rounded',
76096
+ size: 'large',
76097
+ text: 'Read More',
76098
+ color: '#ffffff',
76099
+ bg: 'rgba(251, 45, 45, 1)',
76100
+ hoverBg: 'rgba(239, 38, 36, 1)'
76101
+ }, {
76102
+ type: 'solid',
76103
+ shape: 'slightly-rounded',
76104
+ size: 'large',
76105
+ text: 'Read More',
76106
+ color: '#ffffff',
76107
+ bg: 'rgba(255, 122, 0, 1)',
76108
+ hoverBg: 'rgba(248, 109, 2, 1)'
76109
+ }, {
76110
+ type: 'solid',
76111
+ shape: 'slightly-rounded',
76112
+ size: 'large',
76113
+ text: 'Read More',
76114
+ color: '#ffffff',
76115
+ bg: 'rgba(255, 68, 179, 1)',
76116
+ hoverBg: 'rgba(240, 46, 169, 1)'
76117
+ }, {
76118
+ type: 'solid',
76119
+ shape: 'slightly-rounded',
76120
+ size: 'large',
76121
+ text: 'Read More',
76122
+ color: 'rgb(24, 24, 27)',
76123
+ bg: 'rgba(148, 251, 208, 1)',
76124
+ hoverBg: 'rgba(133, 244, 198, 1)'
76125
+ }, {
76126
+ type: 'solid',
76127
+ shape: 'slightly-rounded',
76128
+ size: 'large',
76129
+ text: 'Read More',
76130
+ color: '#ffffff',
76131
+ bg: 'rgba(91, 73, 228, 1)',
76132
+ hoverBg: 'rgba(77, 59, 208, 1)'
76133
+ }, {
76134
+ type: 'solid',
76135
+ shape: 'slightly-rounded',
76136
+ size: 'large',
76137
+ text: 'Read More',
76138
+ color: '#ffffff',
76139
+ bg: 'rgba(142, 67, 237, 1)',
76140
+ hoverBg: 'rgba(122, 52, 212, 1)'
76141
+ }, {
76142
+ type: 'solid',
76143
+ shape: 'slightly-rounded',
76144
+ size: 'large',
76145
+ text: 'Read More',
76146
+ color: 'rgb(24, 24, 27)',
76147
+ bg: 'rgba(191, 245, 110, 1)',
76148
+ hoverBg: 'rgba(183, 236, 103, 1)'
76149
+ }];
76150
+ let templates = buttonConfigs.map(config => this.generateButton(config));
76151
+ const moreTemplates = [];
76152
+ templates = [...templates, ...moreTemplates];
75529
76153
  let html = '';
75530
76154
  for (let i = 0; i < templates.length; i++) {
75531
76155
  if (templates[i].html) {
@@ -76680,8 +77304,17 @@ class Module {
76680
77304
  let btnOk = moduleModal.querySelector('.input-ok');
76681
77305
  dom.addEventListener(btnOk, 'click', () => {
76682
77306
  let modalIframe = moduleModal.querySelector('iframe');
76683
- if (modalIframe.contentWindow.construct) modalIframe.contentWindow.construct(); // transfer module code to hidContentModuleCode & hidContentModuleSettings for saving
76684
-
77307
+ if (modalIframe.contentWindow.construct) {
77308
+ const result = modalIframe.contentWindow.construct(); // transfer module code to hidContentModuleCode & hidContentModuleSettings for saving
77309
+ if (typeof result === 'object' && result !== null) {
77310
+ if (result.error) {
77311
+ alert(result.error);
77312
+ return;
77313
+ }
77314
+ }
77315
+ } else {
77316
+ return;
77317
+ }
76685
77318
  this.builder.uo.saveForUndo();
76686
77319
  let module = this.builder.activeModule;
76687
77320
 
@@ -122536,6 +123169,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
122536
123169
  // Apply behavior on each row
122537
123170
  const rows = this.dom.elementChildren(builder);
122538
123171
  rows.forEach(row => {
123172
+ // Skip if not a DIV
123173
+ if (row.tagName !== 'DIV') return;
123174
+
123175
+ // Skip if it doesn't have any child DIVs
123176
+ const hasChildDiv = Array.from(row.children).some(child => child.tagName === 'DIV');
123177
+ if (!hasChildDiv) return;
123178
+
122539
123179
  // The saveForUndo also saves sortable class when start dragging. If Undo is performed, the classes are returned. Cleanup the classes here.
122540
123180
  row.classList.remove('sortable-ghost');
122541
123181
  row.classList.remove('sortable-chosen');
@@ -162939,8 +163579,21 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
162939
163579
  btnModuleOk.addEventListener('click', () => {
162940
163580
  let activeModule = this.doc.querySelector('[data-module-active="1"]');
162941
163581
  this.editor.saveForUndo();
162942
- let modalIframe = modalEditModule.querySelector('iframe');
162943
- if (modalIframe.contentWindow.construct) modalIframe.contentWindow.construct();
163582
+ let modalIframe = modalEditModule.querySelector('iframe'); // if(modalIframe.contentWindow.construct) modalIframe.contentWindow.construct();
163583
+
163584
+ if (modalIframe.contentWindow.construct) {
163585
+ const result = modalIframe.contentWindow.construct(); // transfer module code to hidContentModuleCode & hidContentModuleSettings for saving
163586
+
163587
+ if (typeof result === 'object' && result !== null) {
163588
+ if (result.error) {
163589
+ alert(result.error);
163590
+ return;
163591
+ }
163592
+ }
163593
+ } else {
163594
+ return;
163595
+ }
163596
+
162944
163597
  this.editor.saveForUndo();
162945
163598
  const hidModuleCode = builderStuff.querySelector('#hidModuleCode');
162946
163599
  const hidModuleSettings = builderStuff.querySelector('#hidModuleSettings'); //Save Html (original)