Sample code to make search bar smaller
ActivePublic
Actions

Authored by matthiasmullie on Jan 2 2019, 4:15 PM.

Tags

None

Referenced Files

	F27776375: Sample code to make search bar smaller
	Jan 2 2019, 4:15 PM

	F27776374: Sample code to make search bar smaller
	Jan 2 2019, 4:15 PM

Subscribers

None

	.mediainfo-search-widget {
	height: 30px;

	/* below: a bunch of massive hacks to get the input elements down to 30px... */

	/* keywords input field */
	.mediainfo-search-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input,
	/* statements input field */
	.mediainfo-search-input > .oo-ui-widget > .oo-ui-textInputWidget > .oo-ui-inputWidget-input {
	height: 30px;
	font-size: 0.9em;
	}

	/* depicts input */
	.oo-ui-tagMultiselectWidget-handle {
	min-height: 30px;
	height: 30px;
	font-size: 0.9em;
	}

	/* depicts capsules */
	.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group {
	margin-top: 0.15em
	}

	/* namespace selection dropdown */
	.mediainfo-search-select-checkboxes-widget .oo-ui-dropdownWidget-handle {
	min-height: 30px;
	height: 30px;
	padding-top: 0;
	padding-bottom: 0;

	.oo-ui-labelElement-label {
	line-height: 30px;
	font-size: 0.9em;
	}
	}

	/* search button */
	.mediainfo-search-button.oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button {
	height: 30px;
	padding-top: 0;
	}
	}

matthiasmullie edited the content of this paste. (Show Details)

Sample code to make search bar smallerActivePublicActions