holygrail2 1.0.0

package/scss/layouts/_box4.scss

@@ -0,0 +1,19 @@
+@import '../abstract/_all';
+
+.box4 {
+  position: relative;
+  display: flex;
+  ul {
+    margin-left: 16px;
+    margin-top: 4px;
+  }
+  &::before {
+    width: 2px;
+    height: calc(100% - 48px);
+    content: '';
+    position: absolute;
+    background-color: $c-dark-grey;
+    top: 44px;
+    left: 20px;
+  }
+}

package/scss/layouts/_card.scss

@@ -0,0 +1,24 @@
+@import '../abstract/_all';
+
+.card {
+  width: 100%;
+}
+
+.text-box {
+  $text-box-img: 80px;
+
+  .text-box-img {
+    display: inline-block;
+    width: $text-box-img - $padding-global;
+    height: $text-box-img - $padding-global;
+    margin: 5px $padding-global 0 0;
+    vertical-align: top;
+    box-sizing: border-box;
+  }
+
+  .text-box-inner {
+    box-sizing: border-box;
+    width: calc(100% - #{$text-box-img} - 5px);
+    display: inline-block;
+  }
+}

package/scss/layouts/_card9.scss

@@ -0,0 +1,348 @@
+@import '../abstract/_all';
+
+.card9 {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+
+  .color-wrap {
+    position: relative;
+    padding: 0 0 8px;
+  }
+
+  .card9-image {
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+  }
+
+  .card9-add {
+    z-index: 1000;
+    position: absolute;
+    background: rgb(255 255 255 / 100%);
+    padding: 16px;
+    bottom: 16px;
+    left: 16px;
+    right: 16px;
+    transition: opacity 275ms ease;
+    opacity: 0;
+  }
+
+  .card9-sizes {
+    padding: 0;
+    display: inline-flex;
+
+    &:last-child {
+      border-right: 1px solid $c-middle-grey;
+    }
+
+    button {
+      @include font-regular;
+
+      border: none;
+      background-color: $c-white;
+      border-top: 1px solid $c-middle-grey;
+      border-bottom: 1px solid $c-middle-grey;
+      border-left: 1px solid $c-middle-grey;
+      border-right: none;
+      padding: 10px 0;
+      min-width: 48px;
+      display: inline-block;
+      appearance: initial;
+
+      &:hover {
+        background-color: $c-primary;
+        color: $c-white;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .card9-wrap-details {
+    min-height: 126px;
+    position: absolute;
+    bottom: 1px;
+    left: 0;
+    z-index: 3;
+    width: 100%;
+
+    @media (min-width: $break-md) {
+      padding: 0;
+      min-height: 144px;
+    }
+  }
+
+  .card9-video {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    left: 0;
+    height: 100%;
+    top: 0;
+    opacity: 1;
+    transition: opacity 0.25s ease;
+  }
+
+  .js-card9-inner {
+    margin-bottom: 0;
+
+    .content {
+      background: $c-middle-grey;
+    }
+  }
+
+  .card9-slider {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    pointer-events: none;
+    transition: all 0.3s ease;
+    opacity: 0;
+
+    .ma-swiper-button-next,
+    .ma-swiper-button-prev {
+      background: rgb(255 255 255 / 30%);
+      border-radius: 50%;
+      height: 30px;
+      width: 30px;
+      position: absolute;
+      top: calc(50% - 80px);
+      z-index: 3000;
+      text-align: center;
+      opacity: 0;
+      transition-delay: 0s;
+      transition: all 0.3s ease;
+    }
+
+    .ma-swiper-button-next {
+      padding: 7px 4px 4px 7px;
+      right: 16px;
+
+      &:hover {
+        transition-delay: 0s;
+        background: rgb(255 255 255 / 50%);
+      }
+    }
+
+    .ma-swiper-button-prev {
+      padding: 7px 7px 4px 4px;
+      left: 16px;
+
+      &:hover {
+        transition-delay: 0s;
+        background: rgb(255 255 255 / 50%);
+      }
+    }
+  }
+}
+
+.card9-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  transition: all 1s ease;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+
+  .rat-content {
+    .card9-add {
+      background-color: rgb(255 255 255 / 0%);
+    }
+
+    .btn-group {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+
+  .rat-content:hover {
+    .card9-add {
+      background-color: rgb(255 255 255 / 80%);
+      opacity: 1;
+    }
+  }
+}
+
+.card9-add {
+  #lookbook & {
+    left: 0;
+    width: 100%;
+  }
+
+  .is-active & {
+    opacity: 1;
+  }
+}
+
+.card9-link {
+  .img-poster {
+    cursor: pointer;
+    object-fit: contain;
+    height: 100%;
+
+    img {
+      object-fit: contain;
+      height: 100%;
+      user-select: none;
+    }
+  }
+}
+
+.card9-bottom {
+  display: flex;
+  flex-direction: column;
+
+  .card9-wrap-details {
+    position: relative;
+  }
+
+  .js-card9-inner {
+    margin-bottom: 0;
+    width: 50%;
+  }
+}
+
+.card9-left {
+  @media (max-width: #{$break-sm - 1}) {
+    .card9-wrap {
+      margin-left: 0;
+    }
+
+    .card9-wrap-details {
+      margin-left: 0;
+    }
+  }
+
+  .card9 {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .card9-view-details {
+    width: 50%;
+  }
+
+  .card9-wrap-details {
+    position: relative;
+    margin-left: 8px;
+  }
+
+  .js-card9-inner {
+    width: 50%;
+    margin-bottom: 0;
+  }
+}
+
+.card9-right {
+  .card9-wrap {
+    margin-right: 33%;
+  }
+
+  .card9 {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100%;
+  }
+
+  .card9-view-details {
+    width: 50%;
+  }
+
+  .card9-wrap-details {
+    text-align: right;
+    position: relative;
+    padding-right: 8px;
+  }
+
+  .js-card9-inner {
+    width: 50%;
+    margin-bottom: 0;
+  }
+}
+
+.product-tag {
+  @include font-regular;
+
+  color: $c-dark-grey;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+.grid-swiper-wrap {
+  cursor: grab;
+  overflow: hidden;
+  margin-left: 0;
+  margin-right: 0;
+
+  .card9-view-details {
+    position: relative;
+  }
+
+  .card9-wrap-details {
+    position: relative;
+  }
+
+  .rat-3-4::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: calc(133.3333%);
+  }
+
+  @media (min-width: $break-sm) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  @media (min-width: $break-lg) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  ::ng-deep .card9-wrap-details {
+    position: relative;
+  }
+}
+
+.template-Carrusel {
+  .swiper-slide {
+    &:first-child {
+      .card9-contents {
+        padding-left: 16px;
+      }
+    }
+  }
+}
+
+a:hover.card9-link {
+  opacity: 1;
+}
+
+div.card9-wrap .rat-content:hover .card9-add {
+  background-color: rgba(255, 255, 255, 0.8);
+  opacity: 1;
+}
+
+.card9-contents {
+  .product-view-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    .tag-wrapper {
+      width: 100%;
+    }
+  }
+}
+
+.card9-add {
+  @media (max-width: 1280px) {
+    display: none;
+  }
+}

package/scss/layouts/_feel.scss

@@ -0,0 +1,2 @@
+@import '../abstract/_all';
+$border-gray: $c-middle-grey;

package/scss/layouts/_header_account.scss

@@ -0,0 +1,144 @@
+@import '../abstract/_all';
+
+@media (max-width: #{$break-sm - 1}) {
+  /* no se usa */
+  .header-account-logo {
+    display: none;
+  }
+}
+
+.header-account-head {
+  position: relative;
+  height: 56px;
+  padding: 0 16px;
+  display: flex;
+  flex-flow: row wrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+  background-color: $c-white;
+  z-index: 1002;
+  border-bottom: 1px solid $c-middle-grey;
+
+  @media (min-width: $break-sm) {
+    height: 72px;
+    padding: 0 16px;
+  }
+}
+
+.header-account-first {
+  position: relative;
+  min-width: 120px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  height: 100%;
+}
+
+.header-account-cart {
+  min-width: 120px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: flex-end;
+
+  svg {
+    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+}
+
+.header-account-back {
+  transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+}
+
+.header-account-count {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-100px);
+  align-items: flex-end;
+  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.header-cart {
+  position: fixed;
+  z-index: 50;
+  width: unset;
+  height: calc(100vh - 56px);
+  max-height: 800px;
+  top: 0;
+  opacity: 0;
+  transform: translateY(-100px);
+  left: 0;
+  padding: 24px;
+  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
+  box-shadow: rgb(149 157 165 / 20%) 0 8px 24px;
+  pointer-events: none;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgb(188 188 188 / 10%);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgb(41 41 41 / 50%);
+    border-radius: 50px;
+    height: 20%;
+  }
+
+  @media (min-width: $break-sm) {
+    transform: translateY(-100px);
+    display: none;
+  }
+}
+
+.header-cart-resume {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $c-white;
+  border-bottom: 1px solid $c-middle-grey;
+}
+
+.header-cart-list {
+  width: unset;
+  height: calc(100% - 180px);
+}
+
+.is-cart {
+  .header-account-cart svg {
+    transform: rotate(180deg);
+  }
+
+  .header-account-back {
+    transform: translateY(100px);
+  }
+
+  .header-account-count {
+    transform: translateY(-50%);
+  }
+
+  .header-cart {
+    pointer-events: all;
+    opacity: 1;
+    transform: translateY(56px);
+
+    @media (min-width: $break-sm) {
+      transform: translateY(72px);
+    }
+  }
+}

package/scss/layouts/_hgbread.scss

@@ -0,0 +1,51 @@
+@import '../abstract/_all';
+
+.hg-bread {
+  background-color: $c-white;
+  padding: 0;
+  border-bottom: 1px solid $c-middle-grey;
+
+  .hg-bread-inner {
+    display: table;
+    text-align: center;
+    margin: 0 auto;
+    max-width: 420px;
+    width: 100%;
+  }
+
+  .hg-bread-item {
+    display: inline-table;
+    margin-bottom: -1px;
+    vertical-align: middle;
+    text-align: center;
+    padding: 12px 0;
+    width: 33.3333%;
+    text-transform: uppercase;
+  }
+
+  .hg-bread-num {
+    text-align: center;
+    line-height: 1;
+    overflow: hidden;
+    margin: 0 auto 10px;
+  }
+
+  .hg-bread-line {
+    display: inline-table;
+    vertical-align: middle;
+
+    div {
+      width: 42px;
+      height: 1px;
+      background-color: $c-primary;
+    }
+  }
+
+  .hg-bread-title {
+    line-height: 1;
+  }
+
+  .is-inactive {
+    opacity: 0.4;
+  }
+}

package/scss/layouts/_row1.scss

@@ -0,0 +1,108 @@
+@import '../abstract/_all';
+
+.row1-wrap {
+  overflow: hidden;
+}
+
+.row1 {
+  /* no se usa */
+  display: box;
+  display: flex;
+  flex-flow: row wrap;
+  flex-shrink: 0;
+  flex-grow: 1;
+  margin-left: -4px;
+  margin-right: -4px;
+
+  @media (min-width: $break-lg) {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+
+  .box-single {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: 133.25%;
+  }
+
+  .box-single,
+  .box-single-center,
+  .box-double,
+  .box-super {
+    box-sizing: border-box;
+    display: block;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 0 4px;
+
+    @media (min-width: $break-lg) {
+      padding: 0 8px;
+    }
+  }
+
+  .box-single,
+  .box-single-center {
+    flex-basis: calc(50% - 1em);
+    max-width: 50%;
+  }
+
+  .box-super {
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    flex-basis: calc(100% - 1em);
+  }
+
+  @media (min-width: $break-lg) {
+    .box-single {
+      flex-basis: calc(50% - 1em);
+      max-width: 50%;
+    }
+
+    .box-single-center {
+      justify-content: center;
+      display: flex;
+      flex-basis: calc(100% - 1em);
+      max-width: 100%;
+
+      .card9-wrap {
+        flex-basis: calc(50% - 1em);
+        max-width: 50%;
+      }
+    }
+
+    .box-double,
+    .box-super {
+      flex-basis: calc(100% - 1em);
+      max-width: 100%;
+
+      .card9-contents {
+        text-align: center;
+      }
+    }
+  }
+
+  .explorer & {
+    .box-single {
+      flex-basis: calc(50% - 1em);
+      max-width: 50%;
+    }
+
+    .box-double {
+      flex-basis: calc(100% - 1em);
+      max-width: 100%;
+    }
+  }
+}
+
+.expanded .row1 {
+  @media (min-width: $break-lg) {
+    .box-single,
+    .box-single-center,
+    .box-double,
+    .box-super {
+      flex-basis: calc(25% - 1em);
+      max-width: 25%;
+    }
+  }
+}

package/scss/style.scss

@@ -0,0 +1 @@
+@import 'partials';