dPVYWE

dPVYWE.markdown

dPVYWE

A Pen by Kris Dages on CodePen.

License.

index.html

<div ng-app="codepenApp" ng-controller="codepenApp.AppCtrl as app">
<!--Vertical centering requires a parent and children elements...-->
<div id="demo-container" class="flexbox-container">
	<div>This child div does not<br>have any specific styles<br>applied for vertical centering.</div>
	<div ng-class="{'flexitem-stretch': app.stretchOn}">Stretch me.</div>
  <form>
    <row><label for='stretchToggle'>Toggle Off-axis Stretch</label><input type="checkbox" id="stretchToggle" ng-model="app.stretchOn" /><input type=text ng-model="app.stretchOn"></row>
    <row><label for='nav-height'>Navbar and Outlier Height (x3)</label> <input type="number" id="nav-height" ng-model="app.height" ></row>
     <row><button ng-click="app.resetForm()">Reset</button></row>
  </form>
  <div class="outlier" style="{{'height:'+app.height*3+'px'}}"></div>
</div>
<header class="navbar navbar-default">
<nav id="persona-filter-bar" class="navbar-nav ng-isolate-scope" role="navigation" style="{{'height:'+app.height+'px'}}">
	<!-- <em-icon-button icon="user"></em-icon-button>
	<em-icon-button icon="add"></em-icon-button> -->
	<ul class="navbar-form">
		<li><a class="btn btn-lg"><i class="icon-user"></i></a></li>
		<li><a class="btn btn-lg"><i class="icon-add"></i></a></li>
	</ul>
	<div class="ui-select-multiple ui-select-bootstrap dropdown form-control ng-valid ng-dirty" ng-class="{open: $select.open}" multiple="multiple" close-on-select="false" ng-model="persona.profile.selected" theme="bootstrap" on-select="filterProfile($item, $model)" style="display:inline-block;min-width: 200px;"><div><span class="ui-select-match" placeholder="Profile"><!-- ngRepeat: $item in $select.selected --></span><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="ui-select-search input-xs ng-pristine ng-untouched ng-valid" placeholder="Profile" ng-disabled="$select.disabled" ng-hide="$select.disabled" ng-click="$select.activate()" ng-model="$select.search" style="width: 184px;"></div><ul class="ui-select-choices ui-select-choices-content dropdown-menu ng-scope" role="menu" aria-labelledby="dLabel" ng-show="$select.items.length > 0" repeat="profile in persona.profile.options()"><li class="ui-select-choices-group"><div class="divider ng-hide" ng-show="$select.isGrouped &amp;&amp; $index > 0"></div><div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header ng-binding ng-hide" ng-bind-html="$group.name"></div><!-- ngRepeat: profile in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: profile in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: profile in $select.items --></li></ul></div>	 
	<div class="ui-select-multiple ui-select-bootstrap dropdown form-control ng-valid ng-dirty" ng-class="{open: $select.open}" multiple="multiple" close-on-select="false" ng-model="persona.project.selected" theme="bootstrap" on-select="filterProject($item, $model)" style="display:inline-block;min-width: 200px;"><div><span class="ui-select-match" placeholder="Project"><!-- ngRepeat: $item in $select.selected --></span><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="ui-select-search input-xs ng-pristine ng-untouched ng-valid" placeholder="Project" ng-disabled="$select.disabled" ng-hide="$select.disabled" ng-click="$select.activate()" ng-model="$select.search" style="width: 184px;"></div><ul class="ui-select-choices ui-select-choices-content dropdown-menu ng-scope" role="menu" aria-labelledby="dLabel" ng-show="$select.items.length > 0" repeat="project in persona.project.options()"><li class="ui-select-choices-group"><div class="divider ng-hide" ng-show="$select.isGrouped &amp;&amp; $index > 0"></div><div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header ng-binding ng-hide" ng-bind-html="$group.name"></div><!-- ngRepeat: project in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: project in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: project in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: project in $select.items --></li></ul></div>
	<div class="ui-select-multiple ui-select-bootstrap dropdown form-control ng-valid ng-dirty" ng-class="{open: $select.open}" multiple="multiple" close-on-select="false" ng-model="persona.role.selected" theme="bootstrap" on-select="filterRole($item, $model)" style="display:inline-block;min-width: 200px;"><div><span class="ui-select-match" placeholder="Role"><!-- ngRepeat: $item in $select.selected --></span><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="ui-select-search input-xs ng-pristine ng-untouched ng-valid" placeholder="Role" ng-disabled="$select.disabled" ng-hide="$select.disabled" ng-click="$select.activate()" ng-model="$select.search" style="width: 184px;"></div><ul class="ui-select-choices ui-select-choices-content dropdown-menu ng-scope" role="menu" aria-labelledby="dLabel" ng-show="$select.items.length > 0" repeat="role in persona.role.options()"><li class="ui-select-choices-group"><div class="divider ng-hide" ng-show="$select.isGrouped &amp;&amp; $index > 0"></div><div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header ng-binding ng-hide" ng-bind-html="$group.name"></div><!-- ngRepeat: role in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: role in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: role in $select.items --></li></ul></div>
</nav>
<!--...but only the parent element needs CSS properties
    set for the vertical centering of child elements:-->
</header>
</div>

script.traceur

class AppController {
   constructor() {
     this.resetForm();
   }
   
   resetForm() {
     this.height = 55;
     this.stretchOn = false;
   }
  
 }

angular.module('codepenApp', [
	'ui.select',
	'ui.bootstrap',
])
  .config(uiSelectConfig => uiSelectConfig.theme = 'bootstrap')
  .controller('codepenApp.AppCtrl', AppController);

style.scss

@import "bourbon";

.flexbox-container {
	display: flex;
	align-items: center;
}

.flexitem-stretch {
  align-self: stretch;
}

.outlier {
  flex-basis: 50px;
}

#persona-filter-bar { 
  @extend .flexbox-container; 

  > ul {
    display: flex;
    align-items: stretch;
    align-self: stretch;
  }
  
  > ul > li,
  {
    display: flex;
    align-items: stretch;
    align-content: stretch;
  }
  
  > ul > li > a {
    display: flex;
    align-items: center;
    align-content: center;
    margin: 0;
    padding: 7px; //calculated somewhere i'm sure.
  }
}

* { box-sizing: border-box; }

body, input { font: 24px "Source Sans Pro", sans-serif; }

#demo-container {
			padding: 20px;
			background: #eee;
  
  div, form, input {
      border: 1px solid #777777;
      border-radius: 5px;
      background: #fefefe;
		
  }
  
  form {
    border: 0;
    box-shadow: 0px 2px 100px 18px rgba(0,0,0,.10);
    background: transparent;
    
    display: flex;
    flex-direction: column;
  }
  
 row { 
   margin-top: 3px;
   margin-bottom: 3px;
   display: flex;
   align-items: center;
   white-space: nowrap;
   &:first-of-type  { order: 1; } 
   &:nth-of-type(2) { order: 0; }
   &:nth-of-type(3)  { order: 2;  display: block; text-align: center; } 
   
 }
  
  div, form { margin-left: 20px; margin-right: 40px; padding: 10px;}
  label { width: 300px; margin-left: 20px; margin-right: 20px;}
  input[type=number] { padding: 3px; width: 100px;}
  input[type=checkbox] { width: 25px;}
  input[type=text] { width: 75px;}
}