SCSS archetype nav flex boilerplate

scss-archetype-nav-flex-boiler.scss

%style-navbar{
	margin: auto;
	max-width: 880px; //$dim-content-wt
	height: auto; 
	padding:0;
	background-color: orange; //$color-bg-nav-default
}

%style-navbar-menu-l{
	margin: 0;
	padding: 0;
	list-style: none;
	//min-height: 2rem; // ($dim-header-height-4)
	/* FLEX CONTIANER RULES */
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	/* flex-direction: row | row-reverse | column | column-reverse; */
	flex-direction: row;
	/* flex-wrap: nowrap | wrap | wrap-reverse; */
	flex-wrap: nowrap;
	/* justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;*/
	justify-content: space-between;
	/* align-items: flex-start | flex-end | center | baseline | stretch; */ 
	align-items:stretch;
}

%style-navbar-menu-li{
	flex-basis: auto;
	line-height: 1em;
	text-align: center;
	overflow:visible;
	border-top: 2px solid orange; //$color-bg-nav-default
	border-bottom: 2px solid orange; //$color-bg-nav-default
	&:selected{
		border-bottom: 2px solid white; //$color-fill-border-nav-default
	}
}

%style-navbar-menu-link{
	display: inline-block;
	height: 2rem;
	height: 100%;
	line-height: 1;
	vertical-align:middle;
	text-align: center;
	padding: 0.25em 0.15em;
	background-color: orange; //$color-bg-nav-default
}

%style-navbar-menu-search{
	input{

	}
	button{
		position: relative;
		left:-2em;
		top:0;
		/*margin-left: -3rem;*/
		/*height: 1.2em;*/
		width: 2em;
	}
}