.cb-tabs {
    position: absolute;
    width: 100%;
    height: 100%;

    .section {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        border-bottom: 1px solid @tabSeparationColor;
        border-right: 1px solid @tabSeparationColor;

        &.dragover {
            .opacity(60);
        }

        .tabs-header {
            position: absolute;
            top: 0px;
            height: @tabHeight+@tabMarginTop;
            right: 0px;
            left: 0px;
            background: @tabBackground;
            padding-left: 12px;
            overflow: hidden;
            box-shadow: inset 0px -8px 9px -10px #000000;
        }

        .tabs-content {
            position: absolute;
            top: @tabHeight+@tabMarginTop - 1px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 1;
            background: @tabActiveColor;
            border-top: 1px solid @tabActiveBorder;
        }
    }
}

Add dragover effect for tabs sections

.cb-tabs {
    position: absolute;
    width: 100%;
    height: 100%;

    .section {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        border-bottom: 1px solid @tabSeparationColor;
        border-right: 1px solid @tabSeparationColor;

        &.dragover {
            opacity: 0.6;
        }

        .tabs-header {
            position: absolute;
            top: 0px;
            height: @tabHeight+@tabMarginTop;
            right: 0px;
            left: 0px;
            background: @tabBackground;
            padding-left: 12px;
            overflow: hidden;
            box-shadow: inset 0px -8px 9px -10px #000000;
        }

        .tabs-content {
            position: absolute;
            top: @tabHeight+@tabMarginTop - 1px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 1;
            background: @tabActiveColor;
            border-top: 1px solid @tabActiveBorder;
        }
    }
}


.Modal-backdrop {
 position: fixed;
 top: 0px;
 left: 0px;
 height:100%;
 width:100%;
 background: #000;
 z-index: 2;
 opacity: 0.5;
}

.Modal-holder {
  position: fixed;
  top: 1;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 3;
  overflow-y: scroll;

  .modal-dialog {
    padding-top: 100px;
  }
}

Fix instance modal backdrop styles

.Modal-backdrop {
 background: #000;
 height:100%;
 left: 0px;
 opacity: 0.25;
 position: fixed;
 top: 0px;
 width:100%;
 z-index: 1050;
}

.Modal-holder {
  bottom: 0px;
  left: 0px;
  overflow-y: scroll;
  position: fixed;
  right: 0px;
  top: 0px;
  top: 1;
  z-index: 1100;

  .modal-dialog {
    padding-top: 100px;
  }
}


@import 'variables';

// Base styles for reusable components like form elements.
.base--input {
  padding: @padding / 2;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid darken(@color__white, 20%);

  &:focus {
    outline: none;
    border-bottom-color: @color__blue--dark;
  }
}

.base--button {
  padding: (@padding / 2) @padding;
  background-color: @color__blue--light;
  color: @color__white;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-size: 80%;
  user-select: none;

  &:hover {
    background-color: darken(@color__blue--light, 5%);
    cursor: pointer;
  }

  &[disabled] {
    background-color: desaturate(@color__blue--light, 50%);
    &:hover {
      cursor: not-allowed;
    }
  }

  i {
    margin-right: @padding / 2;
  }
}

Hide input clear button on IE.

@import 'variables';

// Base styles for reusable components like form elements.
.base--input {
  padding: @padding / 2;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid darken(@color__white, 20%);

  &:focus {
    outline: none;
    border-bottom-color: @color__blue--dark;
  }

  &::-ms-clear {
    width: 0;
    height: 0;
  }
}

.base--button {
  padding: (@padding / 2) @padding;
  background-color: @color__blue--light;
  color: @color__white;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-size: 80%;
  user-select: none;

  &:hover {
    background-color: darken(@color__blue--light, 5%);
    cursor: pointer;
  }

  &[disabled] {
    background-color: desaturate(@color__blue--light, 50%);
    &:hover {
      cursor: not-allowed;
    }
  }

  i {
    margin-right: @padding / 2;
  }
}


@import 'bower_components/fontawesome/less/font-awesome';
@import 'bower_components/sl-bootstrap/less/bootstrap';
@import 'bower_components/bootstrap-datepicker/less/datepicker3';

@import 'sl-calendar';
@import 'sl-date-picker';
@import 'sl-drop-button';
@import 'sl-input';
@import 'sl-select';
@import 'sl-grid';
@import 'sl-filter';
@import 'sl-menu';
@import 'sl-pagination';
@import 'sl-loading-icon';
@import 'sl-menu';
@import 'sl-panel';
@import 'sl-progress-bar';
@import 'sl-select';
@import 'sl-tab-panel';

Remove duplicate Less import statements

@import 'bower_components/fontawesome/less/font-awesome';
@import 'bower_components/sl-bootstrap/less/bootstrap';
@import 'bower_components/bootstrap-datepicker/less/datepicker3';

@import 'sl-calendar';
@import 'sl-date-picker';
@import 'sl-drop-button';
@import 'sl-filter';
@import 'sl-grid';
@import 'sl-input';
@import 'sl-loading-icon';
@import 'sl-menu';
@import 'sl-pagination';
@import 'sl-panel';
@import 'sl-progress-bar';
@import 'sl-select';
@import 'sl-tab-panel';


.SideNav {
  position: fixed;
  z-index:10;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  padding-top: 55px;
  display: inline-block;
  background-color: @white;
  font-size: @font-size-base + 3px;
  .translate(calc(~"-100% - 12px"), 0);

  &.opened {
    .translate(0, 0);
  }
}

  .SideNav-ul {
    padding-left: 16px;
  }

    .SideNav-dropdown {
      max-height: 38px;
      overflow-y: hidden;
      position: relative;

      > .SideNav-button {
        margin-left: 16px;
      }

      &.opened {
        max-height: 300px;
      }
    }

      .SideNav-dropdown > .SideNav-ul:after {
        content: "";
        position: absolute;
        top: 38px;
        bottom: 0;
        left: 7px;
        border-left: @gray-border;
      }

        .SideNav-button {
          padding: 8px 20px 8px 4px;
          display: block;
        }

        .SideNav-button, .SideNav-button:hover {
          color: inherit;
          text-decoration: none;
        }

Fix sidenav calc, now that it has no shadow

.SideNav {
  position: fixed;
  z-index:10;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  padding-top: 55px;
  display: inline-block;
  background-color: @white;
  font-size: @font-size-base + 3px;

  .translate(-100%, 0);

  &.opened {
    .translate(0, 0);
  }
}

  .SideNav-ul {
    padding-left: 16px;
  }

    .SideNav-dropdown {
      max-height: 38px;
      overflow-y: hidden;
      position: relative;

      > .SideNav-button {
        margin-left: 16px;
      }

      &.opened {
        max-height: 300px;
      }
    }

      .SideNav-dropdown > .SideNav-ul:after {
        content: "";
        position: absolute;
        top: 38px;
        bottom: 0;
        left: 7px;
        border-left: @gray-border;
      }

        .SideNav-button {
          padding: 8px 20px 8px 4px;
          display: block;
        }

        .SideNav-button, .SideNav-button:hover {
          color: inherit;
          text-decoration: none;
        }


// Vendor
@import "bootstrap/bootstrap.less";
@import "react-select/select.less";
@import "../../node_modules/sprintly-ui/src/less/sprintly-ui";

// Utils
@import "utils/colors";
@import "utils/font-weights";
@import "utils/mixins";
@import "utils/typography";
@import "utils/z-index";

// Components
@import "components/header";
@import "components/columns";
@import "components/item-card";
@import "components/item-summary";
@import "components/sprint";
@import "components/product-selector";
@import "components/filters-toolbar";
@import "components/product-dropdown";
@import "components/search";
@import "components/add-item-modal";
@import "components/tags-input";
@import "components/sidebars/sidebar-filters";
@import "overrides";

