OSJ/plugins/themes/default/styles/components.less

/**
 * @file styles/components.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.
 *
 * @brief Reusable components
 */

// Simple clearfix wrapper
.row {
	.pkp_helpers_clear;
}

// Button
.cmp_button {
	display: inline-block;
	padding: 0 1em;
	background: #eee;
	border: @form-border;
	border-top-color: #bbb;
	border-radius: @radius;
	box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.1);
	font-size: @font-sml;
	line-height: calc(~"@{triple} - 2px"); // account for border
	font-weight: @bold;
	color: @primary;
	text-decoration: none;

	&:hover,
	&:focus {
		box-shadow: inset 0 1em 1em rgba(0, 0, 0, 0.1);
	}
}

// Wire button
.cmp_button_wire {
	display: inline-block;
	padding: 0 1em;
	background: #fff;
	border: 1px solid @primary;
	border-radius: @radius;
	font-size: @font-sml;
	line-height: calc(~"@{triple} - 2px"); // account for border
	color: @primary;
	text-decoration: none;

	&:hover,
	&:focus {
		background: @primary;
		color: #fff;
	}
}

// Add an icon to the button
.cmp_button_icon( @icon ) {
	position: relative;
	padding-right: @triple + (@triple / 2);
	border-right: none;

	&:after {
		.fa();
		content: @icon;
		position: absolute;
		top: -1px; // border;
		right: 0;
		width: @triple;
		height: @triple;
		border-top-right-radius: @radius;
		border-bottom-right-radius: @radius;
		line-height: @triple;
		text-align: center;
		background: @primary;
		box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.2);
		color: #fff;
	}

	&:hover:after,
	&:focus:after {
		box-shadow: inset 0 1em 1em rgba(0, 0, 0, 0.2);
		background: @primary-lift;
	}
}

.cmp_button_icon_left( @icon ) {
	padding-right: 1em;
	padding-left: @triple + (@triple / 2);
	border-right: @form-border;
	border-left: none;

	&:after {
		right: auto;
		left: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: @radius;
		border-bottom-left-radius: @radius;
	}
}

// Text button with an icon
.cmp_button_text( @icon ) {
	display: inline-block;
	position: relative;
	padding-right: @triple;
	font-size: @font-sml;
	font-weight: @bold;
	line-height: @triple;
	color: @primary;
	text-decoration: none;

	&:after {
		.fa();
		content: @icon;
		position: absolute;
		top: 2px;
		right: 0;
		width: @triple;
		height: @triple;
		line-height: @triple;
		text-align: center;
	}

	&:hover,
	&:focus {
		color: @primary-lift;
	}
}

// List of articles
.cmp_article_list {
	&:extend(.pkp_unstyled_list);

	> li {
		.pkp_helpers_clear();
		margin-bottom: @triple;
	}
}

// Forms
// These don't yet follow the component pattern on the frontend, but should
// eventually once the login/registration templates are incorporated into the
// frontend template structure.
.cmp_form {

	fieldset {
		margin: 0 0 @double;
		padding: 0;
		border: none;
	}

	legend {
		margin-bottom: @base;
		font-size: @font-bump;
		font-weight: @bold;
		line-height: @double;
	}

	.fields {

		> div {
			position: relative;
			padding-bottom: @triple; // Contain errors

			// Nest so we don't grab .error class attached to li
			.error {
				position: absolute;
				left: 0.5em; // Sit off the rounded edge of input fields
				bottom: 11px; // Sit on the bottom line of the input field above
				padding: 0 0.5em; // Keep it tight so it doesn't bleed into next field
				background: @no;
				border-bottom-left-radius: @radius;
				border-bottom-right-radius: @radius;
				font-size: @font-sml;
				line-height: @double;
				font-weight: @bold;
				color: #fff;
			}
		}
	}

	label {
		display: block;
		cursor: pointer;
	}

	.label {
		display: block;
		font-size: @font-sml;
		font-weight: @normal;
	}

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="tel"],
	select,
	textarea {
		padding: 0 0.5em;
		width: 100%;
		height: calc(~"@{triple} - 2px"); // account for border
		background: #fff;
		border: @form-border;
		border-radius: @radius;
		font-size: @font-sml;
		line-height: calc(~"@{triple} - 2px"); // account for border
	}

	textarea {
		width: 100%;
		height: 8em;
	}

	.pkp_form_error {
		margin-bottom: @base;
		border-radius: @radius;
		padding: 0 0.5em;
		font-weight: @bold;
		font-size: @font-sml;
		background: @no;
		color: #fff;
	}

	label > input[type="checkbox"],
	label > input[type="radio"] {
		margin-right: 0.25em;
	}

	.buttons {
		.pkp_helpers_clear;

		button {
			&:extend(.cmp_button);
		}

		a {
			font-size: @font-sml;
			line-height: @triple;
			margin-left: 1em;
		}
	}

	.description {
		margin-top: 0;
		font-size: @font-sml;
		line-height: 1.5em;
		color: @text-light;

	}

	@media(min-width: @screen-phone) {

		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="url"],
		input[type="tel"],
		select {
			max-width: 20em;
		}
	}
}

