@syncfusion/ej2-inputs 23.2.4 → 24.1.45

package/styles/color-picker/_layout.scss

@@ -939,6 +939,18 @@
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+          &.e-color-picker {
+            width: 100% !important; /* stylelint-disable-line declaration-no-important */
+          }
+
+          &.e-colorpicker-popup {
+            width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
       & .e-palette {
         & .e-tile {
           @if $skin-name == 'Material3' {
@@ -949,6 +961,14 @@
           }
           width: $cpicker-bigger-tile-size;
         }
+
+        @media only screen and (max-width: 600px) {
+          @if $skin-name == 'Material3' {
+            & .e-tile {
+              width: 33px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-hsv-container {
@@ -989,6 +1009,14 @@
           }
         }
 
+        @media only screen and (max-width: 600px) {
+          & .e-preview-container {
+            @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+              margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+
         & .e-colorpicker-slider {
           width: $cpicker-bigger-slider-container-width;
 
@@ -1090,6 +1118,14 @@
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        & .e-input-container {
+          @if $skin-name == 'fabric' {
+            width: 89.8%;
+          }
+        }
+      }
+
       & .e-css.e-value-switch-btn,
       & .e-mode-switch-btn {
         padding: $cpicker-bigger-switch-btn-padding;

package/styles/color-picker/bootstrap5-dark.css

@@ -535,6 +535,14 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker {
   width: 462px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -554,6 +562,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: 0;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/bootstrap5.css

@@ -535,6 +535,14 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker {
   width: 462px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -554,6 +562,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: 0;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/fabric.css

@@ -566,6 +566,11 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container .e-input-container .e-float-input.e-numeric input {
   height: 36px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-input-container {
+    width: 89.8%;
+  }
+}
 .e-bigger .e-container .e-css.e-value-switch-btn, .e-bigger .e-container .e-mode-switch-btn {
   padding: 2px 2px;
   width: 9.023%;

package/styles/color-picker/fluent-dark.css

@@ -519,6 +519,14 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker {
   width: 376px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -538,6 +546,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: -4px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/fluent.css

@@ -519,6 +519,14 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker {
   width: 376px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -538,6 +546,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: -4px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/material.css

@@ -524,6 +524,14 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker {
   width: 290px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -543,6 +551,11 @@ body.e-colorpicker-overflow {
   width: 12.408%;
   top: 0;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/material3-dark.css

@@ -638,10 +638,23 @@ body.e-colorpicker-overflow {
   height: 36px;
   width: 40px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 30px;
   width: 37px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-palette .e-tile {
+    width: 33px !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-hsv-container .e-hsv-color {
   height: 274px;
 }
@@ -657,6 +670,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: 0;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/material3.css

@@ -694,10 +694,23 @@ body.e-colorpicker-overflow {
   height: 36px;
   width: 40px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 30px;
   width: 37px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-palette .e-tile {
+    width: 33px !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-hsv-container .e-hsv-color {
   height: 274px;
 }
@@ -713,6 +726,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: 0;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/tailwind-dark.css

@@ -527,6 +527,14 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-mode-switch-btn {
   height: 38px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -546,6 +554,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: 5px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/color-picker/tailwind.css

@@ -527,6 +527,14 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-mode-switch-btn {
   height: 38px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-container.e-colorpicker-popup {
+    width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -546,6 +554,11 @@ body.e-colorpicker-overflow {
   width: 12.405%;
   top: 5px;
 }
+@media only screen and (max-width: 600px) {
+  .e-bigger .e-container .e-slider-preview .e-preview-container {
+    margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider {
   width: 82.944%;
 }

package/styles/data-form/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/data-form/_bootstrap-dark-definition.scss

@@ -0,0 +1,42 @@
+/*! Form bootstrap theme wise override definitions and variables */
+
+// form field styles
+$field-label-color: $grey-light-font !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 400 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 5px !default;
+
+// group title styles
+$group-title-color: $grey-light-font !default;
+$group-title-border-color: $grey-base !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: darken($brand-danger, 25%) !default;
+$form-tooltip-color:lighten($brand-danger, 30%) !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_bootstrap-definition.scss

@@ -0,0 +1,41 @@
+/*! Form bootstrap theme wise override definitions and variables */
+// form field styles
+$field-label-color: var(--content-text-color-alt-1, #343a40) !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 400 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 5px !default;
+
+// group title styles
+$group-title-color: var(--fg-content-text-color-alt-2, #6b7280) !default;
+$group-title-border-color: $grey-base !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color:  $brand-danger-light !default;
+$form-tooltip-color: $brand-danger-dark !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_bootstrap4-definition.scss

@@ -0,0 +1,41 @@
+/*! Form bootstrap theme wise override definitions and variables */
+// form field styles
+$field-label-color: var(--content-text-color-alt-1, #343a40) !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 400 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 6px !default;
+
+// group title styles
+$group-title-color: var(--fg-content-text-color-alt-2, #6b7280) !default;
+$group-title-border-color: $gray-300 !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: lighten($red, 40%) !default;
+$form-tooltip-color: darken($red, 10%) !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/data-form/_bootstrap5-definition.scss

@@ -0,0 +1,41 @@
+/*! Form tailwind theme wise override definitions and variables */
+// form field styles
+$field-label-color: $content-text-color-alt1 !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 400 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 5px !default;
+
+// group title styles
+$group-title-color: $content-text-color-alt2 !default;
+$group-title-border-color: $gray-300;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: $danger-light !default;
+$form-tooltip-color: $danger !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_fabric-dark-definition.scss

@@ -0,0 +1,41 @@
+/*! Form fabric theme wise override definitions and variables */
+// form field styles
+$field-label-color: $neutral-primary !default;
+$field-label-font-size: 14px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 600 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 4px !default;
+ 
+// group title styles
+$group-title-color: $neutral-primary !default;
+$group-title-border-color: $neutral-light !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 0 !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: lighten($error-font, 25%) !default;
+$form-tooltip-color: darken($error-bg, 15%) !default;
+$form-validation-message-font-size: 14px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_fabric-definition.scss

@@ -0,0 +1,41 @@
+/*! Form fabric theme wise override definitions and variables */
+// form field styles
+$field-label-color: $neutral-primary !default;
+$field-label-font-size: 14px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 600 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 4px !default;
+
+// group title styles
+$group-title-color: $neutral-primary !default;
+$group-title-border-color: $neutral-light !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 0 !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: $error-bg !default;
+$form-tooltip-color: $error-font !default;
+$form-validation-message-font-size: 14px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/data-form/_fluent-definition.scss

@@ -0,0 +1,41 @@
+/*! Form tailwind theme wise override definitions and variables */
+// form field styles
+$field-label-color: $content-text-color-alt1 !default;
+$field-label-font-size: 14px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 600 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 3px !default;
+
+// group title styles
+$group-title-color: $content-text-color-alt2 !default;
+$group-title-border-color: $border-light !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 0 !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: $danger-light !default;
+$form-tooltip-color: $danger !default;
+$form-validation-message-font-size: 14px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;