keystone/admin/public/styles/keystone/item.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

//
// Edit Form
// ==============================




// Wrapper
// ------------------------------

.EditForm-container {
	margin-bottom: 3em;
}



// Search
// ------------------------------

.EditForm__header__search {
	display: inline-block;
	margin-left: 1em;
}
.EditForm__header__search-field {
	margin-bottom: 0;

	.IconField__icon {
		color: @app-primary;
	}
}

// make the input appear as a button link until focused
.EditForm__header__search-input {
	// override elemental's transition to catch the width or it looks weird
	.transition( all 0.15s ease-in-out );
	.placeholder(@link-color);
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	display: inline-block;

	// set the width to only be as long as if it were a button initially
	// this is updated on focus to a more comfortable typing length
	width: 100px;

	// decorate the input as a link
	&:hover {
		.placeholder(@link-hover-color);
		border-color: transparent;
		cursor: pointer;

		// handle placeholder text
		&::-moz-placeholder { text-decoration: underline; }
		&:-ms-input-placeholder { text-decoration: underline; }
		&::-webkit-input-placeholder  { text-decoration: underline; }

		+ .IconField__icon {
			color: @link-hover-color;
		}
	}

	// return the input to it's natural appearance on focus
	&:focus {
		.placeholder(@input-placeholder-color);
		background: white;
		border-color: @input-border-color-focus;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px fade(@input-border-color-focus, 10%);
		cursor: auto;
		outline: 0;
		width: 240px;

		// handle placeholder text
		&::-moz-placeholder { text-decoration: none; }
		&:-ms-input-placeholder { text-decoration: none; }
		&::-webkit-input-placeholder  { text-decoration: none; }

		+ .IconField__icon {
			color: @input-placeholder-color;
		}
	}
}
// hide the search field on small devices
@media (max-width: 480px) {
	.EditForm__header__search {
		display: none;
	}
}




// Breadcrumbs
// ------------------------------

.item-breadcrumbs {
	display: inline-block;
	list-style: none;
	margin: 0 @component-padding 0 0;
	padding: 0;

	> li {
		display: inline-block;
		vertical-align: middle;

		&::before {
			.octicon();
			color: @gray-light;
			content: "\f078";
			margin-left: .5em;
			margin-right: .5em;
		}
		&:first-child::before {
			display: none;
		}
	}
}




// Key or ID
// Displayed beneath the item name
// ------------------------------

.EditForm__key-or-id {
	.display-flex();
	color: @input-placeholder-color;
	font-family: @font-family-monospace;
	margin-bottom: 1.6em;
	margin-top: -1em;
}
.EditForm__key-or-id__label {
	margin-right: .5em;
}
.EditForm__key-or-id__field {
	.flex(1, 0, auto);
}
.EditForm__key-or-id__input {
	background: none;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	width: 100%;
}




// Field Sizes
// ------------------------------

@media (min-width: @screen-sm) {
	.EditForm > .FormField > .field-size-small,
	.EditForm > .FormField > .field-size-medium,
	.EditForm > .FormField > .field-size-large {
		min-width: 0;
	}
	.EditForm > .FormField > .field-size-small  { width: 25%; }
	.EditForm > .FormField > .field-size-medium { width: 50%; }
	.EditForm > .FormField > .field-size-large  { width: 75%; }
}




// Name Field
// ------------------------------

.EditForm__name-field {
	margin-bottom: 2em;
}




// Footer Bar
// ------------------------------

.EditForm__footer {
	background-color: fade(@body-bg, 93%);
	box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
	// margin-top: 3em;
	padding: @grid-gutter-width 0;
	z-index: 99;
}




// Meta
// ------------------------------

.EditForm__meta {
	.FormInput-noedit { min-width: 240px; }
}




// Relationships
// ------------------------------

.EditForm__relationships {
	background-color: darken(@body-bg, 2%);
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	padding-bottom: 60px;
	padding-top: 60px;
}
.EditForm__relationships-heading {
	margin-bottom: 60px;
}




// Relationships List
// --------------------------------------------------

table.relationships-list {

	thead > tr > th,
	tbody > tr > th,
	tfoot > tr > th {
		color: @gray-light;
		font-size: @font-size-sm;
		text-transform: uppercase;
	}
}