• Home
• com.liferay
• com.liferay.dynamic.data.lists.form.web
• 1.1.3
• source code
• main.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

META-INF.resources.admin.css.main.scss Maven / Gradle / Ivy

@import "bourbon";
@import "mixins";
@import "form-builder-field-toolbar";
@import "form-builder-layout-builder-move";
@import "form-builder-modal";

$horizontal-spacing: 35px;

.ddl-form-builder-buttons .icon-spinner,
.lfr-ddm-form-pagination-controls .icon-spinner,
.ddl-form-settings-modal .btn-toolbar-button .icon-spinner,
.lfr-ddl-field-settings-modal .btn-toolbar-button .icon-spinner {
	line-height: 21px;
	margin-left: 10px;
	position: absolute;
}

.ddl-form-settings-modal,
.ddl-publish-modal,
.dynamic-data-mapping-data-providers-modal,
.lfr-ddl-field-settings-modal {
	.btn {
		transition: opacity 0.5s;
	}
}

.ddl-form-settings-modal,
.lfr-ddl-field-settings-modal.form-builder-field-settings,
.publish-modal-container {
	.modal-body {
		background-color: #FFF;
	}
}

.ddl-publish-modal {
	.alert-info {
		text-align: center;
	}

	.ddl-publish-checkbox {
		margin-bottom: 0;
		width: 100%;

		small {
			display: block;
		}

		> span {
			margin-bottom: 0.4em;
			margin-top: 0.4em;
		}
	}

	.input-checkbox-wrapper {
		float: right;
		margin-bottom: 0;
	}

	.lfr-ddm-repeatable-delete-button {
		position: absolute;
		right: 15px;
		top: 0;
	}

	select.form-control[multiple] {
		height: auto;
	}

	.text-to-copy {
		background-color: transparent;
	}

	.toggle-switch {
		display: none;
	}
}

.dynamic-data-mapping-data-providers-modal {
	max-width: 720px;

	.modal-content {
		z-index: 1;
	}
}

.form-builder-page-manager-popover-header {
	.popover-content {
		padding: 7px 21px;
	}

	li {
		color: #869CAD;
		cursor: pointer;
		font-size: 15px;
		font-weight: normal;
		line-height: 16px;
		list-style-type: none;
		padding: 11px 0;
	}

	ul {
		margin: 0;
		padding: 0;
	}
}

.form-builder-page-manager-popover-header.popover.left > .arrow {
	margin-left: 19px;
}

.lfr-ddl-field-settings-confirmation-message {
	margin: 0;
	padding: $horizontal-spacing;
	text-align: center;
}

