_global-normalization.scss

// normalization, enhancement and responsiveness

html input,
button,

select,
optgroup,

textarea {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

html input,
button,

[type="radio"],
[type="checkbox"], 

select,
optgroup,

textarea {
	margin: 0
}


html input,
select,
textarea,
legend {
	width: 100%;
}

// re-set width auto where needed
html label,

button,
[type="image"],
[type="submit"],
[type="reset"],
html [type="button"],

[type="radio"],
[type="checkbox"] {
	width: auto;
}

// inline-block display gives the best cross-browser combination
// and allow several properties
html input,

label,

select,
textarea,

button,
html [type="button"],
[type="reset"],
[type="submit"],
output {
	display: inline-block;
}

[type="file"] {
	display: block;
	background-color: transparent;
}

::-webkit-file-upload-button {
	font: inherit;
}

button,
html input,
select,
textarea {
	background-image: none; // FF mobile
}

input,
select,
textarea {
	vertical-align: baseline;
}

form {
	margin: 0;
}

// 1. Remove intrinsic min-width of fieldset
// https://github.com/necolas/normalize.css/pull/269
fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0; // 1.
}

legend {
	display: block;
	display: table \9; // enable line-wrapping in IE8+
	max-width: 100%;
	white-space: normal; // enable line-wrapping in FF4/5
	border: 0;
	padding: 0;
	font-weight: 400;
	margin-bottom: $bf-spacing-md-px;
	margin-bottom: $bf-spacing-md-rem;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

label {
	font-weight: 700; // fallback for font families without 600 */
	font-weight: 600;
	margin-bottom: $bf-spacing-md-px;
	margin-bottom: $bf-spacing-md-rem;
}

[type="number"]::-webkit-outer-spin-button,
[type="number"]::-webkit-inner-spin-button {
	height: auto;
}

[type="search"] {
	outline-offset: -$bf-spacing-sm-px;
	outline-offset: -$bf-spacing-sm-rem;
}

output {
	vertical-align: middle;
}

button,
select {
	text-transform: none;
}

optgroup {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: 700; // fallback for font families without 600 */
	font-weight: 600;
}

// remove -webkit-appearance listing every single elements that needed it
button,
// avoid destroying native android audio/video players
html [type="button"], 
[type="reset"],
[type="submit"],

[type="email"],
[type="number"],
[type="text"],
[type="tel"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="week"],
[type="url"],
[type="image"],
[type="password"],
[type="search"],
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button,

textarea {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; // iOS and Safari
  font: inherit; // Safari
}

[type="date"],
[type="time"],
[type="datetime-local"],
[type="month"] {
	appearance: listbox;
}

// ! IE9+
// https://caniuse.com/#feat=border-radius
button,
input,
select,
textarea {
	border-radius: $bf-spacing-sm-px;
	border-radius: $bf-spacing-sm-rem;
}

// ! IE9+
// https://caniuse.com/#feat=border-radius
[type="radio"] {
	border-radius: $bf-spacing-md-px;
}

[type="range"] {
	background-color: transparent; // FF and Chrome mobile
}

select[size],
select[multiple] {
	height: auto;
}

select[multiple] {
	background-image: none; // FF mobile
}

optgroup::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	height: auto;
	min-height: 60px;
	min-height: 6rem;
	overflow: auto;
	vertical-align: top;
	resize: vertical;
}

// Firefox: Get rid of the inner focus border on older versions
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	line-height: normal;
	text-align: center;
	margin: 0;
	background-clip: padding-box;
	vertical-align: baseline;
	overflow: visible;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	user-select: none;
	border: 0;
	background-image: none; // FF mobile

	&:hover,
	&:active,
	&:focus {
		text-decoration: none;
		color: $bf-dark;
	}

}

button, 
select,
input[type="submit"],
input[type="button"],
[type="checkbox"],
[type="range"],
[type="radio"],
[role="button"] {
	cursor: pointer;
}

// FF placeholder bug
// Issue: If one change the text color of input fields, FF will change
// the default color of placeholders too!
// Fix: Use '!important' https://github.com/necolas/normalize.css/issues/150
input::placeholder,
textarea::placeholder {
	color: $bf-gray-dark;
}

input:invalid,
select:invalid,
textarea:invalid,

input:invalid:focus,
select:invalid:focus,
textarea:invalid:focus {
	color: $bf-red;
	border-color: $bf-red;
	box-shadow: 0 0 0 3px rgba(255, 0, 0, .25);
}

// disabled groups
fieldset[disabled] button,
fieldset[disabled] input,
fieldset[disabled] select,
fieldset[disabled] textarea,
fieldset[disabled] label,

// disabled singles
button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
	cursor: default !important; // IE8-10 fallback
	cursor: not-allowed !important; // Opera Mini fallback
	pointer-events: none !important;
	opacity: .5 !important;
}