Merge pull request #5 from joubertredrat/title-ui-fix
Small UI fixes on full width form titles
This commit is contained in:
		
						commit
						507ce134fa
					
				
					 3 changed files with 57 additions and 26 deletions
				
			
		|  | @ -31,18 +31,23 @@ pre.wrap, | ||||||
| code.wrap { | code.wrap { | ||||||
|   white-space: pre-wrap; |   white-space: pre-wrap; | ||||||
|   /* CSS 3 */ |   /* CSS 3 */ | ||||||
|  | 
 | ||||||
|   word-break: break-word; |   word-break: break-word; | ||||||
| } | } | ||||||
| .dont-break-out { | .dont-break-out { | ||||||
|   /* These are technically the same, but use both */ |   /* These are technically the same, but use both */ | ||||||
|  | 
 | ||||||
|   overflow-wrap: break-word; |   overflow-wrap: break-word; | ||||||
|   word-wrap: break-word; |   word-wrap: break-word; | ||||||
|   -ms-word-break: break-all; |   -ms-word-break: break-all; | ||||||
|   /* This is the dangerous one in WebKit, as it breaks things wherever */ |   /* This is the dangerous one in WebKit, as it breaks things wherever */ | ||||||
|  | 
 | ||||||
|   word-break: break-all; |   word-break: break-all; | ||||||
|   /* Instead use this non-standard one: */ |   /* Instead use this non-standard one: */ | ||||||
|  | 
 | ||||||
|   word-break: break-word; |   word-break: break-word; | ||||||
|   /* Adds a hyphen where the word breaks, if supported (No Blink) */ |   /* Adds a hyphen where the word breaks, if supported (No Blink) */ | ||||||
|  | 
 | ||||||
|   -ms-hyphens: auto; |   -ms-hyphens: auto; | ||||||
|   -moz-hyphens: auto; |   -moz-hyphens: auto; | ||||||
|   -webkit-hyphens: auto; |   -webkit-hyphens: auto; | ||||||
|  | @ -812,7 +817,7 @@ footer .ui.language .menu { | ||||||
|   border: solid 1px #ccc; |   border: solid 1px #ccc; | ||||||
|   border-bottom-color: #bbb; |   border-bottom-color: #bbb; | ||||||
|   border-radius: 3px; |   border-radius: 3px; | ||||||
|   box-shadow: inset 0 -1px 0 #bbb; |   box-shadow: inset 0 -1px 0 #bbbbbb; | ||||||
| } | } | ||||||
| .markdown:not(code) input[type="checkbox"] { | .markdown:not(code) input[type="checkbox"] { | ||||||
|   vertical-align: middle !important; |   vertical-align: middle !important; | ||||||
|  | @ -883,7 +888,7 @@ footer .ui.language .menu { | ||||||
| } | } | ||||||
| .install form label { | .install form label { | ||||||
|   text-align: right; |   text-align: right; | ||||||
|   width: 320px !important; |   width: 320px; | ||||||
| } | } | ||||||
| .install form input { | .install form input { | ||||||
|   width: 35% !important; |   width: 35% !important; | ||||||
|  | @ -892,7 +897,7 @@ footer .ui.language .menu { | ||||||
|   text-align: left; |   text-align: left; | ||||||
| } | } | ||||||
| .install form .field .help { | .install form .field .help { | ||||||
|   margin-left: 335px !important; |   margin-left: 335px; | ||||||
| } | } | ||||||
| .install form .field.optional .title { | .install form .field.optional .title { | ||||||
|   margin-left: 38%; |   margin-left: 38%; | ||||||
|  | @ -927,18 +932,18 @@ footer .ui.language .menu { | ||||||
|   text-align: center; |   text-align: center; | ||||||
| } | } | ||||||
| #create-page-form form .header { | #create-page-form form .header { | ||||||
|   padding-left: 280px !important; |   padding-left: 280px; | ||||||
| } | } | ||||||
| #create-page-form form .inline.field > label { | #create-page-form form .inline.field > label { | ||||||
|   text-align: right; |   text-align: right; | ||||||
|   width: 250px !important; |   width: 250px; | ||||||
|   word-wrap: break-word; |   word-wrap: break-word; | ||||||
| } | } | ||||||
| #create-page-form form .help { | #create-page-form form .help { | ||||||
|   margin-left: 265px !important; |   margin-left: 265px; | ||||||
| } | } | ||||||
| #create-page-form form .optional .title { | #create-page-form form .optional .title { | ||||||
|   margin-left: 250px !important; |   margin-left: 250px; | ||||||
| } | } | ||||||
| #create-page-form form input, | #create-page-form form input, | ||||||
| #create-page-form form textarea { | #create-page-form form textarea { | ||||||
|  | @ -964,7 +969,7 @@ footer .ui.language .menu { | ||||||
| .user.reset.password form .header, | .user.reset.password form .header, | ||||||
| .user.signin form .header, | .user.signin form .header, | ||||||
| .user.signup form .header { | .user.signup form .header { | ||||||
|   padding-left: 280px !important; |   padding-left: 280px; | ||||||
| } | } | ||||||
| .user.activate form .inline.field > label, | .user.activate form .inline.field > label, | ||||||
| .user.forgot.password form .inline.field > label, | .user.forgot.password form .inline.field > label, | ||||||
|  | @ -972,7 +977,7 @@ footer .ui.language .menu { | ||||||
| .user.signin form .inline.field > label, | .user.signin form .inline.field > label, | ||||||
| .user.signup form .inline.field > label { | .user.signup form .inline.field > label { | ||||||
|   text-align: right; |   text-align: right; | ||||||
|   width: 250px !important; |   width: 250px; | ||||||
|   word-wrap: break-word; |   word-wrap: break-word; | ||||||
| } | } | ||||||
| .user.activate form .help, | .user.activate form .help, | ||||||
|  | @ -980,14 +985,14 @@ footer .ui.language .menu { | ||||||
| .user.reset.password form .help, | .user.reset.password form .help, | ||||||
| .user.signin form .help, | .user.signin form .help, | ||||||
| .user.signup form .help { | .user.signup form .help { | ||||||
|   margin-left: 265px !important; |   margin-left: 265px; | ||||||
| } | } | ||||||
| .user.activate form .optional .title, | .user.activate form .optional .title, | ||||||
| .user.forgot.password form .optional .title, | .user.forgot.password form .optional .title, | ||||||
| .user.reset.password form .optional .title, | .user.reset.password form .optional .title, | ||||||
| .user.signin form .optional .title, | .user.signin form .optional .title, | ||||||
| .user.signup form .optional .title { | .user.signup form .optional .title { | ||||||
|   margin-left: 250px !important; |   margin-left: 250px; | ||||||
| } | } | ||||||
| .user.activate form input, | .user.activate form input, | ||||||
| .user.forgot.password form input, | .user.forgot.password form input, | ||||||
|  | @ -1013,14 +1018,15 @@ footer .ui.language .menu { | ||||||
| .user.reset.password form .header, | .user.reset.password form .header, | ||||||
| .user.signin form .header, | .user.signin form .header, | ||||||
| .user.signup form .header { | .user.signup form .header { | ||||||
|   padding-left: 230px !important; |   padding-left: 0 !important; | ||||||
|  |   text-align: center; | ||||||
| } | } | ||||||
| .user.activate form .inline.field > label, | .user.activate form .inline.field > label, | ||||||
| .user.forgot.password form .inline.field > label, | .user.forgot.password form .inline.field > label, | ||||||
| .user.reset.password form .inline.field > label, | .user.reset.password form .inline.field > label, | ||||||
| .user.signin form .inline.field > label, | .user.signin form .inline.field > label, | ||||||
| .user.signup form .inline.field > label { | .user.signup form .inline.field > label { | ||||||
|   width: 200px !important; |   width: 200px; | ||||||
| } | } | ||||||
| .repository.new.repo form, | .repository.new.repo form, | ||||||
| .repository.new.migrate form, | .repository.new.migrate form, | ||||||
|  | @ -1036,24 +1042,24 @@ footer .ui.language .menu { | ||||||
| .repository.new.repo form .header, | .repository.new.repo form .header, | ||||||
| .repository.new.migrate form .header, | .repository.new.migrate form .header, | ||||||
| .repository.new.fork form .header { | .repository.new.fork form .header { | ||||||
|   padding-left: 280px !important; |   padding-left: 280px; | ||||||
| } | } | ||||||
| .repository.new.repo form .inline.field > label, | .repository.new.repo form .inline.field > label, | ||||||
| .repository.new.migrate form .inline.field > label, | .repository.new.migrate form .inline.field > label, | ||||||
| .repository.new.fork form .inline.field > label { | .repository.new.fork form .inline.field > label { | ||||||
|   text-align: right; |   text-align: right; | ||||||
|   width: 250px !important; |   width: 250px; | ||||||
|   word-wrap: break-word; |   word-wrap: break-word; | ||||||
| } | } | ||||||
| .repository.new.repo form .help, | .repository.new.repo form .help, | ||||||
| .repository.new.migrate form .help, | .repository.new.migrate form .help, | ||||||
| .repository.new.fork form .help { | .repository.new.fork form .help { | ||||||
|   margin-left: 265px !important; |   margin-left: 265px; | ||||||
| } | } | ||||||
| .repository.new.repo form .optional .title, | .repository.new.repo form .optional .title, | ||||||
| .repository.new.migrate form .optional .title, | .repository.new.migrate form .optional .title, | ||||||
| .repository.new.fork form .optional .title { | .repository.new.fork form .optional .title { | ||||||
|   margin-left: 250px !important; |   margin-left: 250px; | ||||||
| } | } | ||||||
| .repository.new.repo form input, | .repository.new.repo form input, | ||||||
| .repository.new.migrate form input, | .repository.new.migrate form input, | ||||||
|  | @ -1078,11 +1084,17 @@ footer .ui.language .menu { | ||||||
| .repository.new.fork form .dropdown .text i { | .repository.new.fork form .dropdown .text i { | ||||||
|   margin-right: 0!important; |   margin-right: 0!important; | ||||||
| } | } | ||||||
|  | .repository.new.repo form .header, | ||||||
|  | .repository.new.migrate form .header, | ||||||
|  | .repository.new.fork form .header { | ||||||
|  |   padding-left: 0 !important; | ||||||
|  |   text-align: center; | ||||||
|  | } | ||||||
| .repository.new.repo .ui.form .selection.dropdown:not(.owner) { | .repository.new.repo .ui.form .selection.dropdown:not(.owner) { | ||||||
|   width: 50%!important; |   width: 50%!important; | ||||||
| } | } | ||||||
| .repository.new.repo .ui.form #auto-init { | .repository.new.repo .ui.form #auto-init { | ||||||
|   margin-left: 265px !important; |   margin-left: 265px; | ||||||
| } | } | ||||||
| .new.webhook form .help { | .new.webhook form .help { | ||||||
|   margin-left: 25px; |   margin-left: 25px; | ||||||
|  | @ -2328,14 +2340,18 @@ footer .ui.language .menu { | ||||||
| } | } | ||||||
| .settings .hook.list .item a { | .settings .hook.list .item a { | ||||||
|   /* These are technically the same, but use both */ |   /* These are technically the same, but use both */ | ||||||
|  | 
 | ||||||
|   overflow-wrap: break-word; |   overflow-wrap: break-word; | ||||||
|   word-wrap: break-word; |   word-wrap: break-word; | ||||||
|   -ms-word-break: break-all; |   -ms-word-break: break-all; | ||||||
|   /* This is the dangerous one in WebKit, as it breaks things wherever */ |   /* This is the dangerous one in WebKit, as it breaks things wherever */ | ||||||
|  | 
 | ||||||
|   word-break: break-all; |   word-break: break-all; | ||||||
|   /* Instead use this non-standard one: */ |   /* Instead use this non-standard one: */ | ||||||
|  | 
 | ||||||
|   word-break: break-word; |   word-break: break-word; | ||||||
|   /* Adds a hyphen where the word breaks, if supported (No Blink) */ |   /* Adds a hyphen where the word breaks, if supported (No Blink) */ | ||||||
|  | 
 | ||||||
|   -ms-hyphens: auto; |   -ms-hyphens: auto; | ||||||
|   -moz-hyphens: auto; |   -moz-hyphens: auto; | ||||||
|   -webkit-hyphens: auto; |   -webkit-hyphens: auto; | ||||||
|  | @ -2534,23 +2550,27 @@ footer .ui.language .menu { | ||||||
|   text-align: center; |   text-align: center; | ||||||
| } | } | ||||||
| .organization.new.org form .header { | .organization.new.org form .header { | ||||||
|   padding-left: 280px !important; |   padding-left: 280px; | ||||||
| } | } | ||||||
| .organization.new.org form .inline.field > label { | .organization.new.org form .inline.field > label { | ||||||
|   text-align: right; |   text-align: right; | ||||||
|   width: 250px !important; |   width: 250px; | ||||||
|   word-wrap: break-word; |   word-wrap: break-word; | ||||||
| } | } | ||||||
| .organization.new.org form .help { | .organization.new.org form .help { | ||||||
|   margin-left: 265px !important; |   margin-left: 265px; | ||||||
| } | } | ||||||
| .organization.new.org form .optional .title { | .organization.new.org form .optional .title { | ||||||
|   margin-left: 250px !important; |   margin-left: 250px; | ||||||
| } | } | ||||||
| .organization.new.org form input, | .organization.new.org form input, | ||||||
| .organization.new.org form textarea { | .organization.new.org form textarea { | ||||||
|   width: 50%!important; |   width: 50%!important; | ||||||
| } | } | ||||||
|  | .organization.new.org form .header { | ||||||
|  |   padding-left: 0 !important; | ||||||
|  |   text-align: center; | ||||||
|  | } | ||||||
| .organization.options input { | .organization.options input { | ||||||
|   min-width: 300px; |   min-width: 300px; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -1,9 +1,9 @@ | ||||||
| .form { | .form { | ||||||
| 	.help { | 	.help { | ||||||
| 		color: #999999; | 		color: #999999; | ||||||
| 	  padding-top: .6em; | 		padding-top: .6em; | ||||||
| 	  padding-bottom: .6em; | 		padding-bottom: .6em; | ||||||
| 	  display: inline-block; | 		display: inline-block; | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| .ui.attached.header { | .ui.attached.header { | ||||||
|  | @ -56,7 +56,8 @@ | ||||||
| 	form { | 	form { | ||||||
| 		width: 700px!important; | 		width: 700px!important; | ||||||
| 		.header { | 		.header { | ||||||
| 			padding-left: @input-padding+30px; | 			padding-left: 0 !important; | ||||||
|  | 			text-align: center; | ||||||
| 		} | 		} | ||||||
| 		.inline.field > label { | 		.inline.field > label { | ||||||
| 			width: @input-padding; | 			width: @input-padding; | ||||||
|  | @ -81,6 +82,10 @@ | ||||||
| 					} | 					} | ||||||
| 				} | 				} | ||||||
| 			} | 			} | ||||||
|  | 			.header { | ||||||
|  | 				padding-left: 0 !important; | ||||||
|  | 				text-align: center; | ||||||
|  | 			}			 | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -17,6 +17,12 @@ | ||||||
| 
 | 
 | ||||||
| 	&.new.org { | 	&.new.org { | ||||||
| 		#create-page-form; | 		#create-page-form; | ||||||
|  | 		form { | ||||||
|  | 			.header { | ||||||
|  | 				padding-left: 0 !important; | ||||||
|  | 				text-align: center; | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	&.options { | 	&.options { | ||||||
|  |  | ||||||
		Loading…
	
		Reference in a new issue