ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / camarsac / wp-content / plugins / jet-engine / framework / jet-dashboard / assets / scss

$direction: ltr !default;
@import "mixins/direction";

.cx-vui-notices {
	z-index: 10000;
}

@if (rtl == $direction) {
	.cx-vui-notices .cx-vui-notice {
		&__icon {
			margin: 0 0 0 15px;
		}

&__close {
			margin: -2px 10px 0 0;
		}
	}
}

.jet-dashboard-page {
	font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	margin: 25px 15px 0 15px;

.proccesing-state {
		opacity: 0.5;
		pointer-events: none;
	}

&__header {
		position: relative;
		padding: 40px;
		background: getValueByDirection( linear-gradient(90deg, #5B77E7 0%, #49B5D2 53.65%, #26E8A8 100%), linear-gradient(90deg, #26E8A8 0%, #49B5D2 53.65%, #5B77E7 100%) );
		border-radius: 6px 6px 0px 0px;
		overflow: hidden;

.header-title {
			color: white;
			font-size: 18px;
			font-weight: normal;
			margin: 0;
		}

.header-bg {
			position: absolute;
			top: 0;
			@include end(0);
		}
	}

&__content {
		position: relative;
		font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	}

&__footer {}

p {
		font-size: 12px;
		color: #7b7e81;
		margin: 0 0 10px 0;
	}

.dashicons {
		display: flex;
		justify-content: center;
		align-items: center;
	}

.cx-vui-subtitle {
		font-size: 24px;
		font-weight: 500;
		margin-bottom: 40px;
		padding-bottom: 16px;
		border-bottom: 1px solid #DCDCDD;
	}

.cx-vui-button {
		background-color: transparent;

&:hover {
			background-color: transparent;
		}

.cx-vui-button__content {
			> span {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

.button-icon {
				@include margin-end(5px);
			}
		}

&.cx-vui-button--style-accent {
			color: #007cba;
			box-shadow: inset 0 0 0 1px #007cba;

.cx-vui-button__loader {
				svg, path {
					fill: #007cba;
				}
			}

.button-icon, path {
				fill: #007cba;
			}
		}

&.cx-vui-button--style-danger {
			color: #D6336C;
			box-shadow: inset 0 0 0 1px #D6336C;

.cx-vui-button__loader {
				svg, path {
					fill: #D6336C;
				}
			}

.button-icon, path {
				fill: #D6336C;
			}
		}
	}

.cx-vui-alert {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 20px;
		margin-top: 20px;
		background-color: #F4F4F5;
		border-radius: 4px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;

.cx-vui-alert__icon {
			margin-top: 3px;
			@include margin-end(10px);
		}

.cx-vui-alert__message {
			flex: 1 1 auto;
			color: #7B7E81;
			font-size: 13px;
		}

&.info-type {
			background-color: #EDF6FA;

.cx-vui-alert__icon {
				svg {
					fill: #007CBA;
				}
			}

.cx-vui-alert__message {
				color: #007CBA;
			}
		}

&.success-type {
			background-color: #E9F6EA;

.cx-vui-alert__icon {
				svg {
					fill: #46B450;
				}
			}

.cx-vui-alert__message {
				color: #46B450;
			}
		}

&.error-type {
			background-color: #FBF0F0;

.cx-vui-alert__icon {
				svg {
					fill: #C92C2C;
				}
			}

.cx-vui-alert__message {
				color: #C92C2C;
			}
		}
	}

.cx-vui-popup {
		.cx-vui-popup__header {
			text-align: center;
			margin-bottom: 30px;
		}

.cx-vui-popup__header-label {
			font-weight: 500;
			font-size: 24px;
			line-height: 36px;
			text-align: center;
			color: #23282D;
		}

.cx-vui-popup__content {

}

&.license-manager-popup {

.cx-vui-popup__body {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: stretch;
				overflow: hidden;
				max-height: calc( 100% - 100px );
			}

.cx-vui-popup__header {
				padding-bottom: 15px;
				border-bottom: 1px solid #DCDCDD;

.cx-vui-popup__header-inner {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

.cx-vui-popup__content {
				flex: 1 1 auto;
				overflow-y: auto;

.license-manager {
					width: 100%;
					max-width: 1260px;

}
			}
		}

&.license-activation-popup {

.cx-vui-popup__header {
				text-align: center;
			}

.cx-vui-popup__body {

}

.popup-licence-control {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				margin-top: 10px;

p {
					width: 100%;
				}

.popup-licence__key {
					flex: 1 1 auto;

input {
						border-radius: getValueByDirection(4px 0 0 4px, 0 4px 4px 0);
					}
				}

.popup-licence__action-button {
					border-radius: getValueByDirection(0 4px 4px 0, 4px 0 0 4px);
					box-shadow: none;
				}
			}
		}

&.license-deactivation-popup {
			.cx-vui-popup__content {
				text-align: center;

.show-license-manager {
					margin-top: 20px;
				}
			}
		}

&.update-check-popup {

.cx-vui-popup__content {
				text-align: center;

svg {
					margin-bottom: 20px;
				}

p {
					text-align: center;
					line-height: 30px;

span {
						font-size: 20px;
						color: #23282d;
						display: block;
					}
				}

.cx-vui-button {
					margin-top: 20px;
				}
			}
		}

&.rollback-popup {
			p {
				text-align: center;
				line-height: 30px;

i {
					display: block;
					color: #D6336C;
				}
			}

.cx-vui-button {
				margin-top: 10px;
				width: 100%;
			}
		}

&.responce-data-popup {

.responce-data-popup__inner {

&.responce-type-error {
					.responce-data-popup__title {
						color: #C92C2C;
					}
				}

&.responce-type-success {
					.responce-data-popup__title {
						color: #46B450;
					}
				}

.responce-data-popup__header {
					padding-bottom: 15px;
					border-bottom: 1px solid #DCDCDD;
					margin-bottom: 30px;
				}

.responce-data-popup__title {
					font-weight: 500;
					font-size: 24px;
					line-height: 36px;
					color: #23282D;
				}

p {
					&:last-child {
						padding-bottom: 0;
					}

.activation-limit {
						display: inline-block;
						width: 20px;
						height: 20px;
						text-align: center;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						color: white;
						background-color: #007CBA;
					}
				}

.responce-data-popup__activated-sites {
					margin-bottom: 20px;

p {
						padding-bottom: 5px;
					}

.site-list {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-wrap: wrap;
						max-height: 100px;
						overflow-y: auto;

.site-item {
							@include margin(0, 0, 0, 10px);
						}
					}
				}
			}
		}
	}
}

.jet-dashboard-license-page {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

.header-controls {
		display: flex;
		justify-content: flex-end;
		align-items: center;

.cx-vui-button {
			margin-left: 20px;
		}
	}

.ready-for-use-plugins {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 40px;
	}

.avaliable-plugins {
		margin-top: 50px;
	}

.license-manager-button {
		align-self: flex-end;
	}

.plugin-list--more-plugins {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;

.plugin-item {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			flex-wrap: wrap;
			width: 19%;
			min-width: 200px;
			@include margin-end(1%);
			margin-bottom: 30px;

&__inner {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: stretch;

.plugin-tumbnail {
					flex: 1 1 100%;

img {
						width: auto;
						max-width: 100%;
					}
				}
			}
		}
	}

.plugin-list {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;

.plugin-item {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			width: 30%;
			min-width: 400px;
			@include margin-end(2%);
			margin-bottom: 40px;

&__inner {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
			}

&.is-installed {}

&.is-activated {}

&.update-avaliable {
				.plugin-version {
					background-color: #D6336C;
				}
			}

&--more {

.plugin-item__inner {
					flex-direction: column;
					align-items: stretch;

.plugin-tumbnail {
						margin: 0;

img {
							width: auto;
						}
					}
				}
			}
		}

.plugin-tumbnail {
			position: relative;
			@include margin-end(20px);

img {
				width: 100px;
			}
		}

.plugin-info {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			flex: 1 1 auto;
		}

.plugin-name {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 15px;
			color: #23282d;
			font-weight: 500;
		}

.plugin-desc {
			margin: 10px 0 0 0;
		}

.plugin-version {
			font-size: 12px;
			padding: 2px 6px;
			border-radius: 3px;
			background-color: #46B450;
			color: white;
			white-space: nowrap;
			@include margin-start(10px);
		}

.plugin-rollback {
			line-height: 0;
			margin-left: 10px;
			cursor: pointer;

.cx-vui-button {
				font-size: 13px;
				white-space: nowrap;
			}

span {
				color: #007cba;
			}
		}

.plugin-actions {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			margin-top: 20px;

.cx-vui-button {
				font-size: 13px;
				@include margin-start(20px);

&:first-child {
					@include margin-start(0);
				}

}

.show-license-control {
				color: #46B450;
			}

.deactivate-plugin-button {
				color: #D6336C;
			}
		}

.plugin-update-label {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 10px;
			color: #7B7E81;
			font-size: 13px;

.latest-version {
				color: #007DBA;
				font-weight: 500;
				margin: 0 3px;
			}

.cx-vui-button {
				font-size: 13px;
				@include margin-start(3px);
			}
		}
	}

.add-new-license {
		display: flex;

.cx-vui-button__content {
			> span {
				display: flex;
			}
			.dashicons {
				font-size: 16px;
				@include margin(0, 4px, 0, -5px);
			}
		}
	}

.license-manager {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;

.license-list {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: stretch;
			flex-wrap: wrap;

.license-item {
				margin: 10px;
			}
		}
	}

.license-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		width: 400px;

&__label {
			font-weight: 500;
			font-size: 24px;
			line-height: 36px;
			text-align: center;
			color: #23282D;
			margin-bottom: 40px;
		}

&__control {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;

.license-item__activation-message {
				text-align: center;
				margin-bottom: 30px;
			}

.license-item__key {
			}

.license-item__action-button {
				margin-top: 10px;
			}
		}

&__details {}

&__deactivation {
			align-self: flex-start;
		}

&.license-activated {
			.license-status {
				color: #46B450;
			}

.license-item__deactivation {
				color: #D6336C;
				box-shadow: inset 0 0 0 1px #D6336C;
			}
		}
	}

.license-details {
		margin: 30px 0;

&__label {
			color: #23282D;
			font-size: 15px;
			font-weight: 700;
			margin-bottom: 20px;
		}

&__fields {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
		}

&__field {
			display: flex;
			justify-content: flex-start;
			align-items: stretch;
			margin-bottom: 10px;

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

.label {
				min-width: 110px;
				font-weight: 700;

color: #23282D;
			}

.status-label {
				text-transform: capitalize;
				color: #46B450;
			}

.license-type {
				display: flex;
				justify-content: center;
				align-items: center;

svg {
					width: 110px;
					height: auto;
				}
			}

.included-plugin-list {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				flex: 1 1 auto;

.included-plugin {
					width: 50%;
					margin-bottom: 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;

svg {
						@include margin-end(5px);
					}
				}
			}

&.license-status {
				color: #C92C2C;
				font-weight: 700;
				text-transform: capitalize;
			}

&.license-type {
				text-transform: capitalize;
			}

&.license-plugins {
				flex: 1 1 auto;
			}
		}

&__actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;

.show-license-manager {
				font-size: 13px;
			}

.cx-vui-button {
				@include margin-start(5px);

&:first-child {
					@include margin-start(0);
				}
			}
		}
	}

.debug-console-popup {

&__form {
			display: flex;
			justify-content: flex-start;
			align-items: center;

> .cx-vui-component-raw {
				flex: 1 1 auto;

select {
					max-width: 100%;
				}
			}

.cx-vui-button {
				@include margin-start(10px);
			}
		}
	}
}

.popup-enter {
	opacity: 0;

.cx-vui-popup__body {
		transform: translateY(10px);
	}
}
.popup-enter-active {
	transition: opacity .3s;

.cx-vui-popup__body {
		transition: transform .3s;
	}
}
.popup-enter-to {
	opacity: 1;
	transform: translateY(0);

.cx-vui-popup__body {
		transform: translateY(0px);
	}
}
.popup-leave {
	opacity: 1;
}
.popup-leave-leave {
	transition: opacity .1s;
}
.popup-leave-to {
	opacity: 0;
}

[+] ..
[-] jet-dashboard-admin-rtl.scss [edit]
[-] jet-dashboard-admin.scss [edit]
[+] mixins