1KA_F2F/resources/sass/admin/new_survey_page/right_content.scss

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25-Jul-2018, 11:36:53
    Author     : podkrizniku
*/

$titles: $main_text;
$default_text: $main_text;
$selectors: $grey_very_dark;
$radio_selector: $strong_blue;
$button_text: white;
$white_template_background: white;
$default_template_background: $soft_blue_lighten;
$skin_selector_border: $soft_blue_lighten;
$skin_selector: $orange_very_lighten;

#new_anketa_div {
	#right_content {
        color: $default_text;
		position: relative;
		width: calc(100% - 240px);
		max-width: 1300px;
		min-height: 200px;
		margin-left: 240px;
		padding: 30px 35px;
		
		.fieldset {
			width: 100%;
			padding: 0 0 20px 0;
			margin-bottom: 20px;
			
			font-size: 15px;
			font-weight: 400;
			
			/*border-bottom: 1px $soft_blue solid;*/
			
			.title {
				padding: 10px 0 20px 0;
				color: $titles;
				
				font-size: 20px;
				font-weight: 500;
			}
			
			.setting {
				padding: 0 0 7px 15px;
				
				.radioSetting_type.active {
					color: $selectors;
				}
				input {
					padding: 0;
					margin: 0;
				}
				select {
					padding: 2px 5px;
					margin: 0;
					width: 302px;
					font-size: 12px;
					border: 1px solid $soft_blue !important;
					border-radius: 1px;
				}
				input[type="file"] {
					height: 24px;
					width: 240px;
					font-size: 10px;
				}
				input[type="text"] {
					padding: 10px 12px;
					width: 310px;
					
					font-size: 15px;
					
					border: 1px solid $soft_blue !important;
					border-radius: 1px;
				}
				#novaanketa_akronim_1_chars {
					float: right;
					padding-right: 15px;
					
					font-weight: 400;
					font-size: 11px;
				}
				#novaanketa_naslov_1_chars {
					float: right;
					padding-right: 7px;
					
					font-weight: 400;
					font-size: 11px;
				}
				input[type="radio"] {
					margin: 0 8px 4px 0;
					display: none !important;
					&+span.enka-checkbox-radio {
						&:before {
							font-family: $fontawesome;
							display: inline-block;
							content: "\f111";
							letter-spacing: 10px;
						}
						font-size: 16px;
						font-weight: 400;
					}
					&+span.enka-custom-radio {
						&:before {
							font-family: $fontawesome;
							display: inline-block;
						}
					}
					&:checked {
						&+span.enka-checkbox-radio {
							&:before {
								content: "\f192";
							}
						}
					}
				}
				input[type="checkbox"] {
					display: none !important;
					&+span.enka-checkbox-radio {
						&:before {
							font-family: $fontawesome;
							display: inline-block;
							content: "\f0c8";
							letter-spacing: 10px;
						}
						font-size: 16px;
						font-weight: 400;
						color: $radio_selector;
					}
					&:checked {
						&+span.enka-checkbox-radio {
							&:before {
								content: "\f14a";
								letter-spacing: 8px;
							}
						}
					}
				}
				.custom_radio_picture.obarvan {
					>label {
						>span.enka-custom-radio {
							&:before {
								color: $radio_selector;
							}
						}
					}
				}
				.visual-radio-scale.checked .enka-vizualna-skala::before{
					color: $radio_selector;
				}
			}
			.setting.archive {
				margin-top: 20px;
				font-weight: 500;
				font-size: 14px;
			}
			.survey_title_text_holder{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				
				.setting.survey_title_text{
					width: 350px;
					margin-right: 20px;
					
					span{
						line-height: 28px;
					}
					
					select{
						height: 40px;
						width: 330px;
						
						font-size: 15px !important;
					}
				}
			}
			.survey_type_holder{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				
				.setting.survey_type{
					cursor: pointer;
					
					width: 300px;
					margin: 0 30px 60px 15px;
					padding: 15px 18px;
					
					border: 1px $soft_blue solid;
					background-color: $soft_blue_very_lighten;
					
					border-radius: 4px;
					-moz-border-radius: 4px;
					-webkit-border-radius: 4px;
					
					&:hover{
						background-color: darken($soft_blue_very_lighten, 2%);
					}
						
					span{
						line-height: 28px;
					}
					
					.survey_type_title{
						font-size: 17px;
						font-weight: 500;
						
						.help{
							vertical-align: top;
						}
					}
					.survey_type_text{
						font-size: 13px;
						line-height: 26px;
					}
				}
				.setting.survey_type.active{
					border-color: $orange;
					background-color: $orange_super_lighten;
				}
			}
		}
		.fieldset.noSurvey_skin {
			overflow: hidden;
			height: 270px;
			display: none;
			
			#skins_holder {
				overflow: hidden;
				position: absolute;
				height: 220px;
				width: 83%;
				left: 120px;
				margin-top: 10px;
				
				#noSurvey_skins {
					width: 3450px;
				}
			}
			#noSurvey_skins {
				.skin {
					cursor: pointer;
					float: left;
					margin: 0 10px;
					padding: 5px 5px 15px 5px;
					
					font-size: 13px;
					text-transform: uppercase;
					
					background-color: $default_template_background;
					border: none;
					/*border-radius: 3px;
					-moz-border-radius: 3px;
					-webkit-border-radius: 3px;*/
						
					&:hover {
						color: $selectors;
						background-color: darken( $soft_blue_lighten, 5% );
						border: none;
					}
					
					.preview {
						width: 200px;
						height: 150px;	
						margin-bottom: 4px;
						
						border: none;
					}
				}
				.skin.selected {
					color: $selectors;
					background-color: $skin_selector;
					border: none;
					.preview {
						border: none;
					}
				}
			}
			#skin_arrow_left {
				float: left;
				width: 30px;
				height: 40px;
				margin-top: 80px;
				margin-left: 20px;
			}
			#skin_arrow_right {
				float: right;
				width: 30px;
				height: 40px;
				margin-top: 80px;
			}
		}
		.noSurvey_buttons {
			width: auto;
			margin: 20px auto;
			text-align: center;
			a {
				#noSurvey_create {
					display: inline-block;
					padding: 12px 0px;
					margin: 8px 15px;
					width: 120px;
					
					text-align: center;
					font-size: 15px;
					font-weight: 500;
					
					border-radius: 40px;
					-moz-border-radius: 40px;
					-webkit-border-radius: 40px;
					
					color: $button_text;
					background-color: $strong_blue;
					
					&:hover {
						background-color: $orange;
					}
				}
				#noSurvey_cancel {
					display: inline-block;
					padding: 11px 0px;
					margin: 8px 15px;
					width: 120px;
					
					text-align: center;
					font-size: 15px;
					font-weight: 500;
					
					border-radius: 40px;
					-moz-border-radius: 40px;
					-webkit-border-radius: 40px;
					
					color: $strong_blue !important;
					background-color: #ffffff;
					border: 1px $strong_blue solid;
					
					&:hover {
						background-color: $strong_blue;
						color: white !important;
					}
				}
			}
		}
		.noSurvey_template {
			overflow: auto;

			.template {
				cursor: pointer;
				float: left;
				margin: 0 30px 30px 20px;
				width: 200px;
				&:hover {
					color: $selectors;
				}
				
				.template_content {
					overflow: hidden;
					
					width: 200px;
					height: 189px;
					margin: 0 10px;
					padding: 5px 5px 5px 5px;
					
					background-color: $default_template_background;
					border: none;
					/*border-radius: 3px;
					-moz-border-radius: 3px;
					-webkit-border-radius: 3px;*/
					
					&:hover {
						background-color: darken( $default_template_background, 5% );
                        border: none;
					}
					
					.template_content_white {
						width: 190px;
						height: 120px;
						padding: 15px 5px;
						text-align: center;
						font-size: 12px;
						font-weight: 400;
						background-color: $white_template_background;
					}
					
					.template_title{
						font-size: 13px;
						text-transform: uppercase;
					}
				}
				
				.template_preview{
					margin-right: -15px;
					float: right;
					padding: 5px 0 5px 5px;
					
					font-size: 12px;
					font-weight: 400;
				}
			}
			.template.selected {
				color: $selectors;
				
				.template_content {
					background-color: $skin_selector;
					border: none;
				}
			}

            select.template_type_menu{
                display: none;
            }
		}
		
		.anketa_from_text{	
  			height: auto;
			overflow: auto;
			
			.from_text_instructions{
				line-height: 14px;
				margin-bottom: 10px;
			}
			
			#input_field_holder{
				float: left;
				width: 50%;
				height: 400px;
				box-sizing: border-box;
				
				padding: 20px;
				
				#input_field{
					width: 100%;
					height: 100%;
					
					textarea{
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						
						resize: none;
						padding: 20px;
						
						border: 1px $soft_blue solid !important;
						
						&:focus::-webkit-input-placeholder{
							color: transparent;
						}
						&:focus::-moz-placeholder{
							color: transparent;
						}
					}
				}
			}
			#preview_field_holder{
				float: right;
				width: 50%;
				height: 400px;
				box-sizing: border-box;
				
				padding: 20px;
				
				#preview_field{
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					overflow: auto;
					
					padding: 20px;
					
					background-color: $soft_blue_very_lighten;
					border: 1px $soft_blue solid;
					
					span.title{
						font-size: 18px;
						line-height: 30px;
					}
					span.variable{
						font-size: 15px;
						font-weight: 400;
						
						input[type="radio"]{
							display: none !important;
						}
						input[type="radio"] + span.enka-checkbox-radio:before{
							font-family: $fontawesome;
							content: "\f111";
							
							display: inline-block;
							
							font-size: 14px;
							color: $grey_light;							
							letter-spacing: 8px;
							font-weight: 400;
						}
						input[type="radio"]:checked + span.enka-checkbox-radio:before{
							content: "\f192";
							color: $grey_super_dark;
						}
					}
				}
			}
		}		
	}
}
input[type="radio"] {
	&+span.enka-checkbox-radio {
		color: $radio_selector;
	}
}
select#my_surveys {
	padding: 5px 8px;
	margin-left: 15px;
	height: 30px;
	
	font-size: 12px;
	
	border: 1px solid #b9c5d9 !important;
	border-radius: 1px;
}
.noSurvey_skin {
	#noSurvey_skins {
		.skin {
			&:hover {
				.preview {
					background-color: $skin_selector;
					border: 1px $skin_selector_border solid;
				}
			}
		}
	}
}
#novaanketa_naslov_1 {
	margin-bottom: 3px;
	width: 290px;
	color: black;
}
#novaanketa_akronim_1 {
	margin-bottom: 3px;
	width: 290px;
	color: black;
}
#novaanketa_naslov_1.full {
	width: 290px;
	color: black;
}
#novaanketa_opis {
	width: 290px;
	color: black;
}
#novaanketa_akronim_1.full {
	width: 510px !important;
	max-width: 510px !important;
	color: black;
}
#novaanketa_opis_1.full {
	width: 505px !important;
	max-width: 505px !important;
	vertical-align: top;
	color: black;
}
#novaanketa_naslov_1_chars {
	display: inline-block;
	min-width: 40px;
	height: auto;
}