HOME

/**
 * @file styles/controllers/tab.less
 *
 * Copyright (c) 2014-2021 Simon Fraser University
 * Copyright (c) 2003-2021 John Willinsky
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @ingroup pkp_controllers_tab
 *
 * @brief Styles for pkp_controllers_tab
 */

.ui-tabs-nav {
	&:extend(.pkp_unstyled_list);
	padding: 0 96px 0 0; // 96 = space for help tab
	background: @bg;
	font-size: @font-sml;

	li {
		position: relative;
		display: inline-block;

		a {
			display: block;
			padding: 0 1rem;
			line-height: 3rem;
			font-weight: @bold;
			text-decoration: none;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 25%;
				height: 2px;
				background: transparent;
				transition: all 0.2s;
			}
		}

		&:focus,
		&:focus a,
		a:hover,
		a:focus {
			outline: 0;
		}

		&:focus a:before,
		a:hover:before,
		a:focus:before {
			background: @primary-lift;
			width: 100%;
		}
	}

	.ui-state-active {
		background: @lift;

		a {
			color: @text-light-rgba;
			cursor: default;

			&:before {
				width: 100%;
				background: @primary;
				border-top-left-radius: @radius;
				border-top-right-radius: @radius;
			}
		}
	}

	// Close button
	.close {
		.fa();
		position: absolute;
		top: 50%;
		left: 100%;
		width: 2rem;
		height: 2rem;
		overflow: hidden;
		margin-top: -1rem;
		padding: 0;
		line-height: 2rem;
		color: @no;
		text-decoration: none;

		&:before {
			content: @fa-var-minus-circle;
			display: block;
			width: 2rem;
			height: 2rem;
			text-align: center;
		}

		&:hover {
			border: none;
		}
	}

	// Win a specificity battle
	.ui-state-active .close {
		color: @no;
		cursor: pointer;
	}
}

.ui-tabs-panel {
	.pkp_helpers_clear;
	position: relative;
	padding: 2rem;
	background: @lift;
}

/**
 * Nested tabs
 *
 * If tabs appear inside of a tab panel, use a different visual paradigm to
 * better distinguish the hierarchy.
 */
@pkp_nested_tab_line_height: calc(~"3rem - 2px"); // account for border
.ui-tabs-panel {

	.ui-tabs-nav {
		margin-left: -2rem;
		margin-right: -2rem;
		margin-bottom: 2rem;
		padding-left: 2rem;
		border-bottom: @bg-border;
		font-size: @font-sml;
		line-height: @pkp_nested_tab_line_height;
		background: transparent;

		li {
			top: 1px;
			border: 1px solid transparent;
			border-top: none;

			a {
				padding: 0 1rem;
				line-height: @pkp_nested_tab_line_height;

				&:before {
					top: -2px;
				}
			}
		}

		.ui-state-active {
			border-color: @bg-border-color;
			border-bottom-color: transparent;
			border-top: none;

			a {

				&:before {
					left: -1px;
					right: -1px;
					transform: none;
					width: auto;
				}
			}
		}
	}

	.ui-tabs-panel {
		padding: 0;
		border: none;
		background: transparent;
	}
}