html, body {
  height: 100%;
  color: @sprintly-black;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.loading {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;

  small {
    margin: 1rem;
    display: block;
  }
}

Update body bkgrd to sprint.ly black for sidebar nav

// Vendor
@import "bootstrap/bootstrap.less";
@import "react-select/select.less";
@import "../../node_modules/sprintly-ui/src/less/sprintly-ui";

// Utils
@import "utils/colors";
@import "utils/font-weights";
@import "utils/mixins";
@import "utils/typography";
@import "utils/z-index";

// Components
@import "components/header";
@import "components/columns";
@import "components/item-card";
@import "components/item-summary";
@import "components/sprint";
@import "components/product-selector";
@import "components/filters-toolbar";
@import "components/product-dropdown";
@import "components/search";
@import "components/add-item-modal";
@import "components/tags-input";
@import "components/sidebars/sidebar-filters";
@import "overrides";

html, body {
  height: 100%;
  color: @sprintly-black;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: @sprintly-black;
}

.loading {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;

  small {
    margin: 1rem;
    display: block;
  }
}


// Buttons
.colorize-button(@color, @border-color) {
  background: @color !important;
  border-color: @border-color !important;

  &:hover,
  &:focus,
  &:active,
  &.active {
    background: darken(@color, 15%, 'relative') !important;
    border-color: darken(@border-color, 15%, 'relative') !important;
  }
}

.colorize-ghost-button(@color) {
  border-color: @color !important;
  color: @color !important;

  &:hover,
  &:focus,
  &:active,
  &.active {
    border-color: @color !important;
    background-color: @color !important;
    color: white !important;
  }
}

Remove focus selector from buttons

// Buttons
.colorize-button(@color, @border-color) {
  background: @color !important;
  border-color: @border-color !important;

  &:hover,
  &:active,
  &.active {
    background: darken(@color, 15%, 'relative') !important;
    border-color: darken(@border-color, 15%, 'relative') !important;
  }
}

.colorize-ghost-button(@color) {
  border-color: @color !important;
  color: @color !important;

  &:hover,
  &:active,
  &.active {
    border-color: @color !important;
    background-color: @color !important;
    color: white !important;
  }
}


@import "ui-variables";

// Highlight matched text
.select-list .list-group .two-lines .matching {
  color: @text-color-highlight;
}

Simplify selector and bold matching chars

@import "ui-variables";

// Highlight matched text
.select-list .list-group .matching {
  color: @text-color-highlight;
  font-weight: bold;
}


Set position and z-index of notification-center-alerts

.notification-center-alerts {
  position: fixed;
  left: 0;
  right: 0;
  top: 150px;
  z-index: 1060; // Highest found was 1050, modal window
}


@import "../styles/custom.less";

.UserMenu {
  background: @white;
  border-top: solid 1px #e9e7e7;
  border-bottom: solid 1px #e9e7e7;

  &__menu {
    margin: 0 auto;
    max-width: 990px;
    border: none !important;
  }

  &__item {
    color: #99aab5;
    font-weight: bold;
  }

  &__badge {
    color: #c2ccd3;
    margin-left: 8px;
  }
}

Update height and item spacing

@import "../styles/custom.less";

.UserMenu {
  height: 46px;
  background: @white;
  border-top: solid 1px #e9e7e7;
  border-bottom: solid 1px #e9e7e7;

  &__menu {
    height: 45px !important;
    margin: 0 auto;
    max-width: 990px;
    border: none !important;
  }

  &__item {
    height: 45px !important;
    color: #99aab5;
    font-weight: bold;
    padding: 0 !important;
    margin-right: 16px !important;
  }

  &__badge {
    color: #c2ccd3;
    margin-left: 6px;
  }
}


@import "../../style/themes/default";

@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";

.@{breadcrumb-prefix-cls} {
  color: @text-color-secondary;
  font-size: @font-size-base;

  a {
    color: @text-color;
    transition: color .3s;
    &:hover {
      color: @primary-5;
    }
  }

  & > span:last-child {
    font-weight: bold;
    color: @text-color;
  }

  & > span:last-child &-separator {
    display: none;
  }

  &-separator {
    margin: 0 8px;
    color: @border-color-base;
  }

  &-link {
    > .@{iconfont-css-prefix} + span {
      margin-left: 4px;
    }
  }
}

Improve breadcrumb separator color for darker background

@import "../../style/themes/default";

@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";

.@{breadcrumb-prefix-cls} {
  color: @text-color;
  font-size: @font-size-base;

  a {
    color: @text-color;
    transition: color .3s;
    &:hover {
      color: @primary-5;
    }
  }

  & > span:last-child {
    font-weight: bold;
    color: @text-color;
  }

  & > span:last-child &-separator {
    display: none;
  }

  &-separator {
    margin: 0 8px;
    color: rgba(0, 0, 0, 0.3);
  }

  &-link {
    > .@{iconfont-css-prefix} + span {
      margin-left: 4px;
    }
  }
}


.bws-searchbox {
    width: 250px;
    position: relative;

    form {
        margin: 0;

        .search {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        input {
            .border-box;
            height: 40px;
            width: 100%;
            margin: 0;
            padding: 0 40px 0 10px;
            background-color: #fff;
            border: 1px solid @bws-border;
            border-radius: @bws-corner;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            font-size: 12pt;
            color: @bws-text-placeholder;
        }
        &.active input {
            border-color: @charm-panel-orange;
            color: @bws-text;
        }
    }
}

Set override on bootstrap input box shadow.

.bws-searchbox {
    width: 250px;
    position: relative;

    form {
        margin: 0;

        .search {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        input {
            .border-box;
            height: 40px;
            width: 100%;
            margin: 0;
            padding: 0 40px 0 10px;
            background-color: #fff;
            border: 1px solid @bws-border;
            border-radius: @bws-corner;
            font-size: 12pt;
            color: @bws-text-placeholder;
        }
        &.active input {
            border-color: @charm-panel-orange;
            color: @bws-text;
        }
        // Need to overwrite bootstrap box shadow on focus.
        input,
        &.active input {
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }
    }
}


Add new file from lightgray to our tweaked version.

// Sidebar

.@{prefix}-edit-aria-container > .@{prefix}-container-body {
	display: flex;

	.@{prefix}-edit-area {
		flex: 1;
	}

	.@{prefix}-sidebar > .@{prefix}-container-body {
		display: flex;
		align-items: stretch;
		height: 100%;
	}

	.@{prefix}-sidebar-panel {
		min-width: 250px;
		max-width: 250px;
		position: relative;

		> .@{prefix}-container-body {
			position: absolute;
			width: 100%; height: 100%;
			overflow: auto;
			top: 0; left: 0;
		}
	}
}

.@{prefix}-sidebar-toolbar {
	border: 0 solid @panel-border;
	border-left-width: 1px;

	.@{prefix}-btn.@{prefix}-active, .@{prefix}-btn.@{prefix}-active:hover {
		border: 1px solid transparent;
		border-color: @btn-primary-border;
		.vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);

		button, button i {
			color: @btn-primary-text;
			text-shadow: 1px 1px @btn-primary-text-shadow;
		}
	}
}

.@{prefix}-sidebar-panel {
	border: 0 solid @panel-border;
	border-left-width: 1px;
}


// Typography
// --------------------------------------------------

@base-font: 'source-sans-pro', sans-serif;
@heading-font: @base-font;
@caption-font: @base-font;
@code-font: 'source-code-pro', monospace;
@alt-font: 'volkorn', serif;

@doc-font-size: 16;
@doc-line-height: 24;

// set-up the body font-size / line-height
body {
	margin-top: 0px + @doc-line-height;
	font-size: 0px + @doc-font-size;
}

// Colors
// --------------------------------------------------

@body-color      		: #ebebeb;
@text-color      		: #222;
@base-color 	 		: #343434;
@comp-color 	 		: spin(@base-color, 180);
@border-color    		: @base-color;
@white           		: #fff;
@black           		: #000;
@accent-color    		: @black;
@link-color 		    : #222;

Change the @alt-font from volkhorn to volkhov

// Typography
// --------------------------------------------------

@base-font: 'source-sans-pro', sans-serif;
@heading-font: @base-font;
@caption-font: @base-font;
@code-font: 'source-code-pro', monospace;
@alt-font: 'volkhov', serif;

@doc-font-size: 16;
@doc-line-height: 24;

// set-up the body font-size / line-height
body {
	margin-top: 0px + @doc-line-height;
	font-size: 0px + @doc-font-size;
}

// Colors
// --------------------------------------------------

@body-color      		: #ebebeb;
@text-color      		: #222;
@base-color 	 		: #343434;
@comp-color 	 		: spin(@base-color, 180);
@border-color    		: @base-color;
@white           		: #fff;
@black           		: #000;
@accent-color    		: @black;
@link-color 		    : #222;


@import './common.less';

@import './colors.less';
@import './fonts.less';
@import './modules/grid';
@import 'modules/base';
@import 'modules/headings';
@import 'modules/form';
@import 'modules/buttons';
@import 'modules/user';

Comment out old modules code

@import './common.less';

@import './colors.less';
@import './fonts.less';
@import './modules/grid';
// @import 'modules/base';
// @import 'modules/headings';
// @import 'modules/form';
// @import 'modules/buttons';
// @import 'modules/user';


@import "stylesheets/atom";
@import "stylesheets/buttons";
@import "stylesheets/editor";
@import "stylesheets/git";
@import "stylesheets/lists";
@import "stylesheets/messages";
@import "stylesheets/nav";
@import "stylesheets/overlays";
@import "stylesheets/panels";
@import "stylesheets/panes";
@import "stylesheets/progress";
@import "stylesheets/sites";
@import "stylesheets/tabs";
@import "stylesheets/text";
@import "stylesheets/tooltips";
@import "stylesheets/tree-view";
@import "stylesheets/utilities";
@import "stylesheets/settings";

.icons(@icons) when (@icons = true) {
  @import "stylesheets/icons";
}
/**
 * Set below to false to not import Seti-UI icons.
 * Requries View -> Reload after changing value.
 * Mainly to use with file-icons package.
*/
.icons(true);

Store package style sheets in the styles/ directory instead of stylesheets/ in the color-picker package

@import "styles/atom";
@import "styles/buttons";
@import "styles/editor";
@import "styles/git";
@import "styles/lists";
@import "styles/messages";
@import "styles/nav";
@import "styles/overlays";
@import "styles/panels";
@import "styles/panes";
@import "styles/progress";
@import "styles/sites";
@import "styles/tabs";
@import "styles/text";
@import "styles/tooltips";
@import "styles/tree-view";
@import "styles/utilities";
@import "styles/settings";

.icons(@icons) when (@icons = true) {
  @import "styles/icons";
}
/**
 * Set below to false to not import Seti-UI icons.
 * Requries View -> Reload after changing value.
 * Mainly to use with file-icons package.
*/
.icons(true);


Put all of the styles used in our components in one stylesheet.

* {
	font-size: 100%;
}

.about {
	color: green;
}

.button {
	color: rebeccapurple;
	width: 25vw;
	top-padding: 30px;
	right-padding: 20px;
	margin-top: 15px;
	margin-left: 35vw;
}

.create-new-navigation {
	color: rebeccapurple;
	text-align: center;
	margin-top: 5vw;
}

.ending-location {
	color: rebeccapurple;
	width: 40vw;
	top-padding: 30px;
	right-padding: 20px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 35vw;
}

.heading {
	text-align: center;
}

.help {
	color: green;
}

.main-menu {
	color: rebeccapurple;
	text-align: center;
	margin-top: 5vw;
}

.round-button {
	width: 2em;
	height: 2em;
	border-radius: 50%;
	margin-top: 5vw;
	margin-left: 80vw;
}

.settings {
	color: rebeccapurple;
	text-align: center;
	margin-top: 5vw;
}

.settings-button {
	color: rebeccapurple;
	top-padding: 30px;
	right-padding: 20px;
	margin-top: 5px;
	margin-right: 15px;
}

.settings-type {
	color: rebeccapurple;
	text-align: left;
	margin-top: 5vw;
}

.starting-location {
	color: rebeccapurple;
	width: 40vw;
	top-padding: 30px;
	right-padding: 20px;
	margin-top: 15px;
	margin-left: 35vw;
}

.table {
	border-collapse: collapse;
	border-style: hidden;
	width: 100%;
}

.text-size-button {
	color: rebeccapurple;
	top-padding: 30px;
	right-padding: 20px;
	margin-top: 5px;
	margin-right: 15px;
}

th, td {
	padding: 1vw;
	border: .25vw solid black;
	text-align: center;
	width: 50%;
}


/**
* Rules
* ============================================================================
*/

.rules-list, .rule-detail {
	h6 {
		font-weight: 600;
		select {
			margin: 0 5px;
		}
	}

	.box-content {
		padding-bottom: 20px !important;
	}

	.table {
		margin-bottom: 10px;
	}

	.add {
		margin-bottom: 20px;
	}

	.conditions-list td, .actions-list td {
		padding: 12px 15px 10px !important;

		a {
			color: lighten(@gray, 30);

			&:hover {
				color: @gray;
			}
		}
	}

  select {
    margin-bottom: 20px;
  }

	.actions {
		padding: 20px;
		border-top: 1px solid lighten(@trim, 4);
		margin: 20px -20px -20px;
	}
}

Reduce bottom padding on rule box

/**
* Rules
* ============================================================================
*/

.rules-list, .rule-detail {
	h6 {
		font-weight: 600;
		select {
			margin: 0 5px;
		}
	}

	.box-content {
		padding-bottom: 20px !important;
	}

	.table {
		margin-bottom: 10px;
	}

	.add {
		margin-bottom: 20px;
	}

	.conditions-list td, .actions-list td {
		padding: 12px 15px 10px !important;

		a {
			color: lighten(@gray, 30);

			&:hover {
				color: @gray;
			}
		}
	}

  select {
    margin-bottom: 20px;
  }

	.actions {
		padding: 20px;
		border-top: 1px solid lighten(@trim, 4);
		margin: 0 -20px -20px;
	}
}


@ffDefault: "sans-serif";
@fwDefault: "normal";
@fsDefault: 1em;
@cornerRadius: 3px;
@bgColorHeader: #0a233b;
@bgTextureHeader: "flat";
@bgImgOpacityHeader: 75;
@borderColorHeader: #0a233b;
@fcHeader: #ffffff;
@iconColorHeader: #ffffff;
@bgColorContent: #ffffff;
@bgTextureContent: "flat";
@bgImgOpacityContent: 75;
@borderColorContent: #ced3d9;
@fcContent: #222222;
@iconColorContent: #3c5269;
@bgColorDefault: #cad3dd;
@bgTextureDefault: "flat";
@bgImgOpacityDefault: 75;
@borderColorDefault: #99a8b9;
@fcDefault: #2c3f53;
@iconColorDefault: #2c3f53;
@bgColorHover: #adbccc;
@bgTextureHover: "flat";
@bgImgOpacityHover: 75;
@borderColorHover: #98a4b3;
@fcHover: #2c3f53;
@iconColorHover: #2c3f53;
@bgColorActive: #ffffff;
@bgTextureActive: "flat";
@bgImgOpacityActive: 65;
@borderColorActive: #ced3d9;
@fcActive: #212121;
@iconColorActive: #0080ff;
@bgColorHighlight: #d9ecff;
@bgTextureHighlight: "flat";
@bgImgOpacityHighlight: 0;
@borderColorHighlight: #d9ecff;
@fcHighlight: #0f2133;
@iconColorHighlight: #0080ff;
@bgColorError: #ffd9d9;
@bgTextureError: "flat";
@bgImgOpacityError: 0;
@borderColorError: #ffd9d9;
@fcError: #ca443e;
@iconColorError: #ca443e;
@bgColorOverlay: #142433;
@bgTextureOverlay: "flat";
@bgImgOpacityOverlay: 100;
@opacityOverlay: 50;
@bgColorShadow: #aaaaaa;
@bgTextureShadow: "flat";
@bgImgOpacityShadow: 0;
@opacityShadow: 30;
@thicknessShadow: 8px;
@offsetTopShadow: "-8px";
@offsetLeftShadow: "-8px";
@cornerRadiusShadow: 8px;


// --------------------------------
// This file is part of BootsFaces.
// --------------------------------

// Core variables and mixins
@import "variables.less";
// Extra Variables (override)
@import "extra-variables.less";

//** Load fonts from this directory.
@icon-font-path:          "../../../bsf/fonts/";
@import "glyphicons.less";

Fix Glyphicons rendering with/without Omnifaces.

// --------------------------------
// This file is part of BootsFaces.
// --------------------------------

// Core variables and mixins
@import "variables.less";
// Extra Variables (override)
@import "extra-variables.less";

//** Load fonts from this directory.
@icon-font-path:          "../../../fonts/";
@import "glyphicons.less";


@import "variables";

.github-Blank {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  &-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  &-footer {
    flex-shrink: 0;
    padding: @component-padding*2 @component-padding;
  }

  &-LargeIcon:before {
    margin-right: 0;
    margin-top: @component-padding * 5;
    margin-bottom: @component-padding * 5;
    width: auto;
    height: auto;
    font-size: 8em;
    color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
  }

  &-banner, &-context , &-explanation , &-LargeIcon {
    text-align: center;
  }

  &-option {
    display: flex;
    flex-direction: row;
    align-items: center;

    &--explained {
      margin-bottom: @component-padding/2;
    }
  }

  &-actionBtn {
    flex: 1;
    margin: 0 10%;
  }

  &-explanation {
    margin-left: 5%;
    margin-right: 5%;
    color: @text-color-subtle;
  }

  &-tabLink {
    margin-left: 0.5em;

    .icon {
      padding-right: 0;
    }
  }
}


Add a Pythonista color palette less file

/*
prism.js theme by Luke Taylor modifying
Pythonista's logo colors as an inspiration
*/

// Pythonista gradient colors
@pythonista3-a: #00d38b;
@pythonista3-b: #009285;
@pythonista3-accent: screen(@pythonista3-a, @pythonista3-b);

@pythonista2-a: #0095b3;
@pythonista2-b: #00618b;
@pythonista2-accent: screen(@pythonista2-a, @pythonista2-b);

@a-colors: average(@pythonista3-a, @pythonista2-a);
@b-colors: average(@pythonista3-b, @pythonista2-b);


.message {
	.actionLinks {
		padding: 0;
		margin-top: 4px;
		text-align: center;
		li {
			cursor: pointer;
			position: relative;
			padding-right: 2px;
			color: #036;

			list-style: none;
			display: inline;

			&:hover {
				color: #369;
			}
		}

		li:after { content: " \25CF"; }
		li:last-child:after { content: none; }
	}
}

Update action link colors to use theme variables

.message {
	.actionLinks {
		padding: 0;
		margin-top: 4px;
		text-align: center;
		li {
			cursor: pointer;
			position: relative;
			padding-right: 2px;
			color: @primary-background-color;

			list-style: none;
			display: inline;

			&:hover {
				color: @link-font-color;
			}
		}

		li:after { content: " \25CF"; }
		li:last-child:after { content: none; }
	}
}


@import './custom.less';

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Whitney.woff') format('woff')
}

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/WhitneyMedium.woff') format('woff')
}

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/WhitneyBold.woff') format('woff')
}

