wickes-css2 2.96.0-develop.6 → 2.96.0-develop.7

package/src/scss/pages/page_ti.scss

@@ -2,9 +2,7 @@
 
 .ti {
   &__step,
-  &__estimate,
-  &__new,
-  &__next {
+  &__estimate {
     display: flex;
   }
 
@@ -15,43 +13,9 @@
     align-content: flex-start;
     justify-content: flex-start;
 
-    &1,
-    &2-inactive,
-    &2-active,
-    &3-active {
+    &1 {
       @include ti-step-state;
     }
-
-    &2-inactive {
-      & .ti__cost-ready {
-        display: flex;
-      }
-    }
-
-    &2-active {
-      & .ti__cost {
-        display: flex;
-      }
-    }
-
-    &3-active {
-      & .ti__choose {
-        display: flex;
-      }
-    }
-  }
-
-  &__step1-return,
-  &__step2-return {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    cursor: pointer;
-    font-size: $font-size-base;
-    font-weight: 500;
-    line-height: 22px;
-    transform: translateY(-50%);
-    display: none;
   }
 
   &__card,
@@ -60,11 +24,7 @@
   }
 
   &__estimate,
-  &__error,
-  &__new,
-  &__next,
-  &__cost,
-  &__choose {
+  &__error {
     @include make-col(12);
   }
 
@@ -132,521 +92,6 @@
     }
   }
 
