breadcrumb styles to accomidate refactor

burf-customizations/layout/_breadcrumbs.scss

@@ -1,290 +1 @@
-
-// =================================================================
-// Breadcrumb Navigation Styles
-// =================================================================
-
-:where( .nav-crumbs ) {
-	background: var( --nav-crumbs-background, #fff );
-	border-block: var( --nav-crumbs-border, var( --bu-base-border, 1px solid #ddd ) );
-	display: flex;
-	font-family: var( --nav-crumb-font-family, var( --bu-base-font-family, sans-serif ) );
-	font-size: var( --nav-crumb-font-size, 1rem );
-	margin-block: var(--bu--content--margin-block, 1em);
-	margin-inline: auto;
-	padding: var( --nav-crumbs-padding-block, 0.75em ) var( --nav-crumbs-padding-inline, 0 );
-
-	grid-area: breadcrumbs;
-
-	width: var( --bu-container-size--content );
-
-	* {
-		line-height: 1em;
-		vertical-align: middle;
-	}
-
-	button {
-		background: var( --nav-crumbs-color-buttons-background, var( --bu-base-button-bg-color, #eee ) );
-		border: 0;
-		border-radius: var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
-		cursor: pointer;
-		font-family: var( --nav-crumb-font-family );
-		font-size: var( --nav-crumb-font-size, 1rem );
-		line-height: var( --nav-crumb-height, 1em );
-		margin: 0;
-		padding: var( --nav-crumb-button-padding, 0.75em 0.75em );
-
-		&:hover {
-			background: var( --nav-crumbs-color-buttons-background-hover, var( --nav-crumbs-color-buttons-background, var( --bu-base-button-bg-color, #eee ) ) );
-		}
-	}
-
-
-	&[ data-expandable="false" ] {
-		.nav-crumb-expander-wrapper {
-			display: none;
-		}	
-	}
-
-	// Styles for when breadcrumbs are expanded
-	&[ data-crumbs-expanded="true" ] {
-		display: block;
-
-		.nav-crumb-expander-wrapper {
-			display: none;
-		}
-
-		.nav-crumb-list {
-			display: inline;
-			height: auto;
-
-			// &::before {
-			// 	display: none;
-			// }
-
-			&::before {
-				display: none;
-			}
-		}
-
-		.nav-crumb {
-			a {
-				max-width: none;
-			}
-		}
-	}
-
-
-	// Styles for when breadcrumb dropdown menu is open
-	&[ data-menu-open="true" ] {
-
-		.nav-crumb-menu-wrapper {
-			min-width: clamp( 0px, var( --nav-crumb-char-count-current, 27ch ), 90vw );
-		}
-
-		.nav-crumb-current {
-			border-radius: var( --nav-crumbs-color-buttons-radius-d, var( --bu-base-button-border-radius, 4px ) var( --bu-base-button-border-radius, 4px ) 0 0 );
-			max-width: var( --nav-crumb-char-count-current, 27ch );
-
-			&::after {
-				content: "\f106";
-			}
-		}
-
-		.nav-crumb-menu {
-			border-radius: var( --bu-base-button-border-radius-menu-open, 0 0 var( --bu-base-button-border-radius, 4px ) var( --bu-base-button-border-radius, 4px ));
-		}		
-	}
-}
-
-.nav-crumb-list {
-	display: inline-flex;
-	flex-wrap: wrap;
-	height: calc( var( --nav-crumb-height, 1em ) + (var( --nav-crumb-padding, 0.75em ) * 2 ) );
-	list-style: none;
-	margin: 0;
-	max-width: var( --nav-crumblist-max-width );
-	overflow: hidden;
-	padding: 0;
-	vertical-align: middle;
-
-	// &:has(*:nth-child(3)) {
-	// 	--nav-crumb-max-width: 33%;
-	// }
-
-	&::before {
-		content: '';
-		display: inline;
-		height: 100%;
-	}
-}
-
-.nav-crumb,
-.nav-crumb-expander-wrapper {
-
-	&::after {
-		content:'/';
-		display: inline-block;
-		padding: var( --nav-crumb-spacer-padding, 0.75em 0.75em );
-	}
-}
-
-.nav-crumb {
-	display: inline-flex;
-	// max-width: var( --nav-crumb-max-width );
-
-	a {
-		color:  var( --nav-crumb-color-text, var( --bu-base-link-color, #0f69d7 ) );
-		display: inline-block;
-		margin: var( --nav-crumb-margin, 0.5  );
-		max-width: var( --nav-crumb-max-width );
-		overflow: hidden;
-		padding: var( --nav-crumb-padding, 0.75em ) 0;
-		text-decoration: none;
-		text-overflow: ellipsis;
-		vertical-align: middle;
-		white-space: nowrap;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}
-
-.nav-crumb-home {
-	a{
-		font-size: 0;
-		max-width: none;
-
-		&::before {
-			content: "\f015";
-			display: block;
-			font-family: "Font Awesome 5 Free";
-			font-size: var( --nav-crumb-font-size, 1rem );
-			-moz-osx-font-smoothing: grayscale;
-			-webkit-font-smoothing: antialiased;
-			float: right;
-			font-style: normal;
-			font-variant: normal;
-			font-weight: 900;
-			line-height: 1;
-			padding: var( --nav-crumb-padding, 0.75em ) 0;
-			text-decoration: none;
-			text-rendering: optimizeLegibility;
-			text-transform: none;
-			translate: 0 -0.1em;
-			white-space: nowrap;
-		}	
-	}
-
-}
-
-.nav-crumb-expander-wrapper,
-.nav-crumb-menu-wrapper {
-	flex-shrink: 0;
-}
-
-.nav-crumb-menu {
-	padding: var( --nav-crumb-menu-padding, 0.75em );
-}
-
-
-.nav-crumb-current {
-	display: inline-block;
-	max-width: var( --nav-crumb-char-count-current, 27ch );
-	overflow: hidden;
-	text-align: left;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100%;
-
-	&:is( span ) {
-		padding: var( --nav-crumb-padding, 0.75em ) 0;
-	}
-
-	&:is( button ) {
-		padding-right: calc( var( --nav-crumb-padding, 0.75em ) * 2 + 1em);
-
-		&::after {
-			content: "\f107";
-			display: block;
-			font-family: "Font Awesome 5 Free";
-			-moz-osx-font-smoothing: grayscale;
-			-webkit-font-smoothing: antialiased;
-			float: right;
-			font-style: normal;
-			font-variant: normal;
-			font-weight: 900;
-			line-height: 1;
-			position: absolute;
-			right: var(--nav-crumb-padding, 0.75em );
-			top: 50%;
-			text-decoration: none;
-			text-rendering: optimizeLegibility;
-			text-transform: none;
-			translate: 0 -50%;
-			white-space: nowrap;
-		}
-	}
-
-}
-
-.nav-crumb-menu-wrapper {
-	display: inline-block;
-	min-width: 0;
-	position: relative;
-	transition: min-width 250ms;
-
-	&:has( .nav-crumb-menu[open] ) {
-		min-width: clamp( 0px, var( --nav-crumb-char-count-current, 27ch ), 90vw );
-
-		.nav-crumb-current {
-			border-radius: var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) 0 0;
-
-			&::after {
-				content: "\f106";
-			}
-		}
-
-		.nav-crumb-menu {
-			border-radius: 0 0 var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
-		}
-	}
-}
-
-.nav-crumb-menu {
-	background:  var( --nav-crumbs-color-menu-background, var( --bu-base-button-bg-color, #eee ) );
-	border: 0;
-	box-sizing: border-box;
-	padding: var( --nav-crumb-padding, 0.75em );
-	position: absolute;
-	width: 100%;
-
-	ul,
-	menu {
-		border-inline-start: 2px solid var( --nav-crumbs-color-buttons-text, var( --bu-base-button-text-color, #333 ) );
-		border-inline-start: var( --nav-crumbs-border, var( --bu-base-border, 1px solid #ddd ) );
-		list-style: none;
-		margin: 0;
-		padding: var(--nav-crumb-padding, 0.75em );
-	}
-
-	li {
-		margin-block: 1em;
-
-		&:first-child {
-			margin-block-start: 0;
-		}
-
-		&:last-child {
-			margin-block-end: 0;
-		}
-	}
-
-	a {
-		color:  var( --nav-crumbs-color-menu-text, var( --bu-base-button-text-color, #333 ) );
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}
+@use 'navcrumbs';

burf-customizations/layout/_navcrumbs.scss

@@ -0,0 +1,33 @@
+@use 'navcrumbs/base';
+@use 'navcrumbs/trail';
+@use 'navcrumbs/menu';
+
+// --navcrumbs-background: background color for the breadcrumb container
+// --navcrumbs-border: border for the breadcrumb container
+// --navcrumbs-font-family: font family for the breadcrumb text
+// --navcrumbs-font-size: font size for the breadcrumb text
+// --navcrumbs-height: height of the breadcrumb container
+// --navcrumbs-margin-block: vertical margin for the breadcrumb container
+// --navcrumbs-padding-block: vertical padding for the breadcrumb container
+// --navcrumbs-width: width of the breadcrumb container
+
+// --navcrumbs-current-char-count: number of characters to display for the current breadcrumb
+// --navcrumbs-crumb-color-text: text color for the breadcrumb
+// --navcrumbs-crumb-max-width-factor: factor for calculating the maximum width of a breadcrumb
+// --navcrumbs-crumb-max-width-offset: offset for calculating the maximum width of a breadcrumb
+// --navcrumbs-crumb-max-width: maximum width of a breadcrumb
+// --navcrumbs-crumb-padding: padding for the breadcrumb
+
+// --navcrumbs-crumb-separator: separator character for the breadcrumbs
+
+// --navcrumbs-button-bg-color: background color for the breadcrumb button
+// --navcrumbs-button-bg-color-hover: background color for the breadcrumb button on hover
+// --navcrumbs-button-radius: border radius for the breadcrumb button
+// --navcrumbs-menu-bg-color: background color for the breadcrumb menu
+// --navcrumbs-menu-text-color: text color for the breadcrumb menu
+// --navcrumbs-menu-list-border: border for the breadcrumb menu list
+
+// --navcrumbs-home-icon: icon for the home breadcrumb
+// --navcrumbs-menu-icon-expander: icon for the breadcrumb trail expander
+// --navcrumbs-menu-icon-hidden: icon for the breadcrumb child nav menu toggle when the menu is hidden
+// --navcrumbs-menu-icon-shown: icon for the breadcrumb child nav menu toggle when the menu is shown

burf-customizations/layout/navcrumbs/_base.scss

@@ -0,0 +1,72 @@
+// =================================================================
+// Navigation Breadcrumb Base Styles
+// =================================================================
+
+:where( .navcrumbs ) {
+	--navcrumbs-background: #fff ;
+	--navcrumbs-border: var( --bu-base-border, 1px solid #ddd );
+	--navcrumbs-font-family: var( --bu-base-font-family, sans-serif );
+	--navcrumbs-font-size: 1rem;
+	--navcrumbs-height: 1em;
+	--navcrumbs-margin-block: var(--bu--content--margin-block, 1em);
+	--navcrumbs-padding-block: 0.75em;
+	--navcrumbs-width: var( --bu-container-size--content );
+
+	--navcrumbs-crumb-color-text: var( --bu-base-link-color, #0f69d7 );
+	--navcrumbs-crumb-max-width-factor: 0.04;
+	--navcrumbs-crumb-max-width-offset: 2ch;
+	--navcrumbs-crumb-max-width: calc( ( var( --navcrumbs-crumb-max-width-factor ) * var( --navcrumbs-available-width ) ) + var( --navcrumbs-crumb-max-width-offset ) );
+	--navcrumbs-crumb-padding: 0.75em;
+
+	--navcrumbs-crumb-separator: '/';
+
+	--navcrumbs-button-bg-color: var( --bu-base-button-bg-color, #eee );
+	--navcrumbs-button-bg-color-hover: var( --navcrumbs-button-bg-color );
+	--navcrumbs-button-radius: var( --bu-base-button-border-radius, 4px );
+
+	--navcrumbs-current-char-count: 27ch ;
+	--navcrumbs-menu-max-width: 320px;
+	--navcrumbs-menu-bg-color: var( --bu-base-button-bg-color, #eee );
+	--navcrumbs-menu-text-color: var( --bu-base-button-text-color, #333 );
+	--navcrumbs-menu-list-border: var( --navcrumbs-border );
+
+	--navcrumbs-home-icon: "\f015";
+	--navcrumbs-menu-icon-expander: "\f141";
+	--navcrumbs-menu-icon-hidden: "\f107";
+	--navcrumbs-menu-icon-shown: "\f106";
+}
+
+.navcrumbs {
+	background: var( --navcrumbs-background );
+	border-block: var( --navcrumbs-border );
+	display: flex;
+	font-family: var( --navcrumbs-font-family );
+	font-size: var( --navcrumbs-font-size );
+	margin-block: var( --navcrumbs-margin-block );
+	margin-inline: auto;
+	padding-block: var( --navcrumbs-padding-block );
+	padding-inline: 0;
+
+	width: var( --navcrumbs-width );
+
+	* {
+		box-sizing: border-box;
+		line-height: 1em;
+		vertical-align: middle;
+	}
+}
+
+.navcrumbs-button {
+	background: var( --navcrumbs-button-bg-color );
+	border: 0;
+	border-radius: var( --navcrumbs-button-radius );
+	font-family: var( --navcrumbs-font-family );
+	font-size: var( --navcrumbs-font-size );
+	line-height: var( --navcrumbs-height );
+	margin: 0;
+	padding: var( --navcrumbs-crumb-padding );
+
+	&:hover {
+		background: var( --navcrumbs-button-bg-color-hover );
+	}
+}