fixed subscriptions webform interactivity

sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -7405,9 +7405,9 @@ body.page-node-11187 .node-11187 .field-name-body {
   @media only screen and (min-width: 40.0625em) {
     #webform-client-form-11186 {
       padding: 10px 30px; }
-      #webform-client-form-11186 #webform-component-column-left--membership-options {
+      #webform-client-form-11186 .webform-component--column-left--membership-options {
         margin: 10px 0; }
-        #webform-client-form-11186 #webform-component-column-left--membership-options label {
+        #webform-client-form-11186 .webform-component--column-left--membership-options label {
           width: auto; }
       #webform-client-form-11186 fieldset {
         border-radius: 5px;
@@ -7454,11 +7454,11 @@ body.page-node-11187 .node-11187 .field-name-body {
   @media only screen and (min-width: 40.0625em) and (max-width: 64em) {
     #webform-client-form-11186 {
       padding: 10px; }
-      #webform-client-form-11186 #webform-component-column-left--membership-options {
+      #webform-client-form-11186 .webform-component--column-left--membership-options {
         margin: 0 0 10px 0; }
-        #webform-client-form-11186 #webform-component-column-left--membership-options .form-item {
+        #webform-client-form-11186 .webform-component--column-left--membership-options .form-item {
           width: 100%; }
-        #webform-client-form-11186 #webform-component-column-left--membership-options label {
+        #webform-client-form-11186 .webform-component--column-left--membership-options label {
           width: 75%; }
       #webform-client-form-11186 legend {
         margin: 0;
@@ -7479,7 +7479,7 @@ body.page-node-11187 .node-11187 .field-name-body {
         margin-right: 0.5em; }
       #webform-client-form-11186 input.form-text, #webform-client-form-11186 select.form-select {
         width: 60%; }
-      #webform-client-form-11186 #webform-component-infos {
+      #webform-client-form-11186 .webform-component-infos {
         font-size: 14px; } }
   #webform-client-form-11186 .fieldset-wrapper > .form-item {
     display: moz-inline-stack;
@@ -7487,7 +7487,7 @@ body.page-node-11187 .node-11187 .field-name-body {
     vertical-align: top;
     zoom: 1;
     *display: inline; }
-  #webform-client-form-11186 #webform-component-column-left {
+  #webform-client-form-11186 fieldset.webform-component--column-left {
     display: moz-inline-stack;
     display: inline-block;
     vertical-align: top;
@@ -7495,21 +7495,21 @@ body.page-node-11187 .node-11187 .field-name-body {
     *display: inline;
     width: 25%;
     border: none; }
-  #webform-client-form-11186 #webform-component-column-right {
+  #webform-client-form-11186 fieldset.webform-component--column-right {
     display: moz-inline-stack;
     display: inline-block;
     vertical-align: top;
     zoom: 1;
     *display: inline;
-    min-width: 70%; }
-  #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio {
+    max-width: 70%; }
+  #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio {
     border: 1px solid #ddd;
     border-radius: 5px;
     background-clip: padding-box;
     padding: 10px 5px;
     margin: 5px 0;
     background-color: #fff; }
-    #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio input {
+    #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio input {
       display: moz-inline-stack;
       display: inline-block;
       vertical-align: top;
@@ -7517,7 +7517,7 @@ body.page-node-11187 .node-11187 .field-name-body {
       *display: inline;
       vertical-align: middle;
       margin: 0px 5px; }
-    #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio label {
+    #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio label {
       font-size: 20px;
       font-weight: 700;
       display: moz-inline-stack;
@@ -7527,54 +7527,59 @@ body.page-node-11187 .node-11187 .field-name-body {
       *display: inline;
       vertical-align: middle;
       margin: 0; }
-    #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio:hover {
+    #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio:hover {
       -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
-    #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:nth-child(1) {
+    #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:nth-child(1) {
       background-color: #69CDCF; }
-    #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:nth-child(2) {
+    #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:nth-child(2) {
       background-color: #D476AE; }
-    #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:nth-child(3) {
+    #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:nth-child(3) {
       background-color: #E6DE1C; }
-    #webform-client-form-11186 #webform-component-column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:not(.selected) {
+    #webform-client-form-11186 .webform-component--column-left--membership-options .form-type-radio.form-item-submitted-column-left-membership-options:not(.selected) {
       opacity: 0.4; }
