holygrail2 1.3.44 → 1.3.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail2",
-  "version": "1.3.44",
+  "version": "1.3.46",
   "description": "A minimal, responsive, style-agnostic CSS framework.",
   "main": "scss/style.scss",
   "style": "dist/style.css",

package/scss/_partials.scss

@@ -32,6 +32,7 @@
 @import 'elements/bottom-sheet';
 @import 'elements/stepper';
 @import 'elements/drawer';
+@import 'elements/md-buttons';
 @import 'elements/md-accordion';
 @import 'elements/md-drawer';
 @import 'elements/md-link';

package/scss/base/_helpers.scss

@@ -875,9 +875,31 @@ strong {
 .is-through {
   text-decoration: line-through;
 }
+
 .gap-16 {
   gap: 16px;
 }
+
+.gap-8 {
+  gap: 8px;
+}
+
+.column-gap-16 {
+  column-gap: 16px;
+}
+
+.column-gap-8 {
+  column-gap: 8px;
+}
+
+.row-gap-16 {
+  row-gap: 16px;
+}
+
+.row-gap-8 {
+  row-gap: 8px;
+}
+
 .bg-primary-3 {
   background-color: $c-primary-3;
 }
@@ -1022,6 +1044,21 @@ strong {
   flex-grow: 0;
 }
 
+.shrink {
+  flex-shrink: 1;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.basis-auto {
+  flex-basis: auto;
+}
+
+.basis-full {
+  flex-basis: 100%;
+}
+
 .no-cursor {
   cursor: default;
 }

package/scss/elements/_md-buttons.scss

@@ -0,0 +1,3 @@
+.md-button-wrapper {
+  display: contents;
+}

package/scss/elements/_md-drawer.scss

@@ -23,7 +23,7 @@
   --md-drawer-padding-inline: 20px;
   
   @media (min-width: $break-sm) {
-    --md-drawer-padding-inline: 32px;
+    --md-drawer-padding-inline: 40px;
   }
 
   align-items: stretch;
@@ -59,30 +59,32 @@
   }
 }
 
-.btn.btn-drawer-close {
+.btn.md-btn-drawer-close {
+  align-items: center;
   align-self: flex-start;
-  margin-inline-start: auto;
-  width: auto;
-  height: auto;
-  min-height: 32px;
-  min-width: 32px;
   display: flex;
   flex-flow: column nowrap;
+  height: auto;
   justify-content: center;
-  align-items: center;
+  margin-block: 0;
+  margin-inline-start: auto;
+  margin-inline:  auto 0;
+  min-height: 32px;
+  min-width: 32px;
   padding: 0;
-  margin: 0;
+  width: auto;
 }
 
 .md-drawer-body {
+  align-items: stretch;
+  display: flex;
+  flex-flow: column nowrap;
   flex: 1 1 auto;
+  justify-content: flex-start;
   overflow-y: auto;
   padding-block: 24px;
   padding-inline: var(--md-drawer-padding-inline);
 
-  @media (min-width: $break-sm) {
-    padding-block: 40px;
-  }
 }
 
 .md-drawer-footer {
@@ -93,27 +95,16 @@
   justify-content: flex-start;
   padding-block: 16px;
   padding-inline: var(--md-drawer-padding-inline);
-  row-gap: 16px;
-
-  md-drawer-close,
-  md-button {
-    display: inline-flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    align-items: stretch;
-
-    .btn {
-      width: auto;
-      max-width: none;
-      min-width: auto;
-    }
-  }
 }
 
 .md-drawer-footer-action {
   flex: 1 1 auto;
 }
 
+.md-drawer-close {
+  display: contents;
+}
+
 .md-drawer.md-drawer-sm {
   width: 424px;
 }
@@ -122,20 +113,11 @@
   width: 720px;
 }
 
-.md-drawer:not(.md-drawer-footer-actions-column) {
+.md-drawer.md-drawer-reset {
+  .md-drawer-body,
   .md-drawer-footer {
-    align-items: center;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    padding: 0;
-    gap: 0;
-
-    md-drawer-close,
-    md-button {
-      flex: 1 1 0;
-      min-width: 0; /* evita overflow si el texto es largo */
-    }
+    --md-drawer-padding-inline: 0;
+    padding-block: 0;
   }
 }