HOME

/* Wrapper box */

.butterbean-ui { }

	.butterbean-ui > .hndle {
		padding:       10px !important;
		border-bottom: 1px solid #eee;
	}

	.butterbean-ui .inside {
		margin:  0 !important;
		padding: 0;
	}

/* Tabs wrapper. */

.butterbean-manager-default {
	overflow:   hidden;
	background: #fff;
	background: linear-gradient( 90deg, #fafafa 0%, #fafafa 180px, #fff 180px, #fff 100% );
}

	#side-sortables .butterbean-manager-default {
		background: linear-gradient( 90deg, #fafafa 0%, #fafafa 48px, #fff 48px, #fff 100% );
	}

	@media only screen and ( max-width: 782px ), ( max-width: 980px ) and ( min-width: 851px ) {

		.butterbean-manager-default {
			background: linear-gradient( 90deg, #fafafa 0%, #fafafa 48px, #fff 48px, #fff 100% );
		}
	}

	/* Tab nav. */

	.butterbean-manager-default .butterbean-nav {
		position:         relative;
		float:            left;
		list-style:       none;
		width:            180px;/*20%;*/
		line-height:      1em;
		margin:           0 0 -1px 0;
		padding:          0;
		background-color: #fafafa;
		border-right:     1px solid #eee;
		box-sizing:       border-box;
	}

		.butterbean-manager-default .butterbean-nav li {
			display:     block;
			position:    relative;
			margin:      0;
			padding:     0;
			line-height: 20px;
		}

			.butterbean-manager-default .butterbean-nav li a {
				display:         block;
				margin:          0;
				padding:         10px;
				line-height:     20px !important;
				text-decoration: none;
				border-bottom:   1px solid #eee;
				box-shadow:      none;
			}

				.butterbean-manager-default .butterbean-nav .dashicons {
					line-height:  20px;
					margin-right: 3px;
				}

			.butterbean-manager-default .butterbean-nav li[aria-selected="true"] a {
				position:         relative;
				font-weight:      bold;
				color:            #555;
				background-color: #e0e0e0;
			}

	@media only screen and ( max-width: 782px ), ( max-width: 980px ) and ( min-width: 851px ) {
		.butterbean-manager-default .butterbean-nav { width: 48px; }

		.butterbean-manager-default .butterbean-nav .dashicons {
			width:       24px;
			height:      24px;
			font-size:   24px;
			line-height: 24px;
		}

			.butterbean-manager-default .butterbean-nav .dashicons::before {
				width:  24px;
				height: 24px;
			}

		.butterbean-manager-default .butterbean-nav .label {
			overflow: hidden;
			position: absolute;
			top:      -1000em;
			left:     -1000em;
			width:    1px;
			height:   1px;
		}
	}

	/* Tab content wrapper */

	.butterbean-manager-default .butterbean-content {
		float:       left;
		width:       calc( 100% - 180px );
		margin-left: -1px;
		border-left: 1px solid #eee;
	}

	@media only screen and ( max-width: 782px ), ( max-width: 980px ) and ( min-width: 851px ) {

		.butterbean-manager-default .butterbean-content {
			width: calc( 100% - 48px );
		}
	}

/* === Manager when in the side meta box. === */

@media only screen and ( min-width: 850px ) {

	#side-sortables .butterbean-manager-default { background: #fff; }

	#side-sortables .butterbean-manager-default .butterbean-content { width: 100%; }

	#side-sortables .butterbean-manager-default .butterbean-nav {
		display: table;
		width:   100%;
	}

		#side-sortables .butterbean-manager-default .butterbean-nav li {
			display:      table-cell;
			text-align:   center;
			border-right: 1px solid #eee;
		}

			#side-sortables .butterbean-manager-default .butterbean-nav li:last-of-type { border-right: none; }

		#side-sortables .butterbean-manager-default .butterbean-nav li a {
			padding:     10px 0;
		}

		#side-sortables .butterbean-manager-default .butterbean-nav .dashicons {
			width:       24px;
			height:      24px;
			font-size:   24px;
			line-height: 24px;
		}

			#side-sortables .butterbean-manager-default .butterbean-nav .dashicons::before {
				width:  24px;
				height: 24px;
			}

			#side-sortables .butterbean-manager-default .butterbean-nav .label {
				overflow: hidden;
				position: absolute;
				top:      -1000em;
				left:     -1000em;
				width:    1px;
				height:   1px;
			}
	}