.lfr-ddl-field-settings-modal.form-builder-field-settings {
	height: 100%;
	margin: 0;
	width: 100%;

	@keyframes fade-down {
		from {
			opacity: 0;
			top: -50px;
		}

		to {
			opacity: 1;
			top: 0;
		}
	}

	&:focus {
		outline: none;
	}

	.alloy-editor {
		padding-right: 4px;
	}

	.form-builder-field-settings-content {
		.form-group {
			margin-bottom: 40px;
		}

		.has-error .key-value-editor {
			display: none;
		}

		.key-value-editor {
			&.active {
				.key-value-cancel,
				.key-value-done,
				.key-value-input {
					display: inline-block;
				}

				.key-value-output {
					display: none;
				}
			}

			.key-value-cancel,
			.key-value-done,
			.key-value-input {
				display: none;
			}

			.key-value-cancel,
			.key-value-done {
				font-weight: bold;
				margin-left: 25px;
				text-transform: uppercase;
			}

			.key-value-label {
				color: #C4CFD6;
				margin-right: 5px;
			}

			.key-value-cancel,
			.key-value-done,
			.key-value-input,
			.key-value-label,
			.key-value-output {
				font-size: 11px;
			}

			.key-value-input {
				border-width: 0;
				margin: 0;
				outline: none;
			}

			.key-value-input,
			.key-value-output {
				color: #869CAD;
			}
		}

		.liferay-ddm-form-field-checkbox,
		.lfr-ddm-form-field-validation {
			margin-bottom: 20px;

			.form-group {
				line-height: 0;
				margin-bottom: 0;
			}
		}

		.liferay-ddm-form-field-key-value {
			margin-bottom: 20px;

			.help-block {
				height: 22px;
				position: relative;
			}
		}

		.liferay-ddm-form-field-options {
			.close {
				font-size: 22px;
				position: absolute;
				right: 8px;
				top: 8px;
			}

			.drag-handle {
				color: #C3CFD8;
				cursor: pointer;
				font-size: 22px;
				position: absolute;
				top: 12px;

				&:hover {
					font-weight: bold;
				}
			}

			.drag-placeholder {
				opacity: 0.5;
			}

			.last-option:not(:first-of-type) {
				@include animation(fade-down 0.7s ease);
			}

			.last-option .close {
				display: none;
			}

			.liferay-ddm-form-field-key-value {
				margin-left: 30px;
			}

			.lfr-ddm-form-field-repeatable-toolbar {
				display: none;
			}
		}

		.liferay-ddm-form-field-text textarea + .input-group-addon {
			vertical-align: bottom;
		}

		.lfr-ddm-form-container {
			.lfr-ddm-form-field-container {
				position: relative;

				.lfr-form-row {
					border-width: 0;
					padding-bottom: 5px;
					padding-top: 5px;

					&:hover {
						padding-top: 5px;
					}

					.lfr-autorow-controls {
						bottom: 0;
						right: 0;

						.add-row {
							margin-right: 3px;
						}
					}
				}

				.toggle-switch-bar .toggle-switch-handle {
					text-transform: none;
					word-break: break-word;
				}
			}

			.lfr-ddm-form-page {
				&.active,
				&.basic {
					padding: 25px $horizontal-spacing;
				}

				&.active.advanced {
					display: block;
				}

				&.advanced {
					background-color: #F5F8FA;
					display: none;
					padding: 20px $horizontal-spacing;
				}
			}
		}

		.settings-toggler {
			background-color: #F5F8FA;
			color: #879CB5;
			font-weight: 500;
			padding: 18px $horizontal-spacing;
			position: static;
			text-align: left;
			width: 100%;

			.settings-toggle-label {
				float: left;
			}

			.settings-toggle-icon {
				float: right;
			}
		}
	}

	.form-inline .checkbox label {
		padding-left: 0;
	}

	.modal-body {
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0;
	}

	.modal-title {
		text-transform: capitalize;
	}

	@include lg {
		.modal-body {
			max-height: 451px;
		}

		.modal-content.form-builder-field-settings-content {
			padding-bottom: inherit;
			padding-top: 0;
		}

		.modal-header {
			position: static;
		}
	}

	.modal-content.form-builder-field-settings-content {
		border-radius: 0;
		border-width: 0;
		height: 100%;
		padding-bottom: 85px;
		padding-top: 62px;
		z-index: 1;
	}

	@include sm {
		.modal-content.form-builder-field-settings-content {
			border-radius: 4px;
			padding-bottom: 80px;
		}
	}

	.modal-footer {
		bottom: 0;
		position: absolute;
		width: 100%;

		.btn {
			width: auto;
		}
	}

	.modal-header {
		position: absolute;
		top: 0;
		width: 100%;
	}

	.radio-inline {
		margin-right: 125px;
	}
}

.lfr-ddl-field-settings-modal,
.portlet-forms {
	.form-control {
		font-size: 14px;
	}

	@include sm {
		.form-control {
			font-size: 16px;
		}
	}

	.help-block {
		font-size: 14px;
	}

	.icon-asterisk {
		margin-left: 4px;
	}

	.liferay-ddm-form-field-editor .form-control-feedback {
		margin-top: -25px;
		position: absolute;
		z-index: 2;
	}

	.radio-inline {
		padding-top: 11px;

		& + .radio-inline {
			margin-left: 0;
		}
	}
}