html {
  overflow-y: scroll;
}

.white-bg {
  background: @white;
}

.content {
  margin-top: 56px;
}

.shifted {
  margin-top: 21px;
}

.text-icon {
  font-size: 18px !important;
  margin-right: 4px;
  vertical-align: -1px;
}

.ant-layout {
  overflow: hidden;
}

.ant-tooltip-content {
  font-weight: 500;
}

.ant-popover-title {
  color: #9d9d9d;
  line-height: 36px;
  height: 36px;
}

Move scrollbar from html to body

@import './custom.less';

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Whitney.woff') format('woff')
}

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/WhitneyMedium.woff') format('woff')
}

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/WhitneyBold.woff') format('woff')
}

body {
  overflow-y: scroll;
}

.white-bg {
  background: @white;
}

.content {
  margin-top: 56px;
}

.shifted {
  margin-top: 21px;
}

.text-icon {
  font-size: 18px !important;
  margin-right: 4px;
  vertical-align: -1px;
}

.ant-layout {
  overflow: hidden;
}

.ant-tooltip-content {
  font-weight: 500;
}

.ant-popover-title {
  color: #9d9d9d;
  line-height: 36px;
  height: 36px;
}


// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

body.code-links-visible atom-text-editor::shadow {
    .code-links .region {
        // Needs to be clickable
        pointer-events: auto;
        // regions are not normally clickable and have a z-index of -1.
        // 1 seems to work, but I don't know if that might change later.
        z-index: 1;
        border-bottom: thin solid blue;
    }
}

Use `@text-color` as color for highlighting links

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

body.code-links-visible atom-text-editor::shadow {
    .code-links .region {
        // Needs to be clickable
        pointer-events: auto;
        // regions are not normally clickable and have a z-index of -1.
        // 1 seems to work, but I don't know if that might change later.
        z-index: 1;
        border-bottom: thin solid @text-color;
    }
}


.not-found{
	h1{
		font-size: 15rem;
	}

	h2{
		line-height: 0;
		text-transform: uppercase;
	    letter-spacing: 25px;
	    font-weight: 100;
	}
}


.bws-icon {
    position: absolute;
    display: block;
    left: @bws-sidebar-width;
    top: 114px;
    width: 40px;
    height: 40px;
    background: #bbbbbb url(/juju-ui/assets/images/browser_icon.png)
        no-repeat center center;
    box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 10;
}
.content-visible .bws-icon {
    left: @bws-sidebar-width + @bws-panel-width;
}

Fix the minimize icon style.

.bws-icon {
    position: absolute;
    display: block;
    left: @bws-sidebar-width;
    top: 114px;
    width: 40px;
    height: 40px;
    background: #bbbbbb url(/juju-ui/assets/images/browser_icon.png)
        no-repeat center center;
    box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 600;
}
.content-visible .bws-icon {
    left: @bws-sidebar-width + @bws-panel-width;
}


Move status bar stylesheet into package directory

.status-bar {
  padding: 5px 10px;
  font-size: 11px;
  line-height: 14px;
  position: relative;
  -webkit-user-select: none;
  cursor: default;
  overflow: hidden;
}

.status-bar .git-branch {
  float: right;
}

.status-bar .cursor-position,
.status-bar .grammar-name {
  margin-left: 10px;
}

.status-bar .grammar-name {
  cursor: pointer;
  border: 1px solid transparent;
  padding: 1px 2px;
}

.status-bar .branch-label {
  vertical-align: baseline;
}

.status-bar .git-status.octicons {
  display: none;
  padding-left: 10px;
  margin-top:-2px;
}

.status-bar .octicons:before {
  font-family: 'Octicons Regular';
  font-size: 14px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.status-bar .branch-icon:before {
  content: "\f020";
}

.status-bar .modified-status-icon:before {
  content: "\f26d";
}

.status-bar .new-status-icon:before {
  content: "\f26b";
}

.status-bar .ignored-status-icon:before {
  content: "\f099";
  margin-right: 0px;
}

.status-bar .commits-behind-label:before {
  margin-top: -3px;
  margin-left: 3px;
  margin-right: 1px;
  content: "\f03f";
}

.status-bar .commits-ahead-label:before {
  margin-top: -3px;
  margin-left: 3px;
  margin-right: 1px;
  content: "\f03d";
}


/**
 * Licensed to Jasig under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Jasig licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a
 * copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

// No-chrome portlet setting
.no-chrome {
    .up-portlet-content-wrapper {
        border: none;
        background: none;
    }

    .hover-toolbar {
        position: relative;  // required to use z-index
        z-index: 1000;
        text-align: right;

        .portlet-controls {
            .grab-handle {
                display: inline-block;
                position: relative;
                top: 3px;
                font-size: 18px;
                margin-left: 3px;
            }
            .portlet-options-menu > a {
                color: @grayscale10;
                opacity: 0.8;
            }
        }
    }
}

Make the new 'hamburger' options menu float over the portlet to which it applies, reducing vertical real estate

/**
 * Licensed to Jasig under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Jasig licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a
 * copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

// No-chrome portlet setting
.no-chrome {
    .up-portlet-content-wrapper {
        border: none;
        background: none;
    }

    .hover-toolbar {
        position: relative;  /* required to use z-index */
        z-index: 1000;
        text-align: right;

        .portlet-controls {
            position: absolute;  /* Place on top */
            width: 100%;         /* Hamburger on the right */

            .grab-handle {
                display: inline-block;
                position: relative;
                top: 3px;
                font-size: 18px;
                margin-left: 3px;
            }
            .portlet-options-menu > a {
                color: @grayscale10;
                opacity: 0.8;
            }
        }
    }
}


@import "ui-variables";
@import "octicon-mixins";

.tree-view-resizer {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  min-width: 50px;
  z-index: 2;

  .tree-view-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
  }
}

