@appartmint/mint 0.12.11 → 0.12.13

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

@@ -11,16 +11,16 @@
 /// CSS Variables
 :root {
 	@include css-var(header-height, $header-height);
-	@include css-var-ref(header-bg, $header-bg);
-	@include css-var-ref(header-fg, $header-fg);
+	@include css-var-ref(header-back, $header-back);
+	@include css-var-ref(header-fore, $header-fore);
 }
 
 /// Header Styles
 #{id(header)} {
 	position: relative;
 	width: 100%;
-	color: css-var(header-fg);
-	background-color: css-var(header-bg);
+	color: css-var(header-fore);
+	background-color: css-var(header-back);
 	z-index: 10000;
 	height: css-var(header-height);
 	//padding: 0 calc(css-var(header-height) / 2);
@@ -66,7 +66,7 @@
 		left: 0;
 		width: 100%;
 		height: css-var(header-height);
-		background: css-var(header-bg);
+		background: css-var(header-back);
 		z-index: -1;
 	}
 
@@ -89,11 +89,13 @@
 		width: 100%;
 		margin: 0;
 		border: 0;
-		color: css-var(fore);
+		color: css-var($header-link-fore);
 		background: css-var(trans);
+		transition-property: color, background;
+		transition-duration: css-var(delay-default);
 
-		@include states(hover, focus) {
-			color: css-var(back);
+		@include states(hover) {
+			color: css-var($header-link-fore-hover);
 		}
 	}
 
@@ -126,12 +128,19 @@
 		padding: $menu-btn-padding;
 		width: $menu-bar-width + $menu-btn-padding * 2;
 		height: $menu-btn-height + $menu-btn-padding * 2;
-		margin-left: auto;
 		border-radius: $border-radius;
 		background: css-var($menu-btn-color);
 		box-shadow: $menu-btn-shadow-size css-var($menu-btn-shadow-color);
 		z-index: 1000;
 
+		@include states(hover) {
+			#{class(menu-icon)} {
+				&, &::before, &::after {
+					background-color: css-var($header-link-fore-hover);
+				}
+			}
+		}
+
 		#{class(menu-icon)} {
 			top: 50%;
 			left: 50%;
@@ -184,7 +193,7 @@
 		height: calc(100vh - css-var(header-height));
 		height: calc(100dvh - css-var(header-height));
 		z-index: -2;
-		background: css-var(header-bg);
+		background: css-var(header-back);
 		transition-duration: css-var(delay-default);
 		transition-property: top, right, bottom, left;
 		overflow: auto;
@@ -214,8 +223,8 @@
 					display: flex;
 					flex-direction: row;
 					flex-wrap: wrap;
-					align-items: center;
 					justify-content: space-evenly;
+					width: 100%;
 				}
 			}
 		}
@@ -253,15 +262,22 @@
 		}
 	}
 
-	#{id(widgets)} {
-		position: absolute;
-		top: 0;
-		right: 0;
-		height: css-var(header-height);
+	#{class(buttons)} {
+		flex-wrap: nowrap;
+		justify-content: flex-end;
+		width: 100%;
+		
+		a, button {
+			&#{neg(controls(wrapper))} {
+				display: flex;
+				width: auto;
+				padding: 0.5rem;
+			}
+		}
 	}
 
 	#{class(dropdown)} {
-		background: css-var(header-bg);
+		background: css-var(header-back);
 
 		button {
 			display: flex;

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

@@ -4,9 +4,6 @@
 /// @group Vars
 @charset 'utf-8';
 
-/// Default theme
-$theme-default: light !default;
-
 /// Global Colors
 $bitcoin: #FF9900;
 $ethereum: #3C3C3D;
@@ -87,13 +84,6 @@ $border-radius: 1rem !default;
 
 /// Header
 $header-height: 4rem !default;
-$header-bg: brand-2 !default;
-$header-fg: fore !default;
-
-@if ($theme-default == dark) {
-    $header-bg: brand-4;
-    $header-fg: back;
-}
 
 /// Default Shadows
 $shadow-color: glow-2 !default;
@@ -120,12 +110,6 @@ $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-2 !default;
-$btn-border: brand-4 !default;
-@if ($theme-default == dark) {
-    $btn-back: brand-2;
-    $btn-border: brand-4;
-}
 $btn-back-alt: trans !default;
 $btn-back-alt-hover: accent-2 !default;
 
@@ -158,3 +142,41 @@ $texture-border-color: null !default;
 $texture-border-image: null !default;
 $texture-border-slice: 42 42 !default;
 $texture-border-repeat: round !default;
+
+
+/// Themes
+$theme-default: light !default;
+
+/// Default Theme (light)
+
+/// Buttons
+$btn-back-default: brand-2;
+$btn-back: $btn-back-default !default;
+
+$btn-border-default: brand-4;
+$btn-border: $btn-border-default !default;
+
+/// Header
+$header-back-default: brand-2;
+$header-back: $header-back-default !default;
+
+$header-fore-default: fore;
+$header-fore: $header-fore-default !default;
+
+$header-link-fore-default: fore;
+$header-link-fore: $header-link-fore-default !default;
+
+$header-link-fore-hover-default: back;
+$header-link-fore-hover: $header-link-fore-hover-default !default;
+
+/// Dark Theme
+@if ($theme-default == dark) {
+
+    /// Buttons
+    $btn-back: if($btn-back != $btn-back-default, $btn-back, brand-5);
+    $btn-border: if($btn-border != $btn-border-default, $btn-border, brand-2);
+
+    /// Header
+    $header-back: if($header-back != $header-back-default, $header-back, brand-4);
+    $header-fore: if($header-fore != $header-fore-default, $header-fore, back);
+}