artabro/wire/modules/AdminTheme/AdminThemeReno/styles/_inputfields.scss

*:focus {
    outline: 0;
}

.InputfieldForm {

	margin-bottom: 1em;

	.Inputfields > .Inputfield {
		list-style: none;
		padding: 0;
	}

	.Inputfields > .InputfieldWrapper {
		/* nested .Inputfields list needs no bottom margin since it'll already be offset from the parent's padding */
		margin-bottom: 0; 
		list-style: none;
	
	}

	.InputfieldContent > .Inputfields {
		padding: 0;
	}

	.Inputfields > .InputfieldColumnWidth {
		/* an Inputfield that has a percentage width assigned to it */
		float: left; 
		clear: none; 
		margin-top: 0; 
	}

	.Inputfields {

		.InputfieldColumnWidthFirst,
		.InputfieldColumnWidth + .InputfieldSubmit {
			/* first Inputfield with a percent width... */
			/* ...or the last percentage-width Inputifeld before the submit button */
			clear: both; 
			margin-left: 0; 
		}
	    
		.InputfieldColumnWidthFirstTmp, 
		.InputfieldColumnWidthFirst.InputfieldStateHidden + .Inputfield {
			/* for support of inputfield dependencies */
			clear: both;
			margin-left: 0; 
		}

		.InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) .InputfieldHeader,
		.InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) .InputfieldContent {
			margin-left: -1px; 
		}
	}
    
	/**
	 * Margin and padding tweaks to prevent doubled visual whitespace
	 *
	 */

	.Inputfields > .Inputfield:not(.InputfieldSubmit) > .InputfieldContent > *:first-child,
	.Inputfields > .Inputfield > .InputfieldContent > div > *:first-child,
	.Inputfields > .Inputfield:first-child {
		/* first child element of an Inputfield or it's content needs no top margin since it is already padded */
		margin-top: 0;
	}

	// .Inputfields .Inputfields > .Inputfield:last-child, // removed per #305
	.Inputfields > .Inputfield > .InputfieldContent > *:last-child {
		/* last child element in an Inputfield content needs no margin since it is already padded */
		margin-bottom: 0;
	}

}

/**
* FieldsetTab Descriptions
*
*/

.InputfieldFieldsetTabOpen > .Inputfields > h2 {

	padding: 1em;
	border-width: 1px 1px 0 1px;
	border-color: $border-color;
	border-style: solid;
	margin: 0 0 -1px 0;
	color: $medium-text-color; 
	
}

fieldset, 
input, 
select,
textarea,
label {
	margin: 0;
	padding: 0;
}

input,
select,
textarea {
	font-size: 1em; 
	max-width: 100%; 
}

input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]),
textarea {
	line-height: 1.3em; 
	color: $text-color; 
	border-style: solid;
	border-width: 1px;
	border-color: darken($border-color, 12%) darken($border-color, 4%) darken($border-color, 4%) darken($border-color, 4%);
	padding: 0.45em 0.5em;
	background: $subtle-bg;
	-webkit-appearance:none;  /* Remove default shadow */
}

textarea {
	line-height: 1.4em; 
	padding: 0.6em;
	display: block;
}

textarea,
input.InputfieldMaxWidth {
	width: 100%; 
}

label,
input,
select,
textarea,
table {
	height: auto;
}

