holygrail2 1.3.45 → 1.3.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail2",
-  "version": "1.3.45",
+  "version": "1.3.47",
   "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/_alignment.scss

@@ -138,6 +138,22 @@
   text-align: center;
 }
 
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
 .sticky-bottom {
   width: 100%;
   position: absolute;

package/scss/base/_helpers.scss

@@ -191,6 +191,9 @@ b {
   flex-flow: row nowrap;
   padding: 16px;
 }
+.text-inherit {
+  font-size: inherit;
+}
 .text-lowercase {
   text-transform: lowercase;
 }
@@ -875,9 +878,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 +1047,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/base/_spacing.scss

@@ -65,6 +65,63 @@ $break-xl: 1200px !default;
   }
 }
 
+
+.mr-auto {
+  margin-inline-end: auto;
+}
+
+.sm\:mr-auto {
+  @media (min-width: $break-sm) {
+    margin-inline-end: auto;
+  }
+}
+
+.md\:mr-auto {
+  @media (min-width: $break-md) {
+    margin-inline-end: auto;
+  }
+}
+
+.lg\:mr-auto {
+  @media (min-width: $break-lg) {
+    margin-inline-end: auto;
+  }
+}
+
+.xl\:mr-auto {
+  @media (min-width: $break-xl) {
+    margin-inline-end: auto;
+  }
+}
+
+.ml-auto {
+  margin-inline-start: auto;
+}
+
+.sm\:ml-auto {
+  @media (min-width: $break-sm) {
+    margin-inline-start: auto;
+  }
+}
+
+.md\:ml-auto {
+  @media (min-width: $break-md) {
+    margin-inline-start: auto;
+  }
+}
+
+.lg\:ml-auto {
+  @media (min-width: $break-lg) {
+    margin-inline-start: auto;
+  }
+}
+
+.xl\:ml-auto {
+  @media (min-width: $break-xl) {
+    margin-inline-start: auto;
+  }
+}
+
 .sm\:mb-0 {
   @media (min-width: $break-sm) {
     margin-bottom: 0;

package/scss/elements/_buttons.scss

@@ -1513,24 +1513,38 @@ button {
   }
 }
 .btn-quick {
+  align-items: center;
   background-color: transparent;
   border: 0 solid transparent;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  gap: 4px;
   height: auto;
+  justify-content: space-between;
   min-height: auto;
-  padding: 16px;
-  svg {
-    g {
+  min-width: 36px;
+  padding: 0;
+  width: auto;
+  color: $c-primary;
+  background-color: transparent;
+  line-height: 1;
+
+  .text {
+    line-height: 1;
+  }
+  
+  md-icon,
+  .icon {
+    display: inline-flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+
+    path {
       fill: $c-primary;
-      stroke: $c-primary;
     }
-    circle {
-      stroke: $c-primary;
-    }
-  }
-  .icon-sizes {
-    margin-top: -6px;
-    transform: translate(4px, 5px);
   }
+  
   &:focus,
   &.focus,
   &:hover,
@@ -1540,19 +1554,16 @@ button {
     border: 0 solid transparent;
     background-color: transparent;
     cursor: pointer;
-    .tab-inner-size {
-      position: relative;
-    }
-    .tab-inner-size::after {
-      position: absolute;
-      left: 0;
-      bottom: -2px;
-      content: '';
-      width: 100%;
-      height: 1px;
-      background-color: #000;
+    
+  }
+
+  &:hover,
+  &.hover {
+    .text {
+      text-decoration: underline;
     }
   }
+
   &:disabled,
   &[disabled],
   &.disabled {
@@ -1570,6 +1581,7 @@ button {
       border: 0 solid transparent !important;
     }
   }
+  
   .has-light & {
     color: $c-white;
     border-color: transparent;

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;
@@ -60,30 +60,31 @@
 }
 
 .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;
-  padding: 0;
   margin-block: 0;
+  margin-inline-start: auto;
   margin-inline:  auto 0;
+  min-height: 32px;
+  min-width: 32px;
+  padding: 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 {
@@ -94,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;
 }
@@ -123,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;
-    }
+    --md-drawer-padding-inline: 0;
+    padding-block: 0;
   }
 }