From 9efd185795f71a911a182d868ae1274283968b43 Mon Sep 17 00:00:00 2001 From: Magnus Bergmark Date: Mon, 18 Jan 2010 15:51:01 +0800 Subject: [PATCH] Made CSS rules for fieldset lists more specific This will make conflicts with other rules less likely. Tested in Chromium/Mac TRUNK, Safari 4.0.4 Mac, Firefox 3.5 Mac, IE8, IE8 compat. view without any noticable differences. --- .../formtastic/templates/formtastic.css | 96 +++++++++---------- .../templates/formtastic_changes.css | 2 +- 2 files changed, 49 insertions(+), 49 deletions(-) diff --git a/generators/formtastic/templates/formtastic.css b/generators/formtastic/templates/formtastic.css index a33cb022d..041c78016 100644 --- a/generators/formtastic/templates/formtastic.css +++ b/generators/formtastic/templates/formtastic.css @@ -45,100 +45,100 @@ html[xmlns] form.formtastic fieldset { display: block; } /* INPUT LIs --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li { margin-bottom:1.5em; } +form.formtastic fieldset > ol > li { margin-bottom:1.5em; } /* clearfixing the li's */ -form.formtastic fieldset ol li { display: inline-block; } -form.formtastic fieldset ol li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -html[xmlns] form.formtastic fieldset ol li { display: block; } -* html form.formtastic fieldset ol li { height: 1%; } - -form.formtastic fieldset ol li.required { } -form.formtastic fieldset ol li.optional { } -form.formtastic fieldset ol li.error { } +form.formtastic fieldset > ol > li { display: inline-block; } +form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +html[xmlns] form.formtastic fieldset > ol > li { display: block; } +* html form.formtastic fieldset > ol > li { height: 1%; } + +form.formtastic fieldset > ol > li.required { } +form.formtastic fieldset > ol > li.optional { } +form.formtastic fieldset > ol > li.error { } /* LABELS --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li label { display:block; width:25%; float:left; padding-top:.2em; } -form.formtastic fieldset ol li li label { line-height:100%; padding-top:0; } -form.formtastic fieldset ol li li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;} +form.formtastic fieldset > ol > li label { display:block; width:25%; float:left; padding-top:.2em; } +form.formtastic fieldset > ol > li > li label { line-height:100%; padding-top:0; } +form.formtastic fieldset > ol > li > li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;} /* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets) --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li fieldset { position:relative; } -form.formtastic fieldset ol li fieldset legend { position:absolute; width:25%; padding-top:0.1em; } -form.formtastic fieldset ol li fieldset legend span { position:absolute; } -form.formtastic fieldset ol li fieldset legend.label label { position:absolute; } -form.formtastic fieldset ol li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; } -form.formtastic fieldset ol li fieldset ol li { padding:0; border:0; } +form.formtastic fieldset > ol > li fieldset { position:relative; } +form.formtastic fieldset > ol > li fieldset legend { position:absolute; width:25%; padding-top:0.1em; } +form.formtastic fieldset > ol > li fieldset legend span { position:absolute; } +form.formtastic fieldset > ol > li fieldset legend.label label { position:absolute; } +form.formtastic fieldset > ol > li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; } +form.formtastic fieldset > ol > li fieldset ol li { padding:0; border:0; } /* INLINE HINTS --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li p.inline-hints { color:#666; margin:0.5em 0 0 25%; } +form.formtastic fieldset > ol > li p.inline-hints { color:#666; margin:0.5em 0 0 25%; } /* INLINE ERRORS --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; } -form.formtastic fieldset ol li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; } -form.formtastic fieldset ol li ul.errors li { padding:0; border:none; display:list-item; } +form.formtastic fieldset > ol > li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; } +form.formtastic fieldset > ol > li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; } +form.formtastic fieldset > ol > li ul.errors li { padding:0; border:none; display:list-item; } /* STRING & NUMERIC OVERRIDES --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li.string input { width:74%; } -form.formtastic fieldset ol li.password input { width:74%; } -form.formtastic fieldset ol li.numeric input { width:74%; } +form.formtastic fieldset > ol > li.string input { width:74%; } +form.formtastic fieldset > ol > li.password input { width:74%; } +form.formtastic fieldset > ol > li.numeric input { width:74%; } /* TEXTAREA OVERRIDES --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li.text textarea { width:74%; } +form.formtastic fieldset > ol > li.text textarea { width:74%; } /* HIDDEN OVERRIDES --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li.hidden { display:none; } +form.formtastic fieldset > ol > li.hidden { display:none; } /* BOOLEAN OVERRIDES --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li.boolean label { padding-left:25%; width:auto; } -form.formtastic fieldset ol li.boolean label input { margin:0 0.5em 0 0.2em; } +form.formtastic fieldset > ol > li.boolean label { padding-left:25%; width:auto; } +form.formtastic fieldset > ol > li.boolean label input { margin:0 0.5em 0 0.2em; } /* RADIO OVERRIDES --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li.radio { } -form.formtastic fieldset ol li.radio fieldset ol { margin-bottom:-0.6em; } -form.formtastic fieldset ol li.radio fieldset ol li { margin:0.1em 0 0.5em 0; } -form.formtastic fieldset ol li.radio fieldset ol li label { float:none; width:100%; } -form.formtastic fieldset ol li.radio fieldset ol li label input { margin-right:0.2em; } +form.formtastic fieldset > ol > li.radio { } +form.formtastic fieldset > ol > li.radio fieldset ol { margin-bottom:-0.6em; } +form.formtastic fieldset > ol > li.radio fieldset ol li { margin:0.1em 0 0.5em 0; } +form.formtastic fieldset > ol > li.radio fieldset ol li label { float:none; width:100%; } +form.formtastic fieldset > ol > li.radio fieldset ol li label input { margin-right:0.2em; } /* CHECK BOXES (COLLECTION) OVERRIDES --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li.check_boxes { } -form.formtastic fieldset ol li.check_boxes fieldset ol { margin-bottom:-0.6em; } -form.formtastic fieldset ol li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; } -form.formtastic fieldset ol li.check_boxes fieldset ol li label { float:none; width:100%; } -form.formtastic fieldset ol li.check_boxes fieldset ol li label input { margin-right:0.2em; } +form.formtastic fieldset > ol > li.check_boxes { } +form.formtastic fieldset > ol > li.check_boxes fieldset ol { margin-bottom:-0.6em; } +form.formtastic fieldset > ol > li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; } +form.formtastic fieldset > ol > li.check_boxes fieldset ol li label { float:none; width:100%; } +form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { margin-right:0.2em; } /* DATE & TIME OVERRIDES --------------------------------------------------------------------------------------------------*/ -form.formtastic fieldset ol li.date fieldset ol li, -form.formtastic fieldset ol li.time fieldset ol li, -form.formtastic fieldset ol li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; } +form.formtastic fieldset > ol > li.date fieldset ol li, +form.formtastic fieldset > ol > li.time fieldset ol li, +form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; } -form.formtastic fieldset ol li.date fieldset ol li label, -form.formtastic fieldset ol li.time fieldset ol li label, -form.formtastic fieldset ol li.datetime fieldset ol li label { display:none; } +form.formtastic fieldset > ol > li.date fieldset ol li label, +form.formtastic fieldset > ol > li.time fieldset ol li label, +form.formtastic fieldset > ol > li.datetime fieldset ol li label { display:none; } -form.formtastic fieldset ol li.date fieldset ol li label input, -form.formtastic fieldset ol li.time fieldset ol li label input, -form.formtastic fieldset ol li.datetime fieldset ol li label input { display:inline; margin:0; padding:0; } +form.formtastic fieldset > ol > li.date fieldset ol li label input, +form.formtastic fieldset > ol > li.time fieldset ol li label input, +form.formtastic fieldset > ol > li.datetime fieldset ol li label input { display:inline; margin:0; padding:0; } diff --git a/generators/formtastic/templates/formtastic_changes.css b/generators/formtastic/templates/formtastic_changes.css index 608d4282f..44dc7d1d6 100644 --- a/generators/formtastic/templates/formtastic_changes.css +++ b/generators/formtastic/templates/formtastic_changes.css @@ -5,6 +5,6 @@ This will allow you to update formtastic.css with new releases without clobberin For example, to make the inline hint paragraphs a little darker in color than the standard #666: -form.formtastic fieldset ol li p.inline-hints { color:#333; } +form.formtastic fieldset > ol > li p.inline-hints { color:#333; } --------------------------------------------------------------------------------------------------*/