holygrail2 1.0.0

package/scss/docs.scss

@@ -0,0 +1,680 @@
+@use 'sass:math';
+@import 'abstract/reset.scss';
+
+@import 'base/_animations.scss';
+
+@import 'abstract/_all.scss';
+
+$variable-colors: (
+  c-white: #{$c-white},
+  c-black: #{$c-black},
+  c-dark-grey: #{$c-dark-grey},
+  c-middle-grey: #{$c-middle-grey},
+  c-light-grey: #{$c-light-grey},
+  c-primary: #{$c-primary},
+  c-secondary: #{$c-secondary},
+  c-accent: #{$c-accent},
+  c-error: #{$c-error},
+  c-sale: #{$c-sale},
+  c-info: #{$c-info},
+  c-valid: #{$c-valid},
+  c-warning: #{$c-warning},
+  c-feel: #{$c-feel},
+  c-feel-dark: #{$c-feel-dark},
+  c-feel-light: #{$c-feel-light},
+  c-limited: #{$c-limited},
+  c-success: #{$c-success},
+  c-alert: #{$c-alert},
+  c-facebook: #{$c-facebook},
+  c-google: #{$c-google},
+  c-naver: #{$c-naver},
+  c-wechat: #{$c-wechat},
+);
+$variable-list: (
+  break-xs: #{$break-xs},
+  break-sm: #{$break-sm},
+  break-md: #{$break-md},
+  break-lg: #{$break-lg},
+  break-xl: #{$break-xl},
+  min-vw: #{$min-vw},
+  height-xs: #{$height-xs},
+  height-sm: #{$height-sm},
+  height-md: #{$height-md},
+  height-lg: #{$height-lg},
+  height-xl: #{$height-xl},
+  height-full: #{$height-full},
+  height-home: #{$height-home},
+  container: #{$container},
+  container-2: #{$container-2},
+  container-3: #{$container-3},
+  container-4: #{$container-4},
+  font-primary: #{$font-family-a-r},
+  font-family-secondary: #{$font-family-b-r},
+  font-primary-weight-light: #{$font-weight-light},
+  font-primary-weight-regular: #{$font-weight-regular},
+  font-primary-weight-medium: #{$font-weight-medium},
+  font-primary-weight-bold: #{$font-weight-bold},
+  font-secondary-weight-light: #{$font-weight-secondary-light},
+  font-secondary-weight-medium: #{$font-weight-secondary-medium},
+  xl: 1500px,
+);
+
+$variabletotals: length($variable-list);
+$variablecolors: length($variable-colors);
+
+@for $i from 1 through $variabletotals {
+  .var-a-#{nth(map-keys($variable-list), $i)} {
+    &::after {
+      display: inline-block;
+      content: '#{nth(map-keys($variable-list), $i)}';
+    }
+  }
+  .var-b-#{nth(map-keys($variable-list), $i)} {
+    &::after {
+      content: '#{nth(map-values($variable-list), $i)}';
+      display: inline-block;
+    }
+  }
+}
+
+@for $i from 1 through $variablecolors {
+  .var-a-#{nth(map-keys($variable-colors), $i)} {
+    &::before {
+      display: inline-block;
+      content: '#{nth(map-keys($variable-colors), $i)}';
+    }
+  }
+  .var-b-#{nth(map-keys($variable-colors), $i)} {
+    &::before {
+      content: '#{nth(map-values($variable-colors), $i)}';
+      display: inline-block;
+    }
+  }
+}
+
+@for $i from 1 through $variablecolors {
+  .bg-#{nth(map-keys($variable-colors), $i)} {
+    background-color: #{nth(map-values($variable-colors), $i)};
+  }
+}
+
+@mixin tablas($spacingArray, $spacingName, $totalItems) {
+  @each $name, $value in $spacingArray {
+    $i: index(($spacingArray), ($name $value));
+    $spacing0: $name;
+    $spacing1: nth($value, 1);
+    $spacing2: nth($value, 2);
+    $spacing3: nth($value, 3);
+    $spacing4: nth($value, 4);
+    .#{$spacingName} {
+      .filas:nth-child(#{$i}) {
+        .item {
+          &::after {
+            content: '#{$name}';
+          }
+        }
+        .item-0 {
+          word-wrap: break-word;
+        }
+        .item-1 {
+          &::after {
+            content: '#{$spacing1}';
+          }
+        }
+        .item-2 {
+          &::after {
+            content: '#{$spacing2}';
+          }
+        }
+        .item-3 {
+          &::after {
+            content: '#{$spacing3}';
+          }
+        }
+        .item-4 {
+          &::after {
+            content: '#{$spacing4}';
+          }
+        }
+      }
+    }
+  }
+}
+@mixin tablas2($spacingArray, $spacingName, $totalItems) {
+  @each $name, $value in $spacingArray {
+    $i: index(($spacingArray), ($name $value));
+    $spacing0: $name;
+    $spacing1: nth($value, 1);
+    .#{$spacingName} {
+      .filas:nth-child(#{$i}) {
+        .item {
+          &::after {
+            content: '#{$name}';
+          }
+        }
+        .item-0 {
+          word-wrap: break-word;
+        }
+        .item-1 {
+          &::after {
+            content: '#{$spacing1}';
+          }
+        }
+      }
+    }
+  }
+}
+@mixin tablas3($spacingArray, $spacingName, $totalItems) {
+  @each $name, $value in $spacingArray {
+    $i: index(($spacingArray), ($name $value));
+    $spacing0: $name;
+    $spacing1: nth($value, 1);
+    $spacing2: nth($value, 2);
+    $spacing3: nth($value, 3);
+    .#{$spacingName} {
+      .filas:nth-child(#{$i}) {
+        .item {
+          &::after {
+            content: '#{$name}';
+          }
+        }
+        .item-0 {
+          word-wrap: break-word;
+        }
+        .item-1 {
+          &::after {
+            content: '#{$spacing1}';
+          }
+        }
+        .item-2 {
+          &::after {
+            content: '#{$spacing2}';
+          }
+        }
+        .item-3 {
+          &::after {
+            content: '#{$spacing3}';
+          }
+        }
+      }
+    }
+  }
+}
+@mixin muestraArray($nombreArray, $nombreClase, $totalItems) {
+  @each $name, $value in $nombreArray {
+    $i: index($nombreArray, $name $value);
+
+    .#{$nombreClase} {
+      .filas:nth-child(#{$i}) {
+        .item {
+          &::after {
+            content: '#{$name}';
+          }
+        }
+
+        @for $j from 1 through $totalItems {
+          .item-#{$j} {
+            &::after {
+              content: '#{nth($value, $j)}';
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include tablas($margin, 'marginbox', 2);
+@include tablas($margin-y, 'marginbox-y', 2);
+@include tablas($margin-x, 'marginbox-x', 2);
+@include tablas($margin-top, 'marginbox-top', 2);
+@include tablas($margin-right, 'marginbox-right', 2);
+@include tablas($margin-bottom, 'marginbox-bottom', 2);
+@include tablas($margin-left, 'marginbox-left', 2);
+@include tablas($padding, 'paddingbox', 2);
+@include tablas($padding-y, 'paddingbox-y', 2);
+@include tablas($padding-x, 'paddingbox-x', 2);
+@include tablas($padding-top, 'paddingbox-top', 2);
+@include tablas($padding-left, 'paddingbox-left', 2);
+@include tablas($padding-bottom, 'paddingbox-bottom', 2);
+@include tablas($padding-right, 'paddingbox-right', 2);
+
+@include muestraArray($heights, 'heights', 2);
+@include muestraArray($headersFluids, 'fluids', 3);
+@include muestraArray($minheaders, 'minheaders', 4);
+
+.font-family-a {
+  &::after {
+    content: '' + $font-family-a-r;
+    position: relative;
+  }
+}
+.font-family-b {
+  &::after {
+    content: '' + $font-family-b-r;
+    position: relative;
+  }
+}
+.font-family-c {
+  &::after {
+    content: '' + $font-family-c-r;
+    position: relative;
+  }
+}
+.mini-site-main {
+  padding-left: 200px;
+  padding-right: 20px;
+}
+.tag-color-wrap {
+  .wrap-item {
+    position: relative;
+    width: 100%;
+    margin: 10px 10px 0 0;
+    padding: 5px;
+    box-shadow: 0 9px 25px rgb(0 0 0 / 15%);
+
+    &::after {
+      position: absolute;
+      margin-top: -50px;
+      bottom: 10px;
+      font-size: 12px;
+      left: 16px;
+    }
+    ::before {
+      width: 100%;
+      text-align: center;
+      position: absolute;
+      z-index: 10;
+      font-size: 12px;
+      margin-top: -40px;
+      left: 0;
+
+      color: white;
+      bottom: 27px;
+    }
+    .item {
+      height: 100px;
+      margin: 0;
+      position: relative;
+
+      &::after {
+        font-size: 12px;
+        position: absolute;
+        margin-top: -20px;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.site-menu-mobile {
+  background-color: #000;
+  position: fixed;
+  height: 100vh;
+  width: 60px;
+}
+
+.guide {
+  section {
+    padding-bottom: 20px;
+  }
+  .element-code {
+    width: 100%;
+    max-width: 500px;
+    min-height: 200px;
+    margin: 20px auto;
+  }
+
+  .title-zone {
+    color: #000;
+    margin-bottom: 20px;
+    padding: 100px 0 10px;
+  }
+  .site-main {
+    position: relative;
+    margin: 0 0 0 55px;
+    padding: 0 8px;
+    @media (min-width: $break-lg) {
+      margin: 0 0 0 180px;
+    }
+  }
+  .mb-5 {
+    margin-bottom: 5px;
+  }
+  .menu-lateral ul.list-clear li {
+    margin: 0;
+    line-height: 1.2;
+  }
+  .menu-lateral {
+    padding-left: 10px;
+  }
+  .guide-logo-menu {
+    img {
+      padding-top: 20px;
+    }
+  }
+  .list-clear {
+    margin-bottom: 30px;
+  }
+  .guide-title {
+    color: #878787;
+    font-size: 11px;
+    font-family: Arial, Helvetica, sans-serif !important;
+    text-transform: uppercase;
+  }
+  .guide-text {
+    text-align: center;
+    width: 100%;
+    color: #b7c1c8;
+    font-size: 8px;
+    font-family: Arial, Helvetica, sans-serif !important;
+    text-transform: uppercase;
+    padding: 10px 0;
+    float: left;
+    span {
+      width: 100%;
+      clear: both;
+      float: left;
+    }
+  }
+  .menulateral {
+    position: fixed;
+    top: 62px;
+    overflow: auto;
+    height: calc(100vh - 62px);
+    font-size: 10px;
+    box-sizing: border-box;
+    -webkit-box-flex: 0;
+    width: 180px;
+    padding: 0 0 0 20px;
+    html {
+      font-size: 12px;
+    }
+  }
+  .guide-hover {
+    text-decoration: none;
+    opacity: 0.6;
+  }
+  code[class*='language-'],
+  pre[class*='language-'] {
+    font-size: 12px;
+  }
+  table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    caption-side: bottom;
+    font-size: 12px;
+    text-align: left;
+    th:nth-child(1) {
+      width: 150px;
+    }
+    thead,
+    tbody,
+    tfoot {
+      tr {
+        th,
+        td {
+          padding: 10px;
+          vertical-align: top;
+          border: 1px solid #eaeaea;
+          p:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    td:first-child > code {
+      white-space: nowrap;
+    }
+    thead {
+      background-color: $primary-guide;
+      color: #fff;
+    }
+    td {
+      &:first-child {
+        color: $primary-guide !important;
+      }
+    }
+  }
+  code {
+    background-color: #f1f1f1;
+    padding-left: 4px;
+    padding-right: 4px;
+    color: $secondary-guide;
+  }
+  pre > code {
+    background-color: transparent;
+  }
+  a {
+    text-decoration: none;
+  }
+  .item-w {
+    width: 40px;
+    height: 40px;
+    padding: 4px;
+    background: #eceff3;
+  }
+  .item-i {
+    min-width: 20%;
+    min-height: 20%;
+    display: block;
+    border: 1px solid #fff;
+    box-sizing: border-box;
+  }
+  .item-i:nth-child(1) {
+    background-color: $primary-guide;
+    opacity: 0.93;
+  }
+  .item-i:nth-child(2) {
+    background-color: $primary-guide;
+    opacity: 0.83;
+  }
+  .item-i:nth-child(3) {
+    background-color: $primary-guide;
+    opacity: 0.79;
+  }
+  .item-i:nth-child(4) {
+    background-color: $primary-guide;
+    opacity: 0.72;
+  }
+  .item-i:nth-child(5) {
+    background-color: $primary-guide;
+    opacity: 0.65;
+  }
+  .item-i:nth-child(6) {
+    background-color: $primary-guide;
+    opacity: 0.58;
+  }
+  .item-i:nth-child(7) {
+    background-color: $primary-guide;
+    opacity: 0.51;
+  }
+  .item-i:nth-child(8) {
+    background-color: $primary-guide;
+    opacity: 0.44;
+  }
+  .item-i:nth-child(9) {
+    background-color: $primary-guide;
+    opacity: 0.37;
+  }
+  .item-i:nth-child(10) {
+    background-color: $primary-guide;
+    opacity: 0.3;
+  }
+  .box-demo,
+  .box-demo2 {
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    border: 1px solid #fff;
+  }
+  .box-demo-inner {
+    height: 200px;
+    border: 1px solid #fff;
+    background-color: $primary-guide;
+    opacity: 0.6;
+    font-size: 20px;
+    padding-top: 100px;
+    text-align: center;
+    color: #fff;
+  }
+  .box-demo:nth-child(1) {
+    background-color: rgb(0 191 203 / 20%);
+  }
+  .box-demo:nth-child(2) {
+    background-color: rgb(0 191 203 / 20%);
+  }
+  .box-demo:nth-child(3) {
+    background-color: rgb(0 191 203 / 20%);
+  }
+  .box-demo2:nth-child(1) {
+    background-color: rgb(255 33 33 / 20%);
+  }
+  .box-demo2:nth-child(2) {
+    background-color: rgb(255 33 33 / 20%);
+  }
+  .box-demo2:nth-child(3) {
+    background-color: rgb(255 33 33 / 20%);
+  }
+  .box-demo .col {
+    font-size: 12px;
+    background-color: rgb(0 191 203 / 60%);
+    border: 1px solid #fff;
+  }
+  .flexbox-map {
+    .h3 {
+      min-height: 50px;
+      font-size: 20px;
+      background-color: rgb(33 255 214 / 33%);
+      padding: 20px;
+    }
+  }
+  .box-info {
+    padding: 20px;
+    border: 1px solid gray;
+    font-style: italic;
+    opacity: 0.5;
+  }
+  .guide-icon-top {
+    display: inline-block;
+  }
+  .resize-container {
+    position: relative;
+    min-height: 400px;
+    display: flex;
+    padding: 50px 0;
+    grid-template-columns: repeat(3, 1fr);
+    justify-content: center;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .mini-box {
+    background: #eaeaea;
+    width: 100px;
+    color: #757171;
+    font-size: 10px;
+    float: left;
+    margin: 11px;
+  }
+}
+pre[class*='language-'] {
+  margin: 20px 0;
+}
+.mini-box {
+  span {
+    @include font-bold;
+    display: block;
+    font-size: 14px;
+  }
+}
+.filas {
+  line-height: 2;
+}
+
+.item {
+  white-space: nowrap;
+}
+.bg-docs {
+  background: #fafafa;
+}
+
+.grid-6-docs {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  column-gap: 0;
+
+  div:nth-child(6n + 3),
+  div:nth-child(6n + 4) {
+    background-color: #eaeaea;
+  }
+
+  div {
+    border-bottom: 1px solid #f6f6f6;
+    padding: 6px;
+  }
+
+  div:nth-child(6n + 1),
+  div:nth-child(6n + 3),
+  div:nth-child(6n + 5) {
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
+
+.grid-8-docs {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+
+  &:nth-child(even) {
+    background-color: #f7f6f6; /* Cambia el color de fondo de las filas pares */
+  }
+
+  /* Opcional: Estilos para filas impares */
+  &:nth-child(odd) {
+    background-color: #fff; /* Cambia el color de fondo de las filas impares */
+  }
+}
+
+.grid-24-docs {
+  display: grid;
+  grid-template-columns: repeat(24, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.grid-10-docs {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  border-bottom: 1px dashed #d8d8d8;
+  border-left: 1px dashed #d8d8d8;
+
+  align-items: start;
+  div {
+    padding: 10px;
+    border-top: 1px dashed #d8d8d8;
+    border-right: 1px dashed #d8d8d8;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.grid-4-docs {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border-bottom: 1px dashed #d8d8d8;
+  border-left: 1px dashed #d8d8d8;
+
+  align-items: start;
+  & > div {
+    padding: 10px;
+    border-top: 1px dashed #d8d8d8;
+    border-right: 1px dashed #d8d8d8;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}