@appartmint/mint 0.11.8 → 0.11.10

package/src/scss/imports/global/_structure.scss

@@ -3,66 +3,66 @@
 
 /// Structure styles
 #{class(pad)} {
-    @include break-util(padding, 1rem, 0);
+	@include break-util(padding, 1rem, 0);
 }
 
 #{class(margin)} {
-    @include break-util(margin, 1rem, 0);
+	@include break-util(margin, 1rem, 0);
 
-    &-auto {
-        margin-left: auto;
-        margin-right: auto;
+	&-auto {
+		margin-left: auto;
+		margin-right: auto;
 
-        &-v {
-            margin: 1rem auto;
+		&-v {
+			margin: 1rem auto;
 
-            @for $i from 0 through 6 {
-                &#{$i} {
-                    margin: 1rem * $i auto;
-                }
-            }
-        }
+			@for $i from 0 through 6 {
+				&#{$i} {
+					margin: 1rem * $i auto;
+				}
+			}
+		}
 
 		&-t {
 			margin-top: 1rem;
 			margin-left: auto;
-        	margin-right: auto;
+			margin-right: auto;
 
 			@for $i from 0 through 6 {
-                &#{$i} {
-                    margin-top: 1rem * $i;
+				&#{$i} {
+					margin-top: 1rem * $i;
 					margin-left: auto;
-        			margin-right: auto;
-                }
-            }
+					margin-right: auto;
+				}
+			}
 		}
 
 		&-b {
 			margin-bottom: 1rem;
 			margin-left: auto;
-        	margin-right: auto;
+			margin-right: auto;
 
 			@for $i from 0 through 6 {
-                &#{$i} {
-                    margin-bottom: 1rem * $i;
+				&#{$i} {
+					margin-bottom: 1rem * $i;
 					margin-left: auto;
-        			margin-right: auto;
-                }
-            }
+					margin-right: auto;
+				}
+			}
 		}
-    }
+	}
 
-    &-v {
-        margin-top: 1rem;
+	&-v {
+		margin-top: 1rem;
 		margin-bottom: 1rem;
 
-        @for $i from 0 through 6 {
-            &#{$i} {
-                margin-top: 1rem * $i;
+		@for $i from 0 through 6 {
+			&#{$i} {
+				margin-top: 1rem * $i;
 				margin-bottom: 1rem * $i;
-            }
-        }
-    }
+			}
+		}
+	}
 
 	&-t {
 		margin-top: 1rem;
@@ -84,80 +84,82 @@
 		}
 	}
 
-    &-h {
-        margin-left: 1rem;
+	&-h {
+		margin-left: 1rem;
 		margin-right: 1rem;
 
-        @for $i from 0 through 6 {
-            &#{$i} {
-                margin-left: 1rem * $i;
+		@for $i from 0 through 6 {
+			&#{$i} {
+				margin-left: 1rem * $i;
 				margin-right: 1rem * $i;
-            }
-        }
-    }
+			}
+		}
+	}
 
 	&-l {
-        margin-left: 1rem;
+		margin-left: 1rem;
 
-        @for $i from 0 through 6 {
-            &#{$i} {
-                margin-left: 1rem * $i;
-            }
-        }
-    }
+		@for $i from 0 through 6 {
+			&#{$i} {
+				margin-left: 1rem * $i;
+			}
+		}
+	}
 
 	&-r {
 		margin-right: 1rem;
 
-        @for $i from 0 through 6 {
-            &#{$i} {
+		@for $i from 0 through 6 {
+			&#{$i} {
 				margin-right: 1rem * $i;
-            }
-        }
-    }
+			}
+		}
+	}
 }
 
 section {
 	width: 100%;
 
-    &#{class(smaller)} {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: break(xs);
-    }
-
-    &#{class(small)} {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: break(sm);
-    }
-
-    &#{class(default)} {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: break(md);
-    }
-
-    &#{class(big)} {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: break(lg);
-    }
-
-    &#{class(bigger)} {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: break(xl);
-    }
+	&#{class(smaller)} {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: break(xs);
+	}
+
+	&#{class(small)} {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: break(sm);
+	}
+
+	&#{class(default)} {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: break(md);
+	}
+
+	&#{class(big)} {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: break(lg);
+	}
+
+	&#{class(bigger)} {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: break(xl);
+	}
 }
 
 #{class(center)} {
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
 
 	&-down {
-		&, & * {
+
+		&,
+		& * {
 			align-items: center;
 			justify-content: center;
 			text-align: center;
@@ -166,48 +168,48 @@ section {
 }
 
 #{class(grid)} {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: $grid-gap;
-    margin: $grid-gap 0;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: $grid-gap;
+	margin: $grid-gap 0;
 
-	& > * {
+	&>* {
 		margin: 0;
 	}
 
-    &#{class('2')} {
-        @include break(sm) {
-            grid-template-columns: repeat(2, 1fr);
-        }
-    }
+	&#{class('2')} {
+		@include break(sm) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
 
-    &#{class('3')} {
-        @include break(sm) {
-            grid-template-columns: repeat(2, 1fr);
-        }
+	&#{class('3')} {
+		@include break(sm) {
+			grid-template-columns: repeat(2, 1fr);
+		}
 
-        @include break(lg) {
-            grid-template-columns: repeat(3, 1fr);
-        }
-    }
+		@include break(lg) {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
 
-    &#{class('4')} {
-        @include break(sm) {
-            grid-template-columns: repeat(2, 1fr);
-        }
+	&#{class('4')} {
+		@include break(sm) {
+			grid-template-columns: repeat(2, 1fr);
+		}
 
-        @include break(lg) {
-            grid-template-columns: repeat(3, 1fr);
-        }
+		@include break(lg) {
+			grid-template-columns: repeat(3, 1fr);
+		}
 
-        @include break(xl) {
-            grid-template-columns: repeat(4, 1fr);
-        }
-    }
+		@include break(xl) {
+			grid-template-columns: repeat(4, 1fr);
+		}
+	}
 
-    #{class(portrait)} {
-        grid-row: span 2;
-    }
+	#{class(portrait)} {
+		grid-row: span 2;
+	}
 }
 
 #{class(fit)} {
