diff --git a/assets/fonts/forminator-icons-font.eot b/assets/fonts/forminator-icons-font.eot index 83d1aa42..fa3ee60f 100755 Binary files a/assets/fonts/forminator-icons-font.eot and b/assets/fonts/forminator-icons-font.eot differ diff --git a/assets/fonts/forminator-icons-font.svg b/assets/fonts/forminator-icons-font.svg index 01ea4581..77759821 100755 --- a/assets/fonts/forminator-icons-font.svg +++ b/assets/fonts/forminator-icons-font.svg @@ -3,7 +3,7 @@ Generated by IcoMoon - + @@ -22,6 +22,10 @@ + + + + diff --git a/assets/fonts/forminator-icons-font.ttf b/assets/fonts/forminator-icons-font.ttf index 2acbbe3b..a1516355 100755 Binary files a/assets/fonts/forminator-icons-font.ttf and b/assets/fonts/forminator-icons-font.ttf differ diff --git a/assets/fonts/forminator-icons-font.woff b/assets/fonts/forminator-icons-font.woff index 01b7c413..ede78290 100755 Binary files a/assets/fonts/forminator-icons-font.woff and b/assets/fonts/forminator-icons-font.woff differ diff --git a/assets/fonts/forminator-icons-font.woff2 b/assets/fonts/forminator-icons-font.woff2 index b52c15fe..352fd895 100644 Binary files a/assets/fonts/forminator-icons-font.woff2 and b/assets/fonts/forminator-icons-font.woff2 differ diff --git a/assets/js/public/forms-section-elements.js b/assets/js/public/forms-section-elements.js index 243cf5c3..39e9b32f 100644 --- a/assets/js/public/forms-section-elements.js +++ b/assets/js/public/forms-section-elements.js @@ -49,6 +49,7 @@ const select = $( this ).find( '.forminator-select' ); const select2 = $( this ).find( '.forminator-select2' ); const slider = $( this ).find( '.forminator-slider' ); + const rating = $( this ).find( '.forminator-rating' ); // Unique id SHOWCASE.uniqueFormField( this ); @@ -80,11 +81,15 @@ FUI.select2(); } + // Load rating field. + if ( rating.length ) { + FUI.rating( rating ); + } + // Load radio and checkbox function FUI.radioStates( radio ); FUI.checkboxStates( checkbox ); FUI.multiSelectStates( multiselect ); - }); }); } diff --git a/assets/scss/forms-appearance/_default.scss b/assets/scss/forms-appearance/_default.scss index 691efbad..e2c6a58c 100644 --- a/assets/scss/forms-appearance/_default.scss +++ b/assets/scss/forms-appearance/_default.scss @@ -638,6 +638,30 @@ color: $dropdown-active--color; } } + + &[aria-multiselectable="true"] { + .select2-results__option--selected { + background-color: $dropdown-active--background; + color: $dropdown-active--color; + + .forminator-checkbox { + .forminator-checkbox-box { + border-color: $dropdown-active--background; + } + } + } + } + } + } + + // Checkbox in dropdown + .forminator-checkbox { + .forminator-checkbox-box { + background: $dropdown-active--color; + + &::before { + color: $dropdown-active--background; + } } } } diff --git a/form-ui.html b/form-ui.html index c8f48e53..7fdba18e 100644 --- a/form-ui.html +++ b/form-ui.html @@ -1046,7 +1046,7 @@

Forminator Forms

