.app {
font-family: 'Source Sans Pro', sans-serif;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
/* background:#539AB9;
border:5px solid #539AB9;*/
/*
This is the CSS for the feedback div that is fixed to the top left hand side
of the screen. This div should slide with the form so that it provides a
close button when the form is slid into view.
*/
right : -50px; /* Bring the div in and hide the left (top) border */
left : -10px\9; /* Less Than IE9 Hack - Bring the div in and hide the left (top) border */
top : 50%;
margin-top:-152px;
cursor : pointer;
padding-left: -70px;
width : 150px; /* Since this is getting rotated width appears as height to the eye*/
height : 30px; /* Since this is getting rotated height appears as width to the eye*/
text-align : center;
letter-spacing:1px;
z-index : 10000; /* Msake sure it floats above the content */
position: fixed;
background: #689F38;
border: 5px solid #fff;
color: #FFF;
padding: 10px 15px 30px;
}
.app a {
color:#fff;
}
.app a:hover {
text-decoration:none;
}
/*------------------log a ticket start here---------------------------------*/
.log-ticket {
top : 50%;
margin-top:2px;
background: #EB4712;
border: 5px solid #fff;
}
/*------------------log a ticket end here-----------------------------------*/
.rotate {
/* Safari, Chrome */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Older versions of IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* CSS3 standard as defined here: http://www.w3.org/TR/css3-transforms/ */
transform: rotate(-90deg);
}
.required {
background-color:#F2DEDE !important;
border: 1px #F00 solid !important;
}
.feedback {
position : fixed; /* This will never scroll out of view */
background:#EB4712;
border : 5px solid #EB4712;
color : #fff;
font-weight : bold;
padding : 10px 15px 30px 15px;
}
.feedback-form-wrapper {
/*
This is the CSS for the feedback div that is fixed to the top left hand side
of the screen.
*/
display : block;
z-index : 9999; /* Make sure it floats a little higher than the feedback form div below */
top : 200px;
left : -280px; /* Bring the div in and hide the left (top) border */
width : 280px;
}
.feedback-form-wrapper .form-group {
padding:0px 15px;
margin-bottom:0;
}
.feedback-form-wrapper .form-group .form-control {
font-size:13px;
margin-bottom:8px;
border-radius:0 !important;
}
.feedback-form-wrapper .btn {
padding:5px 15px!important;
border:3px solid #fff;
background:none;
transition:all ease-out 0.3s;
-moz-transition:all ease-out 0.3s;
-o-transition:all ease-out 0.3s;
-webkit-transition:all ease-out 0.3s;
border-radius:0 !important;
}
.feedback-form-wrapper .btn:hover {
background:#fff;
transition:all ease-out 0.3s;
-moz-transition:all ease-out 0.3s;
-o-transition:all ease-out 0.3s;
-webkit-transition:all ease-out 0.3s;
}
/* This will put some distance between the input box and the next label */
.feedback input{
margin-bottom:5px;
}
.feedback legend{
color : #FFF;
font-size:15px;
}
.feedback-toggle {
font-family: 'Source Sans Pro', sans-serif;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
/*background:#539AB9;*/
border:5px solid #fff;
/*
This is the CSS for the feedback div that is fixed to the top left hand side
of the screen. This div should slide with the form so that it provides a
close button when the form is slid into view.
*/
left : -50px; /* Bring the div in and hide the left (top) border */
left : -10px\9; /* Less Than IE9 Hack - Bring the div in and hide the left (top) border */
top : 50%;
margin-top:-75px;
cursor : pointer;
padding-left: -70px;
width : 150px; /* Since this is getting rotated width appears as height to the eye*/
height : 30px; /* Since this is getting rotated height appears as width to the eye*/
text-align : center;
letter-spacing:1px;
/*border-top : 5px solid #fff;
border-left : 4px solid #fff;
border-right: 4px solid #fff;*/
z-index : 10000; /* Msake sure it floats above the content */
}
.send-complaint { position:relative; cursor:pointer;}
.send-complaint .fa-send { font-size:25px; cursor:pointer}
.send-complaint .send-text { position:absolute; top:0; left:0px; opacity:0; font-family:"Open Sans"; font-weight:300; font-size:16px; -webkit-transition:all ease-out 0.4s; -moz-transition:all ease-out 0.4s; -ms-transition:all ease-out 0.4s; -o-transition:all ease-out 0.4s;}
.send-complaint:hover .send-text { opacity:1; -webkit-transform:translateX(50px); -moz-transform:translateX(50px); -ms-transform:translateX(50px); -o-transform:translateX(50px);}
legend { margin-bottom:15px;}
@media ( max-width:640px) {
.send {
font-family: 'Source Sans Pro', sans-serif;
text-transform:uppercase;
font-size:18px;
font-weight:300;
width:90px;
padding:10px 10px 30px;
z-index : 9999; /* Msake sure it floats above the content */
}
.send > .fa { float:right;}
.feedback-form-wrapper .form-group .form-control {
height:30px;
margin-bottom:0px !important;
border-radius:0 !important;
}
.feedback-form-wrapper .form-group { margin-bottom:5px !important;}
.send-complaint .send-text {}
/*.send-complaint .send-text { position:absolute; top:0; left:30px; opacity:1; font-family:"Open Sans"; font-weight:300; font-size:16px;}
.send-complaint:hover .send-text { opacity:1; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px);}
*/
// This is the Feedback toggle functionality it slides the feedback form in and out
// of view when the user clicks the div with the class .feedback-toggle
$('.feedback-toggle').click( function(){
var left = parseFloat($('.feedback')[0].style.left.match(/[0-9]+/g)) || 50,
tgl = '+=280';
(left > 50) ? tgl = '-=280' : tgl = '+=280';
$('.feedback').animate({ left: tgl}, 500);
});
// This is the form submission AJAX code which also
// hides the feednack form.
$("#feedback-form .btn").click(function() {
var url = "path/to/your/script.php", // the script where you handle the form input.
data = $("#feedback-form").serialize(),
isValid = validate("#feedback-form");
if(isValid){
$.ajax({
type : "POST",
url : url,
data : data , // serializes the form's elements.
success : function(data){
$('.feedback').find('.alert-error').fadeIn('fast');
$('.feedback').animate({ left: '-=350'}, 500);
},
error : function(data){
$('.feedback').find('.alert-block').fadeIn('fast');
return false;
}
});
}
return false; // avoid to execute the actual submit of the form.
});
