mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-30 01:46:24 +01:00
Addressing misalignment of select fields with their label. Added example of radio widget equivalent in styleguide
This commit is contained in:
Dave Cranwell
Matt Westcott
parent
6ff4b5075a
commit
020997190c
@ -32,6 +32,7 @@ class ExampleForm(forms.Form):
|
||||
time = forms.TimeField()
|
||||
datetime = forms.DateTimeField()
|
||||
select = forms.ChoiceField(choices=CHOICES)
|
||||
radio_select = forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect)
|
||||
boolean = forms.BooleanField(required=False)
|
||||
page_chooser = forms.BooleanField(required=True)
|
||||
image_chooser = forms.BooleanField(required=True)
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// These are the generic stylings for forms of any type.
|
||||
// These are the generic stylings for forms of any type.
|
||||
// If you're styling something specific to the page editing interface,
|
||||
// it probably ought to go in layouts/page-editor.scss
|
||||
|
||||
form {
|
||||
ul,
|
||||
ul,
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
@ -25,7 +25,7 @@ legend {
|
||||
@include visuallyhidden();
|
||||
}
|
||||
|
||||
label,
|
||||
label,
|
||||
.label {
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
@ -42,10 +42,10 @@ label,
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.richtext,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.richtext,
|
||||
.tagit {
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
@ -70,14 +70,14 @@ select,
|
||||
background-color: $color-input-focus;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&:disabled:hover,
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&:disabled:hover,
|
||||
&[disabled]:hover {
|
||||
background-color: inherit;
|
||||
cursor: default;
|
||||
color: $color-grey-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// select boxes
|
||||
@ -116,11 +116,11 @@ select,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// radio and check boxes
|
||||
input[type=radio],
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
@ -187,13 +187,13 @@ input[type=checkbox]:checked:before {
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
// Core button style
|
||||
// Note that these styles include methods to render buttons the same x-browser, described here:
|
||||
// Core button style
|
||||
// Note that these styles include methods to render buttons the same x-browser, described here:
|
||||
// http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
button {
|
||||
border-radius: 3px;
|
||||
font-family: Open Sans,Arial,sans-serif;
|
||||
@ -269,7 +269,7 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
&.no,
|
||||
&.no,
|
||||
&.serious {
|
||||
background-color: $color-button-no;
|
||||
border: 1px solid $color-button-no;
|
||||
@ -309,7 +309,7 @@ button {
|
||||
width: 2em;
|
||||
line-height: 1.85em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
}
|
||||
@ -404,8 +404,8 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-color: $color-grey-3;
|
||||
border-color: $color-grey-3;
|
||||
@ -413,8 +413,8 @@ button {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.button-secondary:disabled,
|
||||
&.button-secondary[disabled],
|
||||
&.button-secondary:disabled,
|
||||
&.button-secondary[disabled],
|
||||
&.button-secondary.disabled {
|
||||
background-color: $color-white;
|
||||
border-color: $color-grey-3;
|
||||
@ -428,7 +428,7 @@ button {
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
font-size: 0.95em;
|
||||
padding: 0 1.4em;
|
||||
height: 3em;
|
||||
height: 3em;
|
||||
|
||||
&.icon.text-replace {
|
||||
width: 2.2rem;
|
||||
@ -437,7 +437,7 @@ button {
|
||||
&:before {
|
||||
line-height: 2.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-small {
|
||||
&.icon.text-replace {
|
||||
@ -486,9 +486,9 @@ a.button {
|
||||
}
|
||||
|
||||
// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
button {
|
||||
padding: 0 1em;
|
||||
|
||||
@ -502,10 +502,10 @@ button {
|
||||
.button-group {
|
||||
@include clearfix;
|
||||
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
button {
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
@ -528,10 +528,10 @@ button {
|
||||
|
||||
&.button-group-square {
|
||||
&,
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
@ -606,7 +606,7 @@ button {
|
||||
}
|
||||
|
||||
// Other text
|
||||
.help,
|
||||
.help,
|
||||
.error-message {
|
||||
font-size: 0.85em;
|
||||
font-weight: normal;
|
||||
@ -639,9 +639,9 @@ li.focused > .help {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.error input,
|
||||
.error textarea,
|
||||
.error select,
|
||||
.error input,
|
||||
.error textarea,
|
||||
.error select,
|
||||
.error .tagit {
|
||||
border-color: $color-red;
|
||||
background-color: $color-input-error-bg;
|
||||
@ -650,7 +650,7 @@ li.focused > .help {
|
||||
// Layouts for particular kinds of of fields
|
||||
|
||||
// permanently show checkbox/radio help as they have no focus state
|
||||
.boolean_field .help,
|
||||
.boolean_field .help,
|
||||
.radio .help {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -666,7 +666,7 @@ li.focused > .help {
|
||||
.input {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:before,
|
||||
&:after {
|
||||
font-family: wagtail;
|
||||
position: absolute;
|
||||
@ -685,17 +685,17 @@ li.focused > .help {
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type=radio]),
|
||||
input:not([type=checkbox]),
|
||||
input:not([type=submit]),
|
||||
input:not([type=radio]),
|
||||
input:not([type=checkbox]),
|
||||
input:not([type=submit]),
|
||||
input:not([type=button]) {
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
// smaller fields required slight repositioning of icons
|
||||
// smaller fields required slight repositioning of icons
|
||||
&.field-small {
|
||||
.input {
|
||||
&:before,
|
||||
&:before,
|
||||
&:after {
|
||||
font-size: 1.3rem; // REMs are necessary here because IE doesn't treat generated content correctly
|
||||
top: 0.3em;
|
||||
@ -747,6 +747,7 @@ li.focused > .help {
|
||||
display: block;
|
||||
width: auto;
|
||||
float: none;
|
||||
padding-top: 0; // Negates padding added to label for the group of fields as a whole
|
||||
}
|
||||
}
|
||||
|
||||
@ -771,10 +772,10 @@ li.focused > .help {
|
||||
// field sizing and alignment
|
||||
|
||||
.field-small {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.richtext,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.richtext,
|
||||
.tagit {
|
||||
border-radius: 3px;
|
||||
padding: 0.4em 1em;
|
||||
@ -812,17 +813,17 @@ li.inline .field {
|
||||
}
|
||||
|
||||
// solve gutter issues of inline fields
|
||||
ul.inline li:first-child,
|
||||
ul.inline li:first-child,
|
||||
li.inline:first-child {
|
||||
margin-left: -$grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
|
||||
// TODO this chooser style has been made more generic based on two identical methods
|
||||
// for choosing pages and images that were previously included in their own less files
|
||||
// in each app directory (and since deleted). It would be best if an admin 'theme' provided
|
||||
// all the design for a UI in a single place, but should that be a series of overrides to
|
||||
// the css provided from an app? If so, perhaps those two previous less files should be
|
||||
// TODO this chooser style has been made more generic based on two identical methods
|
||||
// for choosing pages and images that were previously included in their own less files
|
||||
// in each app directory (and since deleted). It would be best if an admin 'theme' provided
|
||||
// all the design for a UI in a single place, but should that be a series of overrides to
|
||||
// the css provided from an app? If so, perhaps those two previous less files should be
|
||||
// re-instated and then overriden here? hmm.
|
||||
|
||||
.chooser {
|
||||
@ -839,7 +840,7 @@ li.inline:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.unchosen,
|
||||
.unchosen,
|
||||
.chosen {
|
||||
position: relative;
|
||||
|
||||
@ -864,7 +865,7 @@ li.inline:first-child {
|
||||
.actions {
|
||||
@include clearfix;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin: 0.3em;
|
||||
@ -897,7 +898,7 @@ li.inline:first-child {
|
||||
}
|
||||
|
||||
.page-chooser {
|
||||
.unchosen,
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'b';
|
||||
@ -906,7 +907,7 @@ li.inline:first-child {
|
||||
}
|
||||
|
||||
.snippet-chooser {
|
||||
.unchosen,
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'D';
|
||||
@ -915,7 +916,7 @@ li.inline:first-child {
|
||||
}
|
||||
|
||||
.document-chooser {
|
||||
.unchosen,
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'r';
|
||||
@ -924,7 +925,7 @@ li.inline:first-child {
|
||||
}
|
||||
|
||||
.image-chooser {
|
||||
.unchosen,
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'o';
|
||||
@ -932,7 +933,7 @@ li.inline:first-child {
|
||||
}
|
||||
|
||||
.chosen {
|
||||
padding-left: $thumbnail-width;
|
||||
padding-left: $thumbnail-width;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
@ -1028,17 +1029,17 @@ li.inline:first-child {
|
||||
}
|
||||
|
||||
// Transitions
|
||||
fieldset,
|
||||
input,
|
||||
textarea,
|
||||
fieldset,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
@include transition(background-color 0.2s ease);
|
||||
}
|
||||
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
button {
|
||||
@include transition(background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease);
|
||||
}
|
||||
@ -1053,10 +1054,9 @@ button {
|
||||
padding-top: 1.2em;
|
||||
padding-left: 0;
|
||||
|
||||
.choice_field &,
|
||||
.radio_select &,
|
||||
.model_multiple_choice_field &,
|
||||
.boolean_field &,
|
||||
.choice_field &,
|
||||
.model_choice_field &,
|
||||
.image_field & {
|
||||
padding-top: 0;
|
||||
@ -1086,7 +1086,7 @@ button {
|
||||
|
||||
.field-content {
|
||||
@include column(10, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.field-col {
|
||||
float: left;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user