holygrail2 1.0.0

package/scss/base/_icons.scss

@@ -0,0 +1,162 @@
+@import '../abstract/_all';
+.ico-big {
+  width: 48px;
+  height: 48px;
+  padding: 10px;
+  border: 1px solid $c-middle-grey;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+.ico {
+  svg {
+    display: inline-block;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+// soporte para estilos de color iconos con el componente svg-icon
+svg-icon {
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &.c-invert {
+    fill: $c-white;
+  }
+  &.ico-white,
+  &.c-invert {
+    path {
+      fill: $c-white;
+    }
+  }
+  &.ico-error {
+    path {
+      fill: $c-error;
+    }
+  }
+  &.ico-success {
+    path {
+      fill: $c-valid;
+    }
+  }
+  &.ico-feel {
+    path {
+      fill: $c-feel-dark;
+    }
+  }
+}
+.has-light {
+  svg {
+    path {
+      fill: white;
+      stroke: none;
+    }
+  }
+  a {
+    color: $c-white;
+  }
+  a:focus,
+  a:hover,
+  a:active {
+    text-decoration: none;
+    color: $c-white;
+  }
+}
+.has-error {
+  svg {
+    path {
+      fill: $c-error;
+    }
+  }
+}
+.has-feel {
+  svg {
+    path {
+      fill: $c-feel-dark;
+    }
+  }
+}
+.has-success {
+  svg {
+    path {
+      fill: $c-success;
+    }
+  }
+}
+.ico-ball {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  background-color: $c-middle-grey;
+  flex: 0 0 40px;
+  .ico-count {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    font-size: 10px;
+    background-color: $c-primary;
+    color: $c-white;
+    text-align: center;
+    line-height: 1.6;
+    position: absolute;
+    left: 5px;
+    bottom: 5px;
+    border: 1px solid $c-white;
+    font-weight: 600;
+  }
+  svg {
+    margin-top: -4px;
+  }
+}
+.x24 {
+  width: 24px;
+  height: 24px;
+}
+.x32 {
+  width: 32px;
+  height: 32px;
+}
+.x48 {
+  width: 48px;
+  height: 48px;
+}
+.x64 {
+  width: 64px;
+  height: 64px;
+}
+.btn.btn-link.has-ico-pre {
+  padding-left: 18px;
+  .ico-pre {
+    margin: 0;
+    top: -1px;
+  }
+}
+.has-ico-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  svg {
+    margin-top: 0;
+    margin-right: 4px;
+  }
+  div {
+    svg {
+      margin-top: 0;
+      margin-right: 4px;
+    }
+  }
+}
+svg-icon.ico-post,
+svg-icon.ico-pre {
+  margin: 0 16px;
+  top: 50%;
+  transform: translateY(-50%);
+}

package/scss/base/_ratios.scss

@@ -0,0 +1,262 @@
+@import '../abstract/_all';
+
+.rat-16-9 {
+  @include ratio(16, 9);
+}
+
+.rat-21-9 {
+  @include ratio(21, 9);
+}
+
+.rat-1-1 {
+  @include ratio(1, 1);
+}
+
+.rat-2-1 {
+  @include ratio(2, 1);
+}
+
+.rat-2-3 {
+  @include ratio(800, 1066);
+}
+
+.rat-3-2 {
+  @include ratio(3, 2);
+}
+
+.rat-3-4 {
+  @include ratio(3, 4);
+}
+
+.rat-4-2 {
+  @include ratio(4, 2);
+}
+
+.rat-4-3 {
+  @include ratio(4, 3);
+}
+
+.rat-strech {
+  @include ratio(275, 445);
+}
+
+.rat-main {
+  @include ratio(800, 1066);
+}
+
+.rat-double {
+  @include ratio(867, 559);
+}
+
+.sk-load {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: 126%;
+    background-color: $c-white;
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.sk-load1 {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: calc(133.25% + 126px);
+    background-color: $c-white;
+
+    @media (min-width: 992px) {
+      padding-top: calc(133.25% + 144px);
+    }
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.sk-load2 {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: calc(133.25% + 126px);
+    background-color: $c-white;
+
+    @media (min-width: 992px) {
+      padding-top: calc(133.25% + 144px);
+    }
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.sk-load3 {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: 133.25%;
+    background-color: $c-white;
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.sk-load4 {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: 75.5%;
+  }
+
+  .card9-link {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.sk-load5 {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: calc(66.6667% + 126px);
+    background-color: $c-white;
+
+    @media (min-width: $break-sm) {
+      padding-top: calc(66.6667% + 144px);
+    }
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.sk-load6 {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: 133.25%;
+    background-color: $c-white;
+
+    @media (min-width: 992px) {
+      padding-top: 133.25%;
+    }
+  }
+  &.hidden-image::before {
+    padding-top: 126px;
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.sk-load7 {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: 66.6667%;
+    background-color: $c-white;
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.swiper-monoproducto .swiper-wrapper {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.sk-load9 {
+  position: relative;
+
+  &:before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: calc(64.66667% + 126px);
+    background-color: $c-white;
+
+    .p-view {
+      background-color: transparent;
+    }
+
+    @media (min-width: #{$break-md}) {
+      padding-top: calc(62.9% + 144px);
+    }
+
+    @media (min-width: #{$break-lg}) {
+      padding-top: calc(64.7% + 144px);
+    }
+  }
+
+  &::marker {
+    display: none;
+    content: '';
+  }
+}
+
+.ar-3-4 {
+  aspect-ratio: 3 / 4;
+}
+
+.grid-wrap-custom {
+  .sk-load:before,
+  .sk-load1:before,
+  .sk-load2:before,
+  .sk-load3:before,
+  .sk-load5:before,
+  .sk-load6:before,
+  .p-view {
+    background-color: transparent;
+  }
+}