<commit_before>
/*
Selects

Select boxes should be used only when a list of radio buttons or checkboxes
would take up too much space. The reason for this is that select boxes hide
options, which adds a cognative step for a user.

Every select box will show a "clear selection" button after a selection has
been made.

All select boxes should implement a placeholder message, and start with their
value unset. Implementers should use specific and tailored language as their
select element placeholder.

markup:
<form>
	<label for="select-empty">Empty select</label>
	<select id="select-empty"></select>
	<label for="select-single-option">Select with no selection</label>
	<select id="select-single-option" required>
	  <option value="selected-default-option">Default option (already selected)</option>
	</select>
	<fieldset ng-init="
		selectValue;
		secondOption;
		options = [
			{
				name: 'Animals that do not exist',
				options: ['Unicorn']
			},
			{
				name: 'Variables that do not exist',
				options: ['foo', 'bar', 'baz']
			}
		];
		">
		<legend>ngModel based select elements</legend>
		<a ng-click="selectValue=undefined">Reset</a>
		<label for="select-ng-options">Select using ngOptions</label>
		<select id="select-ng-options" required
			ng-model="selectValue"
			ng-options="option as option.name for option in options"
		>
			<option value="">Select a non-existant thing</option>
		</select>
		<label for="select-updated">Select with dynamic options</label>
		<select id="select-updated" required
			placeholder="Pick something"
			ng-model="secondOption"
			ng-options="value for value in selectValue.options"
			>
		</select>
	</fieldset>
	<label for="select-more-than-10">Select if there is more than 10 items</label>
	<select id="select-more-than-10" ng-model="selectColor" ng-options="color for color in ['Blue', 'Purple', 'Maroon', 'Red', 'Rose', 'Peach', 'Yellow', 'Lime', 'Green', 'Seafoam', 'Teal']">
	</select>
</form>


Styleguide 3.4

*/

select{
	@extend .form-control;

	&[disabled] + a.clear{
		display: none;
	}
}

select > option[disabled] {
	display: none;
}

select {
    padding-left: 1.7em;

    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
            linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%);
    background-position:
            10px 1em,
            14px 1em;
    background-size:
            5px 5px,
            5px 5px;
    background-repeat: no-repeat;
}

select:focus {
    padding-left: 1.7em;

    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
            linear-gradient(45deg, gray 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, gray 50%);
    background-position:
            14px 1em,
            10px 1em;
    background-size:
            5px 5px,
            5px 5px;
    background-repeat: no-repeat;
}

select.pop-out:disabled {
	box-shadow: inset 0 0 0.5em #ddd;
	background-color: #fff;
}
<commit_msg>OLMIS-2476: Added demo to check select list length updating<commit_after>
/*
Selects

Select boxes should be used only when a list of radio buttons or checkboxes
would take up too much space. The reason for this is that select boxes hide
options, which adds a cognative step for a user.

Every select box will show a "clear selection" button after a selection has
been made.

All select boxes should implement a placeholder message, and start with their
value unset. Implementers should use specific and tailored language as their
select element placeholder.

markup:
<form>
	<label for="select-empty">Empty select</label>
	<select id="select-empty"></select>
	<label for="select-single-option">Select with no selection</label>
	<select id="select-single-option" required>
	  <option value="selected-default-option">Default option (already selected)</option>
	</select>
	<fieldset ng-init="
		selectValue;
		secondOption;
		options = [
			{
				name: 'Animals that do not exist',
				options: ['Unicorn']
			},
			{
				name: 'Variables that do not exist',
				options: ['foo', 'bar', 'baz']
			}
		];
		">
		<legend>ngModel based select elements</legend>
		<a ng-click="selectValue=undefined">Reset</a>
		<label for="select-ng-options">Select using ngOptions</label>
		<select id="select-ng-options" required
			ng-model="selectValue"
			ng-options="option as option.name for option in options"
		>
			<option value="">Select a non-existant thing</option>
		</select>
		<label for="select-updated">Select with dynamic options</label>
		<select id="select-updated" required
			placeholder="Pick something"
			ng-model="secondOption"
			ng-options="value for value in selectValue.options"
			>
		</select>
	</fieldset>
	<fieldset ng-init="
		shortOptionsList = ['Blue', 'Purple', 'Red', 'Yellow', 'Green', 'Teal'];
		longOptionsList = ['Silver', 'Slate Blue', 'Blue', 'Lavender', 'Violet', 'Purple', 'Rebecca Purple', 'Plum', 'Maroon', 'Red', 'Peach', 'Yellow', 'Lime', 'Green', 'Seafoam', 'Teal', 'Aquamarine'];
		searchOptions = shortOptionsList;
	">
		<legend>Searching options in the select element</legend>
		<label for="select-more-than-10">Select if there is more than 10 items</label>
		<select id="select-more-than-10" ng-model="selectColor" ng-options="color for color in searchOptions">
		</select>
		<label class="checkbox">
			<input type="checkbox" ng-model="listLength" value="long" ng-change="searchOptions = listLength? longOptionsList : shortOptionsList" />
			List length is long
		</label>
	</fieldset>
</form>


Styleguide 3.4

*/

select{
	@extend .form-control;

	&[disabled] + a.clear{
		display: none;
	}
}

select > option[disabled] {
	display: none;
}

select {
    padding-left: 1.7em;

    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
            linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%);
    background-position:
            10px 1em,
            14px 1em;
    background-size:
            5px 5px,
            5px 5px;
    background-repeat: no-repeat;
}

select:focus {
    padding-left: 1.7em;

    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
            linear-gradient(45deg, gray 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, gray 50%);
    background-position:
            14px 1em,
            10px 1em;
    background-size:
            5px 5px,
            5px 5px;
    background-repeat: no-repeat;
}

select.pop-out:disabled {
	box-shadow: inset 0 0 0.5em #ddd;
	background-color: #fff;
}

{'fraction_non_alphanumeric': 0.13074365175332528, 'fraction_numerical': 0.019347037484885126, 'mean_word_length': 3.396677740863787, 'pattern_counts': {'":': 0, '<': 74, '<?xml version=': 0, '>': 76, 'https://': 0, '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': '7294527', 'n_tokens_mistral': 2310, 'n_tokens_neox': 2053, 'n_words': 613}