holygrail2 1.3.40 → 1.3.43

package/README.md

@@ -221,10 +221,8 @@ Holygrail2 incluye soporte completo para RTL (Right-to-Left):
 
 Este proyecto está bajo la Licencia MIT. Ver el archivo [LICENSE](LICENSE) para más detalles.
 
-## 🙏 Agradecimientos
-
-Desarrollado con ❤️ desde Barcelona para el mundo.
 
+Desarrollado por Manuel ruiz redondo. Senior FontEnd UX IT.
 ---
 
 **Holygrail2** - Un framework CSS minimalista y potente para aplicaciones web modernas.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail2",
-  "version": "1.3.40",
+  "version": "1.3.43",
   "description": "A minimal, responsive, style-agnostic CSS framework.",
   "main": "scss/style.scss",
   "style": "dist/style.css",
@@ -17,7 +17,7 @@
     "deploy": "git add . && (git commit -m \"$(node -p \\\"require('./package.json').version\\\")\" || echo 'No hay cambios para commit') && git push origin main && npm publish",
     "start:watch": "npm-run-all --parallel watch serve open:guide",
     "generate": "node generate-scss-variables.js",
-    "css": "sass scss/style.scss dist/style.css && sass scss/style-rtl.scss dist/style-rtl.css && sass scss/docs.scss dist/docs.css",
+    "css": "sass --quiet-deps --silence-deprecation=import scss/style.scss dist/style.css && sass --quiet-deps --silence-deprecation=import scss/style-rtl.scss dist/style-rtl.css && sass --quiet-deps --silence-deprecation=import scss/docs.scss dist/docs.css",
     "site": "npx @11ty/eleventy",
     "build": "npm run generate && npm run css && npm run site",
     "start": "npm run build && npm run open:guide",
@@ -25,7 +25,7 @@
     "lint": "stylelint 'scss/**/*.?(s)css'",
     "lint:fix": "stylelint --fix 'scss/**/*.?(s)css'",
     "format": "prettier --write 'scss/**/*.+(css|scss)'",
-    "docs": "sass scss/docs.scss doc/docs.css --style expanded && sass scss/docs.scss doc/docs.min.css --style compressed",
+    "docs": "sass --quiet-deps --silence-deprecation=import scss/docs.scss doc/docs.css --style expanded && sass --quiet-deps --silence-deprecation=import scss/docs.scss doc/docs.min.css --style compressed",
     "test": "npm run lint && npm run build"
   },
   "repository": {
@@ -50,14 +50,15 @@
   },
   "homepage": "https://holygrail2.netlify.app",
   "devDependencies": {
+    "@11ty/eleventy": "^3.1.2",
     "npm-run-all": "^4.1.5",
-    "open": "^9.1.0",
-    "prettier": "3.5.3",
-    "sass": "1.83.4",
-    "stylelint": "16.21.1",
-    "stylelint-config-standard": "36.0.0",
-    "stylelint-config-standard-scss": "15.0.1",
+    "open": "^10.2.0",
+    "prettier": "^3.6.2",
+    "sass": "^1.93.0",
+    "stylelint": "^16.24.0",
+    "stylelint-config-standard": "^39.0.0",
+    "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-order": "7.0.0",
-    "stylelint-scss": "6.1.0"
+    "stylelint-scss": "^6.12.1"
   }
 }

package/scss/_partials.scss

@@ -35,18 +35,16 @@
 @import 'elements/md-accordion';
 @import 'elements/md-drawer';
 @import 'elements/md-link';
-@import 'elements/md-skip-to-content';
+@import 'elements/md-dialog';
+
 @import 'elements/md-toggle';
-@import 'layouts/row1';
 @import 'layouts/card';
 @import 'layouts/card9';
 @import 'layouts/box3';
-@import 'layouts/box4';
-@import 'layouts/feel';
 @import 'layouts/header_account';
 @import 'layouts/hgbread';
-@import 'layouts/mainmenu';
+
 @import 'layouts/runway';
-@import 'layouts/header';
+
 
 // @import 'abstract/0debug';

package/scss/elements/_animated.scss

@@ -1,73 +1,6 @@
 @import '../abstract/_all'; // deprecated no se usan
 
-.arrow-cover {
-  height: auto;
-  padding: 30px;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  color: $c-primary;
-  display: flex;
-  opacity: 1;
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-  transition: opacity 0.3s ease;
-  z-index: 6;
-  svg {
-    animation: bounce 0.8s infinite alternate;
-  }
-}
 