' + + '' + + '' + label + '' + + '' ; + + return markup; + }; + FUI.select2 = function() { $( '.forminator-custom-form' ).each( function() { @@ -29,8 +62,9 @@ var $dir, $language = 'en', - $placeholder = 'Search', - $hasSearch = -1 + $placeholder = 'Select', + $hasSearch = -1, + $hasCheckbox = false ; if ( $element.hasClass( 'forminator-design--' + $theme ) && $select.length ) { @@ -39,7 +73,8 @@ var $select = $( this ), $dialog = $select.closest( '.sui-dialog-content' ), - $parent = $dialog.length ? $dialog : $select.closest( '.elementor-popup-modal' ); + $parent = $dialog.length ? $dialog : $select.closest( '.elementor-popup-modal' ), + $dropdownClass = 'forminator-custom-form-' + $formid + ' forminator-dropdown--' + $theme; if ( true === $select.data( 'rtl-support' ) ) { $dir = 'rtl'; @@ -47,13 +82,13 @@ $dir = 'ltr'; } - if ( '' !== $select.data( 'placeholder' ) ) { + if ( $select.data( 'placeholder' ) ) { $placeholder = $select.data( 'placeholder' ); } else { - $placeholder = 'Search'; + $placeholder = 'Select'; } - if ( '' !== $select.data( 'language' ) ) { + if ( $select.data( 'language' ) ) { $language = $select.data( 'language' ); } else { $language = 'en'; @@ -65,6 +100,13 @@ $hasSearch = -1; } + if ( true === $select.data( 'checkbox' ) ) { + $hasCheckbox = true; + $dropdownClass += ' forminator-dropdown--checkbox'; + } else { + $hasCheckbox = false; + } + if ( ! $parent.length ) { $parent = $( document.body ); } @@ -73,11 +115,23 @@ dir: $dir, language: $language, placeholder: $placeholder, - dropdownCssClass: 'forminator-custom-form-' + $formid + ' forminator-dropdown--' + $theme, + dropdownCssClass: $dropdownClass, minimumResultsForSearch: $hasSearch, - dropdownParent: $parent + dropdownParent: $parent, + ...( $hasCheckbox && { + closeOnSelect: false, + templateResult: FUI.select.formatCheckbox, + escapeMarkup: function( markup ) { + return markup; + } + }) }).on( 'select2:opening', function() { - $select.data( 'select2' ).$dropdown.find( ':input.select2-search__field' ).prop( 'placeholder', '' !== $select.data( 'placeholder' ) ? $select.data( 'placeholder' ) : 'Search' ); + if ( $select.data( 'search-placeholder' ) ) { + $select.data( 'select2' ).$dropdown.find( ':input.select2-search__field' ).prop( 'placeholder', $select.data( 'search-placeholder' ) ); + } else { + $select.data( 'select2' ).$dropdown.find( ':input.select2-search__field' ).prop( 'placeholder', $select.data( 'placeholder' ) ? $select.data( 'placeholder' ) : 'Search' ); + } + if ( $select.closest( '.hustle-popup' ).length || $select.closest( '.hustle-slidein' ) ) { $( document.body ).addClass( 'forminator-hustle-dropdown-fix' ); } diff --git a/library/scss/_variables.scss b/library/scss/_variables.scss index 890c8793..392e0f18 100644 --- a/library/scss/_variables.scss +++ b/library/scss/_variables.scss @@ -168,6 +168,10 @@ $icons: ( warning: "\26a0", add: "\e901", remove: "\e902", + star: "\e903", + heart: "\e904", + like: "\e905", + smile: "\e906", ) !default; // ============================================= diff --git a/library/scss/forms/elements/_rating.scss b/library/scss/forms/elements/_rating.scss new file mode 100644 index 00000000..18e43d20 --- /dev/null +++ b/library/scss/forms/elements/_rating.scss @@ -0,0 +1,57 @@ +@include body-class(custom-form, all, false) { + .forminator-rating { + @extend %screen-readers; + } + + .forminator-rating-wrapper { + display: flex; + gap: 10px; + align-items: center; + + &.forminator-rating-focused { + .forminator-rating-items { + border: 1px solid #17a8e3; + } + } + + .forminator-rating-items { + display: flex; + border: 1px solid transparent; + + &.forminator-rating-md { + font-size: 24px; + } + + &.forminator-rating-lg { + font-size: 32px; + } + + &.forminator-rating-sm { + font-size: 16px; + } + + .forminator-rating-item { + padding: 0 5px; + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + } + + .forminator-rating-suffix { + font-size: 13px; + line-height: 22px; + letter-spacing: -0.25px; + } + + .forminator-rating-item { + cursor: pointer; + transition: ease color 0.2s; + } + } +} \ No newline at end of file diff --git a/library/scss/src/form/forminator-form-bold.base.scss b/library/scss/src/form/forminator-form-bold.base.scss index 26c55ea3..ebc6353b 100644 --- a/library/scss/src/form/forminator-form-bold.base.scss +++ b/library/scss/src/form/forminator-form-bold.base.scss @@ -40,6 +40,7 @@ $form-theme: bold; @import "../settings/components/repeater-buttons"; @import "../settings/components/repeater"; @import "../settings/components/slider"; +@import "../settings/components/rating"; // Call Components. @include component-response(#{$form-type}, #{$form-theme}); @@ -56,4 +57,5 @@ $form-theme: bold; @include component-recaptcha(#{$form-type}, #{$form-theme}); @include component-repeater-buttons(#{$form-type}, #{$form-theme}); @include component-repeater(#{$form-type}, #{$form-theme}); -@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file +@include component-slider(#{$form-type}, #{$form-theme}); +@include component-rating(#{$form-type}, #{$form-theme}); \ No newline at end of file diff --git a/library/scss/src/form/forminator-form-default.base.scss b/library/scss/src/form/forminator-form-default.base.scss index 0c44765f..0d70eeb5 100644 --- a/library/scss/src/form/forminator-form-default.base.scss +++ b/library/scss/src/form/forminator-form-default.base.scss @@ -40,6 +40,7 @@ $form-theme: default; @import "../settings/components/repeater-buttons"; @import "../settings/components/repeater"; @import "../settings/components/slider"; +@import "../settings/components/rating"; // Call Components. @include component-response(#{$form-type}, #{$form-theme}); @@ -56,4 +57,5 @@ $form-theme: default; @include component-recaptcha(#{$form-type}, #{$form-theme}); @include component-repeater-buttons(#{$form-type}, #{$form-theme}); @include component-repeater(#{$form-type}, #{$form-theme}); -@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file +@include component-slider(#{$form-type}, #{$form-theme}); +@include component-rating(#{$form-type}, #{$form-theme}); \ No newline at end of file diff --git a/library/scss/src/form/forminator-form-flat.base.scss b/library/scss/src/form/forminator-form-flat.base.scss index 67d618a0..8949deaa 100644 --- a/library/scss/src/form/forminator-form-flat.base.scss +++ b/library/scss/src/form/forminator-form-flat.base.scss @@ -40,6 +40,7 @@ $form-theme: flat; @import "../settings/components/repeater-buttons"; @import "../settings/components/repeater"; @import "../settings/components/slider"; +@import "../settings/components/rating"; // Call Components. @include component-response(#{$form-type}, #{$form-theme}); @@ -56,4 +57,5 @@ $form-theme: flat; @include component-recaptcha(#{$form-type}, #{$form-theme}); @include component-repeater-buttons(#{$form-type}, #{$form-theme}); @include component-repeater(#{$form-type}, #{$form-theme}); -@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file +@include component-slider(#{$form-type}, #{$form-theme}); +@include component-rating(#{$form-type}, #{$form-theme}); diff --git a/library/scss/src/form/forminator-form-material.base.scss b/library/scss/src/form/forminator-form-material.base.scss index 2be2782c..c51e1d33 100644 --- a/library/scss/src/form/forminator-form-material.base.scss +++ b/library/scss/src/form/forminator-form-material.base.scss @@ -40,6 +40,7 @@ $form-theme: material; @import "../settings/components/repeater-buttons"; @import "../settings/components/repeater"; @import "../settings/components/slider"; +@import "../settings/components/rating"; // Call Components. @include component-response(#{$form-type}, #{$form-theme}); @@ -56,4 +57,5 @@ $form-theme: material; @include component-recaptcha(#{$form-type}, #{$form-theme}); @include component-repeater-buttons(#{$form-type}, #{$form-theme}); @include component-repeater(#{$form-type}, #{$form-theme}); -@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file +@include component-slider(#{$form-type}, #{$form-theme}); +@include component-rating(#{$form-type}, #{$form-theme}); diff --git a/library/scss/src/settings/components/_rating.scss b/library/scss/src/settings/components/_rating.scss new file mode 100644 index 00000000..1d804618 --- /dev/null +++ b/library/scss/src/settings/components/_rating.scss @@ -0,0 +1,77 @@ +@mixin component-rating($form-type: no-type, $form-theme: no-theme) { + + @include form-class($form-type, $form-theme, false) { + + .forminator-rating { + @extend %screen-readers; + } + + .forminator-rating-wrapper { + display: flex; + gap: 10px; + align-items: center; + + &.forminator-rating-focused { + .forminator-rating-items { + border: 1px solid #17a8e3; + } + } + + .forminator-rating-items { + display: flex; + border: 1px solid transparent; + + &.forminator-rating-md { + font-size: 24px; + } + + &.forminator-rating-lg { + font-size: 32px; + } + + &.forminator-rating-sm { + font-size: 16px; + } + + .forminator-rating-item { + padding: 0 5px; + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + } + + .forminator-rating-suffix { + font-size: 13px; + line-height: 22px; + letter-spacing: -0.25px; + color: #888; + } + + .forminator-rating-item { + cursor: pointer; + transition: ease color 0.2s; + + [class*=forminator-icon-] { + &:before { + color: #aaa; + } + } + + &.forminator-rating-hover, + &.forminator-rating-selected { + [class*=forminator-icon-] { + &:before { + color: #FF7E41; + } + } + } + } + } + } +} \ 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 77dd0601..fc88ab49 100644 --- a/library/scss/src/settings/components/_select2-dropdown.scss +++ b/library/scss/src/settings/components/_select2-dropdown.scss @@ -83,6 +83,52 @@ } } + // Checkbox in dropdown + .forminator-checkbox { + line-height: 20px; + cursor: pointer; + display: flex; + flex: 0 0 auto; // It works with `.forminator-checkbox__wrapper` element. + align-items: center; + position: relative; + padding: 10px 8px; + gap: 10px; + + 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. &.forminator-dropdown--default { padding: #{$dropdown--padding - $default--border-width} 0; @@ -116,6 +162,16 @@ } } } + + // Checkbox in dropdown + .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: Flat. @@ -147,6 +203,15 @@ } } } + + // 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: Bold. @@ -177,6 +242,15 @@ } } } + + // 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. @@ -206,8 +280,57 @@ } } } + + // Checkbox in dropdown + .forminator-checkbox { + input { + &:checked { + &:focus { + + + .forminator-checkbox-box:after { + animation-name: click-animation; + } + } + + + .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; + } + } + } + } + + // Checkbox in dropdown + &.forminator-dropdown--checkbox { + .select2-results .select2-results__options .select2-results__option { + padding: 0; + } } } + + } } diff --git a/library/scss/src/settings/components/_select2.scss b/library/scss/src/settings/components/_select2.scss index 49a681a3..2d597251 100644 --- a/library/scss/src/settings/components/_select2.scss +++ b/library/scss/src/settings/components/_select2.scss @@ -16,6 +16,24 @@ 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; + } + // TYPE: Single Select. &.select2-selection--single { height: auto; @@ -82,6 +100,12 @@ white-space: nowrap; } + // Multiselect options + ul.select2-selection__rendered { + margin: 0; + list-style: none; + } + // Icon. .select2-selection__arrow { @if ('material' == $form-theme) { @@ -136,6 +160,51 @@ } } + .select2-selection__clear { + order: 2; + width: 30px; + height: 30px; + font-size: 24px; + color: #777771; + } + + // 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 { + font: 500 12px/14px Roboto; + color: #fff; + background: #888888; + padding: 6px 8px; + border-radius: 4px; + display: flex; + align-items: center; + gap: 6px; + + .select2-selection__choice__remove { + font-size: 20px; + color: #fff; + + span { + line-height: 14px; + height: 14px; + display: block; + } + } + } + } + &:hover, &:focus { outline: none; diff --git a/page-forms.html b/page-forms.html index a6a8b190..8c0cd5af 100644 --- a/page-forms.html +++ b/page-forms.html @@ -93,6 +93,7 @@