-  #webform-client-form-11186 #webform-component-column-left--membership-options > label {
+  #webform-client-form-11186 .webform-component--column-left--membership-options > label {
     width: 200px;
     font-size: 18px;
     font-weight: 700; }
-  #webform-client-form-11186 #webform-component-column-left--membership-options label {
+  #webform-client-form-11186 .webform-component--column-left--membership-options label {
     border: 0; }
-  #webform-client-form-11186 #webform-component-column-right--me--my-account-email {
+  #webform-client-form-11186 .webform-component--column-right--me--my-account-email {
     display: block; }
-  #webform-client-form-11186 #webform-component-column-right--company--administrative-e-mail .description {
+  #webform-client-form-11186 .webform-component--column-right--company--administrative-e-mail .description {
     display: moz-inline-stack;
     display: inline-block;
     vertical-align: top;
     zoom: 1;
     *display: inline; }
   #webform-client-form-11186 #addressfield-wrapper {
-    margin-top: 1em; }
+    margin-top: 1em;
+    display: moz-inline-stack;
+    display: inline-block;
+    vertical-align: top;
+    zoom: 1;
+    *display: inline; }
   #webform-client-form-11186 .street-block .form-item {
     display: moz-inline-stack;
     display: inline-block;
     vertical-align: top;
     zoom: 1;
     *display: inline; }
-  #webform-client-form-11186 #webform-component-column-right--collaborators {
+  #webform-client-form-11186 .webform-component--column-right--collaborators {
     margin: 20px 0;
     overflow: hidden; }
-    #webform-client-form-11186 #webform-component-column-right--collaborators fieldset {
+    #webform-client-form-11186 .webform-component--column-right--collaborators fieldset {
       display: moz-inline-stack;
       display: inline-block;
       vertical-align: top;
       zoom: 1;
       *display: inline;
       width: 33%; }
-    #webform-client-form-11186 #webform-component-column-right--collaborators .form-item {
+    #webform-client-form-11186 .webform-component--column-right--collaborators .form-item {
       display: block; }
-    #webform-client-form-11186 #webform-component-column-right--collaborators label {
+    #webform-client-form-11186 .webform-component--column-right--collaborators label {
       width: 6em; }
-    #webform-client-form-11186 #webform-component-column-right--collaborators input {
+    #webform-client-form-11186 .webform-component--column-right--collaborators input {
       width: 11em; }
   #webform-client-form-11186 #webform-component-infos {
     margin: 20px 0; }
@@ -7604,21 +7609,21 @@ body.page-node-11187 .node-11187 .field-name-body {
         -webkit-transition: text-shadow 0s ease-out;
         transition: text-shadow 0s ease-out;
         text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
-  #webform-client-form-11186 #webform-component-column-right--news-letters > label {
+  #webform-client-form-11186 .webform-component--column-right--news-letters > label {
     margin: 0;
     font-size: 18px;
     font-weight: 700;
     border: none;
     line-height: 40px; }
-  #webform-client-form-11186 #webform-component-column-right--news-letters .form-item {
+  #webform-client-form-11186 .webform-component--column-right--news-letters .form-item {
     display: moz-inline-stack;
     display: inline-block;
     vertical-align: top;
     zoom: 1;
     *display: inline; }
-    #webform-client-form-11186 #webform-component-column-right--news-letters .form-item label {
+    #webform-client-form-11186 .webform-component--column-right--news-letters .form-item label {
       width: auto; }
-    #webform-client-form-11186 #webform-component-column-right--news-letters .form-item input, #webform-client-form-11186 #webform-component-column-right--news-letters .form-item label {
+    #webform-client-form-11186 .webform-component--column-right--news-letters .form-item input, #webform-client-form-11186 .webform-component--column-right--news-letters .form-item label {
       margin: 0; }
   #webform-client-form-11186 #edit-submitted-terms-of-services {
     margin-bottom: 0.5em; }

sites/all/themes/gui/materiobasetheme/js/script.js

