KONTOLODON

/var/www/ojs-3.3.0-13/plugins/themes/material/styles/

/**
 * @file styles/components.less
 *
 * Copyright (c) 2021 Madi Nuralin
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Reusable components
 */

// Simple clearfix wrapper
.parallax {
	/* Set a specific height */
	min-height: 500px;

/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.row {
	.pkp_helpers_clear;
}

// Button
.cmp_button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	border-radius: 5px;
	padding: .8rem 1.5rem;
	font-size: .85rem;
	font-weight: 500;
	line-height: 180%;
	text-decoration: none;
	-webkit-transition: all 350ms ease;
	-o-transition: all 350ms ease;
	transition: all 350ms ease;
	-webkit-transition: all 350ms ease;
	-o-transition: all 350ms ease;
	transition: all 350ms ease;
	font-style: @font;
}

.nav-link {
	display: block;
    padding: 1rem .6rem;
    position: relative;
    font-size: 1.2rem;
    font-weight: 500;
    color: #212121;
    line-height: 1.5;
    border-radius: 5px;
    -webkit-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    transition: all 350ms ease;
}

// 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 {
		font-size: 1rem;
		display: inline;
		text-overflow: ellipsis;
	}

.label {
		.required {
			color: red;
		}
	}

input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="tel"],
	select,
	textarea {
		display: inline-block;
	    width: 100%;
	    padding: 0.375rem 0.75rem;
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 1.6;
	    color: #4f4f4f;
	    background-color: #fff;
	    background-clip: padding-box;
	    border: 1px solid #bdbdbd;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    border-radius: 0.25rem;
	    -webkit-transition: all .2s linear;
	    transition: all .2s linear;
	    height: 48px;
	    min-height: auto;
	    padding-top: 4px;
	    padding-bottom: 3.28px;

&:focus {
			-webkit-box-shadow:none;
			outline: none;
			box-shadow:none;
			border-color:#1266f1;
			-webkit-box-shadow:inset 0 0 0 1px #1266f1;
			box-shadow:inset 0 0 0 1px #1266f1
		}
	}

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

.pkp_form_error {
		margin-bottom: @base;
		border-radius: 5px;
		padding: 1em;
		font-size: 1.1em;
		background: @no;
		color: #f01e1e;
		border-bottom: 1px solid #f01e1e;
	}

.pkp_form_error *{
		color: #f01e1e !important;
		font-size: 1.1em;
	}

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

.description {
		margin-top: 0;
		font-size: @font-tiny;
		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;
		font-size: 15px;
	}

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

.current {
		color: @text-light;
		font-size: 15px;

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

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

// Announcements
.cmp_announcements {
	&:extend(.pkp_unstyled_list);
	margin-left: 0px;
	margin-right: 0px;

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

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

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

> li {
			padding-left: 0px;
			padding-right: 0px;
		}
	}

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

> li {
			padding-left: 0px;
			padding-right: 0px;
		}

}
}

// 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;
	}
}

Nama File / Folder	Size	Action
backend	--	NONE
components	--	NONE
fonts	--	NONE
objects	--	NONE
pages	--	NONE
body.less	4.131KB	Hapus Edit Rename
components.less	8.423KB	Hapus Edit Rename
footer.less	0.606KB	Hapus Edit Rename
head.less	9.24KB	Hapus Edit Rename
index.less	1.688KB	Hapus Edit Rename
main.less	3.267KB	Hapus Edit Rename
rtl.less	2.79KB	Hapus Edit Rename
sidebar.less	1.831KB	Hapus Edit Rename
style.less	16.499KB	Hapus Edit Rename
variables.less	3.395KB	Hapus Edit Rename