.tree-view-scroller {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.tree-view {
  min-width: -webkit-min-content;
  min-height: 100%;
  padding: 0 @component-icon-padding;
}

.tree-view-dialog.tool-panel {
  padding: @component-padding;
  opacity: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

Fix the most cryptic of test failures.

@import "ui-variables";
@import "octicon-mixins";

.tree-view-resizer {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  min-width: 50px;
  z-index: 2;

  .tree-view-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
  }
}

.tree-view-scroller {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.tree-view {
  min-width: -webkit-min-content;
  min-height: 100%;
  padding: 0 @component-icon-padding;
  position: relative;
}

.tree-view-dialog.tool-panel {
  padding: @component-padding;
  opacity: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}


/**
 * Trove Box Theme
 */
@import "resources/bootstrap/less/bootstrap";
@import "resources/bootstrap/less/responsive";
@import "variables";
@import "typography";
@import "buttons";
@import "messages";
@import "template";

@import "components/header";
@import "components/userbadge";
@import "components/photo-grid";
@import "components/photo-detail";
@import "components/lightbox";

Remove responsive style until we have header finished

/**
 * Trove Box Theme
 */
@import "resources/bootstrap/less/bootstrap";
//@import "resources/bootstrap/less/responsive";
@import "variables";
@import "typography";
@import "buttons";
@import "messages";
@import "template";

@import "components/header";
@import "components/userbadge";
@import "components/photo-grid";
@import "components/photo-detail";
@import "components/lightbox";


.main-header {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: @main-toolbar-width - 1;
    right: 0px;
    height: @main-header-height;
    z-index: 1;

    border-bottom: 1px solid @main-header-border;
    background: @main-header-background;

    h1 {
        font-size: 26px;
        font-weight: 200;
        line-height: @main-header-height;
        margin: 0px;
        text-align: center;
    }
}

Set point cursor for changing report

.main-header {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: @main-toolbar-width - 1;
    right: 0px;
    height: @main-header-height;
    z-index: 1;

    border-bottom: 1px solid @main-header-border;
    background: @main-header-background;

    h1 {
        cursor: pointer;
        font-size: 26px;
        font-weight: 200;
        line-height: @main-header-height;
        margin: 0px;
        text-align: center;
    }
}


Move fuzzy finder stylesheet into package directory

.fuzzy-finder .directory {
  color: rgba(0, 0, 0, 0.5);
  word-break: break-word;
  margin-left: 5px;
  line-height: 150%;
}

.fuzzy-finder .file:before {
  font-family: 'Octicons Regular';
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-left: 5px;
  -webkit-font-smoothing: antialiased;
  color: #9d9d9d;
}

.fuzzy-finder .status {
  font-family: 'Octicons Regular';
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  -webkit-font-smoothing: antialiased;
  color: #9d9d9d;
  float: right;
}

.fuzzy-finder .status.new:before {
  position: relative;
  top: 3px;
  content: "\f06b";
}

.fuzzy-finder .status.modified:before {
  position: relative;
  top: 3px;
  content: "\f06d";
}

.fuzzy-finder .file.text-name:before {
  content: "\f011";
}

.fuzzy-finder .file.image-name:before {
  content: "\f012";
}

.fuzzy-finder .file.compressed-name:before {
  content: "\f013";
}

.fuzzy-finder .file.pdf-name:before {
  content: "\f014";
}

.fuzzy-finder .file.readme-name:before {
  content: "\f007";
}

.fuzzy-finder .file.binary-name:before {
  content: "\f094";
}


Add a little styling to the new home page.

@default-background-color: #ccccff;

@header-background-color: #333399;
@header-text-color: difference(#ffffff, @header-background-color);

@content-background-color: #ffffff;
@content-text-color: difference(#ffffff, @content-background-color);

@footer-background-color: #333366;
@footer-text-color: difference(#ffffff, @footer-background-color);

@default-font: Arial, Helvetica, sans-serif;

/* General Styles */
body {
    background-color: @default-background-color;
    font-family: @default-font;
}

/* Header */
.header {
    background-color: @header-background-color;
    color: @header-text-color;
}

/* Footer */
.footer {
    background-color: @footer-background-color;
    color: @footer-text-color;
}

/* Content */
.content .container {
    background-color: @content-background-color;
    color: @content-text-color;
}


@font-family-sans-serif:      "Open Sans", 'Helvetica Neue', Helvetica, Arial, sans-serif;

@navbar-padding-vertical:     14px;
@navbar-padding-horizontal:   22px;

//== Oscar variables
@white:                       #fff;
@graph-height:                330px;
@graph-segments-height:       33px;
@bar-height:                  300px;
@bar-width:                   8%;

Remove wrong navbar padding variable.

@font-family-sans-serif:      "Open Sans", 'Helvetica Neue', Helvetica, Arial, sans-serif;

@navbar-padding-vertical:     14px;

//== Oscar variables
@white:                       #fff;
@graph-height:                330px;
@graph-segments-height:       33px;
@bar-height:                  300px;
@bar-width:                   8%;


// When a field has a validation error, rails generates the field wrapped in a fields_with_errors class.
// This causes the height to be correct of elements wrapped in .field_with_errors on the registration page.
.input-group-lg {
  .field_with_errors {
    .form-control {
      height: 45px;
    }
  }
}

Fix font size on boxes containing field_with_errors.

// When a field has a validation error, rails generates the field wrapped in a fields_with_errors class.
// This causes the height to be correct of elements wrapped in .field_with_errors on the registration page.
.input-group-lg {
  .field_with_errors {
    .form-control {
      height: 45px;
      font-size: 18px;
    }
  }
}


.image-view {
  height:100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;

  img {
    box-sizing: content-box;
    padding: 25px;
    border: 2px solid;
    background-image: url(images/transparent-background.gif);
    position: relative;
  }
}

Set no max width on img elements in image view

.image-view {
  height:100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;

  img {
    box-sizing: content-box;
    padding: 25px;
    border: 2px solid;
    background-image: url(images/transparent-background.gif);
    position: relative;
    max-width: none;
  }
}


Move footnote backrefs to gutter hover links

.footnotes {
  li {
    position: relative;

    .footnote-backref {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(-250%);
      opacity: 0;
    }

    &:hover .footnote-backref {
      opacity: 1;
    }
  }
}


.badges {
  margin: 0;
  padding: 0;
  list-style: none;

  &, & > li {
    display: inline-block;
  }
}

.badge-size(@size) {
  width: @size;
  height: @size;
  border-radius: @size / 2;
  line-height: @size - 4px;
  &, & .fa {
    font-size: 0.6 * @size;
  }
}
.badge {
  .badge-size(24px);
  border: 2px solid @fl-body-bg;
  background: @fl-body-muted-color;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  text-align: center;

  & .label {
    display: none;
  }
}

Make badge icons not blurry by making sure they can centre accurately

.badges {
  margin: 0;
  padding: 0;
  list-style: none;

  &, & > li {
    display: inline-block;
  }
}

.badge-size(@size) {
  width: @size;
  height: @size;
  border-radius: @size / 2;
  line-height: @size - 4px;
  &, & .fa {
    font-size: 0.6 * @size;
  }
}
.badge {
  .badge-size(23px);
  border: 2px solid @fl-body-bg;
  background: @fl-body-muted-color;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  text-align: center;

  & .label {
    display: none;
  }
}


// These might be better part of the Atom core.

// Styleguide

.section.bordered,
.section.collapsed {
  padding: 16px 0; // stops jumping of the title when collapsing
}


Add really simple theme for the API docs

@base-font: 400 14px ~"/" 1.42 'Roboto', Helvetica, sans-serif;
@title-font: 200 36px 'BrandonText', Helvetica, sans-serif;
@code-font: 'Inconsolata', monospace;


@import (reference) "../../styles/custom.less";

.PostFeedEmbed {
  position: relative;
  margin: 4px 0;
  display: flex;
  cursor: pointer;
  background-color: #000000;

  &__playButton {
    margin: 0 !important;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    background: fade(@primary-color, 60%);

    & .iconfont {
      margin: auto;
      font-size: 6em;
      color: @white;
    }
  }

  &__preview {
    width: 100%;
  }
}

Fix ratio and width on embed preview

@import (reference) "../../styles/custom.less";

.PostFeedEmbed {
  position: relative;
  margin: 4px 0;
  cursor: pointer;
  background-color: #000000;

  &__playButton {
    margin: 0 !important;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    background: fade(@primary-color, 60%);

    & .iconfont {
      margin: auto;
      font-size: 6em;
      color: @white;
    }
  }

  &__preview {
    width: 100% !important;
  }
}


.dropdown-menu.dropdown-menu-collection {
  padding: 5px 0;
  min-width: 80px;
  .dropdown-menu-collection__fallback,
  .dropdown-menu-collection__loading {
    padding: 2px 12px;
  }
  .dropdown-menu-collection__list {
    list-style: none;
    margin: 0;
    > li {
      display: block;
      a {
        display: block;
        padding: 2px 12px;
        color: @menuItemColor;
        &:hover, &:focus {
          background: #f3f3f3;
          color: @menuItemColor;
        }
      }
    }
  }
}

Improve floating dropdown to update its position on scroll and resize

.dropdown-menu.dropdown-menu-collection {
  padding: 5px 0;
  min-width: 80px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .dropdown-menu-collection__fallback,
  .dropdown-menu-collection__loading {
    padding: 2px 12px;
  }
  .dropdown-menu-collection__list {
    list-style: none;
    margin: 0;
    > li {
      display: block;
      a {
        display: block;
        padding: 2px 12px;
        color: @menuItemColor;
        &:hover, &:focus {
          background: #f3f3f3;
          color: @menuItemColor;
        }
      }
    }
  }
}


Add examples of @page directives as can be seen in the W3 specification

@page :first {
  margin: 1in;
}

@page:first { margin: 2in; }
@page:first:left { margin: 3in; }
@page :first:left { margin: 4in; }
@page LandscapeTable { margin: 5in; }
@page CompanyLetterHead:first { margin: 6in; }
@page toc, index { margin: 7in; }


// Import from the theme's variables with a fallback to /static/less-imports/ui-variables.less
@import "ui-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

@import "root-view.less";
@import "overlay.less";
@import "popover-list.less";
@import "notification.less";
@import "markdown.less";
@import "editor.less";
@import "select-list.less";

:focus {
  outline: none;
}

Update path in comment for less-imports rename

// Import from the theme's variables with a fallback to /static/variables/ui-variables.less
@import "ui-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

@import "root-view.less";
@import "overlay.less";
@import "popover-list.less";
@import "notification.less";
@import "markdown.less";
@import "editor.less";
@import "select-list.less";

:focus {
  outline: none;
}


// Media query mixins

.screen-xs(@rules) {
  @media (max-width: @screen-xs-max) { @rules(); }
}

.screen-sm(@rules) {
  @media (min-width: @screen-sm-min) { @rules(); }
}

.screen-sm-max(@rules) {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @rules(); }
}

.screen-md(@rules) {
  @media (min-width: @screen-md-min) { @rules(); }
}

.screen-md-max(@rules) {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @rules(); }
}

.screen-lg(@rules) {
  @media (min-width: @screen-lg-min) { @rules(); }
}


//full screen modal
.modal-dialog {
    &.modal-confirm {
        width:350px;
        margin: 10px auto;
    }
    &.modal--full-screen {
        margin: 0;
        width: 100%;
        .modal-content {
            border-radius: 0;
            border: none;
            padding: 0;
            height: 100vh;
        }
    }
}

@media(min-width:@screen-md-min) {
    .modal.fade .modal-dialog, .modal.in .modal-dialog {
        transform: none !important; //prevent uibModal animation from sliding in on desktop (keep the fade in though)
    }
}

.oc-read-only {
    .modal-title {
        > .text-muted {
            display:none;
        }
    }
}

Allow the full screen modal-content to overflow-y:auto

//full screen modal
.modal-dialog {
    &.modal-confirm {
        width:350px;
        margin: 10px auto;
    }
    &.modal--full-screen {
        margin: 0;
        width: 100%;
        .modal-content {
            border-radius: 0;
            border: none;
            padding: 0;
            height: 100vh;
            overflow-y:auto;
        }
    }
}

@media(min-width:@screen-md-min) {
    .modal.fade .modal-dialog, .modal.in .modal-dialog {
        transform: none !important; //prevent uibModal animation from sliding in on desktop (keep the fade in though)
    }
}

.oc-read-only {
    .modal-title {
        > .text-muted {
            display:none;
        }
    }
}


@text-color: #99aab5;

.Topics {
  & > h4 {
    color: @text-color;
    padding: 16px 0;
  }

  & > h5 {
    color: @text-color;
    padding: 12px 0;
    font-size: 14px;
  }
}

.Topics__list {
  & > li {
    padding: 2px 0;
  }
}

Add pointer cursor and change padding to margins

@text-color: #99aab5;

.Topics {
  & > h4 {
    color: @text-color;
    margin: 16px 0;
  }

  & > h5 {
    color: @text-color;
    margin: 12px 0;
    font-size: 14px;

    &:hover {
      cursor: pointer;
    }
  }
}

.Topics__list {
  & > li {
    padding: 2px 0;
  }
}


/** Colors **/
@jobDetailBg          : rgba(0,0,0,0.6);
@fieldHoverColor      : #6BAED6;
@timepickerBg         : @jobDetailBg;
@timepickerArrowColor : @timepickerBg;
@sansFontFamily       : 'Helvetica Neue', helvetica, sans-serif;
@monoFontFamily       : 'Inconsolata', monospace;
@russoFontFamily      : 'Russo One', sans-serif;
@iconSpritePath       : "/images/glyphicons-halflings.png";
@iconWhiteSpritePath  : "/images/glyphicons-halflings-white.png";
@FontAwesomePath      : "/fonts/vendor/fontawesome";

Use lighter blue for links to stand out on black

/** Colors **/
@linkColor            : #3ae;

@jobDetailBg          : rgba(0,0,0,0.6);
@fieldHoverColor      : #6BAED6;
@timepickerBg         : @jobDetailBg;
@timepickerArrowColor : @timepickerBg;
@sansFontFamily       : 'Helvetica Neue', helvetica, sans-serif;
@monoFontFamily       : 'Inconsolata', monospace;
@russoFontFamily      : 'Russo One', sans-serif;
@iconSpritePath       : "/images/glyphicons-halflings.png";
@iconWhiteSpritePath  : "/images/glyphicons-halflings-white.png";
@FontAwesomePath      : "/fonts/vendor/fontawesome";


.password_main() {
    .cp-password-container {
        display: flex;
        align-items: center;
        input {
            flex: 1;
            min-width: 0;
        }
        label, .fa {
            margin-left: 10px;
        }
    }
}


@import "octicon-mixins.less";

.select-list {
  .loading {
    .loading-message:before {
      font-family: 'Octicons Regular';
      font-size: 1.1em;
      width: 1.1em;
      height: 1.1em;
      margin-right: 5px;
      -webkit-font-smoothing: antialiased;
      content: '\f09e';
    }

    .badge {
      margin-left: 10px;
    }
  }

  ol {
    position: relative;
    overflow-y: auto;
    max-height: 312px;
    margin: 0;
    padding: 0;

    &:empty {
      border: none;
    }

    li {
      padding: 10px;
      display: block;

      &.two-lines {
        padding: 5px 10px 5px 10px;
      }

      .primary-line, .secondary-line {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    li:last-child {
      border-bottom: none;
    }

    li.active-item {
      .mini-icon(confirm, 14px);

      &:before {
        margin-right: 5px;
      }
    }

    li.inactive-item {
      padding-left: 29px;
    }

    li .right {
      float: right;
    }

    .key-binding {
      border-radius: 2px;
      margin-left: 5px;
      padding: 3px;
      font-size: 11px;
    }
  }
}

Use mini-icon helper for loading-message

@import "octicon-mixins.less";

.select-list {
  .loading {
    .loading-message {
      .mini-icon(hourglass);

      &:before {
        font-size: 1.1em;
        width: 1.1em;
        height: 1.1em;
        margin-right: 5px;
      }
    }

    .badge {
      margin-left: 10px;
    }
  }

  ol {
    position: relative;
    overflow-y: auto;
    max-height: 312px;
    margin: 0;
    padding: 0;

    &:empty {
      border: none;
    }

    li {
      padding: 10px;
      display: block;

      &.two-lines {
        padding: 5px 10px 5px 10px;
      }

      .primary-line, .secondary-line {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    li:last-child {
      border-bottom: none;
    }

    li.active-item {
      .mini-icon(confirm, 14px);

      &:before {
        margin-right: 5px;
      }
    }

    li.inactive-item {
      padding-left: 29px;
    }

    li .right {
      float: right;
    }

    .key-binding {
      border-radius: 2px;
      margin-left: 5px;
      padding: 3px;
      font-size: 11px;
    }
  }
}


@import 'lib';

.devhub-form .in-app-config {
    input[type="text"] {
        width: 55em;
    }
    .is-https.hint {
        display: inline;
    }
    .preamble {
        padding-bottom: 2em;
        line-height: 1.3em;
    }
}

#in-app-private-key .secret {
    display: none;
}

Fix css for pay-keys inputs

@import 'lib';

.devhub-form .in-app-config {
    input[type="text"] {
        width: 100%;
    }
    .is-https.hint {
        display: inline;
    }
    .preamble {
        padding-bottom: 2em;
        line-height: 1.3em;
    }
}

#in-app-private-key .secret {
    display: none;
}


@import (reference) "../../styles/custom.less";

.PostFeedEmbed {
  position: relative;
  margin: 4px 0;
  cursor: pointer;
  background-color: #000000;

  &__playButton {
    margin: 0 !important;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    background: fade(@primary-color, 60%);

    & .iconfont {
      margin: auto;
      font-size: 6em;
      color: @white;
    }
  }

  &__preview {
    display: block;
    max-width: 100%;
    max-height: 400px;
    margin: 0 auto;
  }
}

Use full-width for embed preview

@import (reference) "../../styles/custom.less";

.PostFeedEmbed {
  position: relative;
  margin: 4px 0;
  cursor: pointer;
  background-color: #000000;

  &__playButton {
    margin: 0 !important;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    background: fade(@primary-color, 60%);

    & .iconfont {
      margin: auto;
      font-size: 6em;
      color: @white;
    }
  }

  &__preview {
    display: block;
    width: 100%;
    max-height: 400px;
    margin: 0 auto;
  }
}


// does not support variable interpolations on places of properties and values

@supports (display: flexbox) and (not ((display: inline-grid) or (display: compact)))
{
  div {
    color: black;
  }
}


Add styling component for plan result box.

// PlanBox
// =======
// Styling for each plan in the
// plan results list.

.plan-box {
  display: block;
  .box-sizing(border-box);
  padding: 1em;
  padding: 1rem;
  border: 1px solid darken(@white, 10%);
  .border-radius(2px);
  background: @white;
  margin-bottom: 1em;
  margin-bottom: 1rem;
}


.RadioGroup-container {
  padding: 0px 10px 15px;
  max-width: 622px;

  .RadioGroup-option {
    display: inline-block;
    padding-right: 7px;

    span {
      padding-left: 5px;
      font-size: 13px;
    }
  }
}


                        {{user.fullName}}'s Quick Files

Use link-to in nav to stay in Ember app

                    {{#link-to 'user-quickfiles' user class='project-title'}}
                        {{user.fullName}}'s Quick Files
                    {{/link-to}}


{{yield (hash
  user                 = (component 'power-select'
    options            = users
    disabled           = disabled
    selected           = user
    placeholder        = 'Select user...'
    searchField        = 'longName'
    tagName            = 'div'
    class              = 'user-select'
    onchange           = (action on-change)
    extra              = (hash
      selectedTemplate = selectedTemplate
      optionTemplate   = optionTemplate
    )
  )
)}}

Allow clearing of the user selection

{{yield (hash
  user                 = (component 'power-select'
    options            = users
    disabled           = disabled
    selected           = user
    placeholder        = 'Select user...'
    searchField        = 'longName'
    tagName            = 'div'
    class              = 'user-select'
    allowClear         = true
    onchange           = (action on-change)
    extra              = (hash
      selectedTemplate = selectedTemplate
      optionTemplate   = optionTemplate
    )
  )
)}}


<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFramework>netcoreapp1.1</TargetFramework>
        <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
        <Version>{{chromeVersion.BrowserVersion}}</Version>
        <Authors>Sean McLellan</Authors>
        <Company>BaristaLabs, LLC</Company>
        <RepositoryUrl>https://github.com/BaristaLabs/chrome-dev-tools-runtime.git</RepositoryUrl>
        <RepositoryType>Git</RepositoryType>
        <PackageTags>ChromeDevTools, .Net Core</PackageTags>
        <PackageLicenseUrl>https://raw.githubusercontent.com/BaristaLabs/chrome-dev-tools-runtime/master/LICENSE</PackageLicenseUrl>
        <Copyright>Copyright (c) 2017 BaristaLabs, LLC</Copyright>
        <PackageProjectUrl>https://github.com/BaristaLabs/chrome-dev-tools-runtime</PackageProjectUrl>
        <Description>.Net Core based runtime to interact with an running instance of Chrome via the ChromeDevTools protocol.</Description>
        <PackageReleaseNotes>Chrome Version: {{chromeVersion.BrowserVersion}}; Protocol Version: {{chromeVersion.ProtocolVersion}}; Runtime Version: {{runtimeVersion}};</PackageReleaseNotes>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="Microsoft.Extensions.Logging" Version="1.1.2" />
        <PackageReference Include="Newtonsoft.Json" Version="10.0.3" />
        <PackageReference Include="WebSocket4Net" Version="0.15.0" />
    </ItemGroup>
</Project>

Update template to conditionally output runtime

<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFramework>netcoreapp1.1</TargetFramework>
        <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
        <Version>{{chromeVersion.BrowserVersion}}{{#if runtimeVersion}}-{{runtimeVersion}}{{/if}}</Version>
        <Authors>Sean McLellan</Authors>
        <Company>BaristaLabs, LLC</Company>
        <RepositoryUrl>https://github.com/BaristaLabs/chrome-dev-tools-runtime.git</RepositoryUrl>
        <RepositoryType>Git</RepositoryType>
        <PackageTags>ChromeDevTools, .Net Core</PackageTags>
        <PackageLicenseUrl>https://raw.githubusercontent.com/BaristaLabs/chrome-dev-tools-runtime/master/LICENSE</PackageLicenseUrl>
        <Copyright>Copyright (c) 2017 BaristaLabs, LLC</Copyright>
        <PackageProjectUrl>https://github.com/BaristaLabs/chrome-dev-tools-runtime</PackageProjectUrl>
        <Description>.Net Core based runtime to interact with an running instance of Chrome via the ChromeDevTools protocol.</Description>
        <PackageReleaseNotes>Chrome Version: {{chromeVersion.BrowserVersion}}; Protocol Version: {{chromeVersion.ProtocolVersion}};{{#if runtimeVersion}} Runtime Version: {{runtimeVersion}};{{/if}}</PackageReleaseNotes>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="Microsoft.Extensions.Logging" Version="1.1.2" />
        <PackageReference Include="Newtonsoft.Json" Version="10.0.3" />
        <PackageReference Include="WebSocket4Net" Version="0.15.0" />
    </ItemGroup>
</Project>


    {{#if programYear}}

{{t 'programs.matriculationYear'}}: {{programYear.academicYear}}

{{programYear.cohort.displayTitle}}

    {{/if}}

    {{#action-menu title=menuTitle icon=menuIcon classNameBindings='publicationStatus :publication-menu :programyear-publication-menu :right-edge'}}
      {{#if showAsIs}}

{{t 'publish.publishAsIs'}}

      {{/if}}
      {{#if showPublish}}

{{t 'publish.publishProgramYear'}}

      {{/if}}
      {{#if showReview}}
        {{#link-to 'program.publicationCheck' programYear}}

{{t 'publish.reviewMissingItems' countBinding='programYear.allPublicationIssuesLength'}}

        {{/link-to}}
      {{/if}}
      {{#if showTbd}}

{{t 'publish.markAsScheduled'}}

      {{/if}}
      {{#if showUnPublish}}

{{t 'publish.unPublishProgramYear'}}

      {{/if}}

    {{/action-menu}}

Remove colon from program year header

    {{#if programYear}}

{{t 'programs.matriculationYear'}} {{programYear.academicYear}}

{{programYear.cohort.displayTitle}}

    {{/if}}

    {{#action-menu title=menuTitle icon=menuIcon classNameBindings='publicationStatus :publication-menu :programyear-publication-menu :right-edge'}}
      {{#if showAsIs}}

{{t 'publish.publishAsIs'}}

      {{/if}}
      {{#if showPublish}}

{{t 'publish.publishProgramYear'}}

      {{/if}}
      {{#if showReview}}
        {{#link-to 'program.publicationCheck' programYear}}

{{t 'publish.reviewMissingItems' countBinding='programYear.allPublicationIssuesLength'}}

        {{/link-to}}
      {{/if}}
      {{#if showTbd}}

{{t 'publish.markAsScheduled'}}

      {{/if}}
      {{#if showUnPublish}}

{{t 'publish.unPublishProgramYear'}}

      {{/if}}

    {{/action-menu}}


<div class="squatch-actions" data-referrals="{{referrals.length}}"
  {{#unless referredBy.dateReferred}}
    data-referredBy="0"
  {{/unless}}
>
  <button data-open-panel="#squatch-stats-panel" class="btn btn-default
    {{#unless referrals}}
      {{#unless referredBy.dateReferred}}
        disabled
      {{/unless}}
    {{/unless}}
  ">
    {{#if referrals}}
      Show Details
    {{else}}
      {{#if referredBy.dateReferred}}
        Show Details
      {{else}}
        No Referrals Yet...
      {{/if}}
    {{/if}}
  </button>

  {{> attribution}}
</div>

Use context variable instead of length property


      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

      </button>
      {{t "application.name"}}

{{t "application.navigation.home"}}

          {{t "application.navigation.virtualMachines.title"}}

{{t "application.navigation.virtualMachines.search"}}

{{t "application.navigation.virtualMachines.new"}}

{{t "application.navigation.reference"}}

{{!-- Main content.--}}

Add a container class to the summary in order to be able to have a nicer error on screen.


Ember Tooltips

Other examples

    {{#link-to 'tooltip-on-helper'}}
      Tooltips on helpers like component, view, link-to, etc
    {{/link-to}}

    {{#link-to 'tooltip-as-component'}}
      HTMLBars tooltips as components that render on their parent component
    {{/link-to}}

    {{#link-to 'tooltip-on-element'}}
      Tooltips set on elements using data attributes
    {{/link-to}}

{{outlet}}

Add link to 'tooltip-manual-trigger' in app template

Ember Tooltips

Other examples

    {{#link-to 'tooltip-on-helper'}}
      Tooltips on helpers like component, view, link-to, etc
    {{/link-to}}

    {{#link-to 'tooltip-as-component'}}
      HTMLBars tooltips as components that render on their parent component
    {{/link-to}}

    {{#link-to 'tooltip-on-element'}}
      Tooltips set on elements using data attributes
    {{/link-to}}

    {{#link-to 'tooltip-manual-trigger'}}
      Tooltips triggered manually by providing a boolean attribute
    {{/link-to}}

{{outlet}}


Legends

    {{#each model as |legend|}}
        {{legend-tile legend=legend}}
    {{/each}}

Create Welcome Message Create welcome header in Index Template

Welcome to Traffic Tracker

Legends

    {{#each model as |legend|}}
        {{legend-tile legend=legend}}
    {{/each}}


        Log-in to your account:

Put back fake login screen for A5

        Log-in to your account:

        <form class="ui large form">

                        <input type="text" name="email" placeholder="E-mail address">

                        <input type="password" name="password" placeholder="Password">

Login

        </form>

            New to us? Sign Up


<LinkTo
  @class="toolbar-link"
  @params={{params}}
  @data-test-secret-edit={{data-test-secret-edit}}
  @data-test-secondary-add={{data-test-secondary-add}}
  @data-test-configure-link={{data-test-configure-link}}
  @data-test-alias-edit-link={{data-test-alias-edit-link}}
  @data-test-entity-merge-link={{data-test-entity-merge-link}}
  @data-test-backend-view-link={{data-test-backend-view-link}}
  @data-test-entity-create-link={{data-test-entity-create-link}}
  @data-test-policy-create-link={{data-test-policy-create-link}}
  @data-test-policy-edit-toggle={{data-test-policy-edit-toggle}}
  @data-test-secret-backend-configure={{data-test-secret-backend-configure}}
>
  {{yield}}
  <ICon @glyph={{glyph}} @size=12 />
</LinkTo>

Fix tests for toolbar links

<LinkTo
  @class="toolbar-link"
  @params={{params}}
  @data-test-secret-edit={{data-test-secret-edit}}
  @data-test-secondary-add={{data-test-secondary-add}}
  @data-test-configure-link={{data-test-configure-link}}
  @data-test-alias-edit-link={{data-test-alias-edit-link}}
  @data-test-entity-edit-link={{data-test-entity-edit-link}}
  @data-test-entity-merge-link={{data-test-entity-merge-link}}
  @data-test-backend-view-link={{data-test-backend-view-link}}
  @data-test-entity-create-link={{data-test-entity-create-link}}
  @data-test-policy-create-link={{data-test-policy-create-link}}
  @data-test-policy-edit-toggle={{data-test-policy-edit-toggle}}
  @data-test-secret-backend-configure={{data-test-secret-backend-configure}}
>
  {{yield}}
  <ICon @glyph={{glyph}} @size=12 />
</LinkTo>


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ envelope.title }}</title>
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
  <!-- our styles: -->
  <link href="{{ envelope.assets.css_drc_url }}" rel="stylesheet" type='text/css'>
</head>
<body>

{{{ common/header.hbs }}}
{{{ envelope.body }}}
{{{ common/footer.hbs }}}

<script src="{{ envelope.assets.js_drc_url }}"></script>

</body>
</html>

Use full paths for embedded layouts.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ envelope.title }}</title>
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
  <!-- our styles: -->
  <link href="{{ envelope.assets.css_drc_url }}" rel="stylesheet" type='text/css'>
</head>
<body>

{{{ drc/common/header.hbs }}}
{{{ envelope.body }}}
{{{ drc/common/footer.hbs }}}

<script src="{{ envelope.assets.js_drc_url }}"></script>

</body>
</html>


<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="styles/oldie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="styles/master.css">
 <!--<![endif]-->
    <script src="scripts/modernizr/modernizr.js"></script>

Add DNS prefetch for Google APIs for preformance.

<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="dns-prefetch" href="//ajax.googleapis.com">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="styles/oldie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="styles/master.css">
 <!--<![endif]-->
    <script src="scripts/modernizr/modernizr.js"></script>


    {{ field.name }}

        {{#if is_long_text_field}}
        <textarea maxlength="500" class="custom_user_field_value">{{ field_value.value }}</textarea>
        {{else if is_select_field}}
        <select class="custom_user_field_value">
            <option value=""></option>
            {{#each field_choices}}
            <option value="{{ this.value }}" {{#if this.selected}}selected{{/if}}>{{ this.text }}</option>
            {{/each}}
        </select>
        {{else if is_user_field }}

        {{else if is_date_field }}
        <input class="custom_user_field_value datepicker" data-field-id="{{ field.id }}" type="text"
          value="{{ field_value.value }}" />

        {{else}}
        <input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
        {{/if}}

{{ field.hint }}

Fix position of custom_profile_field hints.

    {{ field.name }}

{{ field.hint }}

        {{#if is_long_text_field}}
        <textarea maxlength="500" class="custom_user_field_value">{{ field_value.value }}</textarea>
        {{else if is_select_field}}
        <select class="custom_user_field_value">
            <option value=""></option>
            {{#each field_choices}}
            <option value="{{ this.value }}" {{#if this.selected}}selected{{/if}}>{{ this.text }}</option>
            {{/each}}
        </select>
        {{else if is_user_field }}

        {{else if is_date_field }}
        <input class="custom_user_field_value datepicker" data-field-id="{{ field.id }}" type="text"
          value="{{ field_value.value }}" />

        {{else}}
        <input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
        {{/if}}


    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>

Add fast forward and rewind buttons to transport controls

    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default" style="color:red;"></button>

    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>


{{#unless template}}
    {{#if label}}
        {{#if yieldInLabel}}
            {{#if labelWrapperClass}}

                    {{partial 'components/formgroup/control-within-label'}}

            {{else}}
                {{partial 'components/formgroup/control-within-label'}}
            {{/if}}
        {{else}}
            {{#if labelWrapperClass}}

                    {{em-form-label text=label viewName=labelViewName}}
                    {{#if addonIcon}}

                    {{/if}}
                    {{partial 'components/formgroup/form-group-control'}}

            {{else}}
                {{em-form-label text=label viewName=labelViewName}}
                {{partial 'components/formgroup/form-group-control'}}
            {{/if}}
        {{/if}}
    {{else}}
        {{partial 'components/formgroup/form-group-control'}}
    {{/if}}

    {{#if v_icons}}

    {{/if}}

    {{!Currently no errors when layout is inline}}
    {{#unless form.isInline}}
        {{#if canShowErrors}}
            {{em-form-control-help text=help viewName=helpViewName}}
        {{/if}}
    {{/unless}}
{{else}}
    {{yield}}
{{/unless}}

Revert "add support for addon icon (requires FontAwesome)"

{{#unless template}}
    {{#if label}}
        {{#if yieldInLabel}}
            {{#if labelWrapperClass}}

                    {{partial 'components/formgroup/control-within-label'}}

            {{else}}
                {{partial 'components/formgroup/control-within-label'}}
            {{/if}}
        {{else}}
            {{#if labelWrapperClass}}

                    {{em-form-label text=label viewName=labelViewName}}
                    {{partial 'components/formgroup/form-group-control'}}

            {{else}}
                {{em-form-label text=label viewName=labelViewName}}
                {{partial 'components/formgroup/form-group-control'}}
            {{/if}}
        {{/if}}
    {{else}}
        {{partial 'components/formgroup/form-group-control'}}
    {{/if}}

    {{#if v_icons}}

    {{/if}}

    {{!Currently no errors when layout is inline}}
    {{#unless form.isInline}}
        {{#if canShowErrors}}
            {{em-form-control-help text=help viewName=helpViewName}}
        {{/if}}
    {{/unless}}
{{else}}
    {{yield}}
{{/unless}}


Automatically Closing Tooltips

    {{#test-component
      tooltipContent='This shows on a click event, then hides'
      tooltipEvent='click'
      data-test='auto-close-basic'
      tooltipDuration=2000
    }}
      Click me
    {{/test-component}}

    {{#test-component data-test='auto-close-component'}}
      {{#tooltip-on-parent duration="1000" event="mouseenter"}}
        Using a component with duration set
      {{/tooltip-on-parent}}
      Hover over me
    {{/test-component}}

    {{#test-calling-component}}

        Click me

    {{/test-calling-component}}

    {{input
      type="text"
      data-test="auto-close-input"
      tooltipEvent="focus"
      tooltipContent="Auto-closing tooltip on {{input}}"
      tooltipDuration="1000"
      placeholder="Focus field"
    }}

Use single-quotes for HTMLBars attributes

Automatically Closing Tooltips

    {{#test-component
      tooltipContent='This shows on a click event, then hides'
      tooltipEvent='click'
      data-test='auto-close-basic'
      tooltipDuration=2000
    }}
      Click me
    {{/test-component}}

    {{#test-component data-test='auto-close-component'}}
      {{#tooltip-on-parent duration='1000' event='mouseenter'}}
        Using a component with duration set
      {{/tooltip-on-parent}}
      Hover over me
    {{/test-component}}

    {{#test-calling-component}}

        Click me

    {{/test-calling-component}}

    {{input
      type='text'
      data-test='auto-close-input'
      tooltipEvent='focus'
      tooltipContent='Auto-closing tooltip on {{input}}'
      tooltipDuration='1000'
      placeholder='Focus field'
    }}


Welcome to
 CAMHS

    We would like to get to know you better. Click next to get started.

  {{> buttons }}

Add more space for main title


Installation

  Within your ember-cli project folder, run the following:

<CodeSnippet @name="ember-install.sh" />

  To use with native JavaScript/TypeScript classes and decorator syntax (Recommended)
  as used throughout this documentation, ensure you also meet the following in your application:

At least ember-cli-babel@^7.7.2

At least @babel/core@^7.5.0 (as a transitive dependency via ember-cli-babel)

At least ember-cli-typescript@^2.0.0 and TypeScript 3.7+, if you want to use it with TypeScript

@ember-decorators/babel-transforms is _not_ installed

Below Ember v3.10: ember-decorators-polyfill is needed

Move recommended label so it looks less awkward

Installation

  Within your ember-cli project folder, run the following:

<CodeSnippet @name="ember-install.sh" />

  (Recommended) To use with native JavaScript/TypeScript classes
  and decorator syntax as used throughout this documentation, ensure you also
  meet the following in your application/addon:

At least ember-cli-babel@^7.7.2

At least @babel/core@^7.5.0 (as a transitive dependency via ember-cli-babel)

At least ember-cli-typescript@^2.0.0 and TypeScript 3.7+, if you want to use it with TypeScript

@ember-decorators/babel-transforms is _not_ installed

Below Ember v3.10: ember-decorators-polyfill is needed


<form class="pure-form">
    <label for="{{id 'option-one'}}" class="pure-checkbox">
        <input id="{{id 'option-one'}}" type="checkbox" value="">
        Here's option one.
    </label>

    <label for="{{id 'option-two'}}" class="pure-radio">
        <input id="{{id 'option-two'}}" type="radio" name="optionsRadios" value="option1" checked>
        Here's a radio button. You can choose this one..
    </label>

    <label for="{{id 'option-three'}}" class="pure-radio">
        <input id="{{id 'option-three'}}" type="radio" name="optionsRadios" value="option2">
        ..Or this one!
    </label>
</form>

Remove optional for attributes on input labels

<form class="pure-form">
    <label class="pure-checkbox">
        <input type="checkbox" value="">
        Here's option one.
    </label>

    <label class="pure-radio">
        <input type="radio" name="optionsRadios" value="option1" checked>
        Here's a radio button. You can choose this one..
    </label>

    <label class="pure-radio">
        <input type="radio" name="optionsRadios" value="option2">
        ..Or this one!
    </label>
</form>


{{t 'projectsPage.header'}}

    {{#link-to "authenticated.projects.new" class="btn bg-primary btn-sm icon-btn"}}

    {{t 'projectsPage.addProject'}}
    {{/link-to}}

{{project-table model=model.projects}}

Indent body of link-to block


{{groupedit-toolbar
  componentName=componentName
  readonly=readonly
 }}
{{object-list-view
  componentName=componentName
  class=class
  modelProjection=modelProjection
  content=content
  cellComponent=cellComponent
  readonly=readonly
  rowClickable=_rowClickable
  headerClickable=orderable
  showCheckBoxInRow=_showCheckBoxInRow
  showDeleteButtonInRow=_showDeleteButtonInRow
  sortByColumn=(action (if this.attrs.sortByColumn this.attrs.sortByColumn "sortByColumn"))
  addColumnToSorting=(action (if this.attrs.addColumnToSorting this.attrs.addColumnToSorting "addColumnToSorting"))
}}

Remove 'cellComponent' attribute from groupedit

{{groupedit-toolbar
  componentName=componentName
  readonly=readonly
 }}
{{object-list-view
  componentName=componentName
  class=class
  modelProjection=modelProjection
  content=content
  readonly=readonly
  rowClickable=_rowClickable
  headerClickable=orderable
  showCheckBoxInRow=_showCheckBoxInRow
  showDeleteButtonInRow=_showDeleteButtonInRow
  sortByColumn=(action (if this.attrs.sortByColumn this.attrs.sortByColumn "sortByColumn"))
  addColumnToSorting=(action (if this.attrs.addColumnToSorting this.attrs.addColumnToSorting "addColumnToSorting"))
}}


<div>
  {{#link-to 'artists' (query-params name="Brad Sucks")}}Artists{{/link-to}}
</div>

Remove query param in artist page link


{{#link-to 'arrivals' stop.id class="list-item"}}

    {{bd-icon (if isFavorite 'heart' 'heart-o')}}

{{stop.name}}

    {{#each stop.routes as |route|}}
      {{bd-route-tag route=route}}
    {{/each}}

      0.5mi

{{/link-to}}

Remove distance metadata placeholder from the view

{{#link-to 'arrivals' stop.id class="list-item"}}

    {{bd-icon (if isFavorite 'heart' 'heart-o')}}

{{stop.name}}

    {{#each stop.routes as |route|}}
      {{bd-route-tag route=route}}
    {{/each}}

{{/link-to}}


{{#if isManaging}}

        {{t 'taxonomies.termsManageTitle'}}

{{else}}

        {{t 'general.terms'}} ({{subject.terms.length}})

{{/if}}

    {{#if isManaging}}
        <button class='bigadd' {{action 'save'}}>
          {{fa-icon (if isSaving 'spinner' 'check') spin=(if isSaving true false)}}
        </button>
        <button class='bigcancel' {{action 'cancel'}}>{{fa-icon 'undo'}}</button>
    {{else if editable}}
        <button {{action 'manage'}}>{{t 'taxonomies.termsManageTitle'}}</button>
    {{/if}}

    {{#if isManaging}}
        {{taxonomy-manager
        subject=subject
        selectedTerms=bufferedTerms
        add='addTermToBuffer'
        remove='removeTermFromBuffer'}}
    {{else}}
        {{#each subject.associatedVocabularies as |vocab| }}
            {{detail-terms-list vocabulary=vocab terms=subject.terms canEdit=false}}
        {{/each}}
    {{/if}}

Add collapsible control to taxonomy title


<!doctype html>

    <title></title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="{{ assetPath "app.css" }}">

Hello World!

Add link to example state

<!doctype html>

    <title></title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="{{ assetPath "app.css" }}">

Hello World!

                Example state


    {{#each root.children}}

            {{description.title}}{{#if description.edition}}: {{description.edition}}{{/if}}

            {{#parent_dir uri}}{{/parent_dir}}

        {{#if children}} {{! Within the context of the current item }}

                {{> childDeletes}} {{! Recursively render the partial }}

        {{/if}}
    {{/each}}

Fix mark up and remove onclick


{{label}}
{{input value=rangeText class='daterangepicker-input form-control' placeholder=placeholder}}

  {{input value=start}}
  {{input value=end}}

Add ability to disable label

{{#if label}}
  {{label}}
{{/if}}
{{input value=rangeText class='daterangepicker-input form-control' placeholder=placeholder}}

  {{input value=start}}
  {{input value=end}}


{{#if isOpen}}

                    close

 Select a template

                    {{#each themeList as |item|}}

                                {{#if (eq theme.id item.id)}}

                                        check

                                {{/if}}

 {{item.name}}

{{item.description}}

                    {{/each}}

{{/if}}

<button class="btn-outline-cus"  {{action 'toggleProperty' 'isOpen'}}> Select a template </button>

Fix non specific style rule to make sure other background styles apply


{{!< default}}

{{! This is a page template. A page outputs content just like any other post, and has all the same
    attributes by default, but you can also customise it to behave differently if you prefer. }}

    Home
    Subscribe

    {{! Everything inside the #post tags pulls data from the post }}
    {{#post}}

{{title}}

            {{content}}

    {{/post}}

Update film schedule template to match default


{{!< default}}

{{! The comment above "< default" means - insert everything in this file into
    the {body} of the default.hbs template, which contains our header/footer. }}

{{! The big featured header on the homepage, with the site logo and description }}

{{! The main content area on the homepage }}

    {{! Each post will be output using this markup }}
    {{#foreach posts}}

            <time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{#if tags}}on {{tags}}{{/if}}

{{{title}}}

{{excerpt}}…

    {{/foreach}}

    {{!! After all the posts, we have the previous/next pagination links }}
    {{pagination}}

Use meta description as experpt if possible.

{{!< default}}

{{! The comment above "< default" means - insert everything in this file into
    the {body} of the default.hbs template, which contains our header/footer. }}

{{! The big featured header on the homepage, with the site logo and description }}

{{! The main content area on the homepage }}

    {{! Each post will be output using this markup }}
    {{#foreach posts}}

            <time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{#if tags}}on {{tags}}{{/if}}

{{{title}}}

{{#if this.meta_description}}{{this.meta_description}}{{else}}{{excerpt}}…{{/if}}

    {{/foreach}}

    {{!! After all the posts, we have the previous/next pagination links }}
    {{pagination}}


    {{view.content.headerCellName}}
    {{#if view.content.sorted}}

        {{#if view.content.sortAscending}}

            ↑{{view.content.sortNumber}}

        {{else}}

            ↓{{view.content.sortNumber}}

        {{/if}}

    {{/if}}

Add comment about {{view.property...}} deprecation

    {{!--
      Using of {{view.property...}} is deprecated see http://emberjs.com/deprecations/v1.x/#toc_ember-view.
      This sortable-header-cell should be replaced with Ember.Component in future,
      when ember-table table-cell will become an extendable Ember.Component.
    --}}
    {{view.content.headerCellName}}
    {{#if view.content.sorted}}

        {{#if view.content.sortAscending}}

            ↑{{view.content.sortNumber}}

        {{else}}

            ↓{{view.content.sortNumber}}

        {{/if}}

    {{/if}}


{{#ui-field size=size type="checkbox" as |f|}}
  {{#f.input}}
    Small
  {{/f.input}}
{{/ui-field}}

Use size for checkbox text

{{#ui-field kind=kind states=states size=size type="checkbox" as |f|}}
  {{#f.input}}
    {{size}}
  {{/f.input}}
{{/ui-field}}


<?xml version="1.0" encoding="UTF-8"?>
    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
        <channel>
            <title>ALL YOUR PANTS</title>
            <description>The Comic From The Past About The Future</description>
            <link>{{ baseUrl }}/</link>

            <atom:link href="{{ baseUrl }}/feed.xml" rel="self" type="application/rss+xml" />
            {{#each archive}}
                <item>
                    <title>The One We Call: {{ this.time }}</title>
                    <description>A great comic of struggle, loss and redemption.</description>
                    <enclosure url="{{ this.url }}" length="0" type="image/*" />
                    <pubDate>{{xmlDate this.time }}</pubDate>
                    <link>{{ baseUrl }}{{ comicUrl this.time }}</link>
                    <guid isPermaLink="true">{{ baseUrl }}{{ comicUrl this.time }}</guid>
                </item>
            {{/each}}
        </channel>
    </rss>

Update the mime and write out a CDATA img tag

<?xml version="1.0" encoding="UTF-8"?>
    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
        <channel>
            <title>ALL YOUR PANTS</title>
            <description>The Comic From The Past About The Future</description>
            <link>{{ baseUrl }}/</link>

            <atom:link href="{{ baseUrl }}/feed.xml" rel="self" type="application/rss+xml" />
            {{#each archive}}
                <item>
                    <title>The One We Call: {{ this.time }}</title>
                    <description>A great comic of struggle, loss and redemption.
					  <![CDATA[<img src="{{ this.url}}" alt="dickbutt" />]]></description>
                    <enclosure url="{{ this.url }}" length="0" type="{{ this.mime }}" />
                    <pubDate>{{xmlDate this.time }}</pubDate>
                    <link>{{ baseUrl }}{{ comicUrl this.time }}</link>
                    <guid isPermaLink="true">{{ baseUrl }}{{ comicUrl this.time }}</guid>
                </item>
            {{/each}}
        </channel>
    </rss>


{{!--Not having line breaks before and after the div markups breaks tables displaying on the page--}}

{{title}}

        {{{html}}}

Download this table

    <form method="get" action="/generator" class="inline">
        <button type="submit" title="Download CSV" class="btn btn--primary btn--thick download-analytics">
            .csv
        </button>
        <input type="hidden" name="format" value="csv"/>
        <input type="hidden" name="uri" value="{{absolute uri}}"/>
    </form>

    <form method="get" action="/generator" class="inline">
        <button type="submit" title="Download XLS" class="btn btn--primary btn--thick download-analytics">
            .xls
        </button>
        <input type="hidden" name="format" value="xls"/>
        <input type="hidden" name="uri" value="{{absolute uri}}"/>
    </form>

Fix xls download, removed cvs download

{{!--Not having line breaks before and after the div markups breaks tables displaying on the page--}}

{{title}}

        {{{html}}}

Download this table

    <form method="get" action="/file" class="inline">
        <button type="submit" title="Download XLS" class="btn btn--primary btn--thick download-analytics">
            .xls
        </button>
        <input type="hidden" name="format" value="xls"/>
        <input type="hidden" name="uri" value="{{absolute uri}}.xls"/>
    </form>


{{#if column.titleIcon}}
  <i class="fa fa-{{column.titleIcon}}"></i>
{{else}}
  {{column.title}}
{{/if}}

Add more custom options to table header

{{#if column.titleIcon}}

{{else}}
  {{column.title}}
{{/if}}

{{#if column.tooltip}}
  <fa class="fa fa-info-circle" data-toggle="tooltip" title={{column.tooltip}}></fa>
{{/if}}

{{#if column.subtitle}}

{{column.subtitle}}

{{/if}}


{{#this}}

{{title}}›

{{truncate description 80}}

{{short_name}}

{{page.headline.text}}

{{page.headline.value}}

{{indicatorDefinition.short_unit}}

        {{narrativeRecency}}

        {{#if APP_CONFIG.features.dpsir_filtering}}
          {{> dpsir dpsir }}
        {{/if}}

  {{/this}}

Remove indentation from deleted if block


{{! Client-side Mustache template for rendering subscriptions in the "invite user" form.}}

    {{t "Check all" }} |
    {{t "Uncheck all" }}

    {{#each streams}}

        <input type="checkbox" name="stream" value="{{name}}"
               {{#if default_stream}}checked="checked"{{/if}} />

        {{#if invite_only}}{{/if}}
        {{name}}

    {{/each}}

Make stream labels click targets.


  {{#if view.isEmpty}}
    {{view 'repos-empty'}}
  {{else}}

    {{#if repo.isLoaded}}

{{#link-to "repo" repo}}{{repo.slug}}{{/link-to}}

{{description}}

            {{repo-show-tools repo=repo build=build job=job tab=tab currentUser=auth.currentUser}}

            {{repo-show-tabs repo=repo tab=tab}}

            {{outlet}}

    {{else}}
      {{loading-indicator}}
    {{/if}}

  {{/if}}

Fix build and jobs tabs

  {{#if view.isEmpty}}
    {{view 'repos-empty'}}
  {{else}}

    {{#if repo.isLoaded}}

{{#link-to "repo" repo}}{{repo.slug}}{{/link-to}}

{{description}}

            {{repo-show-tools repo=repo build=build job=job tab=tab currentUser=auth.currentUser}}

            {{repo-show-tabs repo=repo tab=tab build=build job=job}}

            {{outlet}}

    {{else}}
      {{loading-indicator}}
    {{/if}}

  {{/if}}


{{#with linkifier}}

        {{pattern}}

        {{url_format_string}}

    {{#if ../can_modify}}

        <button class="button small delete btn-danger" data-linkifier-id="{{id}}">

        </button>

    {{/if}}

{{/with}}

Add `title` attribute to `Delete` button.

{{#with linkifier}}

        {{pattern}}

        {{url_format_string}}

    {{#if ../can_modify}}

        <button class="button small delete btn-danger" data-linkifier-id="{{id}}" title="{{t 'Delete' }}" aria-label="{{t 'Delete' }}">

        </button>

    {{/if}}

{{/with}}


<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

    Download

</button>

All up in yo list

 GeoJson

 ESRI Shapefile

 KML

Make dropdown menu appear below download button


{{#power-calendar class="demo-calendar-small"
  center=month
  onCenterChange=(action (mut month) value="date") as |calendar|}}

  <nav class="ember-power-calendar-nav">
    <button class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter -12 'month'}}>«</button>
    <button class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter -1 'month'}}>‹</button>
    <div class="ember-power-calendar-nav-title">
      {{moment-format calendar.center 'MMMM YYYY'}}
    </div>
    <button class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter 1 'month'}}>›</button>
    <button class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter 12 'month'}}>»</button>
  </nav>

  {{calendar.days}}
{{/power-calendar}}

Set button type in nav snippet

{{#power-calendar class="demo-calendar-small"
  center=month
  onCenterChange=(action (mut month) value="date") as |calendar|}}

  <nav class="ember-power-calendar-nav">
    <button type="button" class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter -12 'month'}}>«</button>
    <button type="button" class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter -1 'month'}}>‹</button>
    <div class="ember-power-calendar-nav-title">
      {{moment-format calendar.center 'MMMM YYYY'}}
    </div>
    <button class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter 1 'month'}}>›</button>
    <button class="ember-power-calendar-nav-control" onclick={{action calendar.actions.moveCenter 12 'month'}}>»</button>
  </nav>

  {{calendar.days}}
{{/power-calendar}}


{{#if showPopup}}

  {{#component tether classPrefix="ui-popup--tooltip-"}}

        {{yield}}

  {{/component}}
{{/if}}

Update ui-popup to support theme system

{{#if showPopup}}

  {{#component tether classPrefix=(concat uiPrefix "-")}}

        {{yield}}

  {{/component}}
{{/if}}


{{ title }}

{{g 'film'}} {{items_count}} {{t 'meta.videos'}}

Fix a wrong attribute reference

{{ title }}

{{g 'film'}} {{item_count}} {{t 'meta.videos'}}


angular.module('app.directives').directive('{{#lowercamelize}}{{name}}{{/lowercamelize}}', function() {

});

Add more to directive generator

angular.module('app.directives').directive('{{#lowercamelize}}{{name}}{{/lowercamelize}}', function() {
  return {

  };
});


        ◀
        0 / 0
        ▶

      <button type="button" id="clear-btn" class="clear-button" {{#if temporary}} disabled {{/if}}>Clear</button>
      <button type="button" id="ics-btn" class="clear-button">Download ICS</button>
      <button type="button" id="link-btn" class="clear-button" {{#if temporary}} disabled {{/if}}>Copy Schedule Link</button>

{{#unless temporary}}

{{else}}

Selections Disabled

    This is a temporary schedule.
    You're viewing a set of courses that doesn't correspond to what you have selected.
    To return to your selected schedules, click on the normal Schedule link in the top right.

{{/unless}}

Add extra paragraph and button to replace selections

        ◀
        0 / 0
        ▶

      <button type="button" id="clear-btn" class="clear-button" {{#if temporary}} disabled {{/if}}>Clear</button>
      <button type="button" id="ics-btn" class="clear-button">Download ICS</button>
      <button type="button" id="link-btn" class="clear-button" {{#if temporary}} disabled {{/if}}>Copy Schedule Link</button>

{{#unless temporary}}

{{else}}

Selections Disabled

This is a temporary schedule.
    You're viewing a set of courses that doesn't correspond to what you have selected.
    To return to your selected schedules, click on the normal Schedule link in the top right.

Alternatively, to discard your currently selected courses and replace them with those
    shown on this schedule, click the button below.

    <button type="button" id="replace-selections-btn" class="clear-button">Clear and Replace Selections</button>

{{/unless}}


{{!-- {{#partial "block-title"}}
 	Published methodologies
 {{/partial}} --}}

{{#partial "block-results-text"}}
	<div class="col col--md-28 col--lg-38">
		{{> list/partials/list-results-text-number result resultsLabel="methodology"}}
	</div>
{{/partial}}

{{#partial "block-filters"}}
	{{> list/filters/keywords}}
	{{> list/filters/methodology docCounts=result.docCounts}}
	{{> list/filters/topics}}
{{/partial}}

{{!-- Inheriting from base list template --}}
{{> list/base/list showBreadcrumb=true breadcrumbLabel="Published methodologies"}}

Remove methodology type partial from filters block

{{!-- {{#partial "block-title"}}
 	Published methodologies
 {{/partial}} --}}

{{#partial "block-results-text"}}
	<div class="col col--md-28 col--lg-38">
		{{> list/partials/list-results-text-number result resultsLabel="methodology"}}
	</div>
{{/partial}}

{{#partial "block-filters"}}
	{{> list/filters/keywords}}
	{{> list/filters/topics}}
{{/partial}}

{{!-- Inheriting from base list template --}}
{{> list/base/list showBreadcrumb=true breadcrumbLabel="Published methodologies"}}


{{#form-field propertyName
    class="select-field"
    classNames=fieldClasses
    errorClasses=errorClasses
    hintClasses=hintClasses
    inputClasses=inputClasses
    labelClasses=labelClasses
    object=object
    hint=hint
    form=form
    label=label
    control=control
    update=(action update) as |f|}}
  {{f.label required=required}}
  {{f.control
      accesskey=accesskey
      autofocus=autofocus
      dir=dir
      disabled=disabled
      groupLabelPath=groupLabelPath
      hidden=hidden
      lang=lang
      multiple=multiple
      options=options
      optionValuePath=optionValuePath
      optionLabelPath=optionLabelPath
      required=required
      search=search
      tabindex=tabindex
  }}
  {{f.errors}}
  {{f.hint}}
{{/form-field}}

Add the missing includeBlank option

{{#form-field propertyName
    class="select-field"
    classNames=fieldClasses
    errorClasses=errorClasses
    hintClasses=hintClasses
    inputClasses=inputClasses
    labelClasses=labelClasses
    object=object
    hint=hint
    form=form
    label=label
    control=control
    update=(action update) as |f|}}
  {{f.label required=required}}
  {{f.control
      accesskey=accesskey
      autofocus=autofocus
      dir=dir
      disabled=disabled
      groupLabelPath=groupLabelPath
      hidden=hidden
      includeBlank=includeBlank
      lang=lang
      multiple=multiple
      options=options
      optionValuePath=optionValuePath
      optionLabelPath=optionLabelPath
      required=required
      search=search
      tabindex=tabindex
  }}
  {{f.errors}}
  {{f.hint}}
{{/form-field}}


 {{title}}

	{{#if showingProjectDescript}}

    	Sample Project Descript x

  {{else}}
     Project Description
  {{/if}}

  {{render "progressBarSection" auth.currentUser}}
  {{render "groupMemberProgressBars" groupMembers}}

Add icon next to project description


    {{#each root.children}}

            {{description.title}}{{#if description.edition}}: {{description.edition}}{{/if}}

            {{#parent_dir uri}}{{/parent_dir}}

        {{#if children}} {{! Within the context of the current item }}

                {{> childDeletes}} {{! Recursively render the partial }}

        {{/if}}
    {{/each}}

Fix mark up and remove onclick


  {{#if value}}

      {{#if (or inline (not value.hasRoute))}}
        {{value.name}}
      {{else}}

          {{value.name}}

      {{/if}}

  {{else}}

  {{/if}}

Check for named route on belongsto

  {{#if value}}

      {{#if (or inline (not value.hasViewRoute))}}
        {{value.name}}
      {{else}}

          {{value.name}}

      {{/if}}

  {{else}}

  {{/if}}


{{title}}

Welcome to {{title}}

Entries: {{entries.length}}

      Name
      Age
      Img
      Wiki URL
      ID

  {{#each entries as |entry|}}

    {{entry.fullName}}
    {{entry.age}}

    {{entry.wikiUrl}}
    {{entry.id}}

  {{/each}}

Remove login with fb button


{{name}}

[NOT PUBLISHED]

Event history

Coming soon

Add cancel button to unpublished report details

{{name}}

[NOT PUBLISHED]

Event history

Coming soon

    <button class="btn-collection-cancel">Cancel</button>