@appartmint/mint 0.13.4 → 0.14.0

package/src/scss/imports/components/_cards.scss

@@ -37,6 +37,18 @@
 		#{class(buttons)} {
 			justify-content: center;
 		}
+
+		&-title {
+			#{class(title)} {
+				text-align: center;
+			}
+		}
+
+		&-btns {
+			#{class(buttons)} {
+				justify-content: center;
+			}
+		}
 	}
 
 	&#{class(stagger)} {
@@ -45,7 +57,6 @@
 
 		@include break(sm) {
 			flex-direction: row;
-			width: calc(100% + $card-padding * 2);
 			border-radius: 0;
 			box-shadow: none;
 			overflow: visible;

package/src/scss/imports/components/_embed.scss

@@ -39,6 +39,18 @@
 
 			@include break(lg) {
 				position: absolute;
+				left: -1rem;
+				width: 100vw;
+				border: none;
+				padding: 0;
+			}
+
+			& + * {
+				#{class(grid)} {
+					@include break(lg) {
+						margin-bottom: -15%;
+					}
+				}
 			}
 		}
 

package/src/scss/imports/components/_header.scss

@@ -149,25 +149,68 @@
 
 	&#{class(spread)} {
 		@include break-max($header-break) {
-			#{$has-controls + neg(controls(wrapper))} {
-				display: none;
+			#{id(wrapper)} {
+				#{$has-controls} {
+					display: none;
 	
-				& + ul {
-					display: flex !important;
-					height: auto !important;
-					margin-bottom: 1rem !important;
+					&+ul {
+						display: flex !important;
+						height: auto !important;
+						margin-bottom: 1rem !important;
+					}
 				}
 			}
 		}
 
 		&#{neg(class(expand))} {
-			#{$has-controls + neg(controls(wrapper))} {
-				display: none;
+			#{id(wrapper)} {
+				#{$has-controls} {
+					display: none;
 	
-				& + ul {
-					display: flex !important;
-					height: auto !important;
-					margin-bottom: 1rem !important;
+					&+ul {
+						display: flex !important;
+						height: auto !important;
+						margin-bottom: 1rem;
+					}
+				}
+			}
+		}
+	}
+
+	&#{class(tray)} {
+		#{id(wrapper)} {
+			gap: 1.5rem;
+			font-size: 0.5em;
+
+			@include break(sm) {
+				max-width: 512px;
+			}
+
+			a, button {
+				padding: 0.75rem;
+				margin: 0.25rem 0;
+				line-height: 1;
+			}
+
+			nav {
+				&>ul {
+					flex-direction: column;
+					flex-wrap: nowrap;
+					justify-content: flex-start;
+				}
+				
+				li {
+					width: 100%;
+				}
+
+				#{$has-controls} {
+					&+ul {
+						margin-bottom: 3rem !important;
+
+						&>li:first-child {
+							font-size: 1.5em;
+						}
+					}
 				}
 			}
 		}
@@ -233,11 +276,12 @@
 
 	#{class(logo)} {
 		display: flex;
+		align-items: center;
 		width: auto;
 		text-decoration: none;
 
 		img {
-			max-width: css-var(header-height);
+			max-height: calc(2rem + css-var(header-height));
 		}
 	}
 
@@ -254,6 +298,7 @@
 
 		@include states(hover) {
 			background: css-var($header-link-back-hover);
+
 			#{class(menu-icon)} {
 
 				&,
@@ -412,6 +457,7 @@
 		flex-wrap: nowrap;
 		flex-shrink: 0;
 		justify-content: flex-end;
+		margin-left: auto;
 
 		a,
 		button {

package/src/scss/imports/global/_aspect.scss

@@ -28,5 +28,5 @@ $width: 16;
 $height: 9;
 #{class($width + '-' + $height)} {
 	@extend #{class(aspect)};
-	padding-top: math.div($height, $width) * 100%;
+	padding-top: math.div($height, $width) * 100% !important;
 }

package/src/scss/imports/global/_texture.scss

@@ -11,7 +11,7 @@
 @mixin mint-texture () {
     position: relative;
     
-    &::before {
+    &::before, &::after {
         content: '';
         position: absolute;
         top: 0;
@@ -19,16 +19,29 @@
         width: 100%;
         height: 100%;
         pointer-events: none;
+    }
+
+    &::before {
         opacity: $texture-opacity;
         background-image: url($texture-bg);
         background-size: $texture-bg-size;
         background-position: $texture-bg-position;
-        //z-index: 0;
         @if ($texture-blend) {
             mix-blend-mode: $texture-blend;
         }
     }
 
+    &::after {
+        opacity: $texture-alt-opacity;
+        background-size: $texture-alt-bg-size;
+        background-position: $texture-alt-bg-position;
+        mask-image: $texture-alt-mask;
+        @if ($texture-alt-blend) {
+            mix-blend-mode: $texture-alt-blend;
+        }
+        z-index: 1;
+    }
+
     & > * {
         position: relative;
         z-index: 10;
@@ -78,3 +91,15 @@
 		@extend #{class(border)};
 	}
 }
+
+@if $texture-alt-bg and $texture-alt-num {
+    @for $num from 1 through $texture-alt-num {
+        #{class(texture-#{$num})} {
+            #{class(content)} {
+                &::after {
+                    background-image: url('#{$texture-alt-bg}#{$num}.jpg');
+                }
+            }
+        }
+    }
+}

