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 {
|
||||||
|
|
Reference in a new issue