.Inputfields {

	height: auto;

	label {
		display: block;
	}

	.Inputfield {
		margin-bottom: -1px; /* non doubled border */
		margin-top: 0;
		background: $text-bg; 

		p.notes {
			margin-bottom: 0; 
		}

		.asmList {
			margin-top: 0.5em;
		}

	}

	.Inputfield.ui-state-error {
		border: none; 
	}

	/**
	 * file and image input field containers
	 */
	.InputfieldImageGrid {
		
		.InputfieldFileList{
			margin-top: 1em;
		}

		.InputfieldFileItem {
			background: $white !important;
			padding: 0.4em !important;
			margin: 0 0.6em 0.6em 0 !important;
			//border: 1px solid $border-color !important;
			box-shadow: 0 1px 3px rgba(0,0,0,0.2);
		}

		.InputfieldFileData {
			border: none !important;
			margin-bottom: 0 !important;
		}
		a.InputfieldFileLink {
			display: block !important;
			margin: 0 !important;
			padding: 0 !important;
		}
		&.ui-sortable-helper{
			background: $link-color !important;
			border-color: $link-color !important;
		}
	}

	.Inputfield.InputfieldImage .InputfieldHeader,
	.Inputfield.InputfieldFile .InputfieldHeader,
	.Inputfield.InputfieldImage .InputfieldContent,
	.Inputfield.InputfieldFile .InputfieldContent {
		background: $nested-fields-bg;
	}

	// empty
	.Inputfield.InputfieldImage.InputfieldFileEmpty .InputfieldHeader,
	.Inputfield.InputfieldFile.InputfieldFileEmpty .InputfieldHeader,
	.Inputfield.InputfieldImage.InputfieldFileEmpty .InputfieldContent,
	.Inputfield.InputfieldFile.InputfieldFileEmpty .InputfieldContent {
		background: $white !important;
	}

	.Inputfield.InputfieldImage.InputfieldFileEmpty .InputfieldContent.ui-state-hover,
	.Inputfield.InputfieldFile.InputfieldFileEmpty .InputfieldContent.ui-state-hover {
		background: $highlight-bg !important;
	}

	.InputfieldStateToggle {
		cursor: pointer;

		span.ui-icon:first-child,
		i.toggle-icon {
			/* the open/close icon that goes with most Inputfields */
			float: right; 
			padding-right: 0.25em; 
		}
		i.toggle-icon {
			padding-right: 0.5em; 
			color: $secondary-link-color;
			line-height: 1.7em; 
		}

		.ui-icon + .ui-icon,
		i + i {
			margin-right: 0.3em; 
			margin-left: none; 
		}
	}

	.InputfieldStateCollapsed {
		.InputfieldHeader {
			/* different style for collapsed header */
			padding-bottom: 0.75em;
			background: $label-link-collapsed-bg ; 
			border: 1px solid $border-color; 
			color: $label-link-collapsed-color; 
		
			&:hover {
				/* style for collapsed header when hovered */
				color: $label-link-hover-color; 
				border-color: $border-color; 
				background: $label-link-collapsed-hover-bg; 
			}
			&:after{
				content: " \2026";
			}
		}
		.InputfieldContent {
			/* collapsed Inputfields don't show their content (only header) */
			display: none;
		}
	}

	.InputfieldContent {
		.InputfieldStateCollapsed {
			.InputfieldHeader {
				&:hover {
					/* style for nested collapsed header when hovered */
					background: $label-link-bg; 
				}
			}
		}
	}

	.InputfieldHeader,
	.InputfieldWrapper > .description {
		background: $label-link-bg; 
		border: 1px solid $border-color; 
		border-bottom: none;
		color: $label-link-color; 
	}
		.InputfieldHeader:hover {
			color: $label-link-hover-color; 
		}
		.InputfieldWrapper > .description {
			margin: 0 !important;
			padding-bottom: 1em; 
			margin-bottom: -1em;
		}

	.InputfieldHeader + .InputfieldContent {
		padding: 0.25em 1em 1.25em 1em;
		border: 1px solid $border-color; 
		border-top: none; 
		background: $text-bg; 
	}



	/**
	 * InputfieldMarkup
	 *
	 */

	.InputfieldMarkup .InputfieldContent {
		border: 1px solid $border-color;
		padding: 1em;
	}
		.InputfieldMarkup .InputfieldHeader + .InputfieldContent {
			border-top: none; 
			margin-top: 0;
			padding-top: 0;
		}

	/**
	 * InputfieldFileUpload
	 *
	 */
	
	.InputfieldFileUpload .AjaxUploadDropHere {
		opacity: 1;
		color: $link;
	}

	.InputfieldFileUpload input[type=file] {
		margin: 0.8em 0 0.5em 0;
	}

	/**
	 * Repeaters
	 *
	 */
	
	.InputfieldRepeater, .InputfieldRepeater > .InputfieldContent {
		background: $nested-fields-bg;

	}

	.InputfieldRepeater > .InputfieldContent {

		.InputfieldRepeaterItem > .InputfieldHeader {
			border: none;
			background: $item-header-bg; 
			color: $item-header-color;

			a {
				color: $item-header-color; 
				cursor: pointer; 
			}

			&:hover {
				background: $item-header-hover-bg; 
				color: $item-header-hover-color; 
				border: none; 
			}

		}

		.InputfieldRepeaterItem > .InputfieldContent {
			padding: 0;
			border: none; 
		}

		.InputfieldRepeaterItem {
			margin-bottom: 1.25em;
		}

		.InputfieldRepeaterItem.InputfieldStateCollapsed {
			margin-bottom: 1em; 
		}

		.InputfieldRepeaterItem > .InputfieldHeader.ui-state-error {
			text-decoration: line-through; 
			background: $error-bg; 
			border: none; 
		}
		.InputfieldRepeaterItem > .InputfieldHeader .toggle-icon {
			color: $item-header-color;
		}
	}

	/**
	 * Item and file lists
	 *
	 */
	
	.InputfieldFileList {
		margin-top: 0;
	}

	.InputfieldFileList > li {
		margin-top: 0;
		margin-bottom: 0.5em !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	}
	.InputfieldFileList .InputfieldFileItem {
		border: none;
	}

	.InputfieldFileList .InputfieldFileItem .ui-widget-content, .InputfieldFileData {
		//border-width: 0 1px 1px 1px;
		//border-style: solid;
		//border-color: darken($item-border-color, 4%);
		background: $item-bg;
		border: none;
		//margin-bottom: 1em;
	}

	.InputfieldItemList .InputfieldItemHeader {
		/* file or repeater item header */
		border: none;
		background: $item-header-bg; 
		color: $item-header-color; 
		padding: 0.5em;
		cursor: move; 
		font-weight: $normal-weight;

		a {
			/* link in file or repeater item header */
			color: $item-header-color;
		}

		&:hover {
			/* file or repeater item header in hover state */
			background: $item-header-hover-bg; 
			color: $item-header-hover-color; 
			border: none; 
			a {
				color: $item-header-hover-color; 
			}
		}

		&.InputfieldFileInfo > i.fa{
			left: 0;
		}
	}

	.InputfieldItemList .InputfieldItemList .InputfieldItemHeader:not(:hover) {
		/* lighten up nested item list headers use a different color */
		background: $ui-state-default-bg; 
		color: $ui-state-default-color; 
	}

	.InputfieldItemList .InputfieldItemHeader.ui-state-error,
	.InputfieldItemList .InputfieldItemList .InputfieldItemHeader.ui-state-error {
		/* deleted item state */
		text-decoration: line-through; 
		background: $error-bg; 
		border: none; 
	}

	.InputfieldItemList:not(.InputfieldStateCollapsed) > .InputfieldHeader,
	.InputfieldFieldset:not(.InputfieldStateCollapsed) > .InputfieldHeader,
	.InputfieldFieldsetOpen:not(.InputfieldStateCollapsed) > .InputfieldHeader,
	.InputfieldItemList > .InputfieldHeader + .InputfieldContent,
	.InputfieldFieldset > .InputfieldHeader + .InputfieldContent,
	.InputfieldFieldsetOpen > .InputfieldHeader + .InputfieldContent {
		/* Inputfields containing other items get a different background color */
		background: $nested-fields-bg;
	
	}
	.InputfieldItemList .InputfieldItemList:not(.InputfieldStateCollapsed) > .InputfieldHeader,
	.InputfieldItemList .InputfieldItemList > .InputfieldHeader + .InputfieldContent {
		/* unless the item is already a nested item list, then we are a little mroe subtle with it */ 
		background: transparentize($subtle-bg, 0.6); 
	}

	.InputfieldPageNameURL {
		/* page name */
		font-size: 0.875em; 
	}

}

