From 76ffd836ad69cf945acb5183a0527434dddff567 Mon Sep 17 00:00:00 2001 From: jimi Date: Tue, 17 Mar 2009 21:27:56 -0500 Subject: [PATCH] Split application.css into smaller files --- public/stylesheets/{reset.css => 0_reset.css} | 0 public/stylesheets/1_elements.css | 134 +++++++ public/stylesheets/2_error.css | 54 +++ public/stylesheets/3_layout.css | 169 +++++++++ public/stylesheets/application.css | 349 ------------------ 5 files changed, 357 insertions(+), 349 deletions(-) rename public/stylesheets/{reset.css => 0_reset.css} (100%) create mode 100644 public/stylesheets/1_elements.css create mode 100644 public/stylesheets/2_error.css create mode 100644 public/stylesheets/3_layout.css delete mode 100644 public/stylesheets/application.css diff --git a/public/stylesheets/reset.css b/public/stylesheets/0_reset.css similarity index 100% rename from public/stylesheets/reset.css rename to public/stylesheets/0_reset.css diff --git a/public/stylesheets/1_elements.css b/public/stylesheets/1_elements.css new file mode 100644 index 0000000..5bc4890 --- /dev/null +++ b/public/stylesheets/1_elements.css @@ -0,0 +1,134 @@ +html { + overflow-y: scroll; +} +body { + background-color: #fcfcf8; + font-family: Verdana, sans-serif; + padding: 0.75em; + line-height: 1.333; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; + margin-bottom: 0.5em; +} + +h1 { + font-size: 175%; +} + +h2 { + font-size: 150%; +} + +h3 { + font-size: 125%; +} + +h4 { + font-size: 113%; +} + +h5, h6 { + font-size: 100%; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +a { + color: #338; + text-decoration: none; +} + +a:hover { + color: #33f; + text-decoration: underline; +} + +p { + font-size: 75%; + margin-bottom: 0.375em; +} + +p.nav { + margin-top: 1.5em; + font-size: 56%; + text-transform: uppercase; +} + +table { + table-layout: fixed; +} + +tr { + height: 1em; +} + +fieldset { + border: solid 1px #aaa; + padding: 0 0.5em 0.875em 0.5em; + margin-bottom: 1.25em; +} + +legend { + border: solid 1px #ccc; + font-size: 81%; + font-weight: bold; + padding: 0 0.5em; +} + +fieldset input { + border: none; +} + +fieldset label { + font-size: 56%; + font-weight: bold; + text-transform: uppercase; + margin-top: 0.25em; +} + +fieldset table { + margin-top: 0.5em; +} + +img.calendar_date_select_popup_icon { + margin-left: -4px; +} + +.left { + text-align: left; +} + +.right { + text-align: right; +} + +.center { + text-align: center; +} + +.light { + background-color: #fcfcf8; +} + +.dark { + background-color: #f4f2ee; +} + +.border { + border: 1px solid #ccc; +} + +.clear { + clear: both; + height: 0; + overflow: hidden; +} + diff --git a/public/stylesheets/2_error.css b/public/stylesheets/2_error.css new file mode 100644 index 0000000..42302f6 --- /dev/null +++ b/public/stylesheets/2_error.css @@ -0,0 +1,54 @@ +#flash_notice, #flash_error { + font-size: 75%; + padding: 0.375em 1.5em; + margin: 0.5em 0; +} + +#flash_notice { + background-color: #cfc; + border: solid 1px #6c6; +} + +#flash_error { + background-color: #fcc; + border: solid 1px #c66; +} + +.fieldWithErrors { + display: inline; +} + +#errorExplanation { + width: 25em; + border: 2px solid #cf0000; + padding: 0; + padding-bottom: 0.75em; + margin-bottom: 1.25em; + background-color: #f0f0f0; +} + +#errorExplanation h2 { + text-align: left; + font-weight: bold; + padding: 0.375em 0.375em 0.375em 1.0em; + font-size: 75%; + margin: 0; + background-color: #c00; + color: #fff; +} + +#errorExplanation p { + color: #333; + margin-bottom: 0; + padding: 0.5em; +} + +#errorExplanation ul { + margin: 0.125em 1.5em; +} + +#errorExplanation ul li { + font-size: 75%; + list-style: disc; +} + diff --git a/public/stylesheets/3_layout.css b/public/stylesheets/3_layout.css new file mode 100644 index 0000000..c50d7c3 --- /dev/null +++ b/public/stylesheets/3_layout.css @@ -0,0 +1,169 @@ +#container { + width: 50em; + margin: 0.5em auto; + background-color: #fff; + padding: 0.75em 1.5em; + border: outset 1px; +} + +.listing { + width: 100%; +} + +.listing th, +.listing td { + font-size: 69%; +} + +.listing tr:hover { + background-color: #b4cfe7; + cursor: pointer; +} + +.listing th, +.listing td { + border: 1px solid #fff; + padding: 0.125em 0.375em; +} + +.listing th { + background-color: #ebe9e5; +} + +.listing .number { + width: 2em; + text-align: right; +} + +.listing .name { + width: 6em; +} + +.listing .street { + width: 12em; +} + +.listing .city { + width: 7em; +} + +.listing .state { + width: 1.5em; +} + +.listing .zip { + width: 3em; +} + +.listing .date { + width: 5em; +} + +.listing .payrate { + width: 2.5em; +} + +#employee_data { + width: 18em; + float: left; +} + +#employee_data fieldset { + width: 16.25em; +} + +#employee_data col { + width: 1.625em; +} + +#employee_firstname, +#employee_lastname { + width: 9em; +} + +#employee_street { + width: 19em; +} + +#employee_city { + width: 13em; +} + +#employee_state, +#employee_dl_state { + width: 1.5em; +} + +#employee_zip { + width: 3.5em; +} + +#employee_dob, +#employee_hired, +#employee_dl_expire { + width: 6em; + text-align: center; +} + +#employee_phone, +#employee_ssn { + width: 7em; +} + +#employee_payrate { + width: 3.5em; + text-align: right; +} + +#employee_tax_status, +#employee_dependents { + width: 1.5em; + text-align: center; +} + +#employee_dl_number { + width: 9em; +} + +#employee_truck, +#employee_trailer { + width: 5.5em; +} + +#driver_loads { + float: right; +} + +#driver_loads fieldset { + width: 30em; + height: 32.125em; +} + +#load_detail { + float: left; + width: 50%; +} + +#load_detail fieldset, +#load_expense fieldset { + width: 22.75em; +} + +#load_detail col { + width: 1.625em; +} + +#load_number { + width: 5em; +} + +#load_hub_in, +#load_hub_out { + width: 4em; +} + +#load_start_date, +#load_end_date { + width: 6em; + text-align: left; +} diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css deleted file mode 100644 index eb85ea2..0000000 --- a/public/stylesheets/application.css +++ /dev/null @@ -1,349 +0,0 @@ -html { - overflow-y: scroll; -} -body { - background-color: #fcfcf8; - font-family: Verdana, sans-serif; - padding: 0.75em; - line-height: 1.333; -} - -h1, h2, h3, h4, h5, h6 { - font-weight: bold; - margin-bottom: 0.5em; -} - -h1 { - font-size: 175%; -} - -h2 { - font-size: 150%; -} - -h3 { - font-size: 125%; -} - -h4 { - font-size: 113%; -} - -h5, h6 { - font-size: 100%; -} - -a { - color: #338; - text-decoration: none; -} - -a:hover { - color: #33f; - text-decoration: underline; -} - -p { - font-size: 75%; - margin-bottom: 0.375em; -} - -strong { - font-weight: bold; -} - -em { - font-style: italic; -} - -p.nav { - margin-top: 1.5em; - font-size: 56%; - text-transform: uppercase; -} - -.clear { - clear: both; - height: 0; - overflow: hidden; -} - -#container { - width: 50em; - margin: 0.5em auto; - background-color: #fff; - padding: 0.75em 1.5em; - border: outset 1px; -} - -#flash_notice, #flash_error { - font-size: 75%; - padding: 0.375em 1.5em; - margin: 0.5em 0; -} - -#flash_notice { - background-color: #cfc; - border: solid 1px #6c6; -} - -#flash_error { - background-color: #fcc; - border: solid 1px #c66; -} - -.fieldWithErrors { - display: inline; -} - -#errorExplanation { - width: 25em; - border: 2px solid #cf0000; - padding: 0; - padding-bottom: 0.75em; - margin-bottom: 1.25em; - background-color: #f0f0f0; -} - -#errorExplanation h2 { - text-align: left; - font-weight: bold; - padding: 0.375em 0.375em 0.375em 1.0em; - font-size: 75%; - margin: 0; - background-color: #c00; - color: #fff; -} - -#errorExplanation p { - color: #333; - margin-bottom: 0; - padding: 0.5em; -} - -#errorExplanation ul { - margin: 0.125em 1.5em; -} - -#errorExplanation ul li { - font-size: 75%; - list-style: disc; -} - -.left { - text-align: left; -} - -.right { - text-align: right; -} - -.center { - text-align: center; -} - -.light { - background-color: #fcfcf8; -} - -.dark { - background-color: #f4f2ee; -} - -.listing { - width: 100%; -} - -.listing th, -.listing td { - font-size: 69%; -} - -.listing tr:hover { - background-color: #b4cfe7; - cursor: pointer; -} - -.listing th, -.listing td { - border: 1px solid #fff; - padding: 0.125em 0.375em; -} - -.listing th { - background-color: #ebe9e5; -} - -.listing .number { - width: 2em; - text-align: right; -} - -fieldset .label { - font-size: 56%; - font-weight: bold; - text-transform: uppercase; - padding-left: 0.25em; -} - -fieldset .date { - width: 8em; -} - -fieldset { - width: 18em; - border: solid 1px #aaa; - padding: 0 0.5em 0.875em 0.5em; - margin-bottom: 1.25em; -} - -fieldset.loads { - width: 28.5em; -} - -legend { - color: #000; - border: solid 1px #ccc; - font-size: 81%; - font-weight: bold; - padding: 0 0.5em; -} - -table input { - border: none; -} - -.border { - border: 1px solid #ccc; -} - -.listing .name { - width: 6em; -} - -.listing .street { - width: 12em; -} - -.listing .city { - width: 7em; -} - -.listing .state { - width: 1.5em; -} - -.listing .zip { - width: 3em; -} - -.listing .date { - width: 5em; -} - -.listing .payrate { - width: 2.5em; -} - -fieldset input { - border: none; -} - -fieldset label { - font-size: 56%; - font-weight: bold; - text-transform: uppercase; - margin-top: 0.25em; -} - -fieldset table { - margin-top: 0.5em; - width: 100%; -} - -table { - table-layout: fixed; -} - -tr { - height: 1em; -} - -#employee_data, -#load_detail { - width: 19em; - float: left; -} - -#employee_data col, -#load_detail { - width: 10%; -} - -#employee_firstname, -#employee_lastname { - width: 10em; -} - -#employee_street { - width: 21em; -} - -#employee_city { - width: 12em; -} - -#employee_state, -#employee_dl_state { - width: 1.5em; -} - -#employee_zip { - width: 5.5em; -} - -#employee_dob, -#employee_hired, -#employee_dl_expire { - width: 6em; - text-align: center; -} - -#employee_phone, -#employee_ssn { - width: 8em; -} - -#employee_payrate { - width: 3.5em; - text-align: right; -} - -#employee_tax_status, -#employee_dependents { - width: 1.5em; - text-align: center; -} - -#employee_dl_number { - width: 10em; -} - -#employee_truck, -#employee_trailer { - width: 5.5em; -} - -#driver_loads { - float: right; -} - -#load_number { - width: 8em; -} - -#load_hub_in, -#load_hub_out { - width: 6em; -} -