wickes-css2 2.103.0-RG-1576-error-handling-new-codes.8 → 2.103.0-RG-1587-replace-klarna-logo-with-svg-image.1

package/src/scss/components/_gift-cards.scss

@@ -1,360 +0,0 @@
-.giftcard-row {
-  position: relative;
-  display: flex;
-  gap: 16px;
-}
-
-.giftcard {
-  border: 1px solid $gray;
-  border-radius: 4px;
-  background: $white;
-  padding: 12px 16px;
-  width: 100%;
-  order: 3;
-  position: relative;
-
-  .giftcard__field {
-    .form-row {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.giftcard-add {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: $blue;
-  text-decoration: none;
-  cursor: pointer;
-
-  &__icon {
-    width: 16px;
-    height: 16px;
-  }
-
-  &__text {
-    font-size: .875rem;
-    line-height: 1.375rem;
-    font-weight: 500;
-  }
-}
-
-.giftcard-hint {
-  display: block;
-  color: $squant;
-  font-size: .875rem;
-  line-height: 1.375rem;
-  font-weight: 400;
-  margin-left: 32px;
-}
-
-.giftcard-inline {
-  padding: 12px 8px;
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 16px;
-  }
-
-  &__title {
-    font-weight: 500;
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-    white-space: nowrap;
-  }
-
-  &__balance {
-    color: $blue;
-    font-weight: 400;
-    font-size: .875rem;
-    line-height: 1.375rem;
-    text-decoration: underline;
-    white-space: nowrap;
-  }
-
-  &__close {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $warm-grey;
-  }
-
-  &__fields {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .notification {
-    margin-bottom: 16px;
-  }
-}
-
-.form-row__label {
-  margin-bottom: 8px;
-}
-
-.giftcard__btn {
-  width: 100%;
-}
-
-.giftcard__field {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 18px;
-  min-width: 0;
-}
-
-.giftcard-inline .giftcard-inline__fields > .form-row.giftcard__field {
-  margin-bottom: 0;
-}
-
-.giftcard-field--error .giftcard__input {
-  border-color: $red;
-}
-
-.giftcard__error-text  {
-  font-weight: 400;
-  font-size: .75rem;
-  line-height: 1rem;
-  color: $red;
-  margin-top: 8px;
-}
-
-.giftcard .toggle-show svg {
-  pointer-events: none;
-}
-
-.form-row .toggle-show {
-  font-size: 1rem;
-  cursor: pointer;
-  position: absolute;
-  right: 8px;
-  top: 0;
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-}
-
-.giftcard-applied {
-  width: 100%;
-  border: 1px solid $gray-light;
-  border-radius: 4px;
-  background: $white;
-  padding: 15px 16px;
-  order: 2;
-
-  &__inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-  }
-
-  &__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .fa-check-circle {
-    text-align: center;
-    color: $green;
-    font-size: 1rem;
-  }
-
-  &__text {
-    margin: 0;
-    font-size: .875rem;
-    line-height: 1.5rem;
-    font-weight: 500;
-    word-break: break-word;
-  }
-}
-
-.giftcard-summary {
-  position: relative;
-  width: 100%;
-
-  &__hint {
-    margin-top: 16px;
-    margin-bottom: 0;
-    font-size: .875rem;
-    font-weight: 400;
-    line-height: 1.375rem;
-  }
-
-  &__add {
-    text-decoration: underline;
-    cursor: pointer;
-    color: $blue;
-  }
-}
-
-.giftcard-chip-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.giftcard-chip {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 12px;
-  padding: 12px 16px;
-  border: 1px solid $gray;
-  border-radius: 4px;
-  background: $white;
-  min-height: 44px;
-  position: relative;
-
-  &__close {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $warm-grey;
-  }
-}
-
-.giftcard-chip__icon {
-  width: 48px;
-  height: 30px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.giftcard-chip__content {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.giftcard-chip__line {
-  display: block;
-  line-height: 1.25rem;
-
-  .giftcard-chip__applied {
-    font-size: .875rem;
-    font-weight: 400;
-    line-height: 1.5rem;
-    color: $gray-dark;
-  }
-}
-
-.giftcard-chip__number {
-  font-weight: 500;
-  line-height: 1.5rem;
-  font-size: 1rem;
-  color: $gray-dark;
-}
-
-.giftcard-chip__applied {
-  white-space: nowrap;
-}
-
-@include media-breakpoint-up(sm) {
-  .giftcard-inline__fields {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 16px;
-  }
-
-  .giftcard-inline__fields > .form-row.giftcard__field--pin.giftcard__field--pin {
-    width: 116px;
-  }
-
-  .giftcard-inline__fields > .form-row.giftcard__field--number.giftcard__field--number {
-    width: 224px;
-  }
-
-  .giftcard__actions {
-    display: flex;
-    align-items: flex-end;
-    height: 72px;
-  }
-
-  .giftcard-summary {
-    &__hint {
-      width: 354px;
-
-      &--max {
-        width: 100%;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .giftcard-inline__fields > .form-row.giftcard__field--pin.giftcard__field--pin {
-    width: 214px;
-  }
-
-  .giftcard-inline__fields > .form-row.giftcard__field--number.giftcard__field--number {
-    width: 240px;
-  }
-
-
-  .giftcard-inline__title {
-    font-weight: 700;
-  }
-
-  .giftcard-summary {
-    &__hint {
-      width: 100%;
-
-      &--max {
-        width: 460px;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .giftcard-inline__fields {
-    max-width: 470px;
-  }
-
-  .giftcard-summary {
-    &__hint {
-      width: 100%;
-
-      &--max {
-        width: 100%;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .giftcard-inline__fields {
-    max-width: 100%;
-  }
-
-  .giftcard__btn {
-    width: 140px;
-  }
-
-  .giftcard__field--number,
-  .giftcard__field--pin {
-    width: 100%;
-  }
-}