.lfr-ddl-field-settings-yes {
	padding-left: 21px;
	padding-right: 21px;
}

.portal-popup,
.portlet-forms-admin {
	.alert {
		margin: 0;
	}

	.asset-icon .lexicon-icon {
		height: 32px;
		width: 32px;
	}

	.checkbox,
	.radio {
		margin-bottom: 0;
		margin-top: 0;
	}

	.ddl-form-basic-info {
		background-color: #869CAD;
		min-height: 300px;
		padding-bottom: 187px;

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin: 0;
		}

		.ae-placeholder:empty:before {
			content: attr(data-placeholder);
		}

		.alloy-editor.alloy-editor-placeholder,
		.alloy-editor.alloy-editor-placeholder:empty:not(:focus),
		.ddl-form-name,
		.ddl-form-description {
			border-width: 0;
			color: #FFF;
			margin: 0;
			padding-left: 0;

			.help-block {
				top: -15px;
			}

			p {
				margin: 0;
			}
		}

		.ddl-form-name {
			font-weight: 300;
			padding: 52px 0 0 0;

			p {
				margin: 0;
			}
		}

		.ddl-form-description {
			font-weight: normal;
			padding: 17px 0 0 0;

			p {
				margin: 0;
			}
		}
	}

	.ddl-form-builder-app {
		margin-top: -120px;

		.form-builder-content,
		.lfr-ddm-form-content {
			background: #FFF;
			border: 1px solid #DCE0E3;
			border-radius: 1px;
			box-shadow: 0 2px 4px rgba(188, 197, 204, 0.3);
			margin: 0 auto;
			width: auto;
		}

		.form-builder-field-list-empty .form-builder-field-list-add-button {
			padding: 16px 0;
			position: relative;
		}

		.liferay-ddm-form-field-text textarea {
			resize: none;
		}

		.toggle-switch-text {
			word-break: break-word;
		}
	}

	.form-builder-tabview,
	.lfr-ddm-form-wizard {
		border-bottom: 1px solid #DEE4E9;
		padding: 20px 34px 11px 34px;
		position: relative;
	}

	.record-set-id, .record-set-modified-date {
		margin-right: 20px;
	}
}

.portal-popup {
	.portlet-column {
		padding: 0;
	}

	.required-warning {
		margin-left: 34px;
		margin-right: 34px;
	}

	.lfr-ddm-form-page .required-warning {
		margin-top: -16px;
	}
}

.portlet-forms {
	label {
		float: initial;
	}

	.aspect-ratio img {
		top: 0;
	}

	.btn {
		transition: opacity 0.5s;
	}

	.control-label {
		float: none;
		margin-bottom: 0;
		word-wrap: break-word;
	}

	.ddl-form-builder-buttons {
		margin-bottom: 0;
	}

	.ddl-form-description {
		font-size: 16px;
		line-height: 24px;
		word-break: break-all;
	}

	.ddl-form-name {
		font-size: 32px;
		word-break: break-all;
	}

	.form-builder-field-list-container {
		hyphens: auto;
		padding: 0;
		word-break: break-all;
	}

	.form-builder-page-header {
		padding-top: 25px;
	}

	.form-builder-page-header-description,
	.form-builder-page-header-title,
	.lfr-ddm-form-page-description,
	.lfr-ddm-form-page-title {
		color: #728694;
		font-weight: normal;
		resize: none;
		word-break: break-all;
	}

	.form-builder-page-header-description,
	.lfr-ddm-form-page-description {
		font-size: 14px;
	}

	.form-group {
		margin: 0;
	}

	.lfr-ddm-form-page-description {
		margin-top: 9px;
	}

	.lfr-ddm-form-field-container {
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
		margin: 0;
		padding: 23px 0 31px 0;
	}

	.liferay-ddm-form-field-paragraph {
		p {
			margin-top: 14px;
		}
	}

	.liferay-ddm-form-field-tip {
		margin: 4px 0 0 0;
	}

	.lfr-ddm-form-page-title {
		font-size: 19px;
		margin-bottom: 9px;
		margin-top: 0;
	}

	.multi-step-progress-bar .progress-bar-title {
		word-break: break-all;
	}

	.radio-inline {
		margin-right: 10%;
	}

	.required-warning {
		display: block;
		font-weight: inherit;
		margin-top: -17px;
		text-align: left;
	}
}