-  &__new {
-    justify-content: center;
-
-    &-link {
-      font-size: $font-size-base;
-      font-weight: bold;
-      line-height: 22px;
-
-      a {
-        position: relative;
-        top: 5px;
-        cursor: pointer;
-        border-bottom: 1px solid $blue;
-        text-decoration: none;
-
-        &:hover {
-          border-bottom-color: $link-hover-color;
-        }
-      }
-    }
-  }
-
-  &__next {
-    margin: 20px 0 0;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-
-    &-two {
-      display: none;
-    }
-
-    & .btn {
-      max-width: 380px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &-button-arrow {
-      @include primary-text;
-      font-weight: 700;
-      text-align: center;
-      padding-left: 10px;
-    }
-  }
-
-  &__cost {
-    display: none;
-    flex-wrap: wrap;
-    padding-top: 15px;
-
-    &_input-invalid {
-      .ti__cost {
-        &_removal-input {
-          & input {
-            border-color: $red;
-          }
-        }
-
-        &_removal_error-msg {
-          display: block;
-        }
-      }
-    }
-
-    &_error-msg,
-    &_removal_error-msg {
-      @include additional-text;
-      width: 100%;
-      margin: 8px 0 0;
-      color: $red;
-      display: none;
-    }
-
-    &-ready,
-    &_postcode,
-    &_removal,
-    &_levelling,
-    &_options {
-      @include make-col(12);
-    }
-
-    &-ready {
-      display: none;
-      flex-wrap: wrap;
-    }
-
-    &_postcode {
-      padding: 30px 20px;
-      background: $gray-bg;
-
-      &-row,
-      &-label {
-        @include primary-text;
-        font-weight: 500;
-      }
-
-      &-row {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        margin: 0;
-      }
-
-      &-label {
-        display: block;
-        position: relative;
-
-        &::before {
-          content: '*';
-          display: inline-block;
-          color: $red;
-          padding-right: 4px;
-        }
-      }
-
-      &-input {
-        padding-left: 15px;
-        width: 100px;
-
-        & input {
-          padding: 8px;
-
-          .ti__cost-invalid & {
-            border-color: $red;
-          }
-        }
-      }
-    }
-
-    &_removal,
-    &_levelling {
-      margin: 15px 0;
-      padding: 20px;
-      background: $gray-bg;
-
-      &-title,
-      &-label {
-        @include primary-text;
-        font-weight: 500;
-      }
-
-      &-title {
-        margin: 0;
-        display: flex;
-
-        &::before {
-          content: '*';
-          display: inline-block;
-          color: $red;
-          padding-right: 8px;
-        }
-      }
-
-      &-radio {
-        margin: 10px 0 0;
-
-        & label {
-          padding: 0 35px;
-        }
-      }
-
-      &-row {
-        margin: 15px 0 10px;
-        display: none;
-        align-items: center;
-
-        &.ti__cost_removal-row {
-          margin: 15px 0 0;
-        }
-
-        .ti__cost_removal-yes & {
-          display: flex;
-        }
-      }
-
-      &-label {
-        padding-right: 15px;
-      }
-
-      &-input {
-        width: 60px;
-        flex-shrink: 0;
-
-        & input {
-          text-align: center;
-          padding: 8px;
-        }
-      }
-    }
-
-    &_options {
-      padding: 20px;
-      background: $gray-bg;
-      margin: 0;
-
-      & .collapsed .icon {
-        position: relative;
-        transform: rotate(180deg);
-      }
-
-      &-title,
-      &-what {
-        font-size: 1rem;
-        font-weight: 500;
-        display: flex;
-      }
-
-      &-title {
-        &::before {
-          content: '*';
-          display: inline-block;
-          color: $red;
-          padding-right: 8px;
-        }
-      }
-
-      &-what {
-        color: $blue;
-        line-height: 19px;
-        text-decoration: underline;
-        cursor: pointer;
-        align-items: center;
-
-        & span:first-child {
-          padding-right: 2px;
-        }
-
-        & .icon {
-          width: 15px;
-          height: 100%;
-          display: block;
-          line-height: inherit;
-        }
-      }
-
-      &-list {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: -1px;
-      }
-
-      &-item {
-        @include make-col(4);
-        margin-top: 15px;
-        padding-right: 5px;
-      }
-    }
-
-    &_options,
-    &_levelling {
-      &-title {
-        line-height: 24px;
-        margin-bottom: 5px;
-      }
-
-      & .notification {
-        margin-top: 5px;
-        margin-bottom: 0;
-        padding: 8px 25px 8px 15px;
-        line-height: 22px;
-      }
-
-      & .collapsed .icon {
-        position: relative;
-        transform: rotate(180deg);
-      }
-    }
-
-    &_levelling {
-      display: none;
-
-      &_open {
-        display: block;
-        margin-bottom: 0;
-      }
-    }
-
-    &-invalid,
-    &-invalid-2 {
-      & .ti__cost_error-msg {
-        display: block;
-      }
-    }
-  }
-
-  &__choose {
-    display: none;
-    flex-wrap: wrap;
-
-    &_title {
-      width: 100%;
-      padding: 20px 0 10px;
-      margin-bottom: 0;
-    }
-
-    &_first {
-      width: 100%;
-
-      .notification_general {
-        margin: 0;
-      }
-    }
-
-    &_divider {
-      @include make-col(1);
-      font-size: 1rem;
-      font-weight: bold;
-      position: relative;
-      text-align: center;
-    }
-
-    &_second {
-      @include make-col(12);
-      padding-left: 0;
-
-      .choose {
-        height: auto;
-        display: flex;
-        flex-direction: row;
-        justify-content: start;
-        padding: 10px 20px;
-      }
-    }
-
-    .ti__new {
-      margin: 20px 0 25px;
-      color: $blue;
-
-      &:hover {
-        color: $link-hover-color;
-      }
-    }
-  }
-
-  &__overview {
-    @include make-col(7);
-
-    &-price {
-      @include make-col(5);
-      padding-top: 15px;
-      padding-left: 20px;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      align-content: flex-start;
-
-      &_total {
-        height: 48px;
-
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          bottom: 0;
-          left: 20px;
-          width: calc(100% - 40px);
-          border-bottom: 1px solid $gray;
-        }
-
-        &-text {
-          font-size: 1.125rem;
-          font-weight: 700;
-          line-height: 46px;
-        }
-
-        &-value {
-          font-size: 1.5rem;
-          font-weight: 700;
-          line-height: 46px;
-          color: $blue-dark;
-        }
-      }
-
-      &_total,
-      &_area,
-      &_head,
-      &_access,
-      &_floor {
-        width: 100%;
-        position: relative;
-        display: flex;
-        justify-content: flex-start;
-        padding: 0 20px;
-        background: $gray-bg;
-        align-items: baseline;
-
-        &-spec {
-          font-size: $font-size-base;
-          font-weight: 700;
-          line-height: 22px;
-        }
-
-        &-rest {
-          margin-left: auto;
-        }
-      }
-
-      &_head {
-        padding-top: 10px;
-        height: 38px;
-        font-size: 1.5rem;
-        font-weight: 500;
-        line-height: 2rem;
-      }
-
-      &_area {
-        padding-top: 10px;
-        height: 43px;
-
-        &-wline {
-          &::after {
-            content: '';
-            display: block;
-            position: absolute;
-            bottom: 0;
-            left: 20px;
-            width: calc(100% - 40px);
-            border-bottom: 1px solid $gray;
-          }
-        }
-
-      }
-
-      &_floor,
-      &_access {
-        display: flex;
-        flex-direction: column;
-
-        &-head,
-        &-item {
-          @include make-col(12);
-          display: flex;
-          width: 100%;
-        }
-
-        &-head {
-          font-weight: bold;
-          padding-top: 10px;
-        }
-
-        &-spec {
-          @include make-col(7);
-          flex-direction: row;
-          font-weight: normal;
-        }
-
-        &-rest {
-          @include make-col(5);
-          text-align: right;
-          font-size: 1rem;
-          font-weight: bold;
-        }
-      }
-
-      &-estim,
-      &_floor-only {
-        width: 100%;
-        padding-top: 10px;
-        background: $gray-bg;
-
-        & .ti__overview-price_total {
-          padding-bottom: 10px;
-          padding-top: 15px;
-
-          &::before {
-            content: '';
-            display: block;
-            position: absolute;
-            top: 0;
-            left: 20px;
-            width: calc(100% - 40px);
-            border-top: 1px solid $gray;
-          }
-        }
-      }
-
-      &_floor-only {
-        & .ti__overview-price_total {
-          padding-top: 0;
-          padding-bottom: 0;
-
-          &::after {
-            display: none;
-          }
-        }
-      }
-
-      &_shortcut {
-        width: 100%;
-        background: $gray-bg;
-        position: relative;
-        padding: 15px 20px 10px;
-
-        &-text,
-        &-link {
-          font-size: $font-size-base;
-          line-height: 22px;
-          text-align: right;
-          margin-bottom: 0;
-        }
-
-        &-text {
-          font-weight: 400;
-        }
-
-        &-link {
-          font-weight: 500;
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
   &__prod {
     margin-top: 15px;
 
@@ -678,66 +123,6 @@
   }
 }
 
-.step1-inactive,
-.step2-inactive,
-.step3-inactive {
-  display: none;
-}
-
-.ti__step1-inactive {
-  & .step1-active {
-    display: none;
-  }
-
-  & .step1-inactive {
-    display: flex;
-  }
-
-  & .ti__estimate {
-    @include make-col(5);
-  }
-
-  & .ti__total {
-    @include make-col(12);
-    padding-left: 20px;
-  }
-
-  & .ti-total-area {
-    padding: 15px 20px 3px;
-  }
-}
-
-.ti__step2-inactive {
-  & .step2-active {
-    display: none;
-  }
-
-  & .step2-inactive {
-    display: flex;
-  }
-}
-
-.btn__text-desktop {
-  display: block;
-}
-
-.btn__text-mobile {
-  display: none;
-}
-
-.ti-divider-position {
-  bottom: 30px;
-}
-
-
-@include media-breakpoint-up(lg) {
-  .ti {
-    &__choose_divider {
-      line-height: 145px;
-    }
-  }
-}
-
 @include media-breakpoint-up(md) {
   .ti {
     &__prod {
@@ -794,55 +179,6 @@
       margin-top: 10px;
     }
 
-    &__next {
-      margin: 15px 0 0;
-
-      & .btn {
-        white-space: normal;
-        max-width: 320px;
-      }
-    }
-
-    &__cost {
-      padding-top: 10px;
-
-      &_postcode,
-      &_removal,
-      &_levelling,
-      &_options {
-        padding: 20px 15px;
-      }
-
-      &_removal,
-      &_levelling {
-        margin: 10px 0;
-      }
-    }
-
-    &__choose {
-      &_title,
-      &_divider {
-        padding: 15px 0;
-      }
-
-      &_first,
-      &_second,
-      &_divider {
-        @include make-col(12);
-      }
-
-      &_divider {
-        // sass-lint:disable no-important
-        padding-top: 0;
-      }
-
-      &_first {
-        .ti__error {
-          margin-bottom: 15px;
-        }
-      }
-    }
-
     &__overview {
       @include make-col(12);
       margin-bottom: 15px;
@@ -914,20 +250,6 @@
       }
     }
 
-    &__step1-inactive {
-      & .ti__estimate {
-        @include make-col(12);
-      }
-
-      & .ti__total {
-        padding-left: 0;
-      }
-
-      & .ti-total-area {
-        padding: 15px 15px 5px;
-      }
-    }
-
     &__total {
       .bw {
         .store__name {
@@ -940,12 +262,6 @@
 
 @include media-breakpoint-down(sm) {
   .ti {
-    &__step1-return,
-    &__step2-return {
-      transform: none;
-      top: 22px;
-    }
-
     &__floors {
       @include make-col(12);
       padding-right: 0;
@@ -957,38 +273,6 @@
       margin-top: 10px;
     }
 
-    &__next {
-      margin: 10px 0 0;
-
-      & .btn {
-        max-width: 100%;
-      }
-    }
-
-    &__cost {
-      &_options {
-        &-what {
-          font-size: $font-size-base;
-        }
-
-        &-list {
-          margin-top: 0;
-        }
-
-        &-item {
-          @include make-col(12);
-          margin-top: 10px;
-          padding-right: 0;
-        }
-      }
-    }
-
-    &__choose {
-      &_title {
-        padding: 10px 0;
-      }
-    }
-
     &__prod {
       display: block;
       margin: 10px 0;