+ diff --git a/templates/form-elements/field-checkbox.html b/templates/form-elements/field-checkbox.html index 4fea367e..4e7fd758 100644 --- a/templates/form-elements/field-checkbox.html +++ b/templates/form-elements/field-checkbox.html @@ -11,7 +11,7 @@ value="one" id="checkbox-option-1" /> - + Design @@ -24,7 +24,7 @@ value="two" id="checkbox-option-2" /> - + Development @@ -37,7 +37,7 @@ value="three" id="checkbox-option-3" /> - + Technical Support diff --git a/templates/form-elements/field-name-multiple.html b/templates/form-elements/field-name-multiple.html index d393bc86..c982117f 100644 --- a/templates/form-elements/field-name-multiple.html +++ b/templates/form-elements/field-name-multiple.html @@ -6,7 +6,7 @@ - diff --git a/templates/form-elements/field-post-data.html b/templates/form-elements/field-post-data.html index 81cc9bdb..3a764449 100644 --- a/templates/form-elements/field-post-data.html +++ b/templates/form-elements/field-post-data.html @@ -115,7 +115,7 @@ - @@ -138,7 +138,7 @@ - diff --git a/templates/form-elements/field-rating.html b/templates/form-elements/field-rating.html new file mode 100644 index 00000000..a68c66c8 --- /dev/null +++ b/templates/form-elements/field-rating.html @@ -0,0 +1,105 @@ +
+ + + + + + This field is required. + + Optional description for slider. + +
+ +
+ + + + + + This field is required. + + Optional description for slider. + +
+ +
+ + + + + + This field is required. + + Optional description for slider. + +
+ +
+ + + + + + This field is required. + + Optional description for slider. + +
\ No newline at end of file diff --git a/templates/form-elements/field-select-multiple-alt.html b/templates/form-elements/field-select-multiple-alt.html new file mode 100644 index 00000000..57836529 --- /dev/null +++ b/templates/form-elements/field-select-multiple-alt.html @@ -0,0 +1,27 @@ +
+ + + + + + + + Optional description for select field. + +
diff --git a/templates/form-elements/field-select-single.html b/templates/form-elements/field-select-single.html index 4f7cef62..9df63edd 100644 --- a/templates/form-elements/field-select-single.html +++ b/templates/form-elements/field-select-single.html @@ -5,7 +5,7 @@ + diff --git a/templates/form-elements/field-timepicker-inputs.html b/templates/form-elements/field-timepicker-inputs.html index 687b91c2..3d72b79d 100644 --- a/templates/form-elements/field-timepicker-inputs.html +++ b/templates/form-elements/field-timepicker-inputs.html @@ -51,7 +51,7 @@ Meridian Offset - diff --git a/templates/page-forms/section-elements.html b/templates/page-forms/section-elements.html index 190e5161..0b8c5ca2 100644 --- a/templates/page-forms/section-elements.html +++ b/templates/page-forms/section-elements.html @@ -150,6 +150,7 @@

