Difference between revisions of "HQ:Forms Styling testing.css"

Revision as of 15:17, 6 September 2018 (view source) Sifuentes anita (Talk | contribs) ← Older edit		Latest revision as of 15:54, 6 September 2018 (view source) Sifuentes anita (Talk | contribs)
Line 242:		Line 242:
	#submitted_warning, #submitted_agree{		#submitted_warning, #submitted_agree{
	display:none;		display:none;
		+	}
		+
		+	#sign_off_button {
		+	display:block;
	}		}

---

Latest revision as of 15:54, 6 September 2018

/*

• This is the code for the general styling of the Forms
• The code is based of Kelly Drinkwater's code, which can be found here: https://igem.org/Template:JS/KForms_2pt4?action=raw&ctype=text/javascript
• /

fieldset .column.half_size { width:42%; }

fieldset .column.half_size.message_box{ border: 1px solid #8e8e8e;

   	border-radius: 5px;
   	padding: 1.5%;

}

#formbody .note{ padding: 5px 15px;

   	color: #616161;
   	font-size: 120%;

}

/* This wraps the section of questions */ fieldset { border: 1px solid #d3d3d3; margin-bottom: 1.5em; background-color: #f9f9f9; border-radius: 5px; padding: 40px; width: 85%; max-width: 1250px; margin: 40px auto;

}

/*This styles the title of a section */ legend { font-size: 16px; font-weight: bold; color: #00bdcd; }

/*This styles the input text boxes */ input[type=text] { padding: 7px 20px; margin: 0px; display: inline-block; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; max-width: 170px; }

/* This styles the big paragraph text areas */ #formbody textarea { padding: 15px; margin: 0px 15px; width: 96%; display: inline-block; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; }

/* This styles the dropdown select */ #formbody select{ background: #ffffff; width: 20%; margin-bottom: 3px; border: 1px solid #d3d3d3; }

#formbody .teamselector-multiple {

   border-radius: 5%;
   padding: 15px;
   margin: 0px 15px;
   width: 85%;

}

/* visible when selecting which dropdown option */ #formbody input:focus { background: #ffffff; }

/*This styles the input text boxes and select dropdown when selected or brought "in focus" */ input[type=text]:focus, #formbody textarea:focus , #formbody select:focus{ border: 1px solid #90528f; outline: none; }

/*This styles the input submit button */ input[type=submit] {

 	 max-width: 65%;
   border: 3px solid #90528f;
   font-weight: bold;
   padding: 14px 20px;
   margin: 0px;
   background-color: #90528f;
   color: white;
   border-radius: 4px;
   cursor: pointer;
   font-size: 100%;

}

/*This styles the input submit button on hover */ input[type=submit]:hover { background-color: transparent; color: #90528f; }

/*styling for p class used for questions */	

#formbody .question { margin-top: 1em; font-weight: bold; color: #616161; padding: 10px 15px; }

/* styling for ul in forms */ #formbody fieldset ul { margin-left: 0px; padding-left: 25px; list-style:none; }

/* styling for ul in forms */ #formbody fieldset ul li { padding: 10px 0px; list-style:none; }

/* styling for the wrapper class, this class surrounds an item that is being saved into the system. it gives visual feedback to the user that the form is working. */ #formbody .wrapper{ padding: 10px; background-color: transparent; }

/* make span class align the text to the left of dropdowns so they all align */ #formbody .align_dropdowns { width: 90px; float: left; padding: 5px 0px; }

#formbody .dropdown_question { padding: 0px 32px; margin-bottom: 10px; }

/*style section numbers */ .section_numbers { color: #00bdcd; border-radius: 50%; padding: 5px 7px 5px 9px; text-align: center; font-size: 15px; margin-right: 10px; border: 3px solid #00bdcd; }

.admins_only { display: none; border: 2px solid #FF9900 !important; }

#formbody td { text-align: center; }

#aj_form_error_inner_div {

   display: block;
   margin: 30px auto 20px auto; 
   width: 40%;
   text-align: center;
   border: 1px solid #fdb9b9;
   padding: 15px 0px;
   border-radius: 5px;
   background-color: rgba(255, 228, 232, 0.71);

}

1. aj_form_error_inner_div img {

width: 10%;

   padding: 0px;

}

1. formbody select#team_list_dropdown {

   width: 80%;
   margin: auto 12px;

}

1. formbody fieldset .column.half_size {

padding: 0px; width:49%; }

1. formbody fieldset .column.half_size.message_box{

border: 1px solid #8e8e8e; border-radius: 5px; padding: 10px 0px; } }

.igem_content_wrapper h3 { color: #616161 !important; }

1. submitted_warning, #submitted_agree{

display:none; }

1. sign_off_button {

display:block; }

.submitted_form_message{ background-color: #d9c5dd; bottom: 0px; left: 0px; position: fixed; padding:2% 0; }

1. aj_form_error_inner_div{display:none;}