<commit_before>// 
// Header Bar
// ==============================




// BASE
// ------------------------------

.Headerbar {
	color: @headerbar-color;
	height: @headerbar-height;
	line-height: @headerbar-height;
	margin: 0;
	position: relative;
	z-index: 3;
	
	// workaround for headerbar issue in KitKat Chrome,
	// see https://github.com/JedWatson/touchstonejs/issues/11
	-webkit-transform: translateZ(0);
	transform: translateZ(0);

	&.default {
		.retina-1px-border-bottom( rgba(0,0,0,0.3) );
		background-color: @headerbar-bg;
	}
}


// variants

.Headerbar.transparent,
.Headerbar.green,
.Headerbar.blue,
.Headerbar.primary,
.Headerbar.light-blue,
.Headerbar.yellow,
.Headerbar.orange,
.Headerbar.red,
.Headerbar.pink,
.Headerbar.purple {
	color: @headerbar-inverted-color;
	
	// hide the shadow
	&:after {
		display: none;
	}
	
	.Headerbar-button {
		color: @headerbar-inverted-button-color;

		&.disabled,
		&[disabled] {
			color: @headerbar-inverted-button-color-disabled;
		}
	}
}
.Headerbar.green { background-color: @green; }
.Headerbar.blue  { background-color: @blue; }
.Headerbar.primary { background-color: @app-primary; }
.Headerbar.light-blue { background-color: @light-blue; }
.Headerbar.yellow { background-color: @yellow; }
.Headerbar.orange { background-color: @orange; }
.Headerbar.red { background-color: @red; }
.Headerbar.pink { background-color: @pink; }
.Headerbar.purple { background-color: @purple; }
.Headerbar.transparent { background: none; }


// warning is a special case - it has dark text

.Headerbar.yellow {
	color: @headerbar-color;
	
	.Headerbar-button {
		color: fade(@text-color, 80%);

		&.disabled,
		&[disabled] {
			color: fade(@text-color, 40%);
		}
	}
}





// BUTTONS
// ------------------------------

.Headerbar-button {
	background: none transparent;
	border: 0 none;
	color: @headerbar-button-color;
	cursor: pointer;
	left: 0;
	line-height: @headerbar-height;
	height: @headerbar-height;
	padding-left: @gutter-base;
	padding-right: @gutter-base;
	position: absolute;
	text-align: center;
	text-decoration: none;
	top: 0;
	-webkit-appearance: none;
	z-index: 2;

	// highlight primary buttons
	&.is-primary {
		font-weight: @font-weight-bold;
	}

	// align button right
	&.right {
		left: auto;
		right: 0;
	}

	// just for dev
	&:hover {
		color: lighten(@headerbar-button-color, 5%);
	}
	
	// darken button on tap
	&:active,
	&:focus,
	&.Tappable-active {
		color: darken(@headerbar-button-color, 10%);
		outline: none;
		-webkit-appearance: none;
	}

	// alert users to disabled state
	&.disabled,
	&[disabled] {
		color: @headerbar-button-color-disabled;
		pointer-events: none;
	}

	// position the icon
	&:before {
		font-size: @ionicons-size-large;
		margin-right: @gutter-base / 2;
		position: relative;
		top: 3px; // FIXME: magic numbers are bad, but I can't figure this one out...
	}
}




// LABEL
// ------------------------------

.Headerbar-label {
	.text-overflow();
	font-weight: @font-weight-bold;
	line-height: @headerbar-height;
	height: @headerbar-height;
	min-width: @headerbar-height;
	padding-left: @gutter-base;
	padding-right: @gutter-base;
	position: absolute;
	text-align: center;
	width: 100%;
}
<commit_msg>Don't allow headerbar buttons to collapse when empty<commit_after>// 
// Header Bar
// ==============================




// BASE
// ------------------------------

.Headerbar {
	color: @headerbar-color;
	height: @headerbar-height;
	line-height: @headerbar-height;
	margin: 0;
	position: relative;
	z-index: 3;
	
	// workaround for headerbar issue in KitKat Chrome,
	// see https://github.com/JedWatson/touchstonejs/issues/11
	-webkit-transform: translateZ(0);
	transform: translateZ(0);

	&.default {
		.retina-1px-border-bottom( rgba(0,0,0,0.3) );
		background-color: @headerbar-bg;
	}
}


// variants

.Headerbar.transparent,
.Headerbar.green,
.Headerbar.blue,
.Headerbar.primary,
.Headerbar.light-blue,
.Headerbar.yellow,
.Headerbar.orange,
.Headerbar.red,
.Headerbar.pink,
.Headerbar.purple {
	color: @headerbar-inverted-color;
	
	// hide the shadow
	&:after {
		display: none;
	}
	
	.Headerbar-button {
		color: @headerbar-inverted-button-color;

		&.disabled,
		&[disabled] {
			color: @headerbar-inverted-button-color-disabled;
		}
	}
}
.Headerbar.green { background-color: @green; }
.Headerbar.blue  { background-color: @blue; }
.Headerbar.primary { background-color: @app-primary; }
.Headerbar.light-blue { background-color: @light-blue; }
.Headerbar.yellow { background-color: @yellow; }
.Headerbar.orange { background-color: @orange; }
.Headerbar.red { background-color: @red; }
.Headerbar.pink { background-color: @pink; }
.Headerbar.purple { background-color: @purple; }
.Headerbar.transparent { background: none; }


// warning is a special case - it has dark text

.Headerbar.yellow {
	color: @headerbar-color;
	
	.Headerbar-button {
		color: fade(@text-color, 80%);

		&.disabled,
		&[disabled] {
			color: fade(@text-color, 40%);
		}
	}
}





// BUTTONS
// ------------------------------

.Headerbar-button {
	background: none transparent;
	border: 0 none;
	color: @headerbar-button-color;
	cursor: pointer;
	left: 0;
	line-height: @headerbar-height;
	height: @headerbar-height;
	min-width: @headerbar-height;
	padding-left: @gutter-base;
	padding-right: @gutter-base;
	position: absolute;
	text-align: center;
	text-decoration: none;
	top: 0;
	-webkit-appearance: none;
	z-index: 2;

	// highlight primary buttons
	&.is-primary {
		font-weight: @font-weight-bold;
	}

	// align button right
	&.right {
		left: auto;
		right: 0;
	}

	// just for dev
	&:hover {
		color: lighten(@headerbar-button-color, 5%);
	}
	
	// darken button on tap
	&:active,
	&:focus,
	&.Tappable-active {
		color: darken(@headerbar-button-color, 10%);
		outline: none;
		-webkit-appearance: none;
	}

	// alert users to disabled state
	&.disabled,
	&[disabled] {
		color: @headerbar-button-color-disabled;
		pointer-events: none;
	}

	// position the icon
	&:before {
		font-size: @ionicons-size-large;
		margin-right: @gutter-base / 2;
		position: relative;
		top: 3px; // FIXME: magic numbers are bad
	}
}




// LABEL
// ------------------------------

.Headerbar-label {
	.text-overflow();
	font-weight: @font-weight-bold;
	line-height: @headerbar-height;
	height: @headerbar-height;
	min-width: @headerbar-height;
	padding-left: @gutter-base;
	padding-right: @gutter-base;
	position: absolute;
	text-align: center;
	width: 100%;
}

{'fraction_non_alphanumeric': 0.19187675070028012, 'fraction_numerical': 0.00902583255524432, 'mean_word_length': 3.154492566257272, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2205310', 'n_tokens_mistral': 2510, 'n_tokens_neox': 2299, 'n_words': 478}