.Inputfields > .Inputfield {
	display: block;
	clear: both; 
}

.Inputfields > .Inputfield > .InputfieldContent:before,
.Inputfields > .Inputfield > .InputfieldContent:after,
.InputfieldForm:after {
    /* @soma clearfix */
    content: " ";
    display: table;
}
.Inputfields > .Inputfield > .InputfieldContent:after,
.InputfieldForm:after {
    /* @soma clearfix  */
    clear: both;
}

/**
 * Inputfield containers (InputfieldHeader, InputfieldContent) 
 *
 */

.Inputfields .InputfieldHeader, 
.InputfieldForm .InputfieldHeader, 
.InputfieldForm label.InputfieldHeader,
.InputfieldWrapper > .description {
	/* typically the Inputfield's <label> */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none; /* prevent selection of this element */

	display: block;
	padding: 0.75em 0.25em 0.25em 1em;
	font-weight: $bold-weight; 
}

.InputfieldStateRequired > .InputfieldHeader:first-child:after {
	/* Add asterisk to indicate field is required */
	content: ' *';
	color: $red; 
}

/****************************************************************************
 * Specific Inputfield types
 *
 * Defined here rather than as separate CSS files because their styles are 
 * shared or there may be relationships with other Inputfields
 *
 */

.Inputfields .InputfieldHidden {
	display: none; 
}

