backend.scss

/*	  
 *	Websnap Custom Tabs Wordpress Plugin
 *	Author				: Rodrigo Hernando
 *	URI						: https://github.com/rhernandog/wordpress-tab-plugin-html
 *	Version				: 1.1.0
 *	License				: MIT
 *	File Type			: Backend HTML & CSS test SASS file
 *	Dependencies	: jQuery 1.12.3
 */

/*
-----------------------------------------------------------------------------------
			IMPORTS
-----------------------------------------------------------------------------------
*/

@import 'scss/foundation';

@include foundation-global-styles();
@include foundation-typography;
@include foundation-forms;
@include foundation-button;





/*
-----------------------------------------------------------------------------------
			VARIABLES
-----------------------------------------------------------------------------------
*/
$delete-btn-background: #dc3232;
$delete-btn-background-hover: darken($delete-btn-background, 10%);






// p {
// 	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
// }

.main-container {
	padding: 15px 0;
	@include grid-row;
	
	.inner-wrap {
		padding: 0 10px;
		@include clearfix;
		@include breakpoint(medium) {
			padding: 0 15px;
		}

		> .config-left-column,
		> .config-right-column {
			padding-left: 0;
			padding-right: 0;
		}// config left/right end

	}// inner wrap end

}// main container end

.inner-content {
	@include grid-column(12);
}

.config-left-column,
.config-right-column {
	@include grid-column(12);
}

.config-left-column {
	border: 1px solid $tab-content-border;
	height: 48px;
	overflow-y: hidden;
	transition: all 0.5s ease;
	@include breakpoint(large) {
		height: 350px;
		overflow-y: auto;
		@include grid-column(4);
	}

	.tab-id-list {
		@include breakpoint(large) {
			margin-top: 0;
			min-height: 348px;
			position: relative;
			opacity: 1;
			z-index: 10;
		}
		@include tabs-container;
		@include tabs-container-vertical;
		margin-top: -48px;
		opacity: 0;
	}

	.tab-id-element,
	.current-active-link {
		@include tabs-title;
		float: none;
	}

	.current-active-link {
		background: $tab-background-active;
		display: block;
		position: relative;
		z-index: 50;
		@include breakpoint(large) {
			display: none;
		}
	}
}// config-left-column end

.config-right-column {
	height: auto;
	@include breakpoint(large) {
		height: 350px;
		@include grid-column(8);
	}

	.tab-content-wrap {
		@include tabs-content;
		@include tabs-content-vertical;
		// add left border for smaller screens
		border-left: 1px solid #e6e6e6;
		@include breakpoint(large) {
			border-left:0;
			border-top: 1px solid #e6e6e6;
		}

		.tab-content-container {
			height: auto;
			@include breakpoint(large) {
				height: 348px;
			}
			@include tabs-panel;
		}

		.tab-container-settings {
			@include grid-row;
			margin-bottom: 3px;
			padding-bottom: 3px;
			border-bottom: 1px solid $medium-gray;
		}

		.tab-settings-col {
			@include grid-column(12);

			.tab-name-label {
				background-color: #0074a2;
				color: #fff;
				border: 1px solid $medium-gray;
				border-right: none;
				font-size: 14px;
				margin-right: -1px;
				padding: 3px 10px;

				@media screen and (max-width: 782px) {
					padding: 8px 10px;
				}
			}
		}// tab settings col end

		.left-setting {
			@include breakpoint(xlarge) {
				@include grid-column(4);
			}
		}

		.right-setting {
			@include breakpoint(xlarge) {
				@include grid-column(8);
			}
		}
	}
}// config-right-column end

// update buttons wrap
.tab-update-btn-wrap {
	@include grid-row;
	border-bottom: 1px solid $medium-gray;

	.buttons-container,
	.post-selector-container {
		@include grid-column(12);
	}

	.buttons-container {
		@include breakpoint(xlarge) {
			@include grid-column(4);
			margin-top: 25px;
		}
	}

	.post-selector-container {
		@include breakpoint(xlarge) {
			@include grid-column(8);
		}
	}
}// update button wrap end

// delete button - use button mixin
.delete-button {
	background-color: $delete-btn-background;
	color: $white;
	&:active,
	&:hover,
	&:focus {
		background-color: $delete-btn-background-hover;
	}
}

.tab-editor-wrap,
.delete-tab-btn-wrap {
	padding-top: 10px;
}

.input-group-label.help-icon,
.input-group-label.collapse-icon {
	cursor: pointer;
}