// Pagination
.cmp_pagination {
	.pkp_helpers_clear;
	text-align: right;

	.prev {
		float: left;
		margin-right: 0.5em;
		text-decoration: none;

		&:before {
			.fa;
			content: @fa-var-long-arrow-left;
			margin-right: 0.5em;
		}
	}

	.next {
		margin-left: 0.5em;
		text-decoration: none;

		&:after {
			.fa;
			content: @fa-var-long-arrow-right;
			margin-left: 0.5em;
		}
	}
}

// Edit link to jump from frontend section to backend editing location
// It usually appears within a heading element <h*>
.cmp_edit_link {
	display: inline-block;
	margin-left: 1em;
	font-size: @font-sml;
	font-weight: @normal;
	line-height: 1; // Try not to disrupt parent line height
	vertical-align: middle;
	text-decoration: none;

	&:before {
		.fa();
		content: @fa-var-pencil;
	}
}

// Search result filter
.cmp_search_filter {
	margin-bottom: @base;
	font-size: @font-sml;

	&:last-child {
		margin-bottom: 0;
	}

	label {
		font-style: italic;
	}

	.delete {
		color: @no;
	}
}

// Notification
.cmp_notification {
	display: block;
	width: 100%;
	padding: @double;
	margin-bottom: @quadruple;
	background: @bg-shade;
	border-left: @half solid @primary;
	font-size: @font-base;
	line-height: @line-base;

	.success {
		border-color: @yes;
	}

	.no {
		border-color: @no;
	}
}

// Breadcrumbs
.cmp_breadcrumbs {
	display: inline-block;


	ol {
		&:extend(.pkp_unstyled_list);
		margin-bottom: @triple;
		padding: @half 0;
		line-height: @double;
		font-size: @font-sml;
	}

	li {
		display: inline-block;
	}

	a {
		display: inline-block;
		text-decoration: none;
	}

	.separator {
		color: @text-light;
		padding: 0 0.5em;
	}

	.current {
		color: @text-light;

		h1 {
			margin: 0;
			font-family: @font;
			font-size: @font-sml;
			font-weight: @normal;
		}
	}
}

// Backlink used on error.tpl and message.tpl
.cmp_back_link {
	margin-top: @double;
}

// Announcements
// Double class rule overrides .pkp_structure_main ul
.cmp_announcements.cmp_announcements {
	&:extend(.pkp_unstyled_list);
	margin-left: -@base;
	margin-right: -@base;

	> li {
		padding: @triple @base;
		border-bottom: @bg-border;

		&:last-child {
			border-bottom: none;
		}
	}

	@media(min-width: @screen-phone) {
		margin-left: -@double;
		margin-right: -@double;

		> li {
			padding-left: @double;
			padding-right: @double;
		}
	}

	@media(min-width: @screen-desktop) {
		margin-left: -@triple;
		margin-right: -@triple;

		> li {
			padding-left: @triple;
			padding-right: @triple;
		}

	}
}

// Skip-to navigation links
.cmp_skip_to_content a {
	&:extend(.pkp_screen_reader);
	display: block;
	padding: 1em;
	z-index: 99999;
	background: @bg;
	transform: translateX(-50%);

	&:focus {
		clip: auto;
		top: 0;
		left: 50%;
		color: @primary;
	}
}

// Tables
.cmp_table {
	width: 100%;
	border: @bg-border;
	border-bottom: none;
	border-collapse: collapse;

	th,
	td {
		padding: 0.5em;
		text-align: left;
		border-bottom: @bg-border;
	}

	th {
		font-weight: @bold;
	}
}