@appartmint/mint 2.1.2 → 2.1.4

package/src/scss/imports/components/_video.scss

@@ -5,6 +5,7 @@
 @charset 'utf-8';
 
 /// Imports
+@use 'sass:map';
 @use '../util' as *;
 
 /// Video Styles
@@ -14,59 +15,22 @@
 		flex-direction: column;
 		align-items: flex-end;
 		justify-content: center;
+		flex-direction: row;
+		min-height: calc(100vh - css-var(header-height) + 10rem);
 		gap: 2rem;
 		position: relative;
+		@include exit-padding;
+		@include fluid-padding;
 
-		@include break(lg) {
-			flex-direction: row;
-			min-height: calc(100vh - css-var(header-height));
-			margin-bottom: 15%;
-		}
-
-		& > section {
-			@include break(lg) {
-				margin-bottom: -15%;
-			}
-		}
-
-		iframe, video {
+		iframe, video, #{class(image)}, #{class(embed)} {
+			position: absolute;
+			top: 0;
+			padding: 0;
 			width: 100%;
-			height: 100%;
+			height: calc(100vh - css-var(header-height));
+			border: none;
 			object-fit: cover;
 			pointer-events: none;
-
-			@include break(lg) {
-				position: absolute;
-				width: 100vw;
-				border: none;
-				padding: 0;
-			}
-
-			& + * {
-				#{class(grid)} {
-					@include break(lg) {
-						margin-bottom: -15%;
-					}
-				}
-			}
-		}
-
-		&#{class(overflow)} {
-			overflow: hidden;
-			margin-bottom: 0;
-
-			& > section {
-				@include break(lg) {
-					margin-bottom: 0;
-				}
-			}
-
-			iframe, video {
-				top: -10%;
-				left: -10%;
-				width: 120%;
-				height: 120%;
-			}
 		}
 	}
 }

package/src/scss/imports/global/_animations.scss

@@ -87,7 +87,7 @@
     position: relative;
     overflow: hidden;
 
-    @include states(hover, focus, active) {
+    @include states(hover, focus, active, mint-active) {
         &::after {
             transition-duration: delay(default);
             transform: translate(100%, -100%);

package/src/scss/imports/global/_global.scss

@@ -105,7 +105,7 @@ main {
 				width: 100%;
 				padding: 0.25rem;
 
-				@include fluid(padding, map.get($break, xs) * 1px, map.get($break, sm) * 1px, 4px, 16px);
+				@include fluid-padding;
 
 				&+:not(#{prefix(partial-footer)}) {
 					height: 0;

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

@@ -117,7 +117,7 @@ a {
 		}
 	}
 
-	@include states(hover, focus, active) {
+	@include states(hover, focus, active, mint-active) {
 		color: css-var($link-color-hover);
 
 		.fa-facebook,

package/src/scss/imports/util/_index.scss

@@ -5,5 +5,5 @@
 @charset 'utf-8';
 
 /// Imports
-@forward './util';
 @forward './vars';
+@forward './util';

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

@@ -10,6 +10,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
+@use 'vars' as *;
 
 /// Library name
 /// @group Variables
@@ -746,8 +747,9 @@ $bootstrap5: false !default;
 /// @param {String} $max-vw - the maximum screen width of the fluid property
 /// @param {String} $min-size - the minimum value of the fluid property
 /// @param {String} $max-size - the maximum value of the fluid property
+/// @param {String} $base - the base value of the fluid property
 /// @output the definitions for the property at different screen sizes
-@mixin fluid ($prop, $min-vw, $max-vw, $min-size, $max-size) {
+@mixin fluid ($prop, $min-vw, $max-vw, $min-size, $max-size, $base: null) {
 	$u1: math.unit($min-vw);
 	$u2: math.unit($max-vw);
 	$u3: math.unit($min-size);
@@ -765,20 +767,53 @@ $bootstrap5: false !default;
 		@error 'The fluid mixin requires width and size arguments with the same units.';
 	}
 
-	// See if you can get rid of this wrapping & selector
 	& {
-		#{$prop}: $min-size;
-
-		@media (min-width: $min-vw) {
-			#{$prop}: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
-		}
-
-		@media (min-width: $max-vw) {
-			#{$prop}: $max-size;
+		@if ($base) {
+			#{$prop}: calc($base + $min-size);
+	
+			@media (min-width: $min-vw) {
+				#{$prop}: calc($base + #{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+			}
+	
+			@media (min-width: $max-vw) {
+				#{$prop}: calc($base + $max-size);
+			}
+		} @else {
+			#{$prop}: $min-size;
+	
+			@media (min-width: $min-vw) {
+				#{$prop}: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+			}
+	
+			@media (min-width: $max-vw) {
+				#{$prop}: $max-size;
+			}
 		}
 	}
 }
 
+/// Gives a container fluid padding
+/// @group Mixins
+///
+///
+@mixin fluid-padding {
+	$padding-min-vw: map.get($break, $pad-min-vw) * 1px;
+	$padding-max-vw: map.get($break, $pad-max-vw) * 1px;
+	@include fluid(padding, $padding-min-vw, $padding-max-vw, $pad-min-size, $pad-max-size);
+}
+
+/// Negates a page's padding
+/// @group Mixins
+///
+///
+@mixin exit-padding {
+	$padding-min-vw: map.get($break, $pad-min-vw) * 1px;
+	$padding-max-vw: map.get($break, $pad-max-vw) * 1px;
+	@include fluid(top, $padding-min-vw, $padding-max-vw, $pad-min-size * -1, $pad-max-size * -1);
+	@include fluid(left, $padding-min-vw, $padding-max-vw, $pad-min-size * -1, $pad-max-size * -1);
+	@include fluid(width, $padding-min-vw, $padding-max-vw, $pad-min-size * 2, $pad-max-size * 2, 100%);
+}
+
 /// Generates css varibles for lighter, darker, or both variations
 /// @group Mixins
 ///
@@ -899,7 +934,12 @@ $bootstrap5: false !default;
 
 	@if (list.index($states, 'active') != null) {
 
-		&:active,
+		&:active {
+			@content;
+		}
+	}
+
+	@if (list.index($states, 'mint-active') != null) {
 		&#{class(active)} {
 			@content;
 		}
@@ -964,14 +1004,11 @@ $bootstrap5: false !default;
 @mixin headers () {
 	@for $i from 1 through 6 {
 		h#{$i},
-		#{class(h#{$i})
-	}
-
-		{
-		@content;
+		#{class(h#{$i})} {
+			@content;
+		}
 	}
 }
-}
 
 
 /// Background clip text

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

@@ -89,6 +89,10 @@ $font-size-desktop: (
 
 /// Structure
 $grid-gap: 2rem !default;
+$pad-min-vw: xs !default;
+$pad-max-vw: sm !default;
+$pad-min-size: 4px !default;
+$pad-max-size: 16px !default;
 
 /// Outline width
 $border-width: 0.125rem !default;