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

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

$color-1: #fff; // Background color.
$widget-bg: #495159; // Background color in widgets.
$color-2: #efefef; // Background color.
$color-3: #96989a; // Description color and tabs button text color.
$color-4: #b4b7ba; //
$color-5: #f1f1f1; // Scrollbar background
$color-6: #e5e5e5; // Hover scrollbar background
$color-7: #206ff4; // Scrollbar track background
$link-color: #298ffc; // link color.
$link-hover-color: #23282d; // link hover color.

$shadow: 0px 5px 21px rgba(0, 0, 0, 0.1); //Shadow.
$border: 1px solid rgba(0, 0, 0, 0.1) ;

$br-radius: 5px; // Border radius.

$padding: 5px;
$margin: 10px;
$max-height: 700px;

@import "components/use-in-js";
@import "components/variables";
@import "components/mixins";

@import "controls/button";
@import "controls/checkbox";
@import "controls/colorpicker";
@import "controls/iconpicker";
@import "controls/media";
@import "controls/radio";
@import "controls/repeater";
@import "controls/select";
@import "controls/slider";
@import "controls/stepper";
@import "controls/switcher";
@import "controls/text";
@import "controls/textarea";
@import "controls/dimensions";

.cherry-ui-container{
	margin: 10px 0 20px 0
}

label.cherry-label{
	margin: 0 0 5px 0;
	display: block;
}

.hide{
	display: none !important;
}

.cx-ui-kit{
	font-size: 13px;
	h1{
		font-weight: 700;
		line-height: 1.2em;
		margin: 0;
		.dashicons{
			font-size: 3em;
			line-height: inherit;
			width: 20px;
			margin: 0 $margin * 2 0 $margin * -0.5;
			.rtl & {
				margin: 0 $margin * -0.5 0 $margin * 2;
			}
		}
	}
	h2{
		font-weight: 600;
		font-size: 1.538em;
		line-height: 1.538em;
		.dashicons{
			font-size: 2em;
			line-height: inherit;
			width: 20px;
			margin: 0 $margin * 2 0 0;
			.rtl & {
				margin: 0 0 0 $margin * 2;
			}
		}
	}
	h3{
		font-weight: 600;
		font-size: 1.231em;
		line-height: 1.231em;
		.dashicons{
			font-size: 1.7em;
			line-height: inherit;
			margin: 0 $margin * 0.5 0 0;
			.rtl & {
				margin: 0 0 0 $margin * 0.5;
			}
		}
	}
	h4{
		font-weight: 500;
		font-size: 1.077em;
		line-height: 1.077em;

}
	h5{
		font-weight: 500;
		font-size: 1.077em;
		line-height: 1.077em;
	}
	h6{
		font-weight: 400;
		font-size: 1em;
		line-height: 1em;
	}
	a{
		color: $link-color;
		text-decoration: none;
		&:hover{
			color: $link-hover-color;
		}
		&:focus{
			outline: 1px solid rgba(41, 143, 252, .6);
			box-shadow: 0 0 2px rgba(41,143,252,0.6);
		}
	}
	&__description{
		font-size: 0.9em;
		color: $color-3;
		margin: $margin 0;
	}
	&__title{
		margin: $margin*2 0;
	}
	&.hide{
		display: none;
	}
}

.cx-control + .cx-control, .cx-settings + .cx-control{
	border-top: $border;
}

.cx-section{
	padding: $padding;
	background-color: $color-1;
	&__title, &__description{
		margin: $margin 0 0 0;
	}
	& + .cx-ui-kit {
		border-top: $border;
	}
	@media ( min-width: 783px ) {
		box-shadow:$shadow;
		border-radius: $br-radius;
		border: $border;
		padding: $padding * 1.5;
		margin: $margin * 1.5 $margin * 1.5 0 0;
		.rtl & {
			margin: $margin * 1.5 0 0 $margin * 1.5;
		}
		&__holder{
			background-color: $color-2;
			border-radius: $br-radius;
			padding: $padding * 1.5;
		}
		&__inner{

}
		&__info{
			background-color: $color-1;
			border-radius: $br-radius;
			padding: $padding * 1.5;
			box-shadow: $shadow;
			margin-bottom: $padding * 1.5;
		}
		.cx-settings{
			box-shadow: $shadow;
			border-radius: $br-radius;
			border: $border;
			background-color: $color-1;
			margin-top: $padding * 1.5;
			&:first-child{
				margin-top: 0;
			}
		}
	}
	@media ( min-width: 961px ) {
		padding: $padding * 3;
		margin: $margin * 2 $margin * 2 0 0;
		.rtl & {
			margin: $margin * 2 0 0 $margin * 2;
		}
		&__info{
			padding: $padding * 3;
			margin-bottom: $padding * 3;
		}
		&__holder{
			padding: $padding * 3;
		}
		.cx-settings{
			margin-top: $padding * 3;
		}
	}
}

