<navbar icon="fa fa-fw fa-adjust" title="Style Guide" title-url="styleguide"></navbar><div class="page-container"><div class="page-header"><h1>Style Guide</h1><a class="btn btn-success" ng-click="ctrl.switchTheme()"><i class="fa fa-random"></i> Switch theme </a><a class="btn btn-inverse" ng-click="ctrl.switchTheme()"><i class="fa fa-refresh"></i> Reload</a><div class="page-header-tabs"><ul class="gf-tabs"><li class="gf-tabs-item" ng-repeat="page in ctrl.pages"><a class="gf-tabs-link" href="styleguide/{{page}}" ng-class="{active: ctrl.page[page]}">{{page}}</a></li></ul></div></div><div class="tab-pane" ng-if="ctrl.page.colors"><ul><li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}"><strong>${{color.name}}</strong> <em>{{color.value}}</em></li></ul></div><div class="tab-pane" ng-if="ctrl.page.buttons"><div ng-repeat="variant in ctrl.buttonVariants" class="row"><div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4"><button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">btn{{variant}}{{buttonName}}</button></div></div></div><div class="tab-pane" ng-if="ctrl.page.forms">forms</div></div>