Form Elements

class="forminator-ui forminator-custom-form" data-id="21" data-design="default" + data-grid="open" >
@@ -176,6 +177,7 @@

Form Elements

class="forminator-ui forminator-custom-form" data-id="22" data-design="default" + data-grid="open" >
@@ -372,6 +374,7 @@

Form Elements

class="forminator-ui forminator-custom-form" data-id="51" data-design="default" + data-grid="open" >
@@ -398,6 +401,7 @@

Form Elements

class="forminator-ui forminator-custom-form" data-id="52" data-design="default" + data-grid="open" >
@@ -938,6 +942,7 @@

Form Elements

class="forminator-ui forminator-custom-form" data-id="131" data-design="default" + data-form-id="select-multiple" >
@@ -982,6 +987,32 @@

Form Elements

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
@@ -1086,6 +1117,7 @@

Form Elements

class="forminator-ui forminator-custom-form" data-id="151" data-design="default" + data-grid="open" >
@@ -1112,6 +1144,7 @@

Form Elements

class="forminator-ui forminator-custom-form" data-id="152" data-design="default" + data-grid="open" >
@@ -1267,4 +1300,47 @@

Example

+ +
+ +
+
+ + Rating + +
+
+ +
+ +
+ +
+

Example

+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+
\ No newline at end of file