holygrail2 1.0.0

package/scss/base/_alignment.scss

@@ -0,0 +1,294 @@
+@import '../abstract/_all';
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.is-flex {
+  display: flex;
+}
+
+.is-inlineflex {
+  display: inline-flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.content-start {
+  justify-content: flex-start;
+}
+
+.content-end {
+  justify-content: flex-end;
+}
+
+.content-center {
+  justify-content: center;
+}
+
+.content-sp-between {
+  justify-content: space-between;
+}
+
+.content-sp-around {
+  justify-content: space-around;
+}
+
+.content-sp-evenly {
+  justify-content: space-evenly;
+}
+
+.align-top {
+  align-items: flex-start;
+}
+
+.align-middle {
+  display: flex;
+  align-content: center;
+  flex-wrap: wrap;
+}
+
+.align-bottom {
+  align-items: flex-end;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.align-multi-top {
+  align-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.align-multi-bottom {
+  align-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.align-multi-center {
+  align-content: center;
+  flex-wrap: wrap;
+}
+
+.align-multi-between {
+  align-content: space-between;
+  flex-wrap: wrap;
+}
+
+.align-multi-around {
+  align-content: space-around;
+  flex-wrap: wrap;
+}
+
+.align-multi-stretch {
+  align-content: stretch;
+  flex-wrap: wrap;
+}
+
+.align-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.align-items-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.sticky-bottom {
+  width: 100%;
+  position: absolute;
+  box-sizing: border-box;
+  left: 0;
+  padding: 0 $padding-global $padding-global;
+  bottom: 0;
+}
+
+.xs\:text-center {
+  @media (max-width: #{$break-sm - 1}) {
+    text-align: center;
+  }
+}
+
+.sm\:text-center {
+  @media (max-width: #{$break-sm - 1}) {
+    text-align: center;
+  }
+}
+
+.md\:text-center {
+  @media (max-width: #{$break-md - 1}) {
+    text-align: center;
+  }
+}
+
+.lg\:text-center {
+  @media (max-width: #{$break-lg - 1}) {
+    text-align: center;
+  }
+}
+
+.sm\:min-text-center {
+  @media (min-width: $break-sm) {
+    text-align: center;
+  }
+}
+
+.md\:min-text-center {
+  @media (min-width: $break-md) {
+    text-align: center;
+  }
+}
+
+.lg\:min-text-center {
+  @media (min-width: $break-lg) {
+    text-align: center;
+  }
+}
+
+.xs\:text-left {
+  @media (max-width: #{$break-sm - 1}) {
+    text-align: left;
+  }
+}
+
+.sm\:text-left {
+  @media (max-width: #{$break-sm - 1}) {
+    text-align: left;
+  }
+}
+
+.md\:text-left {
+  @media (max-width: #{$break-md - 1}) {
+    text-align: left;
+  }
+}
+
+.lg\:text-left {
+  @media (max-width: #{$break-lg - 1}) {
+    text-align: left;
+  }
+}
+
+.sm\:min-text-left {
+  @media (min-width: $break-sm) {
+    text-align: left;
+  }
+}
+
+.md\:min-text-left {
+  @media (min-width: $break-md) {
+    text-align: left;
+  }
+}
+
+.lg\:min-text-left {
+  @media (min-width: $break-lg) {
+    text-align: left;
+  }
+}
+
+.xs\:text-right {
+  @media (max-width: #{$break-sm - 1}) {
+    text-align: right;
+  }
+}
+
+.sm\:text-right {
+  @media (max-width: #{$break-sm - 1}) {
+    text-align: right;
+  }
+}
+
+.md\:text-right {
+  @media (max-width: #{$break-md - 1}) {
+    text-align: right;
+  }
+}
+
+.lg\:text-right {
+  @media (max-width: #{$break-lg - 1}) {
+    text-align: right;
+  }
+}
+
+.sm\:min-text-right {
+  @media (min-width: $break-sm) {
+    text-align: right;
+  }
+}
+
+.md\:min-text-right {
+  @media (min-width: $break-md) {
+    text-align: right;
+  }
+}
+
+.lg\:min-text-right {
+  @media (min-width: $break-lg) {
+    text-align: right;
+  }
+}
+
+.sm\:min-content-end {
+  @media (min-width: $break-sm) {
+    justify-content: flex-end;
+  }
+}
+
+.sm\:align-middle {
+  @media (min-width: $break-sm) {
+    display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+  }
+}
+.md\:align-middle {
+  @media (min-width: $break-md) {
+    display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+  }
+}

package/scss/base/_animations.scss

@@ -0,0 +1,64 @@
+@keyframes underline {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes opacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes stretch {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: 80px;
+  }
+}
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+@keyframes bounce {
+  0% {
+    transform: translateZ(0);
+  }
+  to {
+    transform: translate3d(0, -15px, 0);
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes spin {
+  100% {
+    transform: rotate(-360deg);
+  }
+}

package/scss/base/_extras.scss

@@ -0,0 +1,21 @@
+@import '../abstract/_all';
+
+$links: (
+  btn-primary: #{$break-xs},
+  btn-secondary: #{$break-sm},
+  btn-tertiary: #{$break-md},
+  btn-feel: #{$break-lg},
+  link-line: #{$break-lg},
+  link-raw: #{$break-lg},
+  btn-phantom: #{$break-lg},
+  btn-world: #{$break-lg},
+  product-tag: #{$break-lg},
+);
+
+.helper-font {
+  @include debug-types($headers);
+  @include debug-types($links);
+  .form-input-label-2 {
+    border: 1px solid $c-success;
+  }
+}

package/scss/base/_grid.scss

@@ -0,0 +1,361 @@
+@use 'sass:math';
+@import '../abstract/_all';
+
+//   -CONTAINERS
+
+.container {
+  padding-right: $padding-global;
+  padding-left: $padding-global;
+  margin-right: auto;
+  margin-left: auto;
+  position: relative;
+  width: 100%;
+  max-width: $container;
+
+  @media (min-width: $break-sm) {
+    padding-right: $padding-global;
+    padding-left: $padding-global;
+    width: 90%;
+    max-width: nth(map-values($breakpoints), 2);
+  }
+
+  @media (min-width: $break-md) {
+    width: 80%;
+    max-width: nth(map-values($breakpoints), 3);
+  }
+
+  @media (min-width: $break-lg) {
+    width: 80%;
+    max-width: nth(map-values($breakpoints), 4);
+  }
+}
+
+.container-full {
+  padding-right: $padding-global;
+  padding-left: $padding-global;
+  margin-right: auto;
+  margin-left: auto;
+  position: relative;
+  max-width: $container-full;
+
+  @media (min-width: $break-sm) {
+    padding-right: $padding-global;
+    padding-left: $padding-global;
+    width: 90%;
+    max-width: nth(map-values($breakpoints), 2);
+  }
+
+  @media (min-width: $break-md) {
+    width: 80%;
+    max-width: nth(map-values($breakpoints), 3);
+  }
+
+  @media (min-width: $break-lg) {
+    width: 80%;
+    max-width: nth(map-values($breakpoints), 4);
+  }
+}
+
+.container-bleed {
+  padding-right: 0;
+  padding-left: 0;
+  margin-right: auto;
+  margin-left: auto;
+  position: relative;
+}
+
+.container-fluid {
+  padding-right: $padding-global;
+  padding-left: $padding-global;
+  margin-right: auto;
+  margin-left: auto;
+  position: relative;
+}
+
+.container-2 {
+  padding-right: $padding-global;
+  padding-left: $padding-global;
+  margin-right: auto;
+  margin-left: auto;
+  position: relative;
+  width: 90%;
+  max-width: $container-2;
+}
+
+.container-3 {
+  padding-right: $padding-global * 3;
+  padding-left: $padding-global * 3;
+  margin-right: auto;
+  margin-left: auto;
+  position: relative;
+  width: 100%;
+  max-width: $container-3;
+
+  @media (min-width: $break-sm) {
+    padding-right: $padding-global;
+    padding-left: $padding-global;
+  }
+}
+
+.container-4 {
+  padding-right: $padding-global;
+  padding-left: $padding-global;
+  margin-right: auto;
+  margin-left: auto;
+  position: relative;
+  width: 90%;
+  max-width: $container-4;
+}
+
+// join life style
+.container-5 {
+  position: relative;
+  padding: 0 $padding-global;
+  margin: 0 auto;
+  width: 100%;
+  max-width: $container-5;
+
+  @media (min-width: $break-lg) {
+    max-width: 1000px;
+    padding: 0;
+  }
+}
+
+.container-6 {
+  margin: 0 auto;
+  padding: 0 $padding-global;
+  width: 100%;
+  max-width: $container-6;
+}
+
+.container-7 {
+  margin: 0 auto;
+  padding: 0 $padding-global * 2;
+  width: 100%;
+  max-width: 295px;
+
+  @media (min-width: $break-sm) {
+    max-width: 460px;
+    padding-right: $padding-global;
+    padding-left: $padding-global;
+  }
+
+  @media (min-width: $break-md) {
+    max-width: 460px;
+  }
+
+  @media (min-width: $break-lg) {
+    max-width: 595px;
+  }
+}
+
+.container-8 {
+  margin: 0 auto;
+  padding: 0 $padding-global;
+  width: 100%;
+  max-width: $container-8;
+}
+
+.container-9 {
+  margin: 0 auto;
+  padding: 0 $padding-mobile;
+  width: 100%;
+  max-width: $container-9;
+
+  @media (min-width: $break-sm) {
+    padding: 0 $padding-global;
+  }
+}
+
+.container-11 {
+  margin: 0 auto;
+  padding: 0 $padding-mobile;
+  width: 100%;
+  max-width: $container-11;
+
+  @media (min-width: $break-sm) {
+    padding: 0 $padding-global;
+  }
+}
+
+.container-12 {
+  padding: 0 $padding-mobile;
+  width: 100%;
+  max-width: $container-12;
+
+  @media (min-width: $break-sm) {
+    padding: 0 $padding-global;
+  }
+}
+
+.container-body {
+  padding-left: 16px;
+  padding-right: 16px;
+  @media (min-width: $break-md) {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+
+.container-body2 {
+  padding-left: 16px;
+  overflow: hidden;
+
+  @media (min-width: $break-md) {
+    padding-left: 40px;
+  }
+
+  .is-rtl & {
+    padding-right: 16px;
+    padding-left: 0;
+
+    @media (min-width: $break-md) {
+      padding-right: 40px;
+      padding-left: 0;
+    }
+  }
+
+  .swiper-container {
+    overflow: inherit;
+  }
+}
+
+//   -ROW
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -$padding-global;
+  margin-left: -$padding-global;
+
+  @for $i from 2 through length($breakpointscols) {
+    @media (min-width: nth(map-values($breakpointscols), $i)) {
+      margin-right: -$padding-global;
+      margin-left: -$padding-global;
+    }
+  }
+}
+
+//   -COLS
+
+@for $i from 1 through 4 {
+  @media (min-width: nth(map-values($breakpointscols), $i)) {
+    @for $c from 1 through $totalCols {
+      .col-#{nth(map-keys($breakpointscols), $i)}-#{$c} {
+        -webkit-box-flex: 0;
+        flex: 0 0 math.percentage(math.div($c, $totalCols));
+        max-width: math.percentage(math.div($c, $totalCols));
+      }
+    }
+  }
+}
+
+@for $i from 5 through $colBreakpointscols {
+  @for $c from 1 through $totalColsXl {
+    .col-#{nth(map-keys($breakpointscols), $i)}-#{$c} {
+      -webkit-box-flex: 0;
+      flex: 0 0 math.percentage(math.div($c, $totalColsXl));
+      max-width: math.percentage(math.div($c, $totalColsXl));
+    }
+  }
+}
+
+[class*='col-'] {
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px;
+  padding-right: $padding-global;
+  padding-left: $padding-global;
+}
+
+.col {
+  display: block;
+  flex: 1 1 0;
+  padding: 0 $padding-global;
+}
+
+.col-sm {
+  @media (min-width: $break-sm) {
+    display: block;
+    flex: 1 1 0;
+    padding: 0 $padding-global;
+  }
+}
+
+.col-md {
+  @media (min-width: $break-sm) {
+    display: block;
+    flex: 1 1 0;
+    padding: 0 $padding-global;
+  }
+}
+
+.col-lg {
+  @media (min-width: $break-sm) {
+    display: block;
+    flex: 1 1 0;
+    padding: 0 $padding-global;
+  }
+}
+
+.bleed {
+  margin-left: -$padding-global;
+  margin-right: -$padding-global;
+  width: auto;
+}
+
+@include bleed(0);
+@include bleed(4);
+@include bleed(8);
+
+.list-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.grid-8 {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 16px;
+  width: 100%;
+  align-items: start;
+  max-width: 1200px;
+  margin: 0 auto;
+  img {
+    border: 1px solid #eaeaea;
+  }
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 16px;
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 16px;
+}
+.grid-2-desktop {
+  @media (min-width: $break-sm) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 16px;
+    align-items: end;
+  }
+}
+
+.grid-2-wide {
+  grid-column: span 2;
+}