.portlet-forms,
.lfr-ddl-field-settings-modal {
	.help-block {
		font-size: 14px;
	}

	.lfr-ddm-form-field-validation .row {
		margin: 0;
	}
}

.portlet-forms-admin {
	@import "form-builder-field-toolbar";

	.aspect-ratio img {
		top: 0;
	}

	.form-builder-content {
		.layout-builder-layout-container {
			margin-bottom: 0;
		}
	}

	.form-builder-controls-trigger,
	.form-builder-controls-trigger.disabled:hover {
		color: #B0BEC9;
	}

	.form-builder-controls-trigger {
		display: block;
		font-size: 20px;
		line-height: 0;
		padding: 32px;
		position: absolute;
		right: 0;
		text-decoration: none;
		top: 0;

		&.disabled {
			cursor: not-allowed;
		}

		&:hover {
			color: #4A90E2;
		}
	}

	.form-builder-field {
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
		margin: 0;
	}

	.form-builder-field-list-add-button {
		border-width: 0;
		width: 100%;
	}

	.form-builder-field-list-add-button.disabled,
	.form-builder-field-list-add-button[disabled] {
		.form-builder-field-list-add-button-label,
		.form-builder-field-list-add-button-icon {
			opacity: 1;
		}
	}

	.form-builder-field-list-add-button-icon,
	.form-builder-field-list-add-button-label {
		cursor: inherit;
		transition: opacity 0.5s;
	}

	.form-builder-field-list-add-button-icon {
		position: relative;

		.lexicon-icon {
			height: 10px;
			width: 10px;
		}
	}

	.form-builder-field-list-add-button-label {
		color: #4A90E2;
	}

	.form-builder-field + .form-builder-field-list-add-container {
		margin-top: -22px;
	}

	.form-builder-field-list-add-container.between-fields {
		margin-top: -12px;
	}

	.form-builder-field-list-empty {
		.form-builder-field-list-add-button-icon {
			margin-top: 5px;

			.lexicon-icon {
				height: 16px;
				width: 16px;
			}
		}

		.form-builder-field-list-add-button-label {
			padding-top: 0;
		}

		.form-builder-field-list-add-container,
		.form-builder-field-move-target {
			margin: 10px 0;
		}

		.form-builder-field-list-container {
			padding: 0;
		}

		.form-builder-field-move-target {
			padding: 37px 0 37px 0;
		}
	}

	.form-builder-header {
		display: none;
	}

	.form-builder-header-title {
		display: none;
	}

	.form-builder-layout {
		margin: 0 auto;
		padding-bottom: 20px;
		width: auto;

		.layout-builder-add-row-area {
			margin: 0;
		}

		.layout-row-container-row {
			margin-bottom: 0;

			.layout-row {
				border-width: 0;

				.col {
					border-radius: 0;
					border-width: 0;
					min-height: 50px;

					.layout-col-content {
						padding-left: 34px;
						padding-right: 34px;
					}

					.form-group {
						min-height: 40px;
					}

					@include md {
						.layout-col-content {
							padding-left: 20px;
							padding-right: 20px;
						}

						&:first-of-type .layout-col-content {
							padding-left: 34px;
						}

						&.last-col .layout-col-content {
							padding-right: 34px;
						}
					}
				}
			}
		}
	}

	.form-builder-pages {
		padding-bottom: 0;

		li.active a {
			z-index: 0;
		}
	}

	.form-builder-page-header {
		padding-right: 62px;
		position: relative;
	}

	.form-builder-pages-header {
		margin-bottom: 0;
		margin-top: 0;
		padding-left: 34px;
		padding-right: 0;
		width: auto;

		.form-builder-page-header-description,
		.form-builder-page-header-title {
			display: block;
			height: auto;
			overflow: hidden;
			width: 100%;
		}

		.form-builder-page-header-description {
			margin-top: -19px;
			padding-top: 0;
		}

		.form-builder-page-header-title {
			margin-bottom: 0;
			padding-bottom: 0;
			padding-top: 0;
		}

		textarea {
			border-width: 0;
			padding-left: 0;
			padding-right: 0;

			&:focus {
				box-shadow: none;
			}
		}
	}

	.form-builder-page-manager-content {
		border-top: 1px solid #DCE0E3;

		.form-builder-controls-trigger {
			margin: 0;
			padding: 29px;
		}
	}

	.form-builder-pages-lexicon {
		position: relative;
		text-align: center;

		.form-builder-pagination {
			margin: 0;
		}
	}

	.form-builder-tabview {
		padding-right: 70px;

		.form-builder-controls-trigger {
			margin: 0;
			top: 18px;
		}
	}

	.form-control[readonly],
	.form-control[disabled],
	input[type='checkbox'],
	input[type='radio'] {
		background-color: transparent;
		border-color: #869CAD;
		color: initial;
		cursor: default;
		opacity: 1;
	}

	.form-builder-field-list-add-button-label,
	.form-builder-field-move-target-label,
	.layout-builder-move-target-label {
		font-size: 11px;
	}

	input.toggle-switch {
		display: none;

		&:disabled ~ .toggle-switch-bar {
			opacity: 1;
		}
	}

	.layout-builder-remove-row-button {
		background: #FFF;
		border: 1px solid #65B6F0;
		height: auto;
		padding: 0;
		top: -22px;
		width: auto;
		z-index: 10;

		.lexicon-icon {
			color: #65B6F0;
			margin: 10px;
		}

		&:hover {
			background: #65B6F0;

			.lexicon-icon {
				color: #FFF;
			}
		}
	}

	.layout-builder-move-row-target {
		margin-left: 34px;
		margin-right: 34px;
	}

	.layout-builder-remove-row-button {
		right: -20px;
	}

	.layout-builder-resize-col-draggable-handle .glyphicon-chevron-left {
		left: 6px;
	}

	.lfr-ddm-repeatable-add-button {
		position: absolute;
		right: 0;
		top: 0;
	}

	.lfr-ddm-repeatable-delete-button {
		position: absolute;
		right: 15px;
		top: 0;
	}

	.liferay-ddm-form-renderer-wizard-disabled {
		.liferay-ddm-form-renderer-wizard-navigation-allowed > li {
			cursor: not-allowed;
		}
	}

	.liferay-ddm-form-renderer-wizard-navigation-allowed > li {
		cursor: pointer;
	}
}

@include sm {
	.lfr-ddl-field-settings-modal.form-builder-field-settings {
		height: auto;
		margin-bottom: 85px;
		margin-top: 85px;
		width: 390px;

		.modal-body {
			height: 100%;
			max-height: 100%;
		}
	}
}

@include md {
	.lfr-ddl-field-settings-modal.form-builder-field-settings {
		height: auto;
		margin-bottom: 85px;
		margin-top: 85px;
		padding: 0;
		width: 720px;

		.modal-content.form-builder-field-settings-content {
			padding-bottom: 0;
			padding-top: 0;
		}

		.modal-footer,
		.modal-header {
			position: relative;
		}
	}
}