@@ -1510,7 +1510,7 @@
     * Statics
     */
     function initMembershipForm() {
-
+      // console.log("initMembershipForm");
       switch(window.location.hash){
         case '#a':
           $('#edit-submitted-column-left-membership-options-1').attr('checked', 'checked');
@@ -1527,14 +1527,18 @@
         //   break
       }
 
-      $('#webform-component-column-left--membership-options')
+      $('.webform-component--column-left--membership-options') // input.form-radio
         .change(function(event){
-          //trace('changed');
-          if( $('input[type="radio"]:checked', this).is('#edit-submitted-column-left-membership-options-3') ){
-            $('#webform-component-column-right--collaborators').show();
-          }else{
-            $('#webform-component-column-right--collaborators').hide();
-          }
+          // trace('changed');
+          // console.log("Changed");
+          
+          // replaced by conditional built in webform
+          // if( $('input[type="radio"]:checked', this).is('#edit-submitted-column-left-membership-options-3') ){
+          //   $('.webform-component-column-right--collaborators').show();
+          // }else{
+          //   $('.webform-component-column-right--collaborators').hide();
+          // }
+          
           $('div.form-item.selected', this).removeClass('selected');
           $('input[type="radio"]:checked', this).parents('div.form-item').addClass('selected');
         })

sites/all/themes/gui/materiobasetheme/package.json

@@ -7,7 +7,7 @@
   "license": "GPLv3",
   "homepage": "https://materio.com",
   "devDependencies": {
-    "gulp": "latest",
+    "gulp": "<4",
     "gulp-autoprefixer": "^4.1.0",
     "gulp-jsmin": "latest",
     "gulp-rename": "latest",

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -2811,7 +2811,7 @@ body.page-node-11187{
 #webform-client-form-11186{
   @media #{$medium-up}{
     padding: 10px 30px;
-    #webform-component-column-left--membership-options{
+    .webform-component--column-left--membership-options{
       margin: 10px 0;
       label{width:auto;}
     }
@@ -2828,7 +2828,7 @@ body.page-node-11187{
 
   @media #{$medium-only}{
     padding: 10px;
-    #webform-component-column-left--membership-options{
+    .webform-component--column-left--membership-options{
       margin: 0 0 10px 0;
       .form-item{width:100%;}
       label{ width:75%; }
@@ -2837,17 +2837,17 @@ body.page-node-11187{
     .form-item{ margin: 0; float:none;}
     label{ @include fs12; width:30%; @include inlineblock; vertical-align:middle; margin-right:0.5em; }
     input.form-text, select.form-select{width:60%;}
-    #webform-component-infos{@include fs14;}
+    .webform-component-infos{@include fs14;}
   } //change this
 
   background-color: #e6e6e6; @include rounded(10px);
 
   .fieldset-wrapper>.form-item{ @include inlineblock;  }
 
-  #webform-component-column-left{@include inlineblock; width:25%; border:none;}
-  #webform-component-column-right{ @include inlineblock; min-width:70%;}
+  fieldset.webform-component--column-left{@include inlineblock; width:25%; border:none;}
+  fieldset.webform-component--column-right{ @include inlineblock; max-width:70%;}
 
-  #webform-component-column-left--membership-options{
+  .webform-component--column-left--membership-options{
 
     .form-type-radio{
       border:1px solid #ddd; @include rounded(5px); padding: 10px 5px; margin: 5px 0;
@@ -2866,18 +2866,18 @@ body.page-node-11187{
     label{ border: 0; }
   }
 
-  #webform-component-column-right--me--my-account-email{
+  .webform-component--column-right--me--my-account-email{
       display:block;
     }
 
-  #webform-component-column-right--company--administrative-e-mail{
+  .webform-component--column-right--company--administrative-e-mail{
     .description{@include inlineblock;}
   }
 
-  #addressfield-wrapper{ margin-top:1em; }
+  #addressfield-wrapper{ margin-top:1em; @include inlineblock; }
   .street-block .form-item{ @include inlineblock; }
 
-  #webform-component-column-right--collaborators{
+  .webform-component--column-right--collaborators{
     margin: 20px 0; overflow:hidden;
     fieldset{@include inlineblock; width:33%;}
     .form-item{display:block;}
@@ -2901,7 +2901,7 @@ body.page-node-11187{
     }
   }
 
-  #webform-component-column-right--news-letters{
+  .webform-component--column-right--news-letters{
     >label{margin: 0; @include fs18; @include fs700; border:none; line-height:40px}
     .form-item{
       @include inlineblock();