From 020997190ce0a5477fbaa14bb34c3b11c3a996e3 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Tue, 1 Mar 2016 10:23:31 +0000 Subject: [PATCH] Addressing misalignment of select fields with their label. Added example of radio widget equivalent in styleguide --- wagtail/contrib/wagtailstyleguide/views.py | 1 + .../wagtailadmin/scss/components/_forms.scss | 152 +++++++++--------- 2 files changed, 77 insertions(+), 76 deletions(-) diff --git a/wagtail/contrib/wagtailstyleguide/views.py b/wagtail/contrib/wagtailstyleguide/views.py index 7946e12304..1c74c16758 100644 --- a/wagtail/contrib/wagtailstyleguide/views.py +++ b/wagtail/contrib/wagtailstyleguide/views.py @@ -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) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss index 88a5e81a97..fb78e6b8b7 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss @@ -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;