wickes-css2 2.94.0-develop.2 → 2.94.0-develop.3

package/src/js/emulation/default-store.js

@@ -0,0 +1,97 @@
+var Wick = Wick || {};
+Wick.DefaultStoreProto = {
+  el: {
+    searchStoreForm: '.search-store',
+    $searchStoreWrapInput: $('.search-store__input'),
+    searchStoreErrorClass: 'search-store__input-error',
+    searchStoreInput: '.search-store #postcode',
+    $searchStoreError: $('.form-row__error'),
+    $storeUnavailableSection: $('.store-unavailable'),
+    $listOfStoreForm: $('.list-of-store'),
+    btnCancel: '.my-account_cancel-store',
+    btnLocation: '.btn--location',
+    iconLocation: '.btn--location .icon',
+    errorIconLocation: '.btn--location .icon-error',
+    $bigWins: $('.bw'),
+    $bwActions: $('.bw_act'),
+    $sDetails: $('.s-details_hide'),
+    sDetailsHide: 's-details_hide',
+    $storeMoreLink: $('.store__more a'),
+  },
+  showStoreList() {
+    Wick.DefaultStoreProto.el.$searchStoreError.hide();
+    Wick.DefaultStoreProto.el.$storeUnavailableSection.hide();
+    Wick.DefaultStoreProto.el.$listOfStoreForm.show();
+    Wick.DefaultStoreProto.el.$searchStoreWrapInput.removeClass(Wick.DefaultStoreProto.el.searchStoreErrorClass);
+
+    if (Wick.DefaultStoreProto.el.$bigWins.css('display') === 'none') {
+      Wick.DefaultStoreProto.el.$bigWins.show();
+    }
+
+    if (Wick.DefaultStoreProto.el.$bwActions.css('display') === 'none') {
+      Wick.DefaultStoreProto.el.$bwActions.show();
+    }
+  },
+  showErrorState() {
+    Wick.DefaultStoreProto.el.$searchStoreError.show();
+    Wick.DefaultStoreProto.el.$storeUnavailableSection.show();
+    Wick.DefaultStoreProto.el.$listOfStoreForm.hide();
+    Wick.DefaultStoreProto.el.$searchStoreWrapInput.addClass(Wick.DefaultStoreProto.el.searchStoreErrorClass);
+  },
+  showUnavailableState() {
+    Wick.DefaultStoreProto.el.$storeUnavailableSection.show();
+    Wick.DefaultStoreProto.el.$listOfStoreForm.hide();
+
+    Wick.DefaultStoreProto.el.$sDetails.filter(function () {
+      let isNotElementHide = !$(this).hasClass(Wick.DefaultStoreProto.el.sDetailsHide);
+
+      if (isNotElementHide) {
+        $(this)
+          .closest(Wick.DefaultStoreProto.el.$bigWins)
+          .find(Wick.DefaultStoreProto.el.$storeMoreLink)
+          .text('Store Info');
+      }
+
+      return isNotElementHide;
+    }).addClass(Wick.DefaultStoreProto.el.sDetailsHide);
+  },
+  clearSearchInput() {
+    $(Wick.DefaultStoreProto.el.searchStoreInput).val('');
+    Wick.DefaultStore.checkVisibilityOfClearButton();
+  },
+  toggleErrorStateForLocation() {
+    const iconIsVisible = $(Wick.DefaultStoreProto.el.iconLocation).is(':visible');
+
+    if (iconIsVisible) {
+      $(Wick.DefaultStoreProto.el.iconLocation).hide();
+      $(Wick.DefaultStoreProto.el.errorIconLocation).show();
+    } else {
+      $(Wick.DefaultStoreProto.el.iconLocation).show();
+      $(Wick.DefaultStoreProto.el.errorIconLocation).hide();
+    }
+  },
+  init() {
+    $(Wick.DefaultStoreProto.el.searchStoreForm).on('submit', (event) => {
+      event.preventDefault();
+      const value = Wick.DefaultStore.getPostCode();
+      if (value.length) {
+        Wick.DefaultStoreProto.showStoreList();
+      } else {
+        Wick.DefaultStoreProto.showErrorState();
+      }
+    });
+    $(Wick.DefaultStoreProto.el.btnCancel).on('click', (event) => {
+      event.preventDefault();
+      Wick.DefaultStoreProto.clearSearchInput();
+      Wick.DefaultStoreProto.showUnavailableState();
+    })
+    $(Wick.DefaultStoreProto.el.btnLocation).on('click', (event) => {
+      event.preventDefault();
+      Wick.DefaultStoreProto.toggleErrorStateForLocation();
+    })
+  }
+}
+
+$(document).ready(function () {
+  Wick.DefaultStoreProto.init();
+});

