Skip to content

Commit

Permalink
Merge pull request #79 from wpmudev/new/FOR-511
Browse files Browse the repository at this point in the history 
New/for 511
  • Loading branch information
@emgk
emgk authored Sep 19, 2024
2 parents d78eb8a + c7d45e4 commit 9cde118
Show file tree
Hide file tree
Showing 22 changed files with 1,096 additions and 828 deletions.
1 change: 1 addition & 0 deletions library/js/select2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
'bold',
'flat',
'default',
'basic',
'material',
'none'
];
Expand Down
72 changes: 72 additions & 0 deletions library/scss/forminator-base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
@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";

// Mixins
@import "mixins/body-class";
@import "mixins/breakpoints";
@import "mixins/opacity";
@import "mixins/animations";
@import "mixins/icons";

// Helpers
@import "helpers/screen-readers";

// Fields
@import "src/settings/components/rating";
@import "src/settings/components/paypal";
@import "src/settings/components/stripe";
@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";
@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});
@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-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 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});
25 changes: 25 additions & 0 deletions library/scss/src/form/forminator-form-basic.select2.scss
View file
Original file line number Diff line number Diff line change
@@ -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});
127 changes: 73 additions & 54 deletions library/scss/src/settings/components/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -51,63 +56,70 @@ $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);
}

@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;
}
}
}
}

.forminator-checkbox-box {
@if ('basic' == $form-theme) {
display: none;
}
~ span {
margin-left: 10px;
}
Expand Down Expand Up @@ -237,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 {
Expand Down
11 changes: 9 additions & 2 deletions library/scss/src/settings/components/_description.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@

.forminator-description {
display: flex;
line-height: 1.5em;
@if ('basic' != $form-theme) {
line-height: 1.5em;
}

span {
min-width: 80px;
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions library/scss/src/settings/components/_e-signature.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 5 additions & 3 deletions library/scss/src/settings/components/_input-with-icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,17 @@
@if ('material' != $form-theme) {
position: relative;
}

@else {
display: flex;
align-items: center;
}

[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;
}
Expand All @@ -26,7 +29,6 @@
@if ('material' != $form-theme) {
transform: translateY(-50%);
}
transition: map-get($transition, ease);

&:before {
color: inherit;
Expand All @@ -47,7 +49,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) {
Expand Down
24 changes: 13 additions & 11 deletions library/scss/src/settings/components/_input-with-prefix.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 9cde118

Please sign in to comment.