holygrail2 1.0.0

package/scss/base/_rtl.scss

@@ -0,0 +1,480 @@
+@import '../abstract/_all';
+.is-rtl {
+  .fl-left {
+    float: right;
+  }
+  .fl-right {
+    float: left;
+  }
+  .text-left {
+    text-align: right;
+  }
+  .text-right {
+    text-align: left;
+  }
+  .xs\:text-right {
+    @media (max-width: #{$break-sm - 1}) {
+      text-align: left;
+    }
+  }
+  .sm\:text-right {
+    @media (max-width: #{$break-sm - 1}) {
+      text-align: left;
+    }
+  }
+  .md\:text-right {
+    @media (max-width: #{$break-md - 1}) {
+      text-align: left;
+    }
+  }
+
+  .xs\:text-left {
+    @media (max-width: #{$break-sm - 1}) {
+      text-align: right;
+    }
+  }
+  .sm\:text-left {
+    @media (max-width: #{$break-sm - 1}) {
+      text-align: right;
+    }
+  }
+  .md\:text-left {
+    @media (max-width: #{$break-md - 1}) {
+      text-align: right;
+    }
+  }
+
+  .select select:not([multiple]) {
+    padding-right: 16px;
+    padding-left: 45px;
+  }
+  .select-size select:not([multiple]) {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+  .select:not(.is-multiple, .is-loading)::after {
+    right: inherit;
+    left: 20px;
+  }
+  .select.select-label select {
+    padding-right: 100px;
+  }
+  .select.select-label label {
+    left: inherit;
+    right: 16px;
+  }
+  .select:not(.is-multiple, .is-loading).select-box::after {
+    left: 8px;
+  }
+  @for $i from 1 through length($espaciados) {
+    $espaciado: nth($espaciados, $i);
+    .mr-#{$espaciado} {
+      margin-right: 0;
+      margin-left: #{$espaciado}px;
+    }
+    .ml-#{$espaciado} {
+      margin-left: 0;
+      margin-right: #{$espaciado}px;
+    }
+    .pr-#{$espaciado} {
+      padding-right: 0;
+      padding-left: #{$espaciado}px;
+    }
+    .pl-#{$espaciado} {
+      padding-left: 0;
+      padding-right: #{$espaciado}px;
+    }
+  }
+  .check-center.check-bleed.checkbox-radio [type='radio']:checked + label::before,
+  .check-center.check-bleed.checkbox-radio [type='radio']:not(:checked) + label::before {
+    left: initial;
+    right: 0;
+  }
+  .check-center.check-bleed.checkbox-radio [type='radio']:checked + label .ico-radio,
+  .check-center.check-bleed.checkbox-radio [type='radio']:not(:checked) + label .ico-radio {
+    left: initial;
+    right: 7px;
+  }
+  .btn {
+    &.btn-separate {
+      svg-icon {
+        transform: scaleX(-1);
+        margin-left: 0;
+        margin-right: 8px;
+      }
+    }
+    &.btn-world {
+      .btn-world-center {
+        text-align: right;
+      }
+      .btn-world-right {
+        transform: rotateY(180deg);
+      }
+    }
+  }
+  .btn-group {
+    .btn {
+      &:first-child() {
+        border-radius: 0 $btn-radius $btn-radius 0;
+      }
+      &:last-child() {
+        border-radius: $btn-radius 0 0 $btn-radius;
+      }
+    }
+  }
+  .btn-social-login {
+    svg {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+  .btn-social {
+    padding-right: 48px;
+    padding-left: 0;
+    svg-icon {
+      right: 1px;
+      left: auto;
+      margin-right: 0;
+      margin-left: 16px;
+    }
+    &.btn-google {
+      padding-right: 60px;
+      padding-left: 0;
+    }
+    &.btn-naver {
+      padding-right: 80px;
+      padding-left: 0;
+    }
+  }
+  .checkbox-item {
+    [type='checkbox']:not(:checked),
+    [type='checkbox']:checked {
+      left: 0;
+      right: -9999px;
+      position: absolute;
+      width: 70px;
+    }
+    [type='checkbox']:not(:checked) + label::before,
+    [type='checkbox']:checked + label::before {
+      left: auto;
+      right: 0;
+      margin: 0 0 0 10px;
+    }
+    [type='checkbox']:not(:checked) + label,
+    [type='checkbox']:checked + label {
+      padding-left: 0;
+      padding-right: 40px;
+    }
+    [type='checkbox']:not(:checked) + label span,
+    [type='checkbox']:checked + label span {
+      &.theta {
+        padding-left: 0;
+        padding-right: 40px;
+      }
+    }
+    [type='checkbox']:not(:checked) + label .icon,
+    [type='checkbox']:checked + label .icon {
+      right: 5px;
+      left: auto;
+      top: 4px;
+    }
+    .ma-wrapper-terms-inner {
+      span,
+      span.legal-text {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+  }
+  .check-bleed {
+    &.checkbox-radio [type='radio']:checked + label .ico-radio,
+    &.checkbox-radio [type='radio']:not(:checked) + label .ico-radio {
+      left: 0;
+      right: 17px;
+    }
+    &.checkbox-radio [type='radio']:checked + label::before,
+    &.checkbox-radio [type='radio']:not(:checked) + label::before {
+      left: auto;
+      right: 0;
+    }
+  }
+  .check-center {
+    &.checkbox-radio [type='radio']:checked + label::before,
+    &.checkbox-radio [type='radio']:not(:checked) + label::before {
+      left: auto;
+      right: 16px;
+      margin: 0;
+    }
+    &.checkbox-radio [type='radio']:checked + label .ico-radio,
+    &.checkbox-radio [type='radio']:not(:checked) + label .ico-radio {
+      left: 0;
+      right: 23px;
+    }
+    .box3-content {
+      padding-left: 0;
+      padding-right: calc(48px);
+    }
+  }
+  .checkbox-radio {
+    [type='radio']:not(:checked),
+    [type='radio']:checked {
+      left: 0;
+      right: -9999px;
+      position: absolute;
+      width: 70px;
+    }
+  }
+  .checkbox-item-text {
+    span {
+      margin-left: 0;
+      margin-right: 40px;
+    }
+  }
+  [type='radio']:not(:checked),
+  [type='radio']:checked,
+  .checkbox-card [type='radio'] {
+    left: 9999px;
+  }
+  .checkbox-item-2 [type='checkbox']:not(:checked),
+  .checkbox-item-2 [type='checkbox']:checked {
+    left: 9999px;
+  }
+  .color-wrap {
+    button {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+  .form-input-label,
+  .form-input-label-2 {
+    &.datalist {
+      svg {
+        right: auto;
+        left: 16px;
+      }
+      .validation-error-messages {
+        svg {
+          left: auto;
+        }
+      }
+    }
+  }
+  .select {
+    &.select-box {
+      select {
+        padding: 0 8px 0 16px;
+      }
+      &::after {
+        left: 6px;
+        right: auto;
+      }
+    }
+    &.select-flat {
+      label {
+        left: auto;
+      }
+      select {
+        padding-right: 0;
+      }
+      &::after {
+        left: 20px;
+        right: auto;
+      }
+    }
+  }
+  .form-input-label {
+    .info-text {
+      left: 0;
+    }
+    &.icon-right {
+      .form-text {
+        right: auto;
+        left: 0;
+      }
+    }
+    &.has-ico-post {
+      svg-icon {
+        position: absolute;
+        right: 0;
+      }
+      .validation-error-messages {
+        svg-icon {
+          position: relative;
+        }
+      }
+    }
+  }
+  .form-input-prefix {
+    .input-prefix {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+  .form-input-label-2 {
+    &.icon-right {
+      .form-text {
+        right: auto;
+        left: 0;
+      }
+    }
+    &.has-ico-post {
+      .ico-post {
+        right: auto;
+        left: 0;
+      }
+      .validation-error-messages {
+        svg-icon {
+          position: relative;
+        }
+      }
+    }
+    &.has-ico-pre {
+      .ico-pre {
+        position: absolute;
+        right: 0;
+        left: auto;
+      }
+      .validation-error-messages {
+        svg-icon {
+          position: relative;
+        }
+      }
+    }
+    .info-text {
+      left: 0;
+      right: initial;
+    }
+  }
+  .has-ico-post {
+    &.btn,
+    & > input,
+    & > label {
+      padding-right: $btn-padding;
+      padding-left: $btn-padding * 2 + $svg-size;
+    }
+  }
+  .has-ico-pre {
+    &.btn,
+    & > input,
+    & > label {
+      padding-left: $btn-padding;
+      padding-right: $btn-padding * 2 + $svg-size + 4px;
+    }
+  }
+  .link-svg-pre,
+  button.link-line.link-svg-pre {
+    padding-left: 0;
+    padding-right: 20px;
+    &::after {
+      left: 0;
+    }
+    svg-icon {
+      left: auto;
+      right: 0;
+    }
+  }
+  .link-svg-post,
+  button.link-line.link-svg-post {
+    padding-left: 20px;
+    padding-right: 0;
+    &::after {
+      right: 0;
+    }
+    svg-icon {
+      right: auto;
+      left: 0;
+    }
+  }
+  ul.list-disc {
+    li {
+      &::after {
+        right: 0;
+      }
+    }
+  }
+  .list-button {
+    &.list-secundary,
+    &.list-secondary {
+      padding-left: 16px;
+      padding-right: 42px;
+    }
+    &.list-tertiary {
+      padding-left: 16px;
+      padding-right: 64px;
+    }
+  }
+  .tabs-mini {
+    float: left;
+    li:first-child a::after {
+      left: 0;
+      right: auto;
+    }
+  }
+  .header-account-back {
+    left: auto;
+    right: 0;
+    svg-icon {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  .validation-error-messages {
+    svg-icon {
+      padding-right: 0;
+      padding-left: 8px;
+    }
+  }
+  .tooltip-sm {
+    left: calc(50% - 16px);
+    right: auto;
+    padding-left: $tooltip-padding + 16px;
+    padding-right: $tooltip-padding * 2;
+    &::after {
+      right: auto;
+      left: $tooltip-dist;
+    }
+    &.tooltip-tr,
+    &.tooltip-br {
+      right: calc(50% - 16px);
+      left: auto;
+      &::after {
+        left: auto;
+        right: $tooltip-dist;
+      }
+    }
+    .close {
+      right: auto;
+      left: $tooltip-padding;
+    }
+  }
+  .tooltip-sm-temp {
+    left: -8px;
+    right: auto;
+    padding-left: $tooltip-padding + 16px;
+    padding-right: $tooltip-padding * 2;
+    &::after {
+      right: auto;
+      left: $tooltip-dist;
+    }
+    .close-temp {
+      right: auto;
+      left: $tooltip-padding;
+    }
+  }
+  .tag-new {
+    right: auto;
+    left: -30px;
+  }
+  .box4 {
+    ul {
+      margin-left: 0;
+      margin-right: 16px;
+    }
+    &::before {
+      left: initial;
+      top: 47px;
+      right: 20px;
+    }
+  }
+}

package/scss/base/_spacing.scss

@@ -0,0 +1,60 @@
+@import '../abstract/_all';
+
+.margin-auto {
+  margin: 0 auto;
+}
+
+@for $i from 1 through length($espaciados) {
+  $espaciado: nth($espaciados, $i);
+  .m-#{$espaciado} {
+    margin: #{$espaciado}px;
+  }
+
+  .mx-#{$espaciado} {
+    margin-left: #{$espaciado}px;
+    margin-right: #{$espaciado}px;
+  }
+
+  .my-#{$espaciado} {
+    margin-top: #{$espaciado}px;
+    margin-bottom: #{$espaciado}px;
+  }
+  .mt-#{$espaciado} {
+    margin-top: #{$espaciado}px;
+  }
+  .mr-#{$espaciado} {
+    margin-right: #{$espaciado}px;
+  }
+  .mb-#{$espaciado} {
+    margin-bottom: #{$espaciado}px;
+  }
+  .ml-#{$espaciado} {
+    margin-left: #{$espaciado}px;
+  }
+  .p-#{$espaciado} {
+    padding: #{$espaciado}px;
+  }
+
+  .px-#{$espaciado} {
+    padding-left: #{$espaciado}px;
+    padding-right: #{$espaciado}px;
+  }
+
+  .py-#{$espaciado} {
+    padding-top: #{$espaciado}px;
+    padding-bottom: #{$espaciado}px;
+  }
+
+  .pt-#{$espaciado} {
+    padding-top: #{$espaciado}px;
+  }
+  .pr-#{$espaciado} {
+    padding-right: #{$espaciado}px;
+  }
+  .pb-#{$espaciado} {
+    padding-bottom: #{$espaciado}px;
+  }
+  .pl-#{$espaciado} {
+    padding-left: #{$espaciado}px;
+  }
+}

