holygrail2 1.2.2 → 1.2.4

package/scss/elements/_tabs.scss

@@ -3,10 +3,10 @@
 .tabs {
   ul {
     display: flex;
-
     margin: 0;
     flex-grow: 1;
     flex-shrink: 0;
+
     &.content-start {
       justify-content: flex-start;
     }
@@ -20,16 +20,14 @@
     display: block;
     margin: 0;
 
-    a,
-    span,
-    .tab {
+    * {
       display: flex;
       justify-content: center;
       align-items: center;
       vertical-align: top;
-
       cursor: pointer;
-      padding: 0 20px 0;
+      padding-block: 0;
+      padding-inline: 20px;
       line-height: 1;
     }
 
@@ -79,14 +77,13 @@
   }
 }
 
-
 .tabs2 {
   ul {
     display: flex;
-
     margin: 0;
     flex-grow: 1;
     flex-shrink: 0;
+
     &.content-start {
       justify-content: flex-start;
     }
@@ -110,18 +107,19 @@
       justify-content: center;
       align-items: center;
       vertical-align: top;
-
       cursor: pointer;
       padding-inline: 20px;
       line-height: 1;
     }
+    .btn-tertiary {
+      padding-block: 0;
+    }
 
-
-    &.is-active  {
+    &.is-active {
       position: relative;
 
       &::after {
-        content: "";
+        content: '';
         position: absolute;
         width: 4px;
         height: 4px;
@@ -131,88 +129,15 @@
         margin-left: -2px;
       }
     }
-
-
   }
 
-  &.tabs-resetfirst ul li:first-child a {
+  &.tabs-resetfirst ul li:first-child * {
     padding: 0 20px 0 0;
   }
-
-  &.is-center ul {
-    justify-content: center;
-  }
-
-  &.is-around ul {
-    justify-content: space-around;
-
-    li {
-      flex: 1;
-    }
-  }
-
-  .list-equal {
-    display: flex;
-    align-items: flex-end;
-
-    li {
-      flex-grow: 1;
-    }
-  }
-}
-
-
-.tabs-inline {
-  ul {
-    display: flex;
-
-    margin: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    &.content-start {
-      justify-content: flex-start;
-    }
-
-    &.content-center {
-      align-items: center;
-    }
-  }
-
-  li {
-    display: block;
-    margin: 0;
+  &.tabs-resetfirst ul li {
     &::after {
-      display: none;
-    }
-
-    a,
-    span,
-    .tab {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      vertical-align: top;
-
-      cursor: pointer;
+      margin-left: -10px;
     }
-
-    &.is-active a,
-    &.is-active span,
-    &.is-active .tab {
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        width: 4px;
-        height: 4px;
-        background-color: $c-primary;
-        bottom: 0;
-      }
-    }
-  }
-
-  &.tabs-resetfirst ul li:first-child a {
   }
 
   &.is-center ul {
@@ -235,12 +160,17 @@
       flex-grow: 1;
     }
   }
+
+  .has-light & {
+    li::after {
+      background-color: #fff;
+    }
+  }
 }
 
 .tabs-inline {
   ul {
     display: flex;
-
     margin: 0;
     flex-grow: 1;
     flex-shrink: 0;
@@ -265,7 +195,6 @@
       justify-content: center;
       align-items: center;
       vertical-align: top;
-
       font-size: 12px;
       cursor: pointer;
     }

package/scss/elements/_tabs_specials.scss

@@ -1,5 +1,4 @@
 @import '../abstract/_all';
-
 .ico-round {
   width: 56px;
   height: 56px;
@@ -10,7 +9,6 @@
   white-space: nowrap;
   border: 1px solid $c-middle-grey;
 }
-
 .ico-round-sm {
   width: 40px;
   height: 40px;
@@ -21,7 +19,6 @@
   white-space: nowrap;
   border: 1px solid $c-middle-grey;
 }
-
 .checkbox-ico {
   position: relative;
   box-sizing: border-box;
@@ -34,7 +31,6 @@
   margin: 0;
   border-radius: 50%;
 }
-
 .checkbox-box {
   position: absolute;
   top: 0;
@@ -42,19 +38,16 @@
   right: 0;
   bottom: 0;
 }
-
 .checkbox-radio.checkbox-box {
   label {
     width: 100%;
     height: 100%;
   }
 }
-
 .checkbox-radio.checkbox-box [type='radio']:checked + label,
 .checkbox-radio.checkbox-box [type='radio']:not(:checked) + label {
   padding: 16px;
 }
-
 .checkbox-radio.checkbox-box [type='radio']:checked + label span,
 .checkbox-radio.checkbox-box [type='radio']:not(:checked) + label span {
   display: inline-block;
@@ -64,30 +57,25 @@
   padding-left: 0;
   min-height: 20px;
 }
-
 .checkbox-radio.checkbox-box [type='radio']:checked + label .ico-radio,
 .checkbox-radio.checkbox-box [type='radio']:not(:checked) + label .ico-radio {
   top: 6px;
   left: 6px;
 }
-
 .checkbox-radio.checkbox-box [type='radio']:checked + label::before,
 .checkbox-radio.checkbox-box [type='radio']:not(:checked) + label::before {
   display: none;
 }
-
 ul.list-clear li.list-box {
   list-style: none;
   margin: 0;
   margin-top: -1px;
   left: 0;
   position: relative;
-
   &:last-child {
     left: -2px;
   }
 }
-
 .list-box {
   width: 100%;
   display: table-cell;
@@ -96,18 +84,15 @@ ul.list-clear li.list-box {
   transition: all 0.2s ease;
   opacity: 0.5;
   left: -1px;
-
   &.is-active,
   &:hover {
     border: 1px solid $c-primary;
     opacity: 1;
     cursor: pointer;
   }
-
   &:first-child {
     left: 0;
   }
-
   &::before {
     content: '';
     display: block;
@@ -115,22 +100,18 @@ ul.list-clear li.list-box {
     padding-top: 15%;
     min-height: 78px;
   }
-
   .checkbox-radio [type='radio']:checked + label,
   .checkbox-radio [type='radio']:not(:checked) + label {
     flex-direction: row;
-
     @media (min-width: 992px) {
       flex-direction: column;
     }
   }
-
   &-label {
     display: flex;
     align-items: center;
     padding: 16px;
     justify-content: space-between;
-
     @media (min-width: 992px) {
       align-items: center;
       justify-content: center;
@@ -138,55 +119,44 @@ ul.list-clear li.list-box {
       flex-wrap: wrap;
     }
   }
-
   .checkbox-ico {
     order: 1;
   }
-
   .checkbox-text {
     order: 2;
   }
-
   @media (min-width: 992px) {
     &::before {
       width: 100%;
       padding-top: 100%;
     }
-
     &:first-child {
       left: 0;
     }
-
     .checkbox-ico {
       margin: 10px;
       order: 1;
     }
-
     .checkbox-text {
       margin: 16px;
       order: 3;
     }
   }
 }
-
 .multiple-table {
   width: 100%;
   display: flex;
   flex-direction: column;
-
   @media (min-width: 992px) {
     flex-direction: row;
   }
 }
-
 .two-table {
   width: 100%;
   display: flex;
   flex-direction: row;
-
   .list-box {
     width: 100%;
-
     &::before {
       content: '';
       display: block;
@@ -194,12 +164,10 @@ ul.list-clear li.list-box {
       padding-top: 100%;
       min-height: 78px;
     }
-
     .checkbox-radio [type='radio']:checked + label,
     .checkbox-radio [type='radio']:not(:checked) + label {
       flex-direction: column;
     }
-
     &-label {
       display: flex;
       align-items: center;
@@ -208,7 +176,6 @@ ul.list-clear li.list-box {
       align-content: center;
       flex-wrap: wrap;
     }
-
     .checkbox-text {
       margin: 16px;
     }

package/scss/elements/_tag.scss

@@ -34,7 +34,7 @@
 
 .tag-feel {
   background-color: $c-feel;
-  color: $c-primary;
+  color: $c-white;
   padding: 6px;
   line-height: 1;
   display: inline-block;

package/scss/layouts/_box3.scss

@@ -1,13 +1,10 @@
 @import '../abstract/_all';
-
 .box3 {
-  /* no se usa */
   position: relative;
   width: 100%;
   min-height: 58px;
   box-sizing: border-box;
   display: flex;
-
   .box3-middle {
     width: 100px;
     display: flex;
@@ -15,23 +12,19 @@
     align-items: flex-end;
     justify-content: center;
   }
-
   .box3-price {
     display: flex;
     flex-direction: column;
     min-width: 60px;
-
     img {
       max-width: 60px;
     }
   }
-
   .box3-right {
     display: flex;
     flex-direction: column;
     min-width: 60px;
   }
-
   .box3-content {
     display: flex;
     flex: 1;
@@ -40,14 +33,12 @@
     align-content: flex-start;
     word-break: break-word;
   }
-
   .box3-img {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 16px;
   }
-
   .box3-top {
     padding-top: 2px;
     padding-left: 16px;
@@ -57,7 +48,6 @@
     align-content: flex-end;
     justify-content: flex-start;
   }
-
   &:hover {
     cursor: pointer;
   }

package/scss/layouts/_header.scss

@@ -55,7 +55,7 @@
   .search-bar {
     position: relative;
   }
-  .search-bar:after {
+  .search-bar::after {
     position: absolute;
     bottom: -4px;
     left: 50%;

package/scss/layouts/_header_account.scss

@@ -1,12 +1,9 @@
 @import '../abstract/_all';
-
 @media (max-width: #{$break-sm - 1}) {
-  /* no se usa */
   .header-account-logo {
     display: none;
   }
 }
-
 .header-account-head {
   position: relative;
   height: 56px;
@@ -20,13 +17,11 @@
   background-color: $c-white;
   z-index: 1002;
   border-bottom: var(--line-width) solid $c-dark-grey;
-
   @media (min-width: $break-sm) {
     height: 72px;
     padding: 0 16px;
   }
 }
-
 .header-account-first {
   position: relative;
   min-width: 120px;
@@ -35,19 +30,16 @@
   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;
@@ -59,7 +51,6 @@
   align-content: center;
   align-items: center;
 }
-
 .header-account-count {
   display: flex;
   position: absolute;
@@ -69,7 +60,6 @@
   align-items: flex-end;
   transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
-
 .header-cart {
   position: fixed;
   z-index: 50;
@@ -84,28 +74,23 @@
   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;
@@ -113,30 +98,24 @@
   background-color: $c-white;
   border-bottom: var(--line-width) solid $c-primary;
 }
-
 .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/_row1.scss

@@ -1,31 +1,24 @@
 @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,
@@ -35,66 +28,55 @@
     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,