-.line-scrolldown {
-  position: absolute;
-  top: calc(100% - 120px);
-  left: 50%;
-  z-index: 3;
-  opacity: 1;
-  transform: translateX(-50%);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 40px;
-    left: 50%;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: $c-primary;
-    transform: translateX(-50%);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 40px;
-    left: 50%;
-    width: 1px;
-    height: 0;
-    border-radius: 2px;
-    background: $c-primary;
-    transform: translateX(-50%);
-    animation: stretch 1s 1.5s cubic-bezier(0.55, 0.085, 0, 0.99) forwards;
-  }
-}
-
-.has-light {
-  .arrow-cover {
-    color: $c-white;
-  }
-
-  .line-scrolldown {
-    &::before {
-      background: $c-white;
-    }
-
-    &::after {
-      background: $c-white;
-    }
-  }
-}
 
 .md-arrow-anim {
   transition: all ease 0.3s;

package/scss/elements/_buttons.scss

@@ -22,6 +22,7 @@ button {
   background-color: transparent;
   min-height: $height-btn;
   @include font-light;
+
   letter-spacing: .64px;
   &:focus,
   &.focus,
@@ -1046,7 +1047,6 @@ button {
     max-width: 70px;
     padding-inline: 4px;
     min-width: 50px;
-    word-wrap: break-word;
     overflow-wrap: break-word;
     text-align: center;
     display: inline-block;
@@ -1321,7 +1321,7 @@ button {
 }
 .btn-grid {
   display: grid;
-  grid-gap: 0;
+  gap: 0;
   padding-inline: 1px;
   .btn {
     border: 1px solid $c-primary;

package/scss/elements/_md-dialog.scss

@@ -0,0 +1,115 @@
+@import '../abstract/_all';
+
+
+
+.md-dialog-overlay {
+  background-color: rgb(0 0 0 / 50%);
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  transition: opacity 0.3s ease-in-out;
+  width: 100%;
+  z-index: 2000;
+}
+.md-dialog {
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  z-index: 2050;
+  height: 100%;
+ 
+}
+.md-dialog-container {
+  overflow: hidden;
+  background-clip: padding-box;
+  background-color: white;
+  width: 100%;
+}
+
+
+.md-dialog-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 20px;
+  @media (min-width: $break-sm) {
+    padding: 24px 60px 24px 40px;
+  }
+  .btn-close {
+    position: absolute;
+    right: 8px;
+  }
+}
+.md-dialog-body {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 24px 32px;
+  @media (min-width: $break-sm) {
+    padding: 24px 40px;
+  }
+}
+.md-dialog-footer {
+  align-items: center;
+  display: flex;
+}
+.md-dialog-sm {
+  max-width: 424px;
+  right: 0;
+  top: 0;
+  transform: translateX(100%);
+  transition: transform 0.3s ease-in-out;
+  width: 100%;
+}
+.md-dialog-xl {
+  max-width: 720px;
+  right: 0;
+  top: 0;
+  transform: translateX(100%);
+  transition: transform 0.5s ease-in-out;
+  width: 100%;
+}
+
+body {
+  &.md-open-dialog {
+
+    .md-dialog-overlay {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+
+
+.md-dialog-content-xxs {
+  max-width: 320px;
+
+  @media (min-width: $break-sm) {
+    max-width: 445px;
+  }
+}
+
+.md-dialog-content-xs {
+  max-width: 295px;
+}
+
+.md-dialog-content-sm {
+  max-width: 445px;
+}
+
+.md-dialog-content-md {
+  max-width: 595px;
+}
+
+.md-dialog-content-lg {
+  max-width: 899px;
+}
+
+.md-dialog-content-xl {
+  max-width: 950px;
+}

package/scss/elements/_md-drawer.scss

@@ -37,7 +37,7 @@
   justify-content: space-between;
   padding: 16px 20px;
   @media (min-width: $break-sm) {
-    padding: 24px 60px 24px 40px;
+    padding: 24px 60px 24px 40px;
   }
   .btn-close {
     position: absolute;

package/scss/elements/_modal.scss

@@ -130,7 +130,6 @@
 
 .modalx-centered {
   display: flex;
-  -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   min-height: calc(100% - (0.5rem * 2));

package/scss/elements/_toast.scss

@@ -18,7 +18,7 @@
     transform: translate(-50%, 200%);
     bottom: 32px;
     left: 50%;
-    max-width: 375px;
+    max-width: 385px;
   }
   &.appear {
     transform: translateY(0);

package/scss/hg-lite/abstract/_mixins.scss

@@ -39,7 +39,7 @@
       $property
     );
     $property-class-modifier: if($key, '-' + $key, '');
-    $breakpoint-class: if($breakpoint, $breakpoint + '\:', '');
+    $breakpoint-class: if($breakpoint, $breakpoint + '\\:', '');
     $generated-property: $breakpoint-class + $prefix + $property-class + $property-class-modifier;
 
     @if $value {

package/scss/hg-lite/hg-lite.scss

@@ -1,3 +1,3 @@
-@forward './abstract';
-@forward './generic';
-@forward './utilities';
+@use './abstract' as *;
+@use './generic' as *;
+@use './utilities' as *;

package/scss/hg-lite/utilities/_sr-only.scss

@@ -1,5 +1,5 @@
 .hg-sr-only:not(:focus, :active) {
-  clip: rect(0 0 0 0);
+  clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;

package/scss/layouts/_card.scss

@@ -4,21 +4,3 @@
   width: 100%;
 }
 
-.text-box {
-  $text-box-img: 80px;
-
-  .text-box-img {
-    display: inline-block;
-    width: $text-box-img - $padding-global;
-    height: $text-box-img - $padding-global;
-    margin: 5px $padding-global 0 0;
-    vertical-align: top;
-    box-sizing: border-box;
-  }
-
-  .text-box-inner {
-    box-sizing: border-box;
-    width: calc(100% - #{$text-box-img} - 5px);
-    display: inline-block;
-  }
-}

package/scss/layouts/_card9.scss

@@ -328,7 +328,7 @@ a:hover.card9-link {
 }
 
 div.card9-wrap .rat-content:hover .card9-add {
-  background-color: rgba(255 255 255 / 80%);
+  background-color: rgb(255 255 255 / 80%);
   opacity: 1;
 }
 

package/scss/layouts/_mainmenu.scss

@@ -1,83 +1 @@
 @import '../abstract/_all';
-
-.mn-mainmenu {
-  width: 100%;
-  max-width: 100%;
-  height: 100vh;
-  z-index: 2000;
-  position: relative;
-  overflow: auto;
-  padding-bottom: 150px;
-  @media (min-width: $break-sm) {
-    max-width: 400px;
-    padding-bottom: 0;
-  }
-  .mn-mainbar {
-    .tabs ul {
-      justify-content: center;
-      align-items: center;
-
-      @media (min-width: $break-sm) {
-        justify-content: flex-start;
-      }
-    }
-  }
-  .mn-list-item {
-    display: flex;
-    padding: 16px 80px;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .list-check {
-    li a {
-      position: relative;
-      list-style: none;
-      line-height: 1;
-    }
-    li.is-active {
-      & > a {
-        &::before {
-          content: '';
-          position: absolute;
-          top: calc(50% - 2px);
-          margin-left: -10px;
-          transform: translateY(-50%);
-          width: 4px;
-          height: 4px;
-          background-color: $c-primary;
-        }
-      }
-    }
-    .has-light & {
-      li.is-active {
-        a {
-          &::before {
-            content: '';
-            background-color: #fff;
-          }
-        }
-      }
-    }
-  }
-  .mn-wrap-overlay {
-    position: fixed;
-    background-color: #000;
-    inset: 0;
-    z-index: 1000;
-  }
-
-  .mn-footer {
-    position: fixed;
-    width: 100%;
-    z-index: 3000;
-    bottom: 0;
-    background-color: white;
-  }
-  .mn-search-zone {
-    display: grid;
-  }
-  .mn-mainbar-cesta {
-    padding: 10px;
-    text-align: right;
-  }
-}

package/scss/elements/_md-skip-to-content.scss

@@ -1,17 +0,0 @@
-.md-skip-to-content {
-  left: 16px;
-  margin-top: -120px;
-  position: absolute;
-  top: 8px;
-  transition: margin 0.2s ease-in-out;
-  z-index: 10000;
-
-  &:focus {
-    margin-top: 0;
-
-    &.btn-primary {
-      background-color: $c-black;
-      border-color: $c-black;
-    }
-  }
-}

package/scss/layouts/_box4.scss

@@ -1,19 +0,0 @@
-@import '../abstract/_all';
-
-.box4 {
-  position: relative;
-  display: flex;
-  ul {
-    margin-left: 16px;
-    margin-top: 4px;
-  }
-  &::before {
-    width: 2px;
-    height: calc(100% - 48px);
-    content: '';
-    position: absolute;
-    background-color: $c-dark-grey;
-    top: 44px;
-    left: 20px;
-  }
-}

package/scss/layouts/_feel.scss

@@ -1,2 +0,0 @@
-@import '../abstract/_all';
-$border-gray: $c-middle-grey;

package/scss/layouts/_row1.scss

@@ -1,89 +0,0 @@
-@import '../abstract/_all';
-.row1-wrap {
-  overflow: hidden;
-}
-.row1 {
-  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,
-  .box-super {
-    box-sizing: border-box;
-    display: block;
-    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 {
-    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,
-    .box-single-center,
-    .box-double,
-    .box-super {
-      flex-basis: calc(25% - 1em);
-      max-width: 25%;
-    }
-  }
-}