package/src/js/emulation/forms.js

@@ -5,7 +5,7 @@ Wick.Forms = (function(){
     fieldError = '.form-row__error',
     formInvalid = 'form_invalid',
     rowValidationError = 'form-row_validation-error',
-    excludedClassesForForm = ['header', 'quiz-modal__form'],
+    excludedClassesForForm = ['header', 'quiz-modal__form', 'search-store'],
     // validationError = '<div class="form-row__error">Error message here</div>',
     $forgotPassword = $('.link-forgot-password'),
     scenarios = [{

package/src/js/page/default-store.js

@@ -0,0 +1,44 @@
+var Wick = window.Wick || {};
+
+Wick.DefaultStore = {
+  HIDDEN_CLASS_NAME: 'd-none',
+  el: {
+    searchForm: '.search-store',
+    $searchInput: $('.search-store #postcode'),
+    $btnClear: $('.search-store .btn--clear'),
+    $btnSubmit: $('.search-store .btn-search'),
+  },
+  getPostCode () {
+    return Wick.DefaultStore.el.$searchInput.val();
+  },
+  checkVisibilityOfClearButton () {
+    Wick.DefaultStore.el.$btnClear.toggleClass('d-block', Wick.DefaultStore.getPostCode().length > 0);
+  },
+  updateCollapseState() {
+    const dropdowns = $("#openingTimes, #specialTimes, #facilities");
+    const btn = $('[data-toggle="collapse"]');
+
+    if ($(window).width() >= 768) {
+      dropdowns.addClass("show");
+      if (btn.length) {
+        btn.attr("aria-expanded", "true");
+      }
+    } else {
+      dropdowns.removeClass("show");
+      if (btn.length) {
+        btn.attr("aria-expanded", "false");
+      }
+    }
+  },
+  init () {
+    Wick.DefaultStore.updateCollapseState();
+    $(window).resize( _.debounce(function () {
+      Wick.DefaultStore.updateCollapseState();
+    }, 200));
+    Wick.DefaultStore.el.$searchInput.on('input', Wick.DefaultStore.checkVisibilityOfClearButton);
+  }
+}
+
+$(document).ready(function () {
+  Wick.DefaultStore.init();
+});

package/src/js/page/personal-details.js

@@ -24,25 +24,40 @@ Wick.PersonalDetails = {
     formInvalidClass: 'form_invalid',
     notification: '.notification',
     fieldError: '.form-row.form-row_validation-error',
+    changePasswordPopup: '#change-password-popup',
+    globalMessage: '.globalMessages',
   },
-  initialFormState: {},
   errorMessages: {
     errorFirstName: 'Please enter your first name',
     errorSurname: 'Please enter your surname',
-    errorEmail: 'Please enter you email',
-  },
-  fieldToLabelMap: {
-    titleCode: 'Title',
-    firstName: 'First name',
-    lastName: 'Surname',
-    email: 'Email',
-    tradeType: 'How would you describe yourself or your main trade',
+    errorEmail: 'Please enter your email address',
   },
   defaultNotificationConfig: {
-    container: '.globalMessages .col-12',
+    container: '.personal-details .globalMessages',
     closeBtn: true,
     noScrolling: true,
   },
+  isTradeTypeLabel() {
+    return $(Wick.PersonalDetails.el.userForm).find('label:contains("Trade type")').length;
+  },
+  fieldToLabelMap(name) {
+    let currentTradeType = ''
+    if (name === 'tradeType') {
+      currentTradeType = Wick.PersonalDetails.isTradeTypeLabel()
+        ? 'Trade type'
+        : 'How would you describe yourself or your main trade';
+    }
+
+    const fieldMap = {
+      titleCode: 'Title',
+      firstName: 'First name',
+      lastName: 'Surname',
+      email: 'Email address',
+      tradeType: currentTradeType,
+    };
+
+    return fieldMap[name] || name;
+  },
   getFieldsConfigurations: function () {
     return [
       {
@@ -111,11 +126,11 @@ Wick.PersonalDetails = {
           text: response.globalMessage.message,
           type: 'success',
         });
-        Wick.PersonalDetails.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-        Wick.PersonalDetails.updateUserInformationSection(Wick.PersonalDetails.initialFormState);
-        Wick.PersonalDetails.updateFormFields(Wick.PersonalDetails.initialFormState);
+        Wick.LeaveEvent.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+        Wick.PersonalDetails.updateUserInformationSection(Wick.LeaveEvent.initialFormState);
+        Wick.PersonalDetails.updateFormFields(Wick.LeaveEvent.initialFormState);
         Wick.PersonalDetails.hideForm();
-        Wick.LeaveEvent.removeLeaveEvent();
+        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
       })
       .catch((error) => {
         Wick.Notification.show({
@@ -124,11 +139,12 @@ Wick.PersonalDetails = {
           type: 'error',
         });
         Wick.PersonalDetails.handleFieldErrors(error);
+        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
       });
   },
-  handleFieldErrors(fieldErrors) {
-    if (fieldErrors && fieldErrors.length) {
-      fieldErrors.forEach((fieldError) => {
+  handleFieldErrors(error) {
+    if (error.fieldErrors && error.fieldErrors.length) {
+      error.fieldErrors.forEach((fieldError) => {
         const field = `#${fieldError.field}`;
         updateStylingError(field, false, fieldError.message);
       });
@@ -136,6 +152,15 @@ Wick.PersonalDetails = {
   },
   submitForm(event) {
     event.preventDefault();
+    Wick.PersonalDetails.trimAndRewriteInputs(Wick.PersonalDetails.el.userForm);
+
+    if (!Wick.PersonalDetails.hasUnsavedChanges()) {
+      Wick.PersonalDetails.hideForm();
+      $(Wick.PersonalDetails.el.notification).remove();
+      Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
+      return;
+    }
+
     if (Wick.PersonalDetails.validateForm()) {
       Wick.PersonalDetails.requestToUpdateForm();
     } else {
@@ -144,6 +169,7 @@ Wick.PersonalDetails = {
         text: 'Please correct the errors below.',
         type: 'error',
       });
+      Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
     }
   },
   updateUserInformationSection(personalDetails) {
@@ -153,27 +179,36 @@ Wick.PersonalDetails = {
 
     $userInformationList.empty();
 
-    personalDetails.forEach(({ name, value }) => {
-      const label = Wick.PersonalDetails.fieldToLabelMap[name] || name;
-
+    personalDetails.forEach(({ name, value, text }) => {
+      const label = Wick.PersonalDetails.fieldToLabelMap(name);
+      const textField = text || value
       $userInformationList.append(
         userInformationField({
           label,
-          value,
+          textField,
         })
       );
     });
+
+    Wick.PersonalDetails.hideParentListItemIfLabelExists('CSRFToken');
   },
   updateFormFields(personalDetails) {
-    personalDetails.forEach(({ name, value }) => {
+    personalDetails.forEach(({ name, value, text }) => {
       const field = document.querySelector(`#${name}`);
       if (field) {
-        field.value = value || '';
-        field.setAttribute('value', value || '');
-
-        if (field.tagName === 'SELECT' || field.tagName === 'INPUT') {
-          field.value = value || '';
-          field.setAttribute('value', value || '');
+        if (field.tagName === 'INPUT') {
+          field.value = text || value || '';
+          field.setAttribute('value', text || value || '');
+        } else {
+          const options = field.querySelectorAll('option');
+          options.forEach(option => {
+            if (option.textContent.trim() === value || option.value === value) {
+              option.setAttribute('selected', 'selected');
+              field.value = option.value;
+            } else {
+              option.removeAttribute('selected');
+            }
+          });
         }
       }
     });
@@ -182,18 +217,21 @@ Wick.PersonalDetails = {
     Wick.PersonalDetails.hideForm();
     $(Wick.PersonalDetails.el.notification).remove();
     $(Wick.LeaveEvent.el.leavePopup).modal('hide');
-    Wick.PersonalDetails.updateFormFields(Wick.PersonalDetails.initialFormState);
+    Wick.PersonalDetails.updateFormFields(Wick.LeaveEvent.initialFormState);
+  },
+  hasUnsavedChanges() {
+    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+
+    return !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
   },
   changePasswordHandler(event) {
     const changePasswordUrl = $(Wick.PersonalDetails.el.btnChangePassword).attr('href');
-    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-    const isDifferent = !_.isEqual(currentState, Wick.PersonalDetails.initialFormState);
 
-    if (isDifferent) {
+    if (Wick.PersonalDetails.hasUnsavedChanges()) {
       event.preventDefault();
-      $(Wick.LeaveEvent.el.leavePopup).modal('show');
+      $(Wick.PersonalDetails.el.changePasswordPopup).modal('show');
       Wick.LeaveEvent.proceedBrowserLeave = true;
-      $(Wick.LeaveEvent.el.leavePopup).find(Wick.PersonalDetails.el.btnContinue).off('click').on('click', function () {
+      $(Wick.PersonalDetails.el.changePasswordPopup).find(Wick.PersonalDetails.el.btnContinue).off('click').on('click', function () {
         Wick.LeaveEvent.removeLeaveEvent();
         $(Wick.LeaveEvent.el.leavePopup).modal('hide');
         window.location.href = changePasswordUrl;
@@ -202,9 +240,40 @@ Wick.PersonalDetails = {
       window.location.href = changePasswordUrl;
     }
   },
+  hideParentListItemIfLabelExists(labelText) {
+    const label = $(Wick.PersonalDetails.el.userInformationList).find(`label:contains("${labelText}")`);
+
+    if (label.length > 0) {
+      label.closest('li').hide();
+    }
+  },
+  scrollToElement(element) {
+    const globalMessage = $(element);
+
+    if (globalMessage.length > 0) {
+      $('html, body').animate({
+        scrollTop: globalMessage.offset().top - 20
+      }, 300);
+    }
+  },
+  trimAndRewriteInputs(formSelector) {
+    const $form = $(formSelector);
+
+    if (!$form.length) {
+      return;
+    }
+
+    $form.find('input[type="text"], input[type="email"]').each(function () {
+      $(this).val($.trim($(this).val()));
+    });
+  },
   init: function () {
-    Wick.LeaveEvent.bindEvent(Wick.PersonalDetails.el.userForm, Wick.PersonalDetails.el.btnCancel, Wick.PersonalDetails.el.btnContinue, Wick.PersonalDetails.resetFormToInitialState);
-    Wick.PersonalDetails.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm)
+    Wick.LeaveEvent.bindEvent(
+      Wick.PersonalDetails.el.userForm,
+      Wick.PersonalDetails.el.btnCancel,
+      Wick.PersonalDetails.el.btnContinue,
+      Wick.PersonalDetails.resetFormToInitialState
+    );
 
     $(Wick.PersonalDetails.el.btnEdit).on('click', Wick.PersonalDetails.showForm);
     $(Wick.PersonalDetails.el.btnSave).on('click', Wick.PersonalDetails.submitForm);

package/src/page_default-store-page-empty.html

@@ -0,0 +1,48 @@
+{{#extend "my-account-v2" dataBreadcrumbs=default-store.breadcrumbs pageClass="page_my-account_new" title="Default Store Page" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="default-store"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_default-store.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=default-store.menu
+          active-index=6
+          page-name=default-store.menu.[6].title
+          }}
+    </div>
+  </div>
+</div>
+
+<div class="container default-store__wrap">
+  <div class="row">
+    <div class="col-12 d-md-none">
+      <h1 class="default-store__title">{{default-store.title}}</h1>
+    </div>
+    <div class="col-12 col-md-6 default-store__search">
+      <div class="default-store__header">
+        <h1 class="default-store__title d-none d-md-block">{{default-store.title}}</h1>
+        <p class="default-store__subtitle">{{default-store.subtitle}}</p>
+      </div>
+      {{> default-store/store-form
+          default-store.searchField
+      }}
+      {{> default-store/store-unavailable
+          default-store.unavailable
+      }}
+      {{> default-store/list-of-store
+          style="display: none;"
+      }}
+    </div>
+    <div class="col-12 col-md-6">
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+<script defer src="./js/default-store.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_default-store-page.html

@@ -0,0 +1,55 @@
+{{#extend "my-account-v2" dataBreadcrumbs=default-store.breadcrumbs pageClass="page_my-account_new" title="Default Store Page" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="default-store"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_default-store.css">
+{{/content}}
+{{#content "notification"}}
+  <div class="globalMessages">
+    <div class="container">
+      {{> notifications notification-page.success withCloseBtn="true"}}
+    </div>
+  </div>
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      menu=default-store.menu
+      active-index=6
+      page-name=default-store.menu.[6].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container default-store__wrap">
+  <div class="row">
+    <div class="col-12 d-md-none">
+      <h1 class="default-store__title">{{default-store.title}}</h1>
+    </div>
+    <div class="col-12 col-md-6 default-store__search">
+      <div class="default-store__header">
+        <h1 class="default-store__title d-none d-md-block">{{default-store.title}}</h1>
+        <p class="default-store__subtitle default-store__subtitle--change">{{default-store.subtitleChange}}</p>
+      </div>
+      {{> default-store/store-form
+          default-store.searchField
+      }}
+      {{> default-store/list-of-store
+          style="display: none;"
+      }}
+    </div>
+    <div class="col-12 col-md-6">
+      {{> default-store/current-store
+          default-store.currentStore
+      }}
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+<script defer src="./js/default-store.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_personal-details-installer.html

@@ -1,13 +1,18 @@
-{{#extend "my-account-v2" dataBreadcrumbs=personal_details.installer.breadcrumbs pageClass="page_my-account_new" title="My Account DIY" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="personal-details"}}
+{{#extend "my-account-v2"
+  customIconUserClass=my_account.installer.icons.installer
+  dataBreadcrumbs=personal_details.installer.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account Installer"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="personal-details"
+}}
 {{#content "head" mode="append"}}
 <link type="text/css" rel="stylesheet" href="./css/pages/page_personal-details.css">
 {{/content}}
 {{#content "notification"}}
-<div class="globalMessages container">
-  <div class="row">
-    <div class="col-12">
-    </div>
-  </div>
+<div class="globalMessages">
 </div>
 {{/content}}
 {{#content "main"}}
@@ -33,6 +38,7 @@
           details=personal_details.installer.currentData
       }}
       {{> my-account/personal-details-form
+          isInstaller=true
           fields=personal_details.installer.fields
           buttons=personal_details.buttons
       }}
@@ -43,9 +49,13 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 {{> my-account/leave-modal
-personal_details.leave-popup
+personal_details.reset-popup
 id="leave-popup"
 }}
+{{> my-account/leave-modal
+personal_details.leave-popup
+id="change-password-popup"
+}}
 <script defer src="./js/my-account.min.js"></script>
 <script defer src="./js/personal-details.min.js"></script>
 {{/content}}

package/src/page_personal-details.html

@@ -1,13 +1,17 @@
-{{#extend "my-account-v2" dataBreadcrumbs=personal_details.diy.breadcrumbs pageClass="page_my-account_new" title="My Account DIY" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="personal-details"}}
+{{#extend "my-account-v2"
+  dataBreadcrumbs=personal_details.diy.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account DIY"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="personal-details"
+}}
 {{#content "head" mode="append"}}
 <link type="text/css" rel="stylesheet" href="./css/pages/page_personal-details.css">
 {{/content}}
 {{#content "notification"}}
-<div class="globalMessages container">
-  <div class="row">
-    <div class="col-12">
-    </div>
-  </div>
+<div class="globalMessages">
 </div>
 {{/content}}
 {{#content "main"}}
@@ -43,9 +47,13 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 {{> my-account/leave-modal
-    personal_details.leave-popup
+    personal_details.reset-popup
     id="leave-popup"
 }}
+{{> my-account/leave-modal
+    personal_details.leave-popup
+    id="change-password-popup"
+}}
 <script defer src="./js/my-account.min.js"></script>
 <script defer src="./js/personal-details.min.js"></script>
 {{/content}}

package/src/scss/components/_big-wins-critical.scss

@@ -249,7 +249,6 @@
       margin-bottom: 15px;
 
       .store {
-        &__act,
         &__count {
           display: none;
         }

package/src/scss/components/_big-wins.scss

@@ -536,7 +536,6 @@
       margin-bottom: 15px;
 
       .store {
-        &__act,
         &__count {
           display: none;
         }
@@ -638,12 +637,6 @@
 
     .stock__store {
       padding-bottom: 40px;
-
-      .store__act {
-        padding-top: 7px;
-        position: absolute;
-        color: $blue;
-      }
     }
 
     .stock__tabs {
@@ -881,7 +874,7 @@
     }
 
     &_cell {
-      border: 2px solid $gray-light;
+      border: 1px solid $gray-light;
 
       &:nth-child(2n+1) {
         padding-left: 20px;

package/src/scss/components/_order-item-cc.scss

@@ -98,12 +98,6 @@
     }
   }
 
-  & .store {
-    &__act {
-      display: none;
-    }
-  }
-
   &__store-info {
     @include make-col(12);
     margin-top: 15px;

package/src/scss/pages/_my-account_new.scss

@@ -638,10 +638,6 @@
     align-items: center;
     padding: 17px 0 15px 10px;
 
-    &__act {
-      display: none;
-    }
-
     &__info {
       align-self: flex-start;
     }
@@ -759,7 +755,6 @@
       margin-bottom: 15px;
 
       .store {
-        &__act,
         &__count {
           display: none;
         }
@@ -860,12 +855,6 @@
 
     .stock__store {
       padding-bottom: 40px;
-
-      .store__act {
-        padding-top: 7px;
-        position: absolute;
-        color: $blue;
-      }
     }
 
     .stock__tabs {
@@ -1117,7 +1106,7 @@
     }
 
     &_cell {
-      border: 2px solid $gray-light;
+      border: 1px solid $gray-light;
 
       &:nth-child(2n+1) {
         padding-left: 20px;