.cx-component{
	padding: $padding * 2 0;
	@media ( min-width: 783px ) {
		padding: $padding * 1.5;
	}
	@media ( min-width: 961px ) {
		padding: $padding * 3;
	}
	& + * {
		border-top: $border;
	}
	&__title{
		margin-top: 0;
	}
	& &__content{
		.cx-settings{
			padding: 0;
			border-top: none;
		}
	}
	&__button{
		display: block;
		min-height: 45px;
		.cx-ui-kit__title {
			color: inherit;
		}
		&.active, &:hover{
			color: $link-color;
			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		&:focus{
			outline: none;
			box-shadow: inset 0px 0px 10px rgba(41,143,252,0.5);
			transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}
		transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	&.cx-accordion, &.cx-toggle{
		.cx-component__button{
			width: 100%;
			padding: $padding * 1.5 $padding * 2;
			border:0;
			background: none;
			cursor: pointer;
			position: relative;
			.widget &{
				background-color: $widget-bg;
				color: $color-1;
			}
			.cx-toggle__title {
				font-weight: 700;
				font-size: 14px;
				float: left;
				margin: 0;
				.rtl & {
					float: right;
				}
			}
			>span[class*="icon"]{
				position: absolute;
				top: 50%;
				right: 5px;
				margin-top: -10px;
				font-size: 25px;
				color: $color-4;
				padding: 5px 5px;
				width: 10px;
				height: 9px;
				text-align: left;
				overflow: hidden;
				.rtl & {
					left: 5px;
					right: auto;
				}
				.widget &{
					color: $color-1;
				}
				&.hide-icon{
					&:before{
						position: relative;
						top: -8px;
						left: -9px;
						.rtl & {
							left: auto;
							right: -9px;
						}
					}
					transform:scaleX(1);
					transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
				}
				&.show-icon{
					&:before{
						position: relative;
						top: -7px;
						left: -9px;
						.rtl & {
							left: auto;
							right: -9px;
						}
					}
					transform:scaleX(0);
					transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
				}
			}
			&.active{
				>span[class*="icon"]{
					&.show-icon{
						transform:scaleX(1);
						transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
					}
					&.hide-icon{
						transform:scaleX(0);
						transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
					}
				}
			}
		}
		.cx-component__button + .cx-settings__content{
			border-top: $border;
		}
		> .cx-ui-kit__content{
			& > .cx-settings + .cx-settings{
				margin-top: $margin;
			}
			> .cx-settings{
				box-shadow:$shadow;
				border-radius: $br-radius;
				border: $border;
				.widget &{
					box-shadow:none;
					border-radius: 0;
					border-left: 0;
					border-right: 0;
				}
			}
		}
	}
	&.cx-tab{
		.cx-tab__tabs{
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			border-bottom: $border;
			.cx-component__button{
				order: 0;
				flex: 0 1 100%;
				align-self: auto;
				padding: $padding * 1.5 $padding * 2;
				border: 0;
				background: none;
				cursor: pointer;
				&.active{
					-ms-box-shadow: inset 0px -3px 0px 0px $link-color;
					box-shadow: inset 0px -3px 0px 0px $link-color;
				}
				.cx-tab__title {
					font-weight: 700;
					font-size: 14px;
					float: left;
					margin: 0;
					.rtl & {
						float: right;
					}
				}
				& + button{
					border-top: $border;
				}
			}
		}
		.cx-tab__body{
			box-shadow:$shadow;
			border-radius: $br-radius;
			border: $border;
			background-color: $color-1;
			.cx-settings{
				box-shadow: none;
				border-radius: 0;
				border: none;
				background-color: inherit;
				margin: 0;
			}
		}
		@media ( min-width: 783px ) {
			.cx-tab__tabs{
				border: solid 1px rgba(0,0,0,0.1);
				.cx-component__button{
					& + button{
						border-top: none;
					}
				}
			}
			.cx-tab__body{
				border: none;
				.cx-tab__content{
					border: $border;
				}
			}
			&--horizontal{
				>.cx-tab__body{
					border-radius: 0;
					>.cx-tab__tabs{
						flex-wrap: nowrap;
						flex-direction: row;
						border-radius:$br-radius $br-radius 0 0;
						border-bottom: none;
						.cx-component__button{
							flex: 0 1 auto;
						}
					}
					>.cx-tab__content{
						border-radius: 0 0 $br-radius $br-radius;
					}
				}
			}
			&--vertical{
				>.cx-tab__body{
					display: flex;
					border-radius: 0;
					>.cx-tab__tabs{
						flex-direction: row;
						-webkit-box-flex: 0;
						flex: 0 1 20%;
						border-radius:$br-radius 0 0 $br-radius;
						border-width: 1px 0 1px 1px;
						.rtl & {
							border-width: 1px 1px 1px 0;
							border-radius: 0 $br-radius $br-radius 0;
						}
						.cx-component__button{
							text-align: right;
							.rtl & {
								text-align: left;
							}
							.cx-tab__title {
								width: 100%;
							}
							&.active{
								box-shadow: inset -3px 0 0 $link-color;
								.rtl & {
									box-shadow: inset 3px 0 0 $link-color;
								}
							}
						}
					}
					>.cx-tab__content{
						-webkit-box-flex: 0;
						flex: 0 1 80%;
						border-radius: 0 $br-radius $br-radius 0;
						.rtl & {
							border-radius: $br-radius 0 0 $br-radius;
						}
					}
				}
			}
		}
		@media ( min-width: 1200px ) {
			&--vertical{
				.cx-tab__tabs{
					flex: 0 1 20%;
				}
				.cx-tab__content{
					flex: 0 1 80%;
				}
			}
		}
	}
	.widget &{
		padding: 0;
		&__content{
			margin: 0 $margin * -1.5 $margin * 2;
			.cx-control{
				padding: $padding * 1.5 $padding * 2;
			}
		}
	}
}

.cx-settings{
	& + & {
		border-top: $border;
	}
	& &__title{
		margin-bottom: $margin;
	}
	&__description, & &__title{
		margin-left: $margin;
		@media ( min-width: 783px ) {
			margin-left: $margin * 1.5;
		}
		@media ( min-width: 961px ) {
			margin-left: $margin * 3;
		}
		.rtl & {
			margin-left: 0;
			margin-right: $margin;
			@media ( min-width: 783px ) {
				margin-left: 0;
				margin-right: $margin * 1.5;
			}
			@media ( min-width: 961px ) {
				margin-left: 0;
				margin-right: $margin * 3;
			}
		}
	}
}

.cx-control {
	padding: $padding * 1.5 $padding * 2;

&__title{
		margin: 0 0 $margin 0 ;
	}

&__description{
		margin-top: 0;
	}

.cx-ui-container {
		margin: 0;
	}

@media (min-width: 783px) {
		padding: $padding * 1.5;
		display: flex;
		flex-flow: row nowrap;
		&__info{
			-webkit-box-flex: 0;
			flex: 0 1 30%;
			padding-right: $padding * 1.5;
			.rtl & {
				padding-left: $padding * 1.5;
				padding-right: 0;
			}
		}
		&__content{
			-webkit-box-flex: 0;
			flex: 0 1 70%;
		}
	}

@media ( min-width: 961px ) {
		padding: $padding * 3;
	}

.widget & {
		padding: $padding * 1.5 0;
		flex-direction: column;
		&__content{
			-webkit-box-flex: 0;
			flex: 0 1 100%;
		}
		&__info{
			-webkit-box-flex: 0;
			flex: 0 1 100%;
			padding-right: 0;
			.rtl & {
				padding-left: 0;
			}
		}
	}

&-hidden {
		display: none;
	}
}

.cx-section.cx-scroll > .cx-section__holder > .cx-section__inner,
.cx-tab__content > .cx-scroll,
.cx-accordion__content > .cx-scroll > .cx-settings__content,
.cx-toggle__content > .cx-scroll > .cx-settings__content {
	@media ( min-width: 783px ) {
		max-height: $max-height;
		overflow-y: auto;
		position: relative;

&::-webkit-scrollbar {
			width: 10px;
			height: 10px;

&-button {
				width: 0px;
				height: 0px;
			}

&-thumb {
				background-color: $link-color;
				border: none;
				border-radius: $br-radius;

&:hover, &:active {
					background: $color-7;
				}
			}

&-track {
				background-color: $color-1;
				border: none;
				border-radius: $br-radius;
			}

&-corner {
				background: transparent;
			}
		}
	}
}

[+] ..
[-] cx-interface-builder.scss [edit]
[+] controls
[+] components