/* === Content === */

.butterbean-manager-default .butterbean-section {
		padding:     12px 12px 0;
		box-sizing: border-box;
}

	.butterbean-manager-default .butterbean-section[aria-hidden="true"]  { display: none; }
	.butterbean-manager-default .butterbean-section[aria-hidden="false"] { display: block; }

.butterbean-manager-default .butterbean-control {
	margin-bottom: 20px;
}

	.butterbean-manager-default .butterbean-label {
		display       : block !important; /* this is getting overwritten somewhere */
		font-weight   : bold;
		display       : inline-block;
		margin-bottom : 4px;
	}

		.butterbean-manager-default .butterbean-control-checkbox .butterbean-label {
			display: inline !important;
		}

	.butterbean-manager-default .butterbean-description {
		display       : block;
		font-style    : italic;
		margin-top    : 4px;
	}

		.butterbean-manager-default .butterbean-label + .butterbean-description {
			margin-top    : 0;
			margin-bottom : 4px;
		}

/* === Media === */

.butterbean-control-image .butterbean-img {
	display:    block;
	max-width:  100%;
	max-height: 300px;
	height:     auto;
}

.butterbean-placeholder {
	width:       100%;
	position:    relative;
	text-align:  center;
	padding:     9px 0;
	line-height: 20px;
	border:      1px dashed rgb(180, 185, 190);
	box-sizing:  border-box;
}

/* === Textarea Control === */

.butterbean-control-textarea textarea,
.butterbean-control-excerpt  textarea {
	display: block;
	width:   100%;
	height:  105px;
}

/* === Date Control === */

.butterbean-control-datetime select {
	vertical-align: top;
}

/* === Palette Control === */

.butterbean-control-palette label {
	display: block;
	padding: 0 10px 10px;
}

.butterbean-control-palette label[aria-selected="true"] {
	padding-top: 5px;
	background-color: #ddd;
}

	.butterbean-palette-label {
		line-height: 28px;
	}

	.butterbean-palette-block {
		display: table;
		width:   100%;
		height:  45px;
		border:  1px solid rgb(238, 238, 238);
		box-sizing: border-box;
	}

		.butterbean-palette-color {
			display: table-cell;
			height:  100%;
		}

/* === Radio Image Control === */

.butterbean-control-radio-image input[type="radio"] {
	clip:     rect(1px, 1px, 1px, 1px);
	height:   1px;
	overflow: hidden;
	position: absolute !important;
	width:    1px;
}

.butterbean-control-radio-image img {
	box-sizing: border-box;
	max-width:  100%;
	height:     auto;
	padding:    1px;
	border:     4px solid transparent;
}

	.butterbean-control-radio-image img:hover,
	.butterbean-control-radio-image img:focus {
		border-color: #ccc;
	}

	.butterbean-control-radio-image input:checked + span + img {
		border-color: #00a0d2;
	}

/* === Multi-avatars Control === */

.butterbean-multi-avatars-wrap label {
	display:    inline-block;
	margin-top: 8px;
}

	.butterbean-multi-avatars-wrap input[type="checkbox"] {
		clip:     rect( 1px, 1px, 1px, 1px );
		height:   1px;
		overflow: hidden;
		position: absolute !important;
		width:    1px;
	}

	.butterbean-multi-avatars-wrap .avatar {
		box-sizing: border-box;
		max-width:  100%;
		height:     auto;
		padding:    1px;
		border:     4px solid transparent;
	}

		#side-sortables .butterbean-multi-avatars-wrap .avatar {
			max-width:  60px;
			max-height: 60px;
		}

	.butterbean-multi-avatars-wrap img:hover,
	.butterbean-multi-avatars-wrap img:focus {
		border-color: #ccc;
	}

	.butterbean-multi-avatars-wrap input:checked + span + img {
		border-color: #00a0d2;
	}