/**
 * Buttons
 *
 */

.InputfieldForm .Inputfields .InputfieldSubmit,
.InputfieldForm .Inputfields .InputfieldButton {
	/* enable horizontal stack of buttons */
	margin-top: 0;
	padding-top: 0;
	clear: none; 
	background: none; 

	.InputfieldHeader {
		/* no need for a header with buttons */
		display: none; 
	}

	.InputfieldContent {
		/* we don't need our visual furniture for buttons */
		padding: 0; 
		margin: 0;
		margin-top: 1em; 
		background: none; 
		border: none; 
	}
}


.Inputfields > .InputfieldSubmit {
	float: left; 
	margin-bottom: 0.5em;
	margin-top: 0;
}
	.Inputfields .InputfieldSubmit + .InputfieldSubmit,
	.Inputfields .InputfieldSubmit + .InputfieldButton {
		/* two buttons next to each other */
		float: left; 
		margin-left: 0.5em; 
		margin-top: 0;
	}

	.Inputfields .Inputfield:not(.InputfieldSubmit) + .InputfieldSubmit {
		clear: left; 
	}

.Inputfields .InputfieldRadiosColumns li {
	padding-bottom: 0.1em !important; 
}


.Inputfield .LanguageSupport {
	margin-bottom: 1em; 
}

.Inputfields .Inputfield:not(.InputfieldStateCollapsed) > .InputfieldHeaderHidden > span {
	/* hide header for inputfield */
	display: none;
}

#content .InputfieldHeader + .InputfieldContent.langTabsContainer {
	padding-bottom: 0.25em;
}

#content .InputfieldHeader + .InputfieldContent.langTabsContainer p.notes {
	margin: 0 0 1em 0;
}

/****************************************************************************
 * Render Value Mode 
 *
 * Used when only values are being rendered in the form (no inputs)
 *
 */

.InputfieldRenderValueMode {

	.InputfieldSelect li,
	.InputfieldRadios li,
	.InputfieldCheckboxes li {
        	margin: 0 ;
	}

	.InputfieldSubmit,
	.InputfieldButton {
		display: none; 
	}
}

/****************************************************************************
 * login 
 *
 * override default login
 *
 */

ul.Inputfields #wrap_login_name,
ul.Inputfields #wrap_login_pass {
	width: auto !important;
}


/****************************************************************************
 * The following is only for AdminThemeReno support of PW 2.5.x
 * 
 * This can eventually be dropped
 * 
 */
body:not(.AdminThemeReno) .Inputfields {
	
	.InputfieldRepeater > .InputfieldContent .InputfieldRepeaterItem > .InputfieldHeader {
		padding: 0.25em 0.25em 0.25em 1.7em;

		.InputfieldRepeaterTrash {
			right: 1.8em;
		}

		.ui-icon {
			margin-top: 3px;
		}
	}

	.InputfieldItemList .InputfieldItemHeader {
		/* file or repeater item header */
		padding-left: 0.25em;
		padding-right: 0.5em;

		.ui-icon {
			margin-top: 3px;
		}
	}
}