package/scss/base/_types.scss

@@ -0,0 +1,117 @@
+@import '../abstract/_all';
+
+body {
+  @include font-regular;
+
+  -webkit-overflow-scrolling: touch;
+  font-variant-ligatures: no-common-ligatures;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+select {
+  @include font-regular;
+}
+
+p {
+  @include font-regular;
+
+  margin: 0;
+  font-size: $text-sm;
+
+  @media (min-width: $break-md) {
+    font-size: $text-md;
+  }
+
+  &.b {
+    @include font-regular;
+
+    color: $c-primary;
+  }
+}
+
+a {
+  color: $c-primary;
+  text-decoration: none;
+}
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.p1 {
+  span {
+    color: $c-primary;
+  }
+}
+
+b,
+mark {
+  color: $c-primary;
+}
+
+.secondary {
+  font-family: $font-family-c-r;
+  font-weight: 100;
+}
+
+@include typesFixers($headersFixers, $fs);
+@include mintypes($minbreakpoints, $minheaders, $fs);
+@include types($breakpoints, $headers, $fs); /* todo una vez incluida */
+
+@include typesFluids($headersFluids);
+
+//
+
+.text-light,
+.font-light {
+  // 2
+  @include font-light;
+}
+.text-regular,
+.font-regular {
+  @include font-regular;
+}
+.text-medium,
+.font-medium {
+  @include font-medium;
+}
+.text-semibold,
+.font-semibold {
+  @include font-semibold;
+}
+.text-bold,
+.font-bold {
+  //2
+  @include font-bold;
+}
+
+.is-through {
+  position: relative;
+  width: max-content;
+
+  &::after {
+    content: '';
+    background-color: $c-primary;
+    width: 100%;
+    position: absolute;
+    bottom: 50%;
+    left: 0;
+    height: 1px;
+  }
+}
+
+.c-gray.is-through {
+  &::after {
+    background-color: $c-dark-grey;
+  }
+}