@@ -216,3 +218,11 @@ section {
 	margin-left: auto;
 	margin-right: auto;
 }
+
+#{class(left)} {
+	float: left;
+}
+
+#{class(right)} {
+	float: right;
+}

package/src/scss/imports/global/_text.scss

@@ -1,7 +1,7 @@
 /// text.scss - Text styles
-/// @author App/Art Mint
+/// @author App Art Mint LLC
 ///
-/// @group Animations
+/// @group Text
 @charset 'utf-8';
 
 /// Imports
@@ -18,7 +18,7 @@ html, body {
 }
 
 p {
-    line-height: 1.75;
+    line-height: $font-height;
 }
 
 @include headers () {

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

@@ -0,0 +1,78 @@
+/// _texture.scss - Texture styles
+/// @author App Art Mint LLC
+///
+/// @group Texture
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Texture Mixin
+@mixin mint-texture () {
+    position: relative;
+    
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        opacity: $texture-opacity;
+        background-image: url($texture-bg);
+        background-size: $texture-bg-size;
+        background-position: $texture-bg-position;
+        @if ($texture-blend) {
+            mix-blend-mode: $texture-blend;
+        }
+    }
+
+    & > * {
+        position: relative;
+        z-index: 10;
+    }
+}
+
+/// Border Mixin
+@mixin mint-border () {
+	padding: $texture-padding + $texture-border-width;
+	border-image-source: url($texture-border-image);
+	border-image-slice: $texture-border-slice;
+	border-image-repeat: #{$texture-border-repeat};
+	border-image-width: $texture-border-width;
+	border-style: $texture-border-type;
+}
+
+/// Texture Styles
+#{class(texture)} {
+    @if $texture-bg {
+        @include mint-texture();
+    }
+}
+
+/// Border Styles
+#{class(border)} {
+    @extend #{class(texture)};
+    @if $texture-border-image {
+        @include mint-border();
+    } @else if $texture-border-color {
+        border: $texture-border-width $texture-border-type css-var($texture-border-color);
+    }
+}
+
+#{class(frame)} {
+    @extend #{class(border)};
+    @if $texture-border-image {
+        padding: $texture-border-width;
+    } @else if $texture-border-color {
+        padding: 0;
+    }
+    
+}
+
+#{class(card)} {
+	#{class(content)} {
+		@extend #{class(border)};
+	}
+}

package/src/scss/imports/global/_themes.scss

@@ -1,5 +1,5 @@
-/// themes.scss - Styles for light and dark themes
-/// @author App/Art Mint
+/// _themes.scss - Styles for light and dark themes
+/// @author App Art Mint LLC
 ///
 /// @group Themes
 @charset 'utf-8';

package/src/scss/imports/util/_util.scss

@@ -1,5 +1,5 @@
-/// util.scss - Variables, Functions, and Mixins to import elsewhere
-/// @author App/Art Mint
+/// _util.scss - Variables, Functions, and Mixins to import elsewhere
+/// @author App Art Mint LLC
 ///
 /// @group Util
 

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

@@ -1,5 +1,5 @@
-/// vars.scss - Global variables
-/// @author App/Art Mint
+/// _vars.scss - Global variables
+/// @author App Art Mint LLC
 ///
 /// @group Vars
 @charset 'utf-8';
@@ -56,6 +56,7 @@ $font-primary: sans-serif !default;
 $font-secondary: serif !default;
 $font-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 $font-secondary-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-height: 1.25 !default;
 
 /// Font Sizes
 $font-size-mobile: (
@@ -115,7 +116,10 @@ $btn-fore: fore !default;
 $btn-fore-alt: $btn-fore !default;
 $btn-fore-hover: back !default;
 $btn-fore-alt-hover: $btn-fore-hover !default;
-$btn-back: brand-5 !default;
+$btn-back: brand-2 !default;
+@if ($theme-default == dark) {
+    $btn-back: brand-5;
+}
 $btn-back-alt: trans !default;
 $btn-back-alt-hover: accent-2 !default;
 $btn-border: brand-3 !default;
@@ -132,3 +136,19 @@ $card-radius: $border-radius !default;
 $card-shadow-color: $shadow-color !default;
 $card-shadow-size: $shadow-size !default;
 $card-logo-size: 4rem !default;
+
+/// Texture
+$texture-padding: 1rem !default;
+
+$texture-bg: null !default;
+$texture-bg-size: cover !default;
+$texture-bg-position: center !default;
+$texture-blend: null !default;
+$texture-opacity: 1 !default;
+
+$texture-border-width: 1.25rem !default;
+$texture-border-type: solid !default;
+$texture-border-color: null !default;
+$texture-border-image: null !default;
+$texture-border-slice: 42 42 !default;
+$texture-border-repeat: round !default;

package/src/scss/mint.scss

@@ -1,4 +1,4 @@
-/// mint.scss - Front-end library of App/Art Mint LLC
+/// mint.scss - Front-end library of App Art Mint LLC
 /// @author App Art Mint LLC
 /// 
 /// @group Mint

package/src/scss/noscript.scss

@@ -1,5 +1,5 @@
 /// noscript.scss - Styles for when JavaScript is disabled
-/// @author App/Art Mint
+/// @author App Art Mint LLC
 /// 
 /// @group Main
 @charset 'utf-8';