package/src/scss/imports/util/_vars.scss

@@ -138,6 +138,14 @@ $texture-bg-position: center !default;
 $texture-blend: null !default;
 $texture-opacity: 1 !default;
 
+$texture-alt-bg: null !default;
+$texture-alt-num: 0 !default;
+$texture-alt-opacity: 1 !default;
+$texture-alt-bg-size: cover !default;
+$texture-alt-bg-position: center !default;
+$texture-alt-mask: null !default;
+$texture-alt-blend: null !default;
+
 $texture-border-width: 1.25rem !default;
 $texture-border-type: solid !default;
 $texture-border-color: null !default;

package/src/ts/imports/components/header.ts

@@ -12,9 +12,12 @@ import mintSettings from '../util/settings';
  */
 export class mintHeader {
     /**
-     * Last-logged window width
+     * Navbar settings
      */
-    lastWidth: number = mintUtil.windowWidth();
+     settings: {[key: string]: any} = {
+        from: mintSide.Top,
+        fixed: true
+    };
 
     /**
      * Frequently-referenced elements
@@ -25,17 +28,11 @@ export class mintHeader {
      * Initializes and closes the menu
      */
     constructor (settings?: {[key: string]: any}) {
-        let defaultSettings: {[key: string]: any} = {
-            from: mintSide.Top,
-            fixed: true
-        };
-        mintSettings.set({ ...defaultSettings, ...settings });
-        
+        this.settings = {...this.settings, ...settings};
+
         this.attachElements();
         this.attachEvents();
         this.addClasses();
-        
-        this.setMobileMenu();
     }
 
     /**
@@ -44,27 +41,27 @@ export class mintHeader {
     attachElements () : void {
         this.el.html = document.querySelector('html');
         this.el.body = document.querySelector('body');
-        this.el.header = document.getElementById(mintSelectors.getId('header'));
-        this.el.mobileButton = this.el.header?.querySelector(mintSelectors.controls(mintSelectors.getId('wrapper'))) || null;
-        this.el.wrapper = document.getElementById(mintSelectors.getId('wrapper'));
+        this.el.header = document.getElementById('mint-header');
+        this.el.mobileButton = this.el.header?.querySelector(mintSelectors.controls('mint-wrapper')) || null;
+        this.el.wrapper = document.getElementById('mint-wrapper');
     }
 
     /**
      * Adds events to the dom
      */
     attachEvents () : void {
-        //window.addEventListener('resize', mintUtil.throttleEvent(this.eHandleResize.bind(this), mintSettings.delay.default, { trailing: false }));
+        window.addEventListener('resize', mintUtil.throttleEvent(this.eHandleResize.bind(this), mintSettings.delay.default));
         window.addEventListener('scroll', mintUtil.throttleEvent(this.eHandleScroll.bind(this), mintSettings.delay.default, { trailing: false }));
 
-        let focusables: NodeListOf<HTMLElement> | undefined = this.el.header?.querySelectorAll(mintSelectors.focusable),
-            lastFocusable: HTMLElement | undefined = focusables?.[focusables?.length - 1];
+        let focusables = this.el.header?.querySelectorAll(mintSelectors.focusable),
+            lastFocusable = focusables?.[focusables?.length - 1];
         lastFocusable?.addEventListener('keydown', mintUtil.throttleEvent(this.eWrapTab.bind(this)));
-        focusables?.forEach((focusable: HTMLElement) => {
+        focusables?.forEach((focusable) => {
             focusable.addEventListener('keydown', mintUtil.throttleEvent(this.eHandleKeypress.bind(this)));
         });
 
-        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.header?.querySelectorAll(mintSelectors.controls() + mintSelectors.neg(mintSelectors.controls(mintSelectors.ids.wrapper as string)));
-        menuButtons?.forEach((menuButton: HTMLElement) => {
+        let menuButtons = this.el.wrapper?.querySelectorAll(mintSelectors.controls());
+        menuButtons?.forEach((menuButton) => {
             menuButton.addEventListener('click', mintUtil.throttleEvent(this.eToggleMenu.bind(this), mintSettings.delay.slow, { trailing: false }));
         });
 
@@ -73,11 +70,17 @@ export class mintHeader {
     }
 
     /**
-     * Adds classes that inform the styles 
+     * Adds classes that inform the styles based on settings
      */
     addClasses () : void {
-        if (mintSettings.fixed) {
-            this.el.body?.classList.add(mintSelectors.getClass('fixed'));
+        this.el.header?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
+        this.el.header?.classList.add(`mint-${mintSide[this.settings.from ?? 0].toLowerCase()}`);
+
+        if (this.settings.fixed) {
+            this.el.body?.classList.add('mint-fixed');
+        }
+        if (this.settings.tray) {
+            this.el.header?.classList.add('mint-tray');
         }
     }
 
@@ -95,7 +98,7 @@ export class mintHeader {
         }, mintSettings.delay.fast);
 
         if (open) {
-            if (mintSettings.fixed !== true) {
+            if (this.settings.fixed !== true) {
                 window.scroll({
                     top: 0,
                     left: 0,
@@ -105,16 +108,26 @@ export class mintHeader {
 
             setTimeout(() => {
                 if (this.el.html) {
-                    this.el.html.style.overflow = 'hidden';
+                    let isMobile = mintUtil.windowWidth() <= mintSettings.break.sm,
+                        overflow = 'auto';
+
+                    if (this.settings.tray) {
+                        if (isMobile) {
+                            overflow = 'hidden';
+                        }
+                    } else {
+                        overflow = 'hidden';
+                    }
+                    this.el.html.style.overflow = overflow;
                 }
-            }, mintSettings.from === mintSide.Left ? mintSettings.delay.default : mintSettings.delay.instant);
+            }, this.settings.from === mintSide.Left ? mintSettings.delay.default : mintSettings.delay.instant);
             
             if (this.el.wrapper) {
                 this.el.wrapper.style.display = 'flex';
             }
 
             requestAnimationFrame(() => {
-                this.el.wrapper?.classList.add(mintSelectors.getClass('open'));
+                this.el.wrapper?.classList.add('mint-open');
             });
         } else {
             if (this.el.html) {
@@ -122,7 +135,7 @@ export class mintHeader {
             }            
             
             requestAnimationFrame(() => {
-                this.el.wrapper?.classList.remove(mintSelectors.getClass('open'));
+                this.el.wrapper?.classList.remove('mint-open');
             });
 
             this.closeAllMenus();
@@ -210,7 +223,7 @@ export class mintHeader {
         let activeButton: HTMLElement | null = document.activeElement as HTMLElement | null,
             activeMenu: HTMLElement | null = activeButton?.nextElementSibling as HTMLElement | null,
             showing: boolean = activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
-        if (activeButton?.getAttribute('aria-controls') === mintSelectors.ids.wrapper) {
+        if (activeButton?.getAttribute('aria-controls') === 'mint-wrapper') {
             activeMenu = this.el.wrapper;
         }
 
@@ -252,12 +265,24 @@ export class mintHeader {
     /**
      * Closes the mobile menu when the window resizes
      */
-    eHandleResize (e: Event) : void {
-        // Also check if resized from mobile to desktop
-        if (mintUtil.windowWidth() !== this.lastWidth) {
-            this.setMobileMenu();
+    eHandleResize () : void {
+        let isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true',
+            isMobile = mintUtil.windowWidth() <= mintSettings.break.sm,
+            overflow = 'auto';
+        
+        if (isOpen) {
+            if (this.settings.tray) {
+                if (isMobile) {
+                    overflow = 'hidden';
+                }
+            } else {
+                overflow = 'hidden';
+            }
+        }
+
+        if (this.el.html) {
+            this.el.html.style.overflow = overflow;
         }
-        this.lastWidth = mintUtil.windowWidth();
     }
 
     /**
@@ -289,7 +314,7 @@ export class mintHeader {
             subMenu = target?.closest('li');
         switch (e.key.toLowerCase()) {
             case 'escape':
-                if (subMenu?.classList.contains(mintSelectors.classes.open as string)) {
+                if (subMenu?.classList.contains('mint-open')) {
                     this.setMenu(subMenu);
                 } else {
                     this.setMobileMenu();
@@ -370,7 +395,7 @@ export class mintHeader {
      * Runs after the mobile menu transitions
      */
     eTransitionEnd () : void {
-        if (this.el.wrapper?.classList.contains(mintSelectors.getClass('open')) === false ) {
+        if (this.el.wrapper?.classList.contains('mint-open') === false ) {
             this.el.wrapper.style.display = 'none';
         }
     };

package/src/ts/imports/util/selectors.ts

@@ -75,33 +75,6 @@ export abstract class mintSelectors {
      */
     static subMenu: string = `${this.subMenuButtons} + ul${this.hasId}`;
 
-    /**
-     * Frequently-used ids
-     */
-    static ids: {[key: string]: string | {[key: string]: string}} = {
-        header: this.prefix('header'),
-        logo: this.prefix('logo'),
-        wrapper: this.prefix('wrapper'),
-        mainContent: this.prefix('main-content')
-    };
-
-    /**
-     * Classes
-     */
-    static classes: {[key: string]: string | {[key: string]: string}} = {
-        sides: {
-            top: this.prefix('top'),
-            right: this.prefix('right'),
-            bottom: this.prefix('bottom'),
-            left: this.prefix('left')
-        },
-        srOnly: this.prefix('sr-only'),
-        js: this.prefix('js'),
-        ready: this.prefix('ready'),
-        fixed: this.prefix('fixed'),
-        open: this.prefix('open')
-    };
-
     /**
      * Adds the library prefix to the beginning of the provided string
      * @param base - the string to be prefixed
@@ -175,24 +148,6 @@ export abstract class mintSelectors {
         return typeof bool === 'boolean' ? `[aria-expanded="${bool}"]` : this.hasExpanded;
     }
 
-    /**
-     * Returns the id of the requested element
-     */
-    static getId (id?: string) : string {
-        return this.ids[id ?? -1] as string ?? '';
-    }
-
-    /**
-     * Returns the class of the requested element
-     */
-    static getClass (className?: string, classGroup?: string) : string {
-        if (classGroup) {
-            let group: {[key: string]: string} = this.classes[classGroup] as {[key: string]: string};
-            return group[className ?? -1] ?? '';
-        }
-        return this.classes[className ?? -1] as string ?? '';
-    }
-
     /**
      * Returns a NodeList of HTMLElements within the given element that are focusable
      * @param el - the element whose focusable children will be returned

package/src/ts/imports/util/settings.ts

@@ -1,9 +1,3 @@
-/**
- * Imports
- */
-import { mintSide } from '../enum';
-import { mintSelectors } from './selectors';
-
 /**
  * Settings management
  * @public
@@ -32,14 +26,16 @@ export abstract class mintSettings {
     };
 
     /**
-     * Side of the window the mobile navbar enters from
+     * Breakpoint variables
      */
-    static from?: mintSide;
-
-    /**
-    * Whether the navbar is fixed or not
-    */
-    static fixed?: boolean;
+    static break: {[key: string]: number} = {
+        z: 0,
+        xs: 480,
+        sm: 768,
+        md: 1024,
+        lg: 1200,
+        xl: 1440
+    };
 
     /**
      * Update the provided settings variables
@@ -65,12 +61,10 @@ export abstract class mintSettings {
             }
         }
 
-        if (typeof settings.from === 'number') {
-            this.setFrom(settings.from);
-        }
-
-        if (typeof settings.fixed === 'boolean') {
-            this.setFixed(settings.fixed);
+        if (settings.break && Object.keys(settings.break).length) {
+            if (Object.values(settings.break).reduce((prev: any, next: any) => prev && typeof next === 'number', true)) {
+                this.break = {...this.break, ...settings.break};
+            }
         }
     }
 
@@ -87,34 +81,6 @@ export abstract class mintSettings {
             slow: this.delayBase + this.delayStep * 5
         };
     }
-
-    /**
-     * Updates the direction the navbar enters from
-     */
-    protected static setFrom (from: mintSide) : void {
-        if (this.from !== from) {
-            this.from = from;
-            let header: HTMLElement | null = document.getElementById(mintSelectors.getId('header'));
-            header?.classList.remove(...Object.values(mintSelectors.classes.sides));
-            header?.classList.add(mintSelectors.getClass(mintSide[this.from].toLowerCase(), 'sides'));
-        }
-    }
-
-    /**
-     * Updates whether or not the navbar is fixed
-     */
-    protected static setFixed (fixed: boolean) : void {
-        if (this.fixed !== fixed) {
-            this.fixed = fixed;
-            let header: HTMLElement | null = document.getElementById(mintSelectors.getId('header')),
-                fixedClass: string = mintSelectors.getClass('fixed');
-            if (this.fixed) {
-                header?.classList.add(fixedClass);
-            } else {
-                header?.classList.remove(fixedClass);
-            }
-        }
-    }
 };
 
 export default mintSettings;