From 7b691c2fdc80c6916e38000bf1f8e37f1f39f74b Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 27 Aug 2024 14:54:19 +0530
Subject: [PATCH 01/15] =?UTF-8?q?=E2=9C=A8=20new(theme):=20new=20base=20th?=
 =?UTF-8?q?eme=20styles.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss | 358 ++++++++++++++++++++++++++++++
 1 file changed, 358 insertions(+)
 create mode 100644 library/scss/forminator-base.scss

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
new file mode 100644
index 00000000..c6ffffef
--- /dev/null
+++ b/library/scss/forminator-base.scss
@@ -0,0 +1,358 @@
+@charset "UTF-8";
+
+@import "variables";
+
+// Helpers
+@import "helpers/icon-styles";
+
+// Mixins
+@import "mixins/body-class";
+@import "mixins/breakpoints";
+@import "mixins/opacity";
+@import "mixins/animations";
+@import "mixins/icons";
+
+// Helpers
+@import "helpers/screen-readers";
+
+
+@include form-class(custom-form, basic, false) {
+
+	// Hidden
+	.forminator-hidden {
+		display: none !important;
+	}
+
+	// Screenreader only.
+	.forminator-screen-reader-only {
+		@extend %screen-readers;
+	}
+
+	// Inputs
+	.forminator-input {
+		width: 100%;
+		min-width: unset;
+		max-width: unset;
+		height: auto;
+		min-height: unset;
+		max-height: unset;
+		display: block;
+		margin: 0;
+		padding: 0;
+		background-image: unset;
+		line-height: map-get($input, line-height);
+		transition: map-get($transition, ease);
+	}
+
+	.forminator-input-with-icon {
+
+		[class*="forminator-icon-"] {
+			display: block;
+			font-size: map-get($icon, size);
+			transition: map-get($transition, ease);
+
+			&:before {
+				color: inherit;
+			}
+		}
+	}
+
+	.forminator-input-with-suffix {
+		position: relative;
+
+		.forminator-input {
+			padding-right: 60px;
+		}
+
+		.forminator-suffix {
+			display: block;
+			position: absolute;
+			top: 50%;
+			right: 0;
+			padding: 0 map-get($input, padding);
+			transform: translateY(-50%);
+			line-height: 1.4em;
+		}
+	}
+
+
+	// Labels
+	.forminator-label,
+	.forminator-error-message {
+		display: block;
+	}
+
+	.forminator-description {
+		display: flex;
+
+		span {
+			min-width: 80px;
+			margin-right: 0;
+			margin-left: auto;
+			text-align: right;
+		}
+	}
+
+	.forminator-error-message {
+		display: none;
+	}
+
+	.forminator-has_error {
+
+		.forminator-error-message {
+			display: block;
+		}
+	}
+
+	// Radio
+	.forminator-radio {
+		cursor: default;
+		pointer-events: none;
+		display: flex;
+		position: relative;
+		margin: 5px 0;
+
+		input {
+			@extend %screen-readers;
+
+			&:checked {
+
+				+ span[aria-hidden]:before {
+					@include opacity(1);
+				}
+			}
+		}
+
+		span {
+			cursor: pointer;
+			pointer-events: all;
+			display: block;
+		}
+
+		span[aria-hidden] {
+			width: map-get($radio, size);
+			height: map-get($radio, size);
+			flex: 0 0 map-get($radio, size);
+			position: relative;
+			border-radius: #{map-get($radio, size) * 2};
+
+			&:before {
+				content: " ";
+				@include opacity(0);
+				display: block;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				border-radius: 100%;
+				transform: translate(-50%, -50%);
+				transition: map-get($transition, ease);
+			}
+
+			+ span {
+				margin-left: 10px;
+			}
+		}
+
+		span:not([aria-hidden]) {
+			flex: 0 1 auto;
+			line-height: 20px;
+		}
+
+		// VARIATION: Inline
+		&.forminator-radio-inline {
+			display: inline-flex;
+			vertical-align: middle;
+			margin-right: 20px;
+			margin-bottom: 0;
+
+			&:last-of-type {
+				margin-right: 0;
+			}
+		}
+
+		// VARIATION: Stacked
+		&:not(.forminator-radio-inline) {
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	// Responses
+	.forminator-response-message {
+		margin: 0 0 $gutter-sm;
+		text-align: left;
+
+		p {
+			margin: 0;
+			padding: 0;
+			border: 0;
+			line-height: 1.3em;
+			letter-spacing: 0;
+			word-break: break-word;
+
+			&:not(:last-child) {
+				margin-bottom: 10px;
+			}
+		}
+
+		&,
+		&:focus,
+		&:hover,
+		&:active {
+			outline: none;
+			box-shadow: none;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&[aria-hidden="true"] {
+			display: none;
+		}
+
+		&.forminator-loading {
+			position: relative;
+			padding-left: #{($gutter-sm * 2) + 6px};
+
+			@include icon(before, loader, true) {
+				position: absolute;
+				top: 17px;
+				left: $gutter-sm;
+				font-size: 16px;
+			}
+		}
+
+		&.forminator-show {
+			display: block;
+		}
+
+		&.forminator-accessible {
+			@extend %screen-readers;
+		}
+	}
+
+	// Buttons
+	.forminator-button {
+		width: auto;
+		min-width: 100px;
+		max-width: unset;
+		height: auto;
+		min-height: unset;
+		max-height: unset;
+		cursor: pointer;
+		display: inline-block;
+		position: relative;
+		margin: 0 10px 0 0;
+		border: 0;
+		background-image: unset;
+		line-height: map-get($button, line-height);
+		text-align: center;
+		transition: $transition--ease;
+
+		span {
+			display: block;
+			transition: $transition--ease;
+		}
+
+		.forminator-icon-loader {
+			@include opacity(0);
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			transition: $transition--ease;
+
+			&:before {
+				display: block;
+			}
+		}
+
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			outline: none;
+			box-shadow: none;
+			text-decoration: none;
+		}
+
+		&:disabled,
+		&.forminator-onload,
+		&.forminator-disabled {
+			@include opacity(0.5);
+			user-select: none;
+			pointer-events: none;
+		}
+
+		&.forminator-onload {
+
+			span {
+				@include opacity(0);
+			}
+
+			.forminator-icon-loader {
+				@include opacity(1);
+			}
+		}
+
+		&:last-child {
+			margin-right: 0;
+		}
+
+		&.forminator-button-loader {
+
+			.forminator-icon-loader {
+				display: inline-block;
+				position: initial;
+				top: auto;
+				left: auto;
+				transform: none;
+
+				&:before {
+					display: inline-block;
+				}
+			}
+
+			.forminator-onload-default {
+				display: block;
+			}
+
+			.forminator-onload-loading {
+				display: none;
+			}
+
+			&.forminator-onload {
+
+				span {
+					@include opacity(1);
+				}
+
+				.forminator-onload-default {
+					display: none;
+				}
+
+				.forminator-onload-loading {
+					display: block;
+				}
+			}
+		}
+
+		// PayPal Button
+		&-paypal {
+			display: block;
+			position: relative;
+			z-index: 1;
+
+			> .paypal-buttons {
+				display: block !important;
+			}
+		}
+	}
+}
\ No newline at end of file

From 3288d553087a841670cca7042f28f3cddcb3f560 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 27 Aug 2024 17:44:14 +0530
Subject: [PATCH 02/15] =?UTF-8?q?=E2=9C=A8=20new(styles):=20base=20styles?=
 =?UTF-8?q?=20for=20inherit=20theme=20styles.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss | 139 ++----------------------------
 1 file changed, 9 insertions(+), 130 deletions(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index c6ffffef..31501840 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -29,19 +29,16 @@
 	}
 
 	// Inputs
-	.forminator-input {
-		width: 100%;
-		min-width: unset;
-		max-width: unset;
-		height: auto;
-		min-height: unset;
-		max-height: unset;
+	.forminator-input,
+	.forminator-select2,
+	.forminator-field-phone .iti {
 		display: block;
-		margin: 0;
-		padding: 0;
-		background-image: unset;
-		line-height: map-get($input, line-height);
-		transition: map-get($transition, ease);
+		width: 100%;
+	}
+
+	.forminator-checkbox {
+		display: flex;
+		align-items: center;
 	}
 
 	.forminator-input-with-icon {
@@ -237,122 +234,4 @@
 			@extend %screen-readers;
 		}
 	}
-
-	// Buttons
-	.forminator-button {
-		width: auto;
-		min-width: 100px;
-		max-width: unset;
-		height: auto;
-		min-height: unset;
-		max-height: unset;
-		cursor: pointer;
-		display: inline-block;
-		position: relative;
-		margin: 0 10px 0 0;
-		border: 0;
-		background-image: unset;
-		line-height: map-get($button, line-height);
-		text-align: center;
-		transition: $transition--ease;
-
-		span {
-			display: block;
-			transition: $transition--ease;
-		}
-
-		.forminator-icon-loader {
-			@include opacity(0);
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			transition: $transition--ease;
-
-			&:before {
-				display: block;
-			}
-		}
-
-		&,
-		&:hover,
-		&:focus,
-		&:active {
-			outline: none;
-			box-shadow: none;
-			text-decoration: none;
-		}
-
-		&:disabled,
-		&.forminator-onload,
-		&.forminator-disabled {
-			@include opacity(0.5);
-			user-select: none;
-			pointer-events: none;
-		}
-
-		&.forminator-onload {
-
-			span {
-				@include opacity(0);
-			}
-
-			.forminator-icon-loader {
-				@include opacity(1);
-			}
-		}
-
-		&:last-child {
-			margin-right: 0;
-		}
-
-		&.forminator-button-loader {
-
-			.forminator-icon-loader {
-				display: inline-block;
-				position: initial;
-				top: auto;
-				left: auto;
-				transform: none;
-
-				&:before {
-					display: inline-block;
-				}
-			}
-
-			.forminator-onload-default {
-				display: block;
-			}
-
-			.forminator-onload-loading {
-				display: none;
-			}
-
-			&.forminator-onload {
-
-				span {
-					@include opacity(1);
-				}
-
-				.forminator-onload-default {
-					display: none;
-				}
-
-				.forminator-onload-loading {
-					display: block;
-				}
-			}
-		}
-
-		// PayPal Button
-		&-paypal {
-			display: block;
-			position: relative;
-			z-index: 1;
-
-			> .paypal-buttons {
-				display: block !important;
-			}
-		}
-	}
 }
\ No newline at end of file

From 3af25ff1cd6c8f66e032a146ff46c525619bf770 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 28 Aug 2024 15:30:03 +0530
Subject: [PATCH 03/15] =?UTF-8?q?=E2=9C=A8=20new(styles):=20base=20styles?=
 =?UTF-8?q?=20components=20necessary=20styles=20added.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss | 171 ++++++------------------------
 1 file changed, 31 insertions(+), 140 deletions(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index 31501840..09b90efe 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -3,6 +3,7 @@
 @import "variables";
 
 // Helpers
+@import "helpers/text-reset";
 @import "helpers/icon-styles";
 
 // Mixins
@@ -15,7 +16,16 @@
 // Helpers
 @import "helpers/screen-readers";
 
+// Fields
+@import "src/settings/components/rating";
+@import "src/settings/components/slider";
+@import "src/settings/components/paypal";
+@import "src/settings/components/calendar";
 
+// Components
+@include component-rating(custom-form, basic);
+@include component-slider(custom-form, basic);
+@include component-calendar(custom-form, basic);
 @include form-class(custom-form, basic, false) {
 
 	// Hidden
@@ -31,19 +41,30 @@
 	// Inputs
 	.forminator-input,
 	.forminator-select2,
+	.forminator-textarea,
 	.forminator-field-phone .iti {
 		display: block;
 		width: 100%;
 	}
 
-	.forminator-checkbox {
+	.forminator-checkbox,
+	.forminator-checkbox__wrapper {
 		display: flex;
 		align-items: center;
 	}
 
+	.forminator-textarea {
+		padding: #{$textarea--padding - $default--border-width};
+	}
+
 	.forminator-input-with-icon {
+		position: relative;
 
 		[class*="forminator-icon-"] {
+			position: absolute;
+			top: 50%;
+			left: map-get($input, padding);
+			transform: translateY(-50%);
 			display: block;
 			font-size: map-get($icon, size);
 			transition: map-get($transition, ease);
@@ -52,6 +73,10 @@
 				color: inherit;
 			}
 		}
+
+		.forminator-input {
+			padding-left: #{(map-get($input, padding) - map-get($border-width, default)) + map-get($input, padding) + map-get($icon, size)};
+		}
 	}
 
 	.forminator-input-with-suffix {
@@ -74,22 +99,10 @@
 
 
 	// Labels
-	.forminator-label,
-	.forminator-error-message {
+	.forminator-label {
 		display: block;
 	}
 
-	.forminator-description {
-		display: flex;
-
-		span {
-			min-width: 80px;
-			margin-right: 0;
-			margin-left: auto;
-			text-align: right;
-		}
-	}
-
 	.forminator-error-message {
 		display: none;
 	}
@@ -103,135 +116,13 @@
 
 	// Radio
 	.forminator-radio {
-		cursor: default;
-		pointer-events: none;
 		display: flex;
-		position: relative;
-		margin: 5px 0;
-
-		input {
-			@extend %screen-readers;
-
-			&:checked {
-
-				+ span[aria-hidden]:before {
-					@include opacity(1);
-				}
-			}
-		}
-
-		span {
-			cursor: pointer;
-			pointer-events: all;
-			display: block;
-		}
-
-		span[aria-hidden] {
-			width: map-get($radio, size);
-			height: map-get($radio, size);
-			flex: 0 0 map-get($radio, size);
-			position: relative;
-			border-radius: #{map-get($radio, size) * 2};
-
-			&:before {
-				content: " ";
-				@include opacity(0);
-				display: block;
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				border-radius: 100%;
-				transform: translate(-50%, -50%);
-				transition: map-get($transition, ease);
-			}
-
-			+ span {
-				margin-left: 10px;
-			}
-		}
-
-		span:not([aria-hidden]) {
-			flex: 0 1 auto;
-			line-height: 20px;
-		}
-
-		// VARIATION: Inline
-		&.forminator-radio-inline {
-			display: inline-flex;
-			vertical-align: middle;
-			margin-right: 20px;
-			margin-bottom: 0;
-
-			&:last-of-type {
-				margin-right: 0;
-			}
-		}
-
-		// VARIATION: Stacked
-		&:not(.forminator-radio-inline) {
-
-			&:first-child {
-				margin-top: 0;
-			}
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
 	}
 
-	// Responses
-	.forminator-response-message {
-		margin: 0 0 $gutter-sm;
-		text-align: left;
-
-		p {
-			margin: 0;
-			padding: 0;
-			border: 0;
-			line-height: 1.3em;
-			letter-spacing: 0;
-			word-break: break-word;
-
-			&:not(:last-child) {
-				margin-bottom: 10px;
-			}
-		}
-
-		&,
-		&:focus,
-		&:hover,
-		&:active {
-			outline: none;
-			box-shadow: none;
-		}
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-
-		&[aria-hidden="true"] {
-			display: none;
-		}
-
-		&.forminator-loading {
-			position: relative;
-			padding-left: #{($gutter-sm * 2) + 6px};
-
-			@include icon(before, loader, true) {
-				position: absolute;
-				top: 17px;
-				left: $gutter-sm;
-				font-size: 16px;
-			}
-		}
-
-		&.forminator-show {
-			display: block;
-		}
-
-		&.forminator-accessible {
-			@extend %screen-readers;
+	// Timepicker
+	.forminator-timepicker {
+		.forminator-row {
+			align-items: flex-end;
 		}
 	}
 }
\ No newline at end of file

From 94133f0411636a2217db88b1dc82837bc2afe083 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Thu, 29 Aug 2024 13:18:08 +0530
Subject: [PATCH 04/15] =?UTF-8?q?=E2=9C=A8=20new(styles):=20Base=20styles?=
 =?UTF-8?q?=20for=20basic=20theme.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss             | 141 +++++++-----------
 .../settings/components/_input-with-icon.scss |   2 +-
 .../scss/src/settings/components/_input.scss  |   4 +-
 .../scss/src/settings/components/_slider.scss |   2 +-
 .../src/settings/components/_textarea.scss    |   3 +
 5 files changed, 62 insertions(+), 90 deletions(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index 09b90efe..372c916f 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -2,8 +2,13 @@
 
 @import "variables";
 
+
+$form-type: custom-form;
+$form-theme: basic;
+
 // Helpers
 @import "helpers/text-reset";
+@import "helpers/text-truncate";
 @import "helpers/icon-styles";
 
 // Mixins
@@ -20,109 +25,71 @@
 @import "src/settings/components/rating";
 @import "src/settings/components/slider";
 @import "src/settings/components/paypal";
+@import "src/settings/components/stripe";
 @import "src/settings/components/calendar";
+@import "src/settings/components/e-signature";
+@import "src/settings/components/textarea";
+@import "src/settings/components/input";
+@import "src/settings/components/input-with-icon";
+@import "src/settings/components/input-with-prefix";
+@import "src/settings/components/input-with-suffix";
+@import "src/settings/components/label";
+@import "src/settings/components/description";
+@import "src/settings/components/timepicker";
+@import "src/settings/components/upload";
+@import "src/settings/components/pagination";
+@import "src/settings/components/response";
+@import "src/settings/components/recaptcha";
+@import "src/settings/components/repeater";
+@import "src/settings/components/repeater-buttons";
+@import "src/settings/components/multiselect";
 
 // Components
-@include component-rating(custom-form, basic);
-@include component-slider(custom-form, basic);
-@include component-calendar(custom-form, basic);
-@include form-class(custom-form, basic, false) {
-
-	// Hidden
-	.forminator-hidden {
-		display: none !important;
-	}
-
-	// Screenreader only.
-	.forminator-screen-reader-only {
-		@extend %screen-readers;
-	}
-
+@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-repeater-buttons(#{$form-type}, #{$form-theme});
+@include component-response(#{$form-type}, #{$form-theme});
+@include component-recaptcha(#{$form-type}, #{$form-theme});
+@include component-rating(#{$form-type}, #{$form-theme});
+@include component-slider(#{$form-type}, #{$form-theme});
+@include component-calendar(#{$form-type}, #{$form-theme});
+@include component-signature(#{$form-type}, #{$form-theme});
+@include component-textarea(#{$form-type}, #{$form-theme});
+@include component-input-with-icon(#{$form-type}, #{$form-theme});
+@include component-input(#{$form-type}, #{$form-theme});
+@include component-input-with-prefix(#{$form-type}, #{$form-theme});
+@include component-input-with-suffix(#{$form-type}, #{$form-theme});
+@include component-label(#{$form-type}, #{$form-theme});
+@include component-description(#{$form-type}, #{$form-theme});
+@include component-timepicker(#{$form-type}, #{$form-theme});
+@include component-upload(#{$form-type}, #{$form-theme});
+@include component-pagination(#{$form-type}, #{$form-theme});
+@include component-paypal(#{$form-type}, #{$form-theme});
+@include component-stripe(#{$form-type}, #{$form-theme});
+@include component-multiselect(#{$form-type}, #{$form-theme});
+
+
+@include form-class(#{$form-type}, #{$form-theme}, false) {
 	// Inputs
-	.forminator-input,
 	.forminator-select2,
-	.forminator-textarea,
 	.forminator-field-phone .iti {
 		display: block;
 		width: 100%;
 	}
 
 	.forminator-checkbox,
-	.forminator-checkbox__wrapper {
+	.forminator-checkbox__wrapper,
+	.forminator-radio {
 		display: flex;
 		align-items: center;
-	}
-
-	.forminator-textarea {
-		padding: #{$textarea--padding - $default--border-width};
-	}
-
-	.forminator-input-with-icon {
-		position: relative;
-
-		[class*="forminator-icon-"] {
-			position: absolute;
-			top: 50%;
-			left: map-get($input, padding);
-			transform: translateY(-50%);
-			display: block;
-			font-size: map-get($icon, size);
-			transition: map-get($transition, ease);
-
-			&:before {
-				color: inherit;
-			}
-		}
-
-		.forminator-input {
-			padding-left: #{(map-get($input, padding) - map-get($border-width, default)) + map-get($input, padding) + map-get($icon, size)};
-		}
-	}
+		margin: 10px 0;
 
-	.forminator-input-with-suffix {
-		position: relative;
-
-		.forminator-input {
-			padding-right: 60px;
-		}
-
-		.forminator-suffix {
-			display: block;
-			position: absolute;
-			top: 50%;
-			right: 0;
-			padding: 0 map-get($input, padding);
-			transform: translateY(-50%);
-			line-height: 1.4em;
-		}
-	}
-
-
-	// Labels
-	.forminator-label {
-		display: block;
-	}
-
-	.forminator-error-message {
-		display: none;
-	}
-
-	.forminator-has_error {
-
-		.forminator-error-message {
-			display: block;
+		input {
+			margin: 0;
 		}
 	}
 
-	// Radio
-	.forminator-radio {
-		display: flex;
-	}
-
-	// Timepicker
-	.forminator-timepicker {
-		.forminator-row {
-			align-items: flex-end;
-		}
+	.forminator-radio-label,
+	.forminator-checkbox-label {
+		margin-left: 10px;
 	}
 }
\ No newline at end of file
diff --git a/library/scss/src/settings/components/_input-with-icon.scss b/library/scss/src/settings/components/_input-with-icon.scss
index 4e297e74..4f74c325 100644
--- a/library/scss/src/settings/components/_input-with-icon.scss
+++ b/library/scss/src/settings/components/_input-with-icon.scss
@@ -47,7 +47,7 @@
 			@if ('material' != $form-theme) {
 
 				.forminator-input {
-					@if ('default' == $form-theme) {
+					@if ('default' == $form-theme or 'basic' == $form-theme) {
 						padding-left: #{(map-get($input, padding) - map-get($border-width, default)) + map-get($input, padding) + map-get($icon, size)};
 					}
 					@if ('flat' == $form-theme) {
diff --git a/library/scss/src/settings/components/_input.scss b/library/scss/src/settings/components/_input.scss
index c1652c18..b0898a6c 100644
--- a/library/scss/src/settings/components/_input.scss
+++ b/library/scss/src/settings/components/_input.scss
@@ -7,11 +7,13 @@
 			width: 100%;
 			min-width: unset;
 			max-width: unset;
-			height: auto;
 			min-height: unset;
 			max-height: unset;
 			display: block;
 			margin: 0;
+			@if ('basic' != $form-theme) {
+				height: auto;
+			}
 			@if ('default' == $form-theme) {
 				padding: #{map-get($input, padding) - map-get($border-width, default)};
 				border-width: map-get($border-width, default);
diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss
index 2213f20c..1808ae91 100644
--- a/library/scss/src/settings/components/_slider.scss
+++ b/library/scss/src/settings/components/_slider.scss
@@ -113,7 +113,7 @@
 			}
 			
 			.ui-slider-horizontal {
-				height: 8px;
+				height: 8px !important;
 				margin: 6px 0;
 
 				@if ('material' == $form-theme) {
diff --git a/library/scss/src/settings/components/_textarea.scss b/library/scss/src/settings/components/_textarea.scss
index 4d4b3ae1..273652be 100644
--- a/library/scss/src/settings/components/_textarea.scss
+++ b/library/scss/src/settings/components/_textarea.scss
@@ -33,6 +33,9 @@
 				border-radius: $material--border-radius;
 				line-height: 20px;
 			}
+			@if ('basic' == $form-theme) {
+				padding: $textarea--padding;
+			}
 			background-image: unset;
 			line-height: $textarea--line-height;
 			transition: $transition--ease;

From a2ceaabd766a4323273dadb007cd4a60cda1e9f4 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Thu, 29 Aug 2024 13:21:11 +0530
Subject: [PATCH 05/15] =?UTF-8?q?=E2=9C=A8=20new(styles):=20Base=20styles?=
 =?UTF-8?q?=20for=20basic=20theme.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index 372c916f..e508765e 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -89,7 +89,8 @@ $form-theme: basic;
 	}
 
 	.forminator-radio-label,
-	.forminator-checkbox-label {
+	.forminator-checkbox-label,
+	.forminator-consent__label {
 		margin-left: 10px;
 	}
 }
\ No newline at end of file

From 9d762bf57e6df8e392c342dfb494b33e79560f62 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Thu, 29 Aug 2024 13:22:08 +0530
Subject: [PATCH 06/15] =?UTF-8?q?=E2=9C=A8=20new(styles):=20Base=20styles?=
 =?UTF-8?q?=20for=20basic=20theme.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index e508765e..8afa164d 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -91,6 +91,6 @@ $form-theme: basic;
 	.forminator-radio-label,
 	.forminator-checkbox-label,
 	.forminator-consent__label {
-		margin-left: 10px;
+		margin-left: 5px;
 	}
 }
\ No newline at end of file

From a97090018fca89276617b8062c78d00f9683a3a4 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 30 Aug 2024 08:54:53 +0530
Subject: [PATCH 07/15] =?UTF-8?q?=E2=9C=A8=20new(styles):=20Removed=20defa?=
 =?UTF-8?q?ult=20styles=20from=20slider=20and=20calendar.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss                | 4 ----
 library/scss/src/settings/components/_input.scss | 8 ++++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index 8afa164d..4c9ebb60 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -23,10 +23,8 @@ $form-theme: basic;
 
 // Fields
 @import "src/settings/components/rating";
-@import "src/settings/components/slider";
 @import "src/settings/components/paypal";
 @import "src/settings/components/stripe";
-@import "src/settings/components/calendar";
 @import "src/settings/components/e-signature";
 @import "src/settings/components/textarea";
 @import "src/settings/components/input";
@@ -50,8 +48,6 @@ $form-theme: basic;
 @include component-response(#{$form-type}, #{$form-theme});
 @include component-recaptcha(#{$form-type}, #{$form-theme});
 @include component-rating(#{$form-type}, #{$form-theme});
-@include component-slider(#{$form-type}, #{$form-theme});
-@include component-calendar(#{$form-type}, #{$form-theme});
 @include component-signature(#{$form-type}, #{$form-theme});
 @include component-textarea(#{$form-type}, #{$form-theme});
 @include component-input-with-icon(#{$form-type}, #{$form-theme});
diff --git a/library/scss/src/settings/components/_input.scss b/library/scss/src/settings/components/_input.scss
index b0898a6c..a71e07bd 100644
--- a/library/scss/src/settings/components/_input.scss
+++ b/library/scss/src/settings/components/_input.scss
@@ -11,9 +11,6 @@
 			max-height: unset;
 			display: block;
 			margin: 0;
-			@if ('basic' != $form-theme) {
-				height: auto;
-			}
 			@if ('default' == $form-theme) {
 				padding: #{map-get($input, padding) - map-get($border-width, default)};
 				border-width: map-get($border-width, default);
@@ -40,8 +37,11 @@
 				border-radius: 0;
 				background-color: transparent !important;
 			}
+			@if ('basic' != $form-theme) {
+				height: auto;
+				line-height: map-get($input, line-height);
+			}
 			background-image: unset;
-			line-height: map-get($input, line-height);
 			transition: map-get($transition, ease);
 
 			&,

From 6e216426d179bead949973ea71fbfbdb4ca7d672 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 3 Sep 2024 11:17:57 +0530
Subject: [PATCH 08/15] =?UTF-8?q?=E2=9C=A8=20new(select2):=20FOR-511=20Sel?=
 =?UTF-8?q?ect2=20styles=20for=20basic=20theme.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/js/select2.js                         |  1 +
 .../form/forminator-form-basic.select2.scss   | 25 ++++++++++++++++
 .../components/_select2-dropdown.scss         | 29 +++++++++++++++----
 .../src/settings/components/_select2.scss     |  7 +++--
 .../components/pagination/_progress.scss      |  6 ++--
 .../components/pagination/_steps.scss         | 24 +++++++--------
 6 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 library/scss/src/form/forminator-form-basic.select2.scss

diff --git a/library/js/select2.js b/library/js/select2.js
index eac87e33..c4cf86fb 100644
--- a/library/js/select2.js
+++ b/library/js/select2.js
@@ -54,6 +54,7 @@
 				'bold',
 				'flat',
 				'default',
+				'basic',
 				'material',
 				'none'
 			];
diff --git a/library/scss/src/form/forminator-form-basic.select2.scss b/library/scss/src/form/forminator-form-basic.select2.scss
new file mode 100644
index 00000000..86a6848a
--- /dev/null
+++ b/library/scss/src/form/forminator-form-basic.select2.scss
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+@import "../../variables";
+
+$form-type: custom-form;
+$form-theme: basic;
+
+// Helpers.
+@import "../../helpers/text-reset";
+@import "../../helpers/text-truncate";
+@import "../../helpers/icon-styles";
+@import "../../helpers/screen-readers";
+
+// Mixins.
+@import "../../mixins/body-class";
+@import "../../mixins/breakpoints";
+@import "../../mixins/opacity";
+@import "../../mixins/icons";
+
+// Components.
+@import "../settings/components/select2";
+@import "../settings/components/select2-dropdown";
+
+@include component-select2(#{$form-type}, #{$form-theme});
+@include component-dropdown2(#{$form-type}, #{$form-theme});
\ No newline at end of file
diff --git a/library/scss/src/settings/components/_select2-dropdown.scss b/library/scss/src/settings/components/_select2-dropdown.scss
index 481593a3..bada52b9 100644
--- a/library/scss/src/settings/components/_select2-dropdown.scss
+++ b/library/scss/src/settings/components/_select2-dropdown.scss
@@ -130,10 +130,10 @@
 					}
 				}
 
-				// DESIGN: Default.
-				&.forminator-dropdown--default {
+				// DESIGN: Default and Basic.
+				&.forminator-dropdown--default,
+				&.forminator-dropdown--basic {
 					padding: #{$dropdown--padding - $default--border-width} 0;
-					border-width: $default--border-width;
 					border-style: $default--border-style;
 
 					// Search input.
@@ -143,7 +143,6 @@
 
 						input {
 							padding: #{$dropdown--padding - $default--border-width};
-							border-width: $default--border-width;
 							border-style: $default--border-style;
 							border-radius: 2px;
 						}
@@ -168,13 +167,33 @@
 					.forminator-checkbox {
 			
 						.forminator-checkbox-box {
-							border-width: map-get($border-width, default);
 							border-style: map-get($border-style, default);
 							border-radius: map-get($border-radius, default);
 						}
 					}
 				}
 
+				// DESIGN: Default.
+				&.forminator-dropdown--default {
+					border-width: $default--border-width;
+
+					// Search input.
+					.select2-search {
+
+						input {
+							border-width: $default--border-width;
+						}
+					}
+
+					// Checkbox in dropdown
+					.forminator-checkbox {
+			
+						.forminator-checkbox-box {
+							border-width: map-get($border-width, default);
+						}
+					}
+				}
+
 				// DESIGN: Flat.
 				&.forminator-dropdown--flat {
 					padding: $dropdown--padding 0;
diff --git a/library/scss/src/settings/components/_select2.scss b/library/scss/src/settings/components/_select2.scss
index 9a076ef9..3dae4c02 100644
--- a/library/scss/src/settings/components/_select2.scss
+++ b/library/scss/src/settings/components/_select2.scss
@@ -63,6 +63,9 @@
 								border-bottom-width: 1px;
 								border-style: $material--border-style;
 							}
+							@else if ('basic' == $form-theme) {
+								border-style: $default--border-style;
+							}
 							background-image: none !important;
 
 							@if ('material' == $form-theme) {
@@ -85,7 +88,7 @@
 								overflow: hidden;
 								display: block;
 								flex: 1;
-								@if ('default' == $form-theme) {
+								@if ('default' == $form-theme or 'basic' == $form-theme) {
 									padding: #{10px - ($default--border-width * 2)} 5px #{10px - ($default--border-width * 2)} 8px;
 								}
 								@else if ('flat' == $form-theme) {
@@ -204,7 +207,7 @@
 								margin: 0;
 								white-space: normal;
 								
-								@if ('default' == $form-theme) {
+								@if ('default' == $form-theme or 'basic' == $form-theme) {
 									border-radius: 4px;
 								}
 								@else if ('flat' == $form-theme) {
diff --git a/library/scss/src/settings/components/pagination/_progress.scss b/library/scss/src/settings/components/pagination/_progress.scss
index 00ad2d52..ef189a92 100644
--- a/library/scss/src/settings/components/pagination/_progress.scss
+++ b/library/scss/src/settings/components/pagination/_progress.scss
@@ -18,7 +18,7 @@
 			}
 
 			.forminator-progress-bar {
-				@if ('default' == $form-theme) {
+				@if ('default' == $form-theme or 'basic' == $form-theme) {
 					height: map-get($pagination-bar, default);
 				}
 				@if ('flat' == $form-theme) {
@@ -34,12 +34,12 @@
 				display: block;
 				flex: 1;
 				position: relative;
-				@if ('default' == $form-theme) {
+				@if ('default' == $form-theme or 'basic' == $form-theme) {
 					border-radius: map-get($pagination-bar, default);
 				}
 
 				span {
-					@if ('default' == $form-theme) {
+					@if ('default' == $form-theme or 'basic' == $form-theme) {
 						height: map-get($pagination-bar, default);
 					}
 					@if ('flat' == $form-theme) {
diff --git a/library/scss/src/settings/components/pagination/_steps.scss b/library/scss/src/settings/components/pagination/_steps.scss
index 74e48763..d1f1ec46 100644
--- a/library/scss/src/settings/components/pagination/_steps.scss
+++ b/library/scss/src/settings/components/pagination/_steps.scss
@@ -9,7 +9,7 @@
 				margin: 0 0 $gutter-sm;
 
 				.forminator-break {
-					@if ('default' == $form-theme) {
+					@if ('default' == $form-theme or 'basic' == $form-theme) {
 						width: map-get($border-width, default);
 						height: #{map-get($pagination-dot, default) * 2};
 					}
@@ -22,7 +22,7 @@
 						height: #{map-get($pagination-dot, bold) * 2};
 					}
 					display: block;
-					@if ('default' == $form-theme) {
+					@if ('default' == $form-theme or 'basic' == $form-theme) {
 						margin: 0 #{calc((map-get($pagination-dot, default) - map-get($border-width, default)) / 2)};
 					}
 					@if ('flat' == $form-theme) {
@@ -38,7 +38,7 @@
 
 						&:before {
 							content: " ";
-							@if ('default' == $form-theme) {
+							@if ('default' == $form-theme or 'basic' == $form-theme) {
 								width: #{map-get($border-width, default) * 3};
 							}
 							@if ('flat' == $form-theme) {
@@ -48,7 +48,7 @@
 							display: block;
 							position: absolute;
 							top: 0;
-							@if ('default' == $form-theme) {
+							@if ('default' == $form-theme or 'basic' == $form-theme) {
 								left: -#{map-get($border-width, default)};
 							}
 							@if ('flat' == $form-theme) {
@@ -65,7 +65,7 @@
 				}
 
 				.forminator-step {
-					@if ('default' == $form-theme) {
+					@if ('default' == $form-theme or 'basic' == $form-theme) {
 						height: map-get($pagination-dot, default);
 					}
 					@if ('flat' == $form-theme) {
@@ -102,7 +102,7 @@
 					}
 
 					.forminator-step-dot {
-						@if ('default' == $form-theme) {
+						@if ('default' == $form-theme or 'basic' == $form-theme) {
 							width: map-get($pagination-dot, default);
 							height: map-get($pagination-dot, default);
 						}
@@ -115,7 +115,7 @@
 							height: map-get($pagination-dot, bold);
 						}
 						display: block;
-						@if ('default' == $form-theme) {
+						@if ('default' == $form-theme or 'basic' == $form-theme) {
 							flex: 0 0 map-get($pagination-dot, default);
 							border-width: map-get($border-width, default);
 							border-style: map-get($border-style, default);
@@ -147,7 +147,7 @@
 							}
 						}
 
-						@if ('flat' == $form-theme) {
+						@if ('flat' == $form-theme or 'basic' == $form-theme) {
 
 							~ .forminator-step {
 
@@ -236,7 +236,7 @@
 
 						@include media(min-width, sm) {
 							width: 100%;
-							@if ('default' == $form-theme) {
+							@if ('default' == $form-theme or 'basic' == $form-theme) {
 								height: #{map-get($border-width, default) * 3};
 								top: -#{map-get($border-width, default)};
 							}
@@ -258,7 +258,7 @@
 
 					@include media(min-width, sm) {
 						width: auto;
-						@if ('default' == $form-theme) {
+						@if ('default' == $form-theme or 'basic' == $form-theme) {
 							height: map-get($border-width, default);
 						}
 						@if ('flat' == $form-theme) {
@@ -268,7 +268,7 @@
 							height: map-get($border-width, bold);
 						}
 						flex: 1;
-						@if ('default' == $form-theme) {
+						@if ('default' == $form-theme or 'basic' == $form-theme) {
 							margin: #{calc((map-get($pagination-dot, default) - map-get($border-width, default)) / 2)} 0;
 						}
 						@if ('flat' == $form-theme) {
@@ -315,7 +315,7 @@
 					}
 
 					@include media(min-width, sm) {
-						@if ('default' == $form-theme) {
+						@if ('default' == $form-theme or 'basic' == $form-theme) {
 							width: map-get($pagination-dot, default);
 						}
 						@if ('flat' == $form-theme) {

From b6074f00cd7b227ea6a960be7a9e6bf42343e683 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 4 Sep 2024 15:41:13 +0530
Subject: [PATCH 09/15] =?UTF-8?q?=E2=9C=A8=20new(components):=20FOR-511=20?=
 =?UTF-8?q?Updated=20base=20styles=20for=20components.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/src/settings/components/_description.scss      | 2 +-
 library/scss/src/settings/components/_e-signature.scss      | 4 ++--
 library/scss/src/settings/components/_input-with-icon.scss  | 1 +
 library/scss/src/settings/components/_select2-dropdown.scss | 3 ++-
 library/scss/src/settings/components/_select2.scss          | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/library/scss/src/settings/components/_description.scss b/library/scss/src/settings/components/_description.scss
index e78d778e..1644b5bb 100644
--- a/library/scss/src/settings/components/_description.scss
+++ b/library/scss/src/settings/components/_description.scss
@@ -31,7 +31,7 @@
 
 		.forminator-error-message {
 			display: none;
-			@if ('default' == $form-theme) {
+			@if ('default' == $form-theme or 'basic' == $form-theme) {
 				padding: 2px 10px;
 				border-radius: map-get($border-radius, default);
 			}
diff --git a/library/scss/src/settings/components/_e-signature.scss b/library/scss/src/settings/components/_e-signature.scss
index 2efce249..edc0a04a 100644
--- a/library/scss/src/settings/components/_e-signature.scss
+++ b/library/scss/src/settings/components/_e-signature.scss
@@ -31,7 +31,7 @@ $esign-reset: 20px;
 				position: relative;
 				margin: 0;
 				padding: 0;
-				@if $form-theme == 'default' {
+				@if $form-theme == 'default' or $form-theme == 'basic' {
 					border-width: 1px;
 					border-radius: 2px;
 				}
@@ -62,7 +62,7 @@ $esign-reset: 20px;
 					pointer-events: none;
 					display: block;
 					position: absolute;
-					@if $form-theme == 'default' {
+					@if $form-theme == 'default' or $form-theme == 'basic' {
 						top: 9px;
 						right: #{$esign-reset + 9px};
 						left: 9px;
diff --git a/library/scss/src/settings/components/_input-with-icon.scss b/library/scss/src/settings/components/_input-with-icon.scss
index 4f74c325..8ce8d8b9 100644
--- a/library/scss/src/settings/components/_input-with-icon.scss
+++ b/library/scss/src/settings/components/_input-with-icon.scss
@@ -14,6 +14,7 @@
 
 			[class*="forminator-icon-"] {
 				display: block;
+				pointer-events: none;
 				@if ('material' == $form-theme) {
 					flex: 0 0 auto;
 				}
diff --git a/library/scss/src/settings/components/_select2-dropdown.scss b/library/scss/src/settings/components/_select2-dropdown.scss
index bada52b9..35bc248f 100644
--- a/library/scss/src/settings/components/_select2-dropdown.scss
+++ b/library/scss/src/settings/components/_select2-dropdown.scss
@@ -174,7 +174,8 @@
 				}
 
 				// DESIGN: Default.
-				&.forminator-dropdown--default {
+				&.forminator-dropdown--default,
+				&.forminator-dropdown--basic {
 					border-width: $default--border-width;
 
 					// Search input.
diff --git a/library/scss/src/settings/components/_select2.scss b/library/scss/src/settings/components/_select2.scss
index 3dae4c02..952700a9 100644
--- a/library/scss/src/settings/components/_select2.scss
+++ b/library/scss/src/settings/components/_select2.scss
@@ -46,7 +46,7 @@
 							position: relative;
 							margin: 0;
 							padding: 0;
-							@if ('default' == $form-theme) {
+							@if ('default' == $form-theme or 'basic' == $form-theme) {
 								border-width: $default--border-width;
 								border-style: $default--border-style;
 							}

From 8a31a11a903f143e707d562804351c007b3305a1 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 6 Sep 2024 10:50:34 +0530
Subject: [PATCH 10/15] =?UTF-8?q?=E2=9C=A8=20new(themes):=20Update=20style?=
 =?UTF-8?q?s=20for=20basic=20theme.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/src/settings/components/_description.scss   | 2 +-
 library/scss/src/settings/components/_e-signature.scss   | 6 ++++--
 .../scss/src/settings/components/_select2-dropdown.scss  | 6 ++----
 library/scss/src/settings/components/_select2.scss       | 9 +++------
 library/scss/src/settings/components/_textarea.scss      | 3 ---
 5 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/library/scss/src/settings/components/_description.scss b/library/scss/src/settings/components/_description.scss
index 1644b5bb..e78d778e 100644
--- a/library/scss/src/settings/components/_description.scss
+++ b/library/scss/src/settings/components/_description.scss
@@ -31,7 +31,7 @@
 
 		.forminator-error-message {
 			display: none;
-			@if ('default' == $form-theme or 'basic' == $form-theme) {
+			@if ('default' == $form-theme) {
 				padding: 2px 10px;
 				border-radius: map-get($border-radius, default);
 			}
diff --git a/library/scss/src/settings/components/_e-signature.scss b/library/scss/src/settings/components/_e-signature.scss
index edc0a04a..94237bad 100644
--- a/library/scss/src/settings/components/_e-signature.scss
+++ b/library/scss/src/settings/components/_e-signature.scss
@@ -31,7 +31,7 @@ $esign-reset: 20px;
 				position: relative;
 				margin: 0;
 				padding: 0;
-				@if $form-theme == 'default' or $form-theme == 'basic' {
+				@if $form-theme == 'default' {
 					border-width: 1px;
 					border-radius: 2px;
 				}
@@ -46,7 +46,9 @@ $esign-reset: 20px;
 					border-width: 0;
 					border-radius: 0;
 				}
-				border-style: solid;
+				@if $form-theme != 'basic' {
+					border-style: solid;
+				}
 				background-color: transparent;
 				transition: $transition--ease;
 
diff --git a/library/scss/src/settings/components/_select2-dropdown.scss b/library/scss/src/settings/components/_select2-dropdown.scss
index 35bc248f..42ab6f1d 100644
--- a/library/scss/src/settings/components/_select2-dropdown.scss
+++ b/library/scss/src/settings/components/_select2-dropdown.scss
@@ -131,8 +131,7 @@
 				}
 
 				// DESIGN: Default and Basic.
-				&.forminator-dropdown--default,
-				&.forminator-dropdown--basic {
+				&.forminator-dropdown--default {
 					padding: #{$dropdown--padding - $default--border-width} 0;
 					border-style: $default--border-style;
 
@@ -174,8 +173,7 @@
 				}
 
 				// DESIGN: Default.
-				&.forminator-dropdown--default,
-				&.forminator-dropdown--basic {
+				&.forminator-dropdown--default {
 					border-width: $default--border-width;
 
 					// Search input.
diff --git a/library/scss/src/settings/components/_select2.scss b/library/scss/src/settings/components/_select2.scss
index 952700a9..9a076ef9 100644
--- a/library/scss/src/settings/components/_select2.scss
+++ b/library/scss/src/settings/components/_select2.scss
@@ -46,7 +46,7 @@
 							position: relative;
 							margin: 0;
 							padding: 0;
-							@if ('default' == $form-theme or 'basic' == $form-theme) {
+							@if ('default' == $form-theme) {
 								border-width: $default--border-width;
 								border-style: $default--border-style;
 							}
@@ -63,9 +63,6 @@
 								border-bottom-width: 1px;
 								border-style: $material--border-style;
 							}
-							@else if ('basic' == $form-theme) {
-								border-style: $default--border-style;
-							}
 							background-image: none !important;
 
 							@if ('material' == $form-theme) {
@@ -88,7 +85,7 @@
 								overflow: hidden;
 								display: block;
 								flex: 1;
-								@if ('default' == $form-theme or 'basic' == $form-theme) {
+								@if ('default' == $form-theme) {
 									padding: #{10px - ($default--border-width * 2)} 5px #{10px - ($default--border-width * 2)} 8px;
 								}
 								@else if ('flat' == $form-theme) {
@@ -207,7 +204,7 @@
 								margin: 0;
 								white-space: normal;
 								
-								@if ('default' == $form-theme or 'basic' == $form-theme) {
+								@if ('default' == $form-theme) {
 									border-radius: 4px;
 								}
 								@else if ('flat' == $form-theme) {
diff --git a/library/scss/src/settings/components/_textarea.scss b/library/scss/src/settings/components/_textarea.scss
index 273652be..4d4b3ae1 100644
--- a/library/scss/src/settings/components/_textarea.scss
+++ b/library/scss/src/settings/components/_textarea.scss
@@ -33,9 +33,6 @@
 				border-radius: $material--border-radius;
 				line-height: 20px;
 			}
-			@if ('basic' == $form-theme) {
-				padding: $textarea--padding;
-			}
 			background-image: unset;
 			line-height: $textarea--line-height;
 			transition: $transition--ease;

From a270a431701b0636b605543b7575bf518ecf8d27 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 11 Sep 2024 14:32:21 +0530
Subject: [PATCH 11/15] =?UTF-8?q?=E2=9C=A8=20new(fields):=20FOR-511=20Reve?=
 =?UTF-8?q?rt=20styles=20for=20basic.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss             |  34 +-
 .../src/settings/components/_checkbox.scss    | 115 ++---
 .../src/settings/components/_description.scss |  11 +-
 .../src/settings/components/_e-signature.scss |   8 +-
 .../settings/components/_input-with-icon.scss |   5 +-
 .../components/_input-with-prefix.scss        |  24 +-
 .../scss/src/settings/components/_input.scss  |  73 ++--
 .../scss/src/settings/components/_label.scss  |   6 +-
 .../src/settings/components/_multiselect.scss |   6 +-
 .../scss/src/settings/components/_phone.scss  | 326 +++++++-------
 .../scss/src/settings/components/_radio.scss  | 126 +++---
 .../components/_repeater-buttons.scss         |  17 +-
 .../src/settings/components/_response.scss    |   9 +-
 .../components/_select2-dropdown.scss         | 375 +++++++++-------
 .../src/settings/components/_select2.scss     | 413 +++++++++---------
 .../src/settings/components/_textarea.scss    |  62 +--
 .../scss/src/settings/components/_upload.scss |  10 +-
 17 files changed, 850 insertions(+), 770 deletions(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index 4c9ebb60..75055bc7 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -41,6 +41,9 @@ $form-theme: basic;
 @import "src/settings/components/repeater";
 @import "src/settings/components/repeater-buttons";
 @import "src/settings/components/multiselect";
+@import "src/settings/components/radio";
+@import "src/settings/components/checkbox";
+@import "src/settings/components/phone";
 
 // Components
 @include component-repeater(#{$form-type}, #{$form-theme});
@@ -62,31 +65,6 @@ $form-theme: basic;
 @include component-paypal(#{$form-type}, #{$form-theme});
 @include component-stripe(#{$form-type}, #{$form-theme});
 @include component-multiselect(#{$form-type}, #{$form-theme});
-
-
-@include form-class(#{$form-type}, #{$form-theme}, false) {
-	// Inputs
-	.forminator-select2,
-	.forminator-field-phone .iti {
-		display: block;
-		width: 100%;
-	}
-
-	.forminator-checkbox,
-	.forminator-checkbox__wrapper,
-	.forminator-radio {
-		display: flex;
-		align-items: center;
-		margin: 10px 0;
-
-		input {
-			margin: 0;
-		}
-	}
-
-	.forminator-radio-label,
-	.forminator-checkbox-label,
-	.forminator-consent__label {
-		margin-left: 5px;
-	}
-}
\ No newline at end of file
+@include component-checkbox(#{$form-type}, #{$form-theme});
+@include component-radio(#{$form-type}, #{$form-theme});
+@include component-phone(#{$form-type}, #{$form-theme});
diff --git a/library/scss/src/settings/components/_checkbox.scss b/library/scss/src/settings/components/_checkbox.scss
index 548cc842..67dd8aa4 100644
--- a/library/scss/src/settings/components/_checkbox.scss
+++ b/library/scss/src/settings/components/_checkbox.scss
@@ -6,15 +6,20 @@ $checkbox-image: 80px;
 
 		.forminator-checkbox {
 			cursor: default;
-			pointer-events: none;
 			display: flex;
 			flex: 0 0 auto; // It works with `.forminator-checkbox__wrapper` element.
 			align-items: center;
 			position: relative;
 			margin: 10px 0;
 
+			@if ('basic' != $form-theme) {
+				pointer-events: none;
+			}
+
 			input {
-				@extend %screen-readers;
+				@if ('basic' != $form-theme) {
+					@extend %screen-readers;
+				}
 
 				&:checked {
 
@@ -51,65 +56,67 @@ $checkbox-image: 80px;
 				display: block;
 			}
 
-			.forminator-checkbox-box {
-				width: map-get($checkbox, size);
-				height: map-get($checkbox, size);
-				flex: 0 0 map-get($checkbox, size);
-				position: relative;
-				@if ('default' == $form-theme) {
-					border-width: map-get($border-width, default);
-					border-style: map-get($border-style, default);
-					border-radius: map-get($border-radius, default);
-				}
-				@if ('flat' == $form-theme) {
-					border-width: map-get($border-width, flat);
-					border-style: map-get($border-style, flat);
-					border-radius: map-get($border-radius, flat);
-				}
-				@if ('bold' == $form-theme) {
-					border-width: map-get($border-width, bold);
-					border-style: map-get($border-style, bold);
-					border-radius: map-get($border-radius, bold);
-				}
-				@if ('material' == $form-theme) {
-					border-width: #{map-get($border-width, material) * 2};
-					border-style: map-get($border-style, material);
-					border-radius: map-get($border-radius, material);
-				}
-
-				@include icon(before, check) {
-					@include opacity(0);
-					display: block;
-					position: absolute;
-					top: 50%;
-					left: 50%;
-					color: map-get($icon, color);
-					font-size: map-get($checkbox, icon);
-					transform: translate(-50%, -50%);
-					transition: map-get($transition, ease);
-				}
-
-				@if ('material' == $form-theme) {
+			@if ('basic' != $form-theme) {
+				.forminator-checkbox-box {
+					width: map-get($checkbox, size);
+					height: map-get($checkbox, size);
+					flex: 0 0 map-get($checkbox, size);
+					position: relative;
+					@if ('default' == $form-theme) {
+						border-width: map-get($border-width, default);
+						border-style: map-get($border-style, default);
+						border-radius: map-get($border-radius, default);
+					}
+					@if ('flat' == $form-theme) {
+						border-width: map-get($border-width, flat);
+						border-style: map-get($border-style, flat);
+						border-radius: map-get($border-radius, flat);
+					}
+					@if ('bold' == $form-theme) {
+						border-width: map-get($border-width, bold);
+						border-style: map-get($border-style, bold);
+						border-radius: map-get($border-radius, bold);
+					}
+					@if ('material' == $form-theme) {
+						border-width: #{map-get($border-width, material) * 2};
+						border-style: map-get($border-style, material);
+						border-radius: map-get($border-radius, material);
+					}
 
-					&:after {
-						content: " ";
+					@include icon(before, check) {
 						@include opacity(0);
-						width: map-get($checkbox, size);
-						height: map-get($checkbox, size);
+						display: block;
 						position: absolute;
 						top: 50%;
 						left: 50%;
-						border-radius: 100%;
-						transform: translate(-50%, -50%) scale(0);
-						transform-origin: center;
-						transform-style: preserve-3d;
-						animation-duration: 0.6s;
-						animation-fill-mode: both;
+						color: map-get($icon, color);
+						font-size: map-get($checkbox, icon);
+						transform: translate(-50%, -50%);
+						transition: map-get($transition, ease);
 					}
-				}
 
-				~ span {
-					margin-left: 10px;
+					@if ('material' == $form-theme) {
+
+						&:after {
+							content: " ";
+							@include opacity(0);
+							width: map-get($checkbox, size);
+							height: map-get($checkbox, size);
+							position: absolute;
+							top: 50%;
+							left: 50%;
+							border-radius: 100%;
+							transform: translate(-50%, -50%) scale(0);
+							transform-origin: center;
+							transform-style: preserve-3d;
+							animation-duration: 0.6s;
+							animation-fill-mode: both;
+						}
+					}
+
+					~ span {
+						margin-left: 10px;
+					}
 				}
 			}
 
diff --git a/library/scss/src/settings/components/_description.scss b/library/scss/src/settings/components/_description.scss
index e78d778e..849faee1 100644
--- a/library/scss/src/settings/components/_description.scss
+++ b/library/scss/src/settings/components/_description.scss
@@ -9,7 +9,9 @@
 
 		.forminator-description {
 			display: flex;
-			line-height: 1.5em;
+			@if ('basic' != $form-theme) {
+				line-height: 1.5em;
+			}
 
 			span {
 				min-width: 80px;
@@ -43,7 +45,12 @@
 				padding: 2px 10px;
 				border-radius: map-get($border-radius, bold);
 			}
-			line-height: 2em;
+			@if ('basic' == $form-theme) {
+				padding: 2px 10px;
+			}
+			@if ('basic' != $form-theme) {
+				line-height: 2em;
+			}
 		}
 
 		.forminator-has_error {
diff --git a/library/scss/src/settings/components/_e-signature.scss b/library/scss/src/settings/components/_e-signature.scss
index 94237bad..4ce97b27 100644
--- a/library/scss/src/settings/components/_e-signature.scss
+++ b/library/scss/src/settings/components/_e-signature.scss
@@ -31,7 +31,7 @@ $esign-reset: 20px;
 				position: relative;
 				margin: 0;
 				padding: 0;
-				@if $form-theme == 'default' {
+				@if ($form-theme == 'default' or $form-theme == 'basic') {
 					border-width: 1px;
 					border-radius: 2px;
 				}
@@ -46,9 +46,7 @@ $esign-reset: 20px;
 					border-width: 0;
 					border-radius: 0;
 				}
-				@if $form-theme != 'basic' {
-					border-style: solid;
-				}
+				border-style: solid;
 				background-color: transparent;
 				transition: $transition--ease;
 
@@ -64,7 +62,7 @@ $esign-reset: 20px;
 					pointer-events: none;
 					display: block;
 					position: absolute;
-					@if $form-theme == 'default' or $form-theme == 'basic' {
+					@if ($form-theme == 'default' or $form-theme == 'basic') {
 						top: 9px;
 						right: #{$esign-reset + 9px};
 						left: 9px;
diff --git a/library/scss/src/settings/components/_input-with-icon.scss b/library/scss/src/settings/components/_input-with-icon.scss
index 8ce8d8b9..15ec7c97 100644
--- a/library/scss/src/settings/components/_input-with-icon.scss
+++ b/library/scss/src/settings/components/_input-with-icon.scss
@@ -6,7 +6,6 @@
 			@if ('material' != $form-theme) {
 				position: relative;
 			}
-
 			@else {
 				display: flex;
 				align-items: center;
@@ -15,6 +14,9 @@
 			[class*="forminator-icon-"] {
 				display: block;
 				pointer-events: none;
+				@if ('basic' != $form-theme) {
+					transition: map-get($transition, ease);
+				}
 				@if ('material' == $form-theme) {
 					flex: 0 0 auto;
 				}
@@ -27,7 +29,6 @@
 				@if ('material' != $form-theme) {
 					transform: translateY(-50%);
 				}
-				transition: map-get($transition, ease);
 
 				&:before {
 					color: inherit;
diff --git a/library/scss/src/settings/components/_input-with-prefix.scss b/library/scss/src/settings/components/_input-with-prefix.scss
index 0d3f264b..e3aa2339 100644
--- a/library/scss/src/settings/components/_input-with-prefix.scss
+++ b/library/scss/src/settings/components/_input-with-prefix.scss
@@ -7,17 +7,19 @@
 			flex-flow: row wrap;
 			align-items: center;
 
-			input {
-				min-width: 50px;
-				display: block;
-				flex: 1;
-				margin: 0;
-				padding: 0;
-				border: 0;
-				background-image: none;
-				background-color: transparent;
-				box-shadow: none;
-			}
+				input {
+					min-width: 50px;
+					display: block;
+					flex: 1;
+					@if ('basic' != $form-theme) {
+						margin: 0;
+						padding: 0;
+						border: 0;
+						background-image: none;
+						background-color: transparent;
+						box-shadow: none;
+					}
+				}
 
 			.forminator-prefix,
 			.forminator-suffix {
diff --git a/library/scss/src/settings/components/_input.scss b/library/scss/src/settings/components/_input.scss
index a71e07bd..ab54aa55 100644
--- a/library/scss/src/settings/components/_input.scss
+++ b/library/scss/src/settings/components/_input.scss
@@ -3,14 +3,21 @@
 	@include form-class($form-type, $form-theme, false) {
 
 		.forminator-input {
-			box-sizing: border-box;
-			width: 100%;
-			min-width: unset;
-			max-width: unset;
-			min-height: unset;
-			max-height: unset;
+			width: 100%;			
 			display: block;
-			margin: 0;
+			@if ('basic' == $form-theme) {
+				appearance: auto;
+			}
+			@if ('basic' != $form-theme) {
+				box-sizing: border-box;
+				min-width: unset;
+				max-width: unset;
+				min-height: unset;
+				max-height: unset;
+				background-image: unset;
+				transition: map-get($transition, ease);
+				margin: 0;
+			}
 			@if ('default' == $form-theme) {
 				padding: #{map-get($input, padding) - map-get($border-width, default)};
 				border-width: map-get($border-width, default);
@@ -37,40 +44,36 @@
 				border-radius: 0;
 				background-color: transparent !important;
 			}
-			@if ('basic' != $form-theme) {
-				height: auto;
-				line-height: map-get($input, line-height);
-			}
-			background-image: unset;
-			transition: map-get($transition, ease);
 
-			&,
-			&:hover,
-			&:focus,
-			&:active,
-			&:disabled {
-				outline: none;
-				box-shadow: none;
-			}
+			@if ('basic' != $form-theme) {
+				&,
+				&:hover,
+				&:focus,
+				&:active,
+				&:disabled {
+					outline: none;
+					box-shadow: none;
+				}
 
-			&:disabled {
-				pointer-events: none;
-				border-style: dotted;
+				&:disabled {
+					pointer-events: none;
+					border-style: dotted;
 
-				&:-moz-placeholder {
-					@include opacity(0.4);
-				}
+					&:-moz-placeholder {
+						@include opacity(0.4);
+					}
 
-				&::-moz-placeholder {
-					@include opacity(0.4);
-				}
+					&::-moz-placeholder {
+						@include opacity(0.4);
+					}
 
-				&:-ms-input-placeholder {
-					@include opacity(0.4);
-				}
+					&:-ms-input-placeholder {
+						@include opacity(0.4);
+					}
 
-				&::-webkit-input-placeholder {
-					@include opacity(0.4);
+					&::-webkit-input-placeholder {
+						@include opacity(0.4);
+					}
 				}
 			}
 		}
diff --git a/library/scss/src/settings/components/_label.scss b/library/scss/src/settings/components/_label.scss
index dc8f4daa..ecb684fc 100644
--- a/library/scss/src/settings/components/_label.scss
+++ b/library/scss/src/settings/components/_label.scss
@@ -5,13 +5,13 @@
 		.forminator-label {
 			cursor: default;
 			display: block;
-			margin: 0;
-			border: 0;
 			@if ('material' == $form-theme) {
 				line-height: 20px;
 			}
-			@else {
+			@else if ('basic' != $form-theme) {
 				line-height: 1.7em;
+				margin: 0;
+				border: 0;
 			}
 
 			&[for] {
diff --git a/library/scss/src/settings/components/_multiselect.scss b/library/scss/src/settings/components/_multiselect.scss
index 811d7173..d413fc86 100644
--- a/library/scss/src/settings/components/_multiselect.scss
+++ b/library/scss/src/settings/components/_multiselect.scss
@@ -46,8 +46,10 @@
 					border-style: map-get($border-style, material);
 					border-radius: map-get($border-radius, material);
 				}
-				line-height: map-get($dropdown, line-height);
-				transition: map-get($transition, ease);
+				@if ('basic' != $form-theme) {
+					line-height: map-get($dropdown, line-height);
+					transition: map-get($transition, ease);
+				}
 
 				input {
 					@extend %screen-readers;
diff --git a/library/scss/src/settings/components/_phone.scss b/library/scss/src/settings/components/_phone.scss
index cbc1d334..ba818edd 100644
--- a/library/scss/src/settings/components/_phone.scss
+++ b/library/scss/src/settings/components/_phone.scss
@@ -5,56 +5,65 @@
 		.forminator-phone {
 			display: block;
 
-			.iti__country-container {
-				@if ('default' == $form-theme) {
-					padding: map-get($border-width, default);
-				}
-				@if ('flat' == $form-theme) {
-					padding: map-get($border-width, flat);
-				}
-				@if ('bold' == $form-theme) {
-					padding: map-get($border-width, bold);
-				}
+			@if ('basic' != $form-theme) {
+				.iti__country-container {
+					@if ('default' == $form-theme) {
+						padding: map-get($border-width, default);
+					}
+					@if ('flat' == $form-theme) {
+						padding: map-get($border-width, flat);
+					}
+					@if ('bold' == $form-theme) {
+						padding: map-get($border-width, bold);
+					}
 
-				.iti__selected-country {
-					width: auto;
-					display: flex;
-					align-items: center;
-					margin: 0;
-					padding: 0;
-					background: unset;
+					.iti__selected-country {
+						width: auto;
+						display: flex;
+						align-items: center;
+						margin: 0;
+						padding: 0;
+						background: unset;
 
-					.iti__selected-country-primary {
-						padding: 0 map-get($input, padding);
+						.iti__selected-country-primary {
+							padding: 0 map-get($input, padding);
 
-						&:hover,
-						&:focus,
-						&:active {
-							@if ('material' == $form-theme) {
-								background-color: unset;
+							&:hover,
+							&:focus,
+							&:active {
+								@if ('material' == $form-theme) {
+									background-color: unset;
+								}
 							}
 						}
-					}
 
-					.iti__flag {
-						display: block;
-						position: relative;
-						top: auto;
-						bottom: auto;
-						margin: 0;
-						padding: 0;
+						.iti__flag {
+							display: block;
+							position: relative;
+							top: auto;
+							bottom: auto;
+							margin: 0;
+							padding: 0;
 
-						+ .iti__arrow {
-							margin-left: #{calc(map-get($input, padding) / 2)};
+							+ .iti__arrow {
+								margin-left: #{calc(map-get($input, padding) / 2)};
+							}
 						}
-					}
 
-					.iti__arrow {
-						display: block;
-						position: relative;
-						top: auto;
-						right: auto;
-						margin: 0;
+						.iti__arrow {
+							display: block;
+							position: relative;
+							top: auto;
+							right: auto;
+							margin: 0;
+						}
+
+						&:hover,
+						&:focus,
+						&:active {
+							outline: none;
+							box-shadow: none;
+						}
 					}
 
 					&:hover,
@@ -65,120 +74,141 @@
 					}
 				}
 
-				&:hover,
-				&:focus,
-				&:active {
-					outline: none;
-					box-shadow: none;
-				}
-			}
-
-			@if ('material' != $form-theme) {
+				@if ('material' != $form-theme) {
 
-				&.iti--allow-dropdown {
+					&.iti--allow-dropdown {
 
-					.forminator-input {
-						@if ('default' == $form-theme) {
-							padding-left: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, default))};
-						}
-						@if ('flat' == $form-theme) {
-							padding-left: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, flat))};
-						}
-						@if ('bold' == $form-theme) {
-							padding-left: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, bold))};
+						.forminator-input {
+							@if ('default' == $form-theme) {
+								padding-left: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, default))};
+							}
+							@if ('flat' == $form-theme) {
+								padding-left: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, flat))};
+							}
+							@if ('bold' == $form-theme) {
+								padding-left: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, bold))};
+							}
 						}
 					}
 				}
-			}
 
-			&:not(.iti--allow-dropdown) {
+				&:not(.iti--allow-dropdown) {
 
-				.iti__country-container {
-					pointer-events: none;
-				}
+					.iti__country-container {
+						pointer-events: none;
+					}
 
-				@if ('material' != $form-theme) {
+					@if ('material' != $form-theme) {
 
-					.forminator-input {
-						@if ('default' == $form-theme) {
-							padding-right: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, default))};
-						}
-						@if ('flat' == $form-theme) {
-							padding-right: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, flat))};
-						}
-						@if ('bold' == $form-theme) {
-							padding-right: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, bold))};
+						.forminator-input {
+							@if ('default' == $form-theme) {
+								padding-right: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, default))};
+							}
+							@if ('flat' == $form-theme) {
+								padding-right: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, flat))};
+							}
+							@if ('bold' == $form-theme) {
+								padding-right: #{($int-country-size + (map-get($input, padding) * 2)) + (map-get($input, padding) + map-get($border-width, bold))};
+							}
 						}
 					}
 				}
 			}
 		}
 
-		.forminator-input-with-phone {
-			@if ('material' == $form-theme) {
-				display: block;
-				min-height: 40px;
-			}
-
-			.iti__country-container {
+		@if ('basic' != $form-theme) {
+			.forminator-input-with-phone {
 				@if ('material' == $form-theme) {
-					flex: 0 0 auto;
-					position: absolute;
-					top: 2px;
-					left: 0;
-					padding: 0;
+					display: block;
+					min-height: 40px;
 				}
 
-				.iti__selected-country {
-					width: 31px;
-					display: flex;
-					align-items: center;
-					margin: 0;
-					background: unset;
-					padding: 0;
-
+				.iti__country-container {
 					@if ('material' == $form-theme) {
-						background-color: transparent !important;
+						flex: 0 0 auto;
+						position: absolute;
+						top: 2px;
+						left: 0;
+						padding: 0;
 					}
 
-					.iti__selected-country-primary {
-						padding: 0 map-get($input, padding);
+					.iti__selected-country {
+						width: 31px;
+						display: flex;
+						align-items: center;
+						margin: 0;
+						background: unset;
+						padding: 0;
+
+						@if ('material' == $form-theme) {
+							background-color: transparent !important;
+						}
 
-						@if ('material' != $form-theme) {
+						.iti__selected-country-primary {
 							padding: 0 map-get($input, padding);
+
+							@if ('material' != $form-theme) {
+								padding: 0 map-get($input, padding);
+							}
+							@if ('material' == $form-theme) {
+								padding: map-get($input, padding) 0 #{map-get($input, padding) - map-get($border-width, material)};
+							}
+
+							&:hover,
+							&:focus,
+							&:active {
+								@if ('material' == $form-theme) {
+									background-color: unset;
+								}
+							}
 						}
-						@if ('material' == $form-theme) {
-							padding: map-get($input, padding) 0 #{map-get($input, padding) - map-get($border-width, material)};
+
+						.iti__flag {
+							display: block;
+							position: relative;
+							top: auto;
+							bottom: auto;
+							margin: 0;
+							padding: 0;
+
+							+ .iti__arrow {
+								margin-left: #{calc(map-get($input, padding) / 2)};
+							}
+						}
+
+						.iti__arrow {
+							display: block;
+							position: relative;
+							top: auto;
+							right: auto;
+							margin: 0;
 						}
 
 						&:hover,
 						&:focus,
 						&:active {
-							@if ('material' == $form-theme) {
-								background-color: unset;
+							outline: none;
+							box-shadow: none;
+						}
+
+						@if ('material' == $form-theme) {
+
+							&:first-child {
+								margin-right: map-get($input, padding);
 							}
 						}
 					}
 
-					.iti__flag {
-						display: block;
-						position: relative;
-						top: auto;
-						bottom: auto;
-						margin: 0;
-						padding: 0;
+					@if ('material' == $form-theme) {
 
-						+ .iti__arrow {
-							margin-left: #{calc(map-get($input, padding) / 2)};
+						.forminator-input {
+							padding-right: 0;
+							padding-left: 0;
 						}
-					}
 
-					.iti__arrow {
-						display: block;
-						position: relative;
-						top: auto;
-						right: auto;
-						margin: 0;
+						~ span {
+							padding-left: #{$int-country-size + map-get($input, padding)};
+						}
 					}
 
 					&:hover,
@@ -187,62 +217,38 @@
 						outline: none;
 						box-shadow: none;
 					}
-
-					@if ('material' == $form-theme) {
-
-						&:first-child {
-							margin-right: map-get($input, padding);
-						}
-					}
 				}
 
 				@if ('material' == $form-theme) {
-
-					.forminator-input {
-						padding-right: 0;
-						padding-left: 0;
-					}
-
-					~ span {
-						padding-left: #{$int-country-size + map-get($input, padding)};
+					.forminator-input--wrap {
+						position: absolute;
+						top: 0;
+						right: 0;
 					}
 				}
 
-				&:hover,
-				&:focus,
-				&:active {
-					outline: none;
-					box-shadow: none;
-				}
-			}
-
-			@if ('material' == $form-theme) {
-				.forminator-input--wrap {
-					position: absolute;
-					top: 0;
-					right: 0;
-				}
-			}
-
-			&.iti--allow-dropdown {
+				&.iti--allow-dropdown {
 
-				.forminator-input--wrap {
-					left: 41px;
+					.forminator-input--wrap {
+						left: 41px;
+					}
 				}
-			}
 
-			&:not(.iti--allow-dropdown) {
+				&:not(.iti--allow-dropdown) {
 
-				.forminator-input--wrap {
-					left: #{$int-country-size + map-get($input, padding)};
+					.forminator-input--wrap {
+						left: #{$int-country-size + map-get($input, padding)};
+					}
 				}
 			}
 		}
 	}
 
-	.iti-mobile {
-		.iti--container {
-			z-index: 999991;
+	@if ('basic' != $form-theme) {
+		.iti-mobile {
+			.iti--container {
+				z-index: 999991;
+			}
 		}
 	}
 }
\ No newline at end of file
diff --git a/library/scss/src/settings/components/_radio.scss b/library/scss/src/settings/components/_radio.scss
index 3df10ada..c29fc016 100644
--- a/library/scss/src/settings/components/_radio.scss
+++ b/library/scss/src/settings/components/_radio.scss
@@ -6,14 +6,19 @@ $radio-image: 80px;
 
 		.forminator-radio {
 			cursor: default;
-			pointer-events: none;
 			display: flex;
 			align-items: center;
 			position: relative;
 			margin: 10px 0;
 
+			@if ('basic' != $form-theme) {
+				pointer-events: none;
+			}
+
 			input {
-				@extend %screen-readers;
+				@if ('basic' != $form-theme) {
+					@extend %screen-readers;
+				}
 
 				&:checked {
 
@@ -50,84 +55,89 @@ $radio-image: 80px;
 				display: block;
 			}
 
-			.forminator-radio-bullet {
-				width: map-get($radio, size);
-				height: map-get($radio, size);
-				flex: 0 0 map-get($radio, size);
-				position: relative;
-				@if ('default' == $form-theme) {
-					border-width: map-get($border-width, default);
-					border-style: map-get($border-style, default);
-				}
-				@if ('flat' == $form-theme) {
-					border-width: map-get($border-width, flat);
-					border-style: map-get($border-style, flat);
-				}
-				@if ('bold' == $form-theme) {
-					border-width: map-get($border-width, bold);
-					border-style: map-get($border-style, bold);
-				}
-				@if ('material' == $form-theme) {
-					border-width: #{map-get($border-width, material) * 2};
-					border-style: map-get($border-style, material);
-				}
-				border-radius: #{map-get($radio, size) * 2};
-
-				&:before {
-					content: " ";
+			@if ('basic' != $form-theme) {
+				.forminator-radio-bullet {
+					width: map-get($radio, size);
+					height: map-get($radio, size);
+					flex: 0 0 map-get($radio, size);
+					position: relative;
 					@if ('default' == $form-theme) {
-						width: #{calc(map-get($radio, size) / 2)};
-						height: #{calc(map-get($radio, size) / 2)};
+						border-width: map-get($border-width, default);
+						border-style: map-get($border-style, default);
 					}
 					@if ('flat' == $form-theme) {
-						width: #{calc(map-get($radio, size) / 2)};
-						height: #{calc(map-get($radio, size) / 2)};
+						border-width: map-get($border-width, flat);
+						border-style: map-get($border-style, flat);
 					}
 					@if ('bold' == $form-theme) {
-						width: #{(calc(map-get($radio, size) / 2)) - map-get($border-width, bold)};
-						height: #{(calc(map-get($radio, size) / 2)) - map-get($border-width, bold)};
+						border-width: map-get($border-width, bold);
+						border-style: map-get($border-style, bold);
 					}
 					@if ('material' == $form-theme) {
-						width: #{calc(map-get($radio, size) / 2)};
-						height: #{calc(map-get($radio, size) / 2)};
+						border-width: #{map-get($border-width, material) * 2};
+						border-style: map-get($border-style, material);
 					}
-					@include opacity(0);
-					display: block;
-					position: absolute;
-					top: 50%;
-					left: 50%;
-					border-radius: 100%;
-					transform: translate(-50%, -50%);
-					transition: map-get($transition, ease);
-				}
+					border-radius: #{map-get($radio, size) * 2};
 
-				@if ('material' == $form-theme) {
-
-					&:after {
+					&:before {
 						content: " ";
+						@if ('default' == $form-theme) {
+							width: #{calc(map-get($radio, size) / 2)};
+							height: #{calc(map-get($radio, size) / 2)};
+						}
+						@if ('flat' == $form-theme) {
+							width: #{calc(map-get($radio, size) / 2)};
+							height: #{calc(map-get($radio, size) / 2)};
+						}
+						@if ('bold' == $form-theme) {
+							width: #{(calc(map-get($radio, size) / 2)) - map-get($border-width, bold)};
+							height: #{(calc(map-get($radio, size) / 2)) - map-get($border-width, bold)};
+						}
+						@if ('material' == $form-theme) {
+							width: #{calc(map-get($radio, size) / 2)};
+							height: #{calc(map-get($radio, size) / 2)};
+						}
 						@include opacity(0);
-						width: map-get($radio, size);
-						height: map-get($radio, size);
+						display: block;
 						position: absolute;
 						top: 50%;
 						left: 50%;
 						border-radius: 100%;
-						transform: translate(-50%, -50%) scale(0);
-						transform-origin: center;
-						transform-style: preserve-3d;
-						animation-duration: 0.6s;
-						animation-fill-mode: both;
+						transform: translate(-50%, -50%);
+						transition: map-get($transition, ease);
+					}
+
+					@if ('material' == $form-theme) {
+
+						&:after {
+							content: " ";
+							@include opacity(0);
+							width: map-get($radio, size);
+							height: map-get($radio, size);
+							position: absolute;
+							top: 50%;
+							left: 50%;
+							border-radius: 100%;
+							transform: translate(-50%, -50%) scale(0);
+							transform-origin: center;
+							transform-style: preserve-3d;
+							animation-duration: 0.6s;
+							animation-fill-mode: both;
+						}
 					}
-				}
 
-				~ span {
-					margin-left: 10px;
+					~ span {
+						margin-left: 10px;
+					}
 				}
 			}
 
 			.forminator-radio-label {
 				flex: 0 1 auto;
-				line-height: 20px;
+
+				@if ('basic' != $form-theme) {
+					line-height: 20px;
+				}
 			}
 
 			.forminator-radio-image {
diff --git a/library/scss/src/settings/components/_repeater-buttons.scss b/library/scss/src/settings/components/_repeater-buttons.scss
index 58ae4d29..b2de8689 100644
--- a/library/scss/src/settings/components/_repeater-buttons.scss
+++ b/library/scss/src/settings/components/_repeater-buttons.scss
@@ -5,14 +5,17 @@
         .forminator-action-buttons {
             margin-top: -30px;
             line-height: 1;
-            .forminator-repeater-action-button {
-                padding: 5px 15px;
-                border-radius: 15px;
 
-                &:disabled {
-                    pointer-events: none;
-                }
-            }
+			@if ('basic' != $form-theme) {
+				.forminator-repeater-action-button {
+					padding: 5px 15px;
+					border-radius: 15px;
+	
+					&:disabled {
+						pointer-events: none;
+					}
+				}
+			}
 
             .forminator-repeater-add,
             .forminator-repeater-remove {
diff --git a/library/scss/src/settings/components/_response.scss b/library/scss/src/settings/components/_response.scss
index b8c71656..e2bcb8d6 100644
--- a/library/scss/src/settings/components/_response.scss
+++ b/library/scss/src/settings/components/_response.scss
@@ -22,14 +22,19 @@
 				background-color: #FFF;
 				box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
 			}
+			@if ('basic' == $form-theme) {
+				padding: 15px 10px;
+			}
 			text-align: left;
 
 			p {
 				margin: 0;
 				padding: 0;
 				border: 0;
-				line-height: 1.3em;
-				letter-spacing: 0;
+				@if ('basic' != $form-theme) {
+					line-height: 1.3em;
+					letter-spacing: 0;
+				}
 
 				&:not(:last-child) {
 					margin-bottom: 10px;
diff --git a/library/scss/src/settings/components/_select2-dropdown.scss b/library/scss/src/settings/components/_select2-dropdown.scss
index 42ab6f1d..6cd027a7 100644
--- a/library/scss/src/settings/components/_select2-dropdown.scss
+++ b/library/scss/src/settings/components/_select2-dropdown.scss
@@ -84,6 +84,44 @@
 				}
 
 				// Checkbox in dropdown
+				@if ('basic' != $form-theme) {
+					&:not(.forminator-dropdown--basic) .forminator-checkbox {			
+						input {
+							@extend %screen-readers;
+			
+							&:checked {
+								+ .forminator-checkbox-box:before {
+									@include opacity(1);
+								}
+							}
+						}
+			
+						span {
+							cursor: pointer;
+							pointer-events: all;
+							display: block;
+						}
+			
+						.forminator-checkbox-box {
+							width: map-get($checkbox, size);
+							height: map-get($checkbox, size);
+							flex: 0 0 map-get($checkbox, size);
+							position: relative;
+			
+							@include icon(before, check) {
+								@include opacity(0);
+								display: block;
+								position: absolute;
+								top: 50%;
+								left: 50%;
+								font-size: map-get($checkbox, icon);
+								transform: translate(-50%, -50%);
+								transition: map-get($transition, ease);
+							}
+						}
+					}
+				}
+
 				.forminator-checkbox {
 					line-height: 20px;
 					cursor: pointer;
@@ -94,57 +132,16 @@
 					padding: 10px 8px;
 					gap: 10px;
 					margin: 0;
-		
-					input {
-						@extend %screen-readers;
-		
-						&:checked {
-							+ .forminator-checkbox-box:before {
-								@include opacity(1);
-							}
-						}
-					}
-		
-					span {
-						cursor: pointer;
-						pointer-events: all;
-						display: block;
-					}
-		
-					.forminator-checkbox-box {
-						width: map-get($checkbox, size);
-						height: map-get($checkbox, size);
-						flex: 0 0 map-get($checkbox, size);
-						position: relative;
-		
-						@include icon(before, check) {
-							@include opacity(0);
-							display: block;
-							position: absolute;
-							top: 50%;
-							left: 50%;
-							font-size: map-get($checkbox, icon);
-							transform: translate(-50%, -50%);
-							transition: map-get($transition, ease);
-						}
-					}
 				}
+				
 
-				// DESIGN: Default and Basic.
-				&.forminator-dropdown--default {
+				// DESIGN: Basic
+				&.forminator-dropdown--basic {
 					padding: #{$dropdown--padding - $default--border-width} 0;
 					border-style: $default--border-style;
 
-					// Search input.
-					.select2-search {
-						margin: 0 0 #{$dropdown--padding - $default--border-width};
-						padding: 0 #{$dropdown--padding - $default--border-width};
-
-						input {
-							padding: #{$dropdown--padding - $default--border-width};
-							border-style: $default--border-style;
-							border-radius: 2px;
-						}
+					.forminator-checkbox-box {
+						display: none;
 					}
 
 					// Dropdown list.
@@ -172,170 +169,214 @@
 					}
 				}
 
-				// DESIGN: Default.
-				&.forminator-dropdown--default {
-					border-width: $default--border-width;
+				@if ('basic' != $form-theme) {
+					// DESIGN: Default
+					&.forminator-dropdown--default {
+						padding: #{$dropdown--padding - $default--border-width} 0;
+						border-style: $default--border-style;
+
+						// Search input.
+						.select2-search {
+							margin: 0 0 #{$dropdown--padding - $default--border-width};
+							padding: 0 #{$dropdown--padding - $default--border-width};
+
+							input {
+								padding: #{$dropdown--padding - $default--border-width};
+								border-style: $default--border-style;
+								border-radius: 2px;
+							}
+						}
 
-					// Search input.
-					.select2-search {
+						// Dropdown list.
+						.select2-results {
 
-						input {
-							border-width: $default--border-width;
+							.select2-results__options {
+
+								.select2-results__option {
+									padding: #{calc($dropdown--padding / 2)} #{$dropdown--padding - ($default--border-width * 2)};
+
+									&.select2-results__message {
+										border-radius: 2px;
+									}
+								}
+							}
 						}
-					}
 
-					// Checkbox in dropdown
-					.forminator-checkbox {
-			
-						.forminator-checkbox-box {
-							border-width: map-get($border-width, default);
+						// Checkbox in dropdown
+						.forminator-checkbox {
+				
+							.forminator-checkbox-box {
+								border-style: map-get($border-style, default);
+								border-radius: map-get($border-radius, default);
+							}
 						}
 					}
-				}
 
-				// DESIGN: Flat.
-				&.forminator-dropdown--flat {
-					padding: $dropdown--padding 0;
-					border-width: 0;
-					border-style: none;
+					// DESIGN: Default.
+					&.forminator-dropdown--default {
+						border-width: $default--border-width;
 
-					// Search input.
-					.select2-search {
-						margin: 0 0 $dropdown--padding;
-						padding: 0 $dropdown--padding;
+						// Search input.
+						.select2-search {
 
-						input {
-							padding: $dropdown--padding;
-							border-width: 0;
-							border-style: none;
-							border-radius: 0;
+							input {
+								border-width: $default--border-width;
+							}
 						}
-					}
 
-					// Dropdown list.
-					.select2-results {
-
-						.select2-results__options {
-
-							.select2-results__option {
-								padding: #{calc($dropdown--padding / 2)} $dropdown--padding;
+						// Checkbox in dropdown
+						.forminator-checkbox {
+				
+							.forminator-checkbox-box {
+								border-width: map-get($border-width, default);
 							}
 						}
 					}
 
-					// Checkbox in dropdown
-					.forminator-checkbox {			
-						.forminator-checkbox-box {
-							border-width: map-get($border-width, flat);
-							border-style: map-get($border-style, flat);
-							border-radius: map-get($border-radius, flat);
+					// DESIGN: Flat.
+					&.forminator-dropdown--flat {
+						padding: $dropdown--padding 0;
+						border-width: 0;
+						border-style: none;
+
+						// Search input.
+						.select2-search {
+							margin: 0 0 $dropdown--padding;
+							padding: 0 $dropdown--padding;
+
+							input {
+								padding: $dropdown--padding;
+								border-width: 0;
+								border-style: none;
+								border-radius: 0;
+							}
 						}
-					}
-				}
 
-				// DESIGN: Bold.
-				&.forminator-dropdown--bold {
-					padding: #{$dropdown--padding - $bold--border-width} 0;
-					border-width: $bold--border-width;
-					border-style: $bold--border-style;
+						// Dropdown list.
+						.select2-results {
 
-					// Search input.
-					.select2-search {
-						margin: 0 0 #{$dropdown--padding - $bold--border-width};
-						padding: 0 #{$dropdown--padding - $bold--border-width};
+							.select2-results__options {
 
-						input {
-							padding: #{$dropdown--padding - $bold--border-width};
-							border-width: $bold--border-width;
-							border-style: $bold--border-style;
+								.select2-results__option {
+									padding: #{calc($dropdown--padding / 2)} $dropdown--padding;
+								}
+							}
+						}
+
+						// Checkbox in dropdown
+						.forminator-checkbox {			
+							.forminator-checkbox-box {
+								border-width: map-get($border-width, flat);
+								border-style: map-get($border-style, flat);
+								border-radius: map-get($border-radius, flat);
+							}
 						}
 					}
 
-					// Dropdown list.
-					.select2-results {
+					// DESIGN: Bold.
+					&.forminator-dropdown--bold {
+						padding: #{$dropdown--padding - $bold--border-width} 0;
+						border-width: $bold--border-width;
+						border-style: $bold--border-style;
+
+						// Search input.
+						.select2-search {
+							margin: 0 0 #{$dropdown--padding - $bold--border-width};
+							padding: 0 #{$dropdown--padding - $bold--border-width};
+
+							input {
+								padding: #{$dropdown--padding - $bold--border-width};
+								border-width: $bold--border-width;
+								border-style: $bold--border-style;
+							}
+						}
 
-						.select2-results__options {
+						// Dropdown list.
+						.select2-results {
 
-							.select2-results__option {
-								padding: #{calc($dropdown--padding / 2)} #{$dropdown--padding - ($bold--border-width * 2)};
+							.select2-results__options {
+
+								.select2-results__option {
+									padding: #{calc($dropdown--padding / 2)} #{$dropdown--padding - ($bold--border-width * 2)};
+								}
 							}
 						}
-					}
 
-					// Checkbox in dropdown
-					.forminator-checkbox {	
-						.forminator-checkbox-box {
-							border-width: map-get($border-width, bold);
-							border-style: map-get($border-style, bold);
-							border-radius: map-get($border-radius, bold);
+						// Checkbox in dropdown
+						.forminator-checkbox {	
+							.forminator-checkbox-box {
+								border-width: map-get($border-width, bold);
+								border-style: map-get($border-style, bold);
+								border-radius: map-get($border-radius, bold);
+							}
 						}
 					}
-				}
 
-				// DESIGN: Material.
-				&.forminator-dropdown--material {
-					padding: $dropdown--padding 0;
+					// DESIGN: Material.
+					&.forminator-dropdown--material {
+						padding: $dropdown--padding 0;
 
-					// Search input.
-					.select2-search {
+						// Search input.
+						.select2-search {
 
-						input {
-							padding: 0 0 $input--padding;
-							border-width: 0;
-							border-bottom-width: 1px;
-							border-style: solid;
-							background: none transparent;
-							background-color: transparent !important;
+							input {
+								padding: 0 0 $input--padding;
+								border-width: 0;
+								border-bottom-width: 1px;
+								border-style: solid;
+								background: none transparent;
+								background-color: transparent !important;
+							}
 						}
-					}
 
-					// Dropdown list.
-					.select2-results {
+						// Dropdown list.
+						.select2-results {
 
-						.select2-results__options {
+							.select2-results__options {
 
-							.select2-results__option {
-								padding: #{calc($dropdown--padding / 2)} #{$dropdown--padding - ($default--border-width * 2)};
+								.select2-results__option {
+									padding: #{calc($dropdown--padding / 2)} #{$dropdown--padding - ($default--border-width * 2)};
+								}
 							}
 						}
-					}
 
-					// Checkbox in dropdown
-					.forminator-checkbox {			
-						input {
-							&:checked {
-								&:focus {
-		
+						// Checkbox in dropdown
+						.forminator-checkbox {			
+							input {
+								&:checked {
+									&:focus {
+			
+										+ .forminator-checkbox-box:after {
+											animation-name: click-animation;
+										}
+									}
+				
 									+ .forminator-checkbox-box:after {
-										animation-name: click-animation;
+										@include opacity(1);
 									}
 								}
-			
-								+ .forminator-checkbox-box:after {
-									@include opacity(1);
-								}
 							}
-						}
-			
-						.forminator-checkbox-box {
-							border-width: #{map-get($border-width, material) * 2};
-							border-style: map-get($border-style, material);
-							border-radius: map-get($border-radius, material);
-
-							&:after {
-								content: " ";
-								@include opacity(0);
-								width: map-get($checkbox, size);
-								height: map-get($checkbox, size);
-								position: absolute;
-								top: 50%;
-								left: 50%;
-								border-radius: 100%;
-								transform: translate(-50%, -50%) scale(0);
-								transform-origin: center;
-								transform-style: preserve-3d;
-								animation-duration: 0.6s;
-								animation-fill-mode: both;
+				
+							.forminator-checkbox-box {
+								border-width: #{map-get($border-width, material) * 2};
+								border-style: map-get($border-style, material);
+								border-radius: map-get($border-radius, material);
+
+								&:after {
+									content: " ";
+									@include opacity(0);
+									width: map-get($checkbox, size);
+									height: map-get($checkbox, size);
+									position: absolute;
+									top: 50%;
+									left: 50%;
+									border-radius: 100%;
+									transform: translate(-50%, -50%) scale(0);
+									transform-origin: center;
+									transform-style: preserve-3d;
+									animation-duration: 0.6s;
+									animation-fill-mode: both;
+								}
 							}
 						}
 					}
diff --git a/library/scss/src/settings/components/_select2.scss b/library/scss/src/settings/components/_select2.scss
index 9a076ef9..a3333e19 100644
--- a/library/scss/src/settings/components/_select2.scss
+++ b/library/scss/src/settings/components/_select2.scss
@@ -2,253 +2,264 @@
 
 	@include form-class($form-type, $form-theme, false) {
 
-		select.forminator-select2 {
-
-			+ .forminator-select {
-				min-width: 100%;
-				max-width: 100%;
-				display: block;
-				text-align: left;
-
-				// STATE: Default.
-				.selection {
+		select {
+			@if ('basic' == $form-theme) {
+				&:not(.forminator-select2) {
+					width: 100%;
 					display: block;
+				}
+			}
 
-					span[role="combobox"] {
-
-						.select2-selection__rendered {
-							order: 1;
-						}
-
-						.select2-selection__arrow {
-							order: 3;
-						}
-
-						// Remove icon styling
-						.select2-selection__clear,
-						.select2-selection__choice__remove {
-							padding: 0;
-							margin: 0;
-							border: none;
-							background: unset;
-							cursor: pointer;
-						}
+			&.forminator-select2 {
 
-						// TYPE: Single Select.
-						&.select2-selection--multiple,
-						&.select2-selection--single {
-							height: auto;
-							cursor: pointer;
-							user-select: none;
-							display: flex;
-							flex-flow: row nowrap;
-							align-items: center;
-							position: relative;
-							margin: 0;
-							padding: 0;
-							@if ('default' == $form-theme) {
-								border-width: $default--border-width;
-								border-style: $default--border-style;
-							}
-							@else if ('flat' == $form-theme) {
-								border-width: 0;
-								border-style: none;
-							}
-							@else if ('bold' == $form-theme) {
-								border-width: $bold--border-width;
-								border-style: $bold--border-style;
+				+ .forminator-select {
+					min-width: 100%;
+					max-width: 100%;
+					display: block;
+					text-align: left;
+	
+					// STATE: Default.
+					.selection {
+						display: block;
+	
+						span[role="combobox"] {
+	
+							.select2-selection__rendered {
+								order: 1;
 							}
-							@else if ('material' == $form-theme) {
-								border-width: 0;
-								border-bottom-width: 1px;
-								border-style: $material--border-style;
+	
+							.select2-selection__arrow {
+								order: 3;
 							}
-							background-image: none !important;
-
-							@if ('material' == $form-theme) {
-								&:before {
-									content: " ";
-									height: 2px;
-									display: block;
-									position: absolute;
-									z-index: 2;
-									right: 50%;
-									bottom: -1px;
-									left: 50%;
-									transition: 0.2s linear;
-								}
+	
+							// Remove icon styling
+							.select2-selection__clear,
+							.select2-selection__choice__remove {
+								padding: 0;
+								margin: 0;
+								border: none;
+								background: unset;
+								cursor: pointer;
 							}
-
-							// Label.
-							.select2-selection__rendered {
-								min-width: 10px;
-								overflow: hidden;
-								display: block;
-								flex: 1;
-								@if ('default' == $form-theme) {
-									padding: #{10px - ($default--border-width * 2)} 5px #{10px - ($default--border-width * 2)} 8px;
+	
+							// TYPE: Single Select.
+							&.select2-selection--multiple,
+							&.select2-selection--single {
+								height: auto;
+								cursor: pointer;
+								user-select: none;
+								display: flex;
+								flex-flow: row nowrap;
+								align-items: center;
+								position: relative;
+								margin: 0;
+								padding: 0;
+								@if ('default' == $form-theme or 'basic' == $form-theme) {
+									border-width: $default--border-width;
+									border-style: $default--border-style;
 								}
 								@else if ('flat' == $form-theme) {
-									padding: 8px 5px 8px 8px;
+									border-width: 0;
+									border-style: none;
 								}
 								@else if ('bold' == $form-theme) {
-									padding: #{10px - ($bold--border-width * 2)} 5px #{10px - ($bold--border-width * 2)} 8px;
+									border-width: $bold--border-width;
+									border-style: $bold--border-style;
 								}
 								@else if ('material' == $form-theme) {
-									padding: 8px 5px 8px 0;
-								}
-								text-overflow: ellipsis;
-								white-space: nowrap;
-							}
-
-							// Multiselect options
-							ul.select2-selection__rendered {
-								margin: 0;
-								list-style: none;
-
-								.select2-selection__placeholder {
-									margin: 0;
+									border-width: 0;
+									border-bottom-width: 1px;
+									border-style: $material--border-style;
 								}
-							}
-
-							// Icon.
-							.select2-selection__arrow {
+								background-image: none !important;
+	
 								@if ('material' == $form-theme) {
-									width: auto;
-								}
-								@else {
-									width: 38px;
-								}
-								height: 38px;
-								display: flex;
-								flex: 0 0 auto;
-								flex-flow: row wrap;
-								align-items: center;
-								position: relative;
-								margin: 0;
-								padding: 0;
-								border: 0;
-
-								[class*="forminator-icon-"] {
-									display: block;
-									margin: 0 auto;
-									font-size: $select--handle-icon;
-									transition: $transition--linear;
-
 									&:before {
+										content: " ";
+										height: 2px;
 										display: block;
-										color: inherit;
+										position: absolute;
+										z-index: 2;
+										right: 50%;
+										bottom: -1px;
+										left: 50%;
+										transition: 0.2s linear;
 									}
 								}
-							}
-
-							@if ('material' == $form-theme) {
-								&:hover,
-								&[aria-expanded="true"] {
-
-									&:before {
-										right: 0;
-										left: 0;
+	
+								// Label.
+								.select2-selection__rendered {
+									min-width: 10px;
+									overflow: hidden;
+									display: block;
+									flex: 1;
+									@if ('default' == $form-theme or 'basic' == $form-theme) {
+										padding: #{10px - ($default--border-width * 2)} 5px #{10px - ($default--border-width * 2)} 8px;
+									}
+									@else if ('flat' == $form-theme) {
+										padding: 8px 5px 8px 8px;
 									}
+									@else if ('bold' == $form-theme) {
+										padding: #{10px - ($bold--border-width * 2)} 5px #{10px - ($bold--border-width * 2)} 8px;
+									}
+									@else if ('material' == $form-theme) {
+										padding: 8px 5px 8px 0;
+									}
+									text-overflow: ellipsis;
+									white-space: nowrap;
 								}
-							}
-
-							&[aria-expanded="true"] {
-
+	
+								// Multiselect options
+								ul.select2-selection__rendered {
+									margin: 0;
+									list-style: none;
+	
+									.select2-selection__placeholder {
+										margin: 0;
+									}
+								}
+	
 								// Icon.
 								.select2-selection__arrow {
-
+									@if ('material' == $form-theme) {
+										width: auto;
+									}
+									@else {
+										width: 38px;
+									}
+									@if ('basic' != $form-theme) {
+										height: 38px;
+									}
+									display: flex;
+									flex: 0 0 auto;
+									flex-flow: row wrap;
+									align-items: center;
+									position: relative;
+									margin: 0;
+									padding: 0;
+									border: 0;
+	
 									[class*="forminator-icon-"] {
-										transform: rotate(180deg);
+										display: block;
+										margin: 0 auto;
+										font-size: $select--handle-icon;
+										transition: $transition--linear;
+	
+										&:before {
+											display: block;
+											color: inherit;
+										}
 									}
 								}
-							}
-						}
-
-						.select2-selection__clear {
-							order: 2;
-							width: 30px;
-							height: 30px;
-							font-size: 24px;
-							color: #777771;
-
-							span {
-								display: block;
-								height: 100%;
-							}
-						}
-
-						// multiple selection
-						&.select2-selection--multiple {
-
-							.select2-selection__rendered {
-								display: flex;
-								gap: 4px;
-								flex-wrap: wrap;
-
-								&.forminator-select2-selections {
-									padding-top: 6px;
-									padding-bottom: 6px;
-								}
-							}
-
-							.select2-selection__choice {
-								line-height: 14px;
-								color: #fff;
-								background: #888888;
-								padding: 6px 8px;
-								border-radius: 4px;
-								display: flex;
-								align-items: center;
-								gap: 6px;
-								margin: 0;
-								white-space: normal;
-								
-								@if ('default' == $form-theme) {
-									border-radius: 4px;
+	
+								@if ('material' == $form-theme) {
+									&:hover,
+									&[aria-expanded="true"] {
+	
+										&:before {
+											right: 0;
+											left: 0;
+										}
+									}
 								}
-								@else if ('flat' == $form-theme) {
-									border-radius: 0;
+	
+								&[aria-expanded="true"] {
+	
+									// Icon.
+									.select2-selection__arrow {
+	
+										[class*="forminator-icon-"] {
+											transform: rotate(180deg);
+										}
+									}
 								}
-								@else if ('bold' == $form-theme) {
-									border-radius: 4px;
+							}
+	
+							.select2-selection__clear {
+								order: 2;
+								width: 30px;
+								height: 30px;
+								font-size: 24px;
+								color: #777771;
+	
+								span {
+									display: block;
+									height: 100%;
 								}
-								@else if ('material' == $form-theme) {
-									border-radius: 15px;
+							}
+	
+							// multiple selection
+							&.select2-selection--multiple {
+	
+								.select2-selection__rendered {
+									display: flex;
+									gap: 4px;
+									flex-wrap: wrap;
+	
+									&.forminator-select2-selections {
+										padding-top: 6px;
+										padding-bottom: 6px;
+									}
 								}
-
-								.select2-selection__choice__remove {
-									font-size: 20px;
+	
+								.select2-selection__choice {
+									line-height: 14px;
 									color: #fff;
-
-									span {
-										line-height: 12px;
-										height: 14px;
-										display: block;
+									background: #888888;
+									padding: 6px 8px;
+									border-radius: 4px;
+									display: flex;
+									align-items: center;
+									gap: 6px;
+									margin: 0;
+									white-space: normal;
+									
+									@if ('default' == $form-theme) {
+										border-radius: 4px;
+									}
+									@else if ('flat' == $form-theme) {
+										border-radius: 0;
+									}
+									@else if ('bold' == $form-theme) {
+										border-radius: 4px;
+									}
+									@else if ('material' == $form-theme) {
+										border-radius: 15px;
+									}
+	
+									.select2-selection__choice__remove {
+										font-size: 20px;
+										color: #fff;
+	
+										span {
+											line-height: 12px;
+											height: 14px;
+											display: block;
+										}
 									}
 								}
 							}
+	
+							&:hover,
+							&:focus {
+								outline: none;
+								box-shadow: none;
+							}
 						}
-
+	
 						&:hover,
 						&:focus {
 							outline: none;
 							box-shadow: none;
 						}
 					}
-
+	
 					&:hover,
 					&:focus {
 						outline: none;
 						box-shadow: none;
 					}
 				}
-
-				&:hover,
-				&:focus {
-					outline: none;
-					box-shadow: none;
-				}
 			}
 		}
 	}
diff --git a/library/scss/src/settings/components/_textarea.scss b/library/scss/src/settings/components/_textarea.scss
index 4d4b3ae1..f6935474 100644
--- a/library/scss/src/settings/components/_textarea.scss
+++ b/library/scss/src/settings/components/_textarea.scss
@@ -3,12 +3,17 @@
 	@include form-class($form-type, $form-theme, false) {
 
 		.forminator-textarea {
-			box-sizing: border-box;
 			width: 100%;
-			min-height: $textarea--height;
-			resize: vertical;
 			display: block;
-			margin: 0;
+			@if ('basic' != $form-theme) {
+				box-sizing: border-box;
+				resize: vertical;
+				margin: 0;
+				min-height: $textarea--height;
+				background-image: unset;
+				line-height: $textarea--line-height;
+				transition: $transition--ease;
+			}
 			@if ('default' == $form-theme) {
 				padding: #{$textarea--padding - $default--border-width};
 				border-width: $default--border-width;
@@ -33,37 +38,36 @@
 				border-radius: $material--border-radius;
 				line-height: 20px;
 			}
-			background-image: unset;
-			line-height: $textarea--line-height;
-			transition: $transition--ease;
 
-			&,
-			&:hover,
-			&:focus,
-			&:active,
-			&:disabled {
-				outline: none;
-				box-shadow: none;
-			}
+			@if ('basic' != $form-theme) {
+				&,
+				&:hover,
+				&:focus,
+				&:active,
+				&:disabled {
+					outline: none;
+					box-shadow: none;
+				}
 
-			&:disabled {
-				pointer-events: none;
-				border-style: dotted;
+				&:disabled {
+					pointer-events: none;
+					border-style: dotted;
 
-				&:-moz-placeholder {
-					@include opacity(0.4);
-				}
+					&:-moz-placeholder {
+						@include opacity(0.4);
+					}
 
-				&::-moz-placeholder {
-					@include opacity(0.4);
-				}
+					&::-moz-placeholder {
+						@include opacity(0.4);
+					}
 
-				&:-ms-input-placeholder {
-					@include opacity(0.4);
-				}
+					&:-ms-input-placeholder {
+						@include opacity(0.4);
+					}
 
-				&::-webkit-input-placeholder {
-					@include opacity(0.4);
+					&::-webkit-input-placeholder {
+						@include opacity(0.4);
+					}
 				}
 			}
 		}
diff --git a/library/scss/src/settings/components/_upload.scss b/library/scss/src/settings/components/_upload.scss
index 6d0fbb4e..730c266e 100644
--- a/library/scss/src/settings/components/_upload.scss
+++ b/library/scss/src/settings/components/_upload.scss
@@ -36,9 +36,12 @@
 			flex: 0 0 auto;
 			align-items: center;
 			justify-content: center;
-			margin: 0;
-			padding: 0;
-			border: 0;
+			@if ('basic' != $form-theme) {
+				font-size: map-get($button, icon-size);
+				margin: 0;
+				padding: 0;
+				border: 0;
+			}
 			@if ('default' == $form-theme) {
 				border-radius: map-get($border-radius, default);
 			}
@@ -51,7 +54,6 @@
 			@if ('material' == $form-theme) {
 				border-radius: #{map-get($border-radius, material) * 2};
 			}
-			font-size: map-get($button, icon-size);
 
 			[class*=forminator-icon-] {
 				display: block;

From 999fc9fba74c1bdeed5d3249f8b074f49f2d3c2c Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Thu, 12 Sep 2024 14:18:36 +0530
Subject: [PATCH 12/15] =?UTF-8?q?=F0=9F=90=9B=20fix(input):=20input=20line?=
 =?UTF-8?q?=20height=20fix.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/src/settings/components/_input.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/library/scss/src/settings/components/_input.scss b/library/scss/src/settings/components/_input.scss
index ab54aa55..61ad1ffc 100644
--- a/library/scss/src/settings/components/_input.scss
+++ b/library/scss/src/settings/components/_input.scss
@@ -14,6 +14,8 @@
 				max-width: unset;
 				min-height: unset;
 				max-height: unset;
+				height: auto;
+				line-height: map-get($input, line-height);
 				background-image: unset;
 				transition: map-get($transition, ease);
 				margin: 0;

From b3158321bca6b35b916c9d0cee03f21fb8292745 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 17 Sep 2024 13:47:35 +0530
Subject: [PATCH 13/15] =?UTF-8?q?=E2=9C=A8=20new(fields):=20select2=20and?=
 =?UTF-8?q?=20slider=20styles=20updated=20for=20basic=20design.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/forminator-base.scss             |   2 +
 .../components/_select2-dropdown.scss         |   1 +
 .../scss/src/settings/components/_slider.scss | 196 ++++++++++--------
 3 files changed, 110 insertions(+), 89 deletions(-)

diff --git a/library/scss/forminator-base.scss b/library/scss/forminator-base.scss
index 75055bc7..99396a84 100644
--- a/library/scss/forminator-base.scss
+++ b/library/scss/forminator-base.scss
@@ -44,6 +44,7 @@ $form-theme: basic;
 @import "src/settings/components/radio";
 @import "src/settings/components/checkbox";
 @import "src/settings/components/phone";
+@import "src/settings/components/slider";
 
 // Components
 @include component-repeater(#{$form-type}, #{$form-theme});
@@ -68,3 +69,4 @@ $form-theme: basic;
 @include component-checkbox(#{$form-type}, #{$form-theme});
 @include component-radio(#{$form-type}, #{$form-theme});
 @include component-phone(#{$form-type}, #{$form-theme});
+@include component-slider(#{$form-type}, #{$form-theme});
diff --git a/library/scss/src/settings/components/_select2-dropdown.scss b/library/scss/src/settings/components/_select2-dropdown.scss
index 6cd027a7..afeba774 100644
--- a/library/scss/src/settings/components/_select2-dropdown.scss
+++ b/library/scss/src/settings/components/_select2-dropdown.scss
@@ -139,6 +139,7 @@
 				&.forminator-dropdown--basic {
 					padding: #{$dropdown--padding - $default--border-width} 0;
 					border-style: $default--border-style;
+					border-width: 1px;
 
 					.forminator-checkbox-box {
 						display: none;
diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss
index 1808ae91..88932105 100644
--- a/library/scss/src/settings/components/_slider.scss
+++ b/library/scss/src/settings/components/_slider.scss
@@ -11,12 +11,15 @@
 			}
 
 			.forminator-slide {
-				border: 1px solid transparent;
-				background: #EDEDED;
-				border-radius: 4px;
 				position: relative;
 				text-align: left;
 				cursor: pointer;
+
+				@if ('basic' != $form-theme) {
+					border: 1px solid transparent;
+					background: #EDEDED;
+					border-radius: 4px;
+				}
 	
 				@if ('default' == $form-theme) {
 					border: 1px solid #777771;
@@ -38,8 +41,11 @@
 
 				.forminator-slide {
 					border: none;
-					background: #DDD;
-					border: 1px solid transparent;
+
+					@if ('basic' != $form-theme) {
+						background: #DDD;
+						border: 1px solid transparent;
+					}
 
 					@if('material' == $form-theme) {
 						background: #777;
@@ -47,61 +53,67 @@
 					}
 				}
 
-				.ui-slider-range {
-					background: #ddd;
+				@if ('basic' != $form-theme) {
+					.ui-slider-range {
+						background: #ddd;
 
-					@if('material' == $form-theme) {
-						background: #aaa;
+						@if('material' == $form-theme) {
+							background: #aaa;
+						}
 					}
-				}
 
-				.ui-slider-handle {
-					background: #aaa;
+					.ui-slider-handle {
+						background: #aaa;
+					}
 				}
 			}
 
-			.ui-slider-handle {
-				width: 20px;
-				height: 20px;
-				border-radius: 100%;
-				background: #17A8E3;
-				border: 0;
-				position: absolute;
-				z-index: 2;
-				cursor: pointer;
-				-ms-touch-action: none;
-				touch-action: none;
-				outline: none;
-
-				&:hover,
-				&:focus {
-					background: #1289BA;
-
-					@if('material' == $form-theme) {
-						background: #17A8E3;
-						
-						&:after {
-							content: '';
-							position: absolute;
-							top: -4px;
-							bottom: -4px;
-							left: -4px;
-							right: -4px;
-							border-radius: 100%;
-							background: rgba(23, 168, 227, 0.4);
+			@if ('basic' != $form-theme) {
+				.ui-slider-handle {
+					width: 20px;
+					height: 20px;
+					border-radius: 100%;
+					background: #17A8E3;
+					border: 0;
+					position: absolute;
+					z-index: 2;
+					cursor: pointer;
+					-ms-touch-action: none;
+					touch-action: none;
+					outline: none;
+
+					&:hover,
+					&:focus {
+						background: #1289BA;
+
+						@if('material' == $form-theme) {
+							background: #17A8E3;
+							
+							&:after {
+								content: '';
+								position: absolute;
+								top: -4px;
+								bottom: -4px;
+								left: -4px;
+								right: -4px;
+								border-radius: 100%;
+								background: rgba(23, 168, 227, 0.4);
+							}
 						}
 					}
 				}
 			}
 
-			.ui-slider-range {
-				background: #17A8E3;
-				position: absolute;
-				z-index: 1;
-				font-size: .7em;
-				display: block;
-				border: 0;
-				background-position: 0 0;
+			@if ('basic' != $form-theme) {
+				.ui-slider-range {
+					background: #17A8E3;
+					position: absolute;
+					z-index: 1;
+					font-size: .7em;
+					display: block;
+					border: 0;
+					background-position: 0 0;
+				}
 			}
 			
 			/* support: IE8 - See #6727 */
@@ -112,46 +124,48 @@
 				}
 			}
 			
-			.ui-slider-horizontal {
-				height: 8px !important;
-				margin: 6px 0;
-
-				@if ('material' == $form-theme) {
-					height: 1px;
-					border: none;
-				}
+			@if ('basic' != $form-theme) {
+				.ui-slider-horizontal {
+					height: 8px !important;
+					margin: 6px 0;
 
-				.ui-slider-handle {
-					top: -7px;
-					margin-left: -8px;
-	
-					@if ('bold' == $form-theme) {
-						top: -8px;
+					@if ('material' == $form-theme) {
+						height: 1px;
+						border: none;
 					}
 
-					@if ('material' == $form-theme) {
-						top: -9px;
+					.ui-slider-handle {
+						top: -7px;
+						margin-left: -8px;
+		
+						@if ('bold' == $form-theme) {
+							top: -8px;
+						}
+
+						@if ('material' == $form-theme) {
+							top: -9px;
+						}
 					}
-				}
 
-				.ui-slider-range {
-					top: -1px;
-					bottom: -1px;
+					.ui-slider-range {
+						top: -1px;
+						bottom: -1px;
 
-					@if ('material' == $form-theme) {
-						top: -0.5px;
-						bottom: -0.5px;
+						@if ('material' == $form-theme) {
+							top: -0.5px;
+							bottom: -0.5px;
+						}
 					}
-				}
 
-				.ui-slider-range-min {
-					left: -1px;
-					border-top-left-radius: 4px;
-					border-bottom-left-radius: 4px;
-				}
+					.ui-slider-range-min {
+						left: -1px;
+						border-top-left-radius: 4px;
+						border-bottom-left-radius: 4px;
+					}
 
-				.ui-slider-range-max {
-					right: 0;
+					.ui-slider-range-max {
+						right: 0;
+					}
 				}
 			}
 
@@ -171,10 +185,12 @@
 		.forminator-slider-limit {
 			display: flex;
 			justify-content: space-between;
-			color: #888;
-			font-size: 15px;
-			font-weight: 400;
-			line-height: 22px;
+			@if ('basic' != $form-theme) {
+				color: #888;
+				font-size: 15px;
+				font-weight: 400;
+				line-height: 22px;
+			}
 		}
 
 		.forminator-slider-separator {
@@ -189,13 +205,15 @@
 		
 		.forminator-slider-amount {
 			display: flex;
-			color: #333;
 			gap: 2px;
-			font-size: 16px;
-			font-weight: 400;
-			line-height: 22px;
-			letter-spacing: -0.2px;
 			margin: 5px 0;
+			@if ('basic' != $form-theme) {
+				color: #333;
+				font-size: 16px;
+				font-weight: 400;
+				line-height: 22px;
+				letter-spacing: -0.2px;
+			}
 
 			&.forminator-slider-amount-top {
 				order: -1;

From ede5ef46175b97a83b391da01ba9a6368a9bc189 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 17 Sep 2024 14:25:46 +0530
Subject: [PATCH 14/15] =?UTF-8?q?=E2=9C=A8=20new(fields):=20checkbox=20and?=
 =?UTF-8?q?=20radio=20space=20fix=20for=20basic=20design.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/src/settings/components/_checkbox.scss | 11 ++++++++---
 library/scss/src/settings/components/_radio.scss    | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/library/scss/src/settings/components/_checkbox.scss b/library/scss/src/settings/components/_checkbox.scss
index 67dd8aa4..82124cd8 100644
--- a/library/scss/src/settings/components/_checkbox.scss
+++ b/library/scss/src/settings/components/_checkbox.scss
@@ -113,10 +113,15 @@ $checkbox-image: 80px;
 							animation-fill-mode: both;
 						}
 					}
+				}
+			}
 
-					~ span {
-						margin-left: 10px;
-					}
+			.forminator-checkbox-box {
+				@if ('basic' == $form-theme) {
+					display: none;
+				}
+				~ span {
+					margin-left: 10px;
 				}
 			}
 
diff --git a/library/scss/src/settings/components/_radio.scss b/library/scss/src/settings/components/_radio.scss
index c29fc016..60d1265f 100644
--- a/library/scss/src/settings/components/_radio.scss
+++ b/library/scss/src/settings/components/_radio.scss
@@ -125,10 +125,15 @@ $radio-image: 80px;
 							animation-fill-mode: both;
 						}
 					}
+				}
+			}
 
-					~ span {
-						margin-left: 10px;
-					}
+			.forminator-radio-bullet {
+				@if ('basic' == $form-theme) {
+					display: none;
+				}
+				~ span {
+					margin-left: 10px;
 				}
 			}
 

From c7d45e4c5e787394b3cf089116a375c475dd8a65 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 17 Sep 2024 15:20:38 +0530
Subject: [PATCH 15/15] =?UTF-8?q?=E2=9C=A8=20new(fields):=20checkbox=20and?=
 =?UTF-8?q?=20radio=20space=20fix=20for=20basic=20design.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library/scss/src/settings/components/_checkbox.scss | 13 ++++++++++---
 library/scss/src/settings/components/_radio.scss    | 13 ++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/library/scss/src/settings/components/_checkbox.scss b/library/scss/src/settings/components/_checkbox.scss
index 82124cd8..c8b145ac 100644
--- a/library/scss/src/settings/components/_checkbox.scss
+++ b/library/scss/src/settings/components/_checkbox.scss
@@ -249,9 +249,16 @@ $checkbox-image: 80px;
 					// VARIATION: Box + Label.
 					&.forminator-has_box {
 
-						.forminator-checkbox-box {
-							order: 2;
-							margin-left: 10px;
+						@if ('basic' == $form-theme) {
+							input {
+								order: 2;
+								margin-left: 10px;
+							}
+						} @else {
+							.forminator-checkbox-box {
+								order: 2;
+								margin-left: 10px;
+							}
 						}
 
 						.forminator-checkbox-label {
diff --git a/library/scss/src/settings/components/_radio.scss b/library/scss/src/settings/components/_radio.scss
index 60d1265f..10355683 100644
--- a/library/scss/src/settings/components/_radio.scss
+++ b/library/scss/src/settings/components/_radio.scss
@@ -247,9 +247,16 @@ $radio-image: 80px;
 					// VARIATION: Bullet + Label.
 					&.forminator-has_bullet {
 
-						.forminator-radio-bullet {
-							order: 2;
-							margin-left: 10px;
+						@if ('basic' == $form-theme) {
+							input {
+								order: 2;
+								margin-left: 10px;
+							}
+						} @else {
+							.forminator-radio-bullet {
+								order: 2;
+								margin-left: 10px;
+							}
 						}
 
 						.forminator-radio-label {