From 6ed8d3f7c8b98f73ac461a7a45798b8f1ffb173b Mon Sep 17 00:00:00 2001 From: cash Date: Thu, 2 Dec 2010 00:49:20 +0000 Subject: Refs #2317 pulled a few sections of CSS out to try out granular CSS git-svn-id: http://code.elgg.org/elgg/trunk@7491 36083f99-b078-4883-b0ff-0f9b5a30f544 --- views/default/css/admin.php | 3 + views/default/css/components/OOCSS_LICENSE | 30 +++ views/default/css/components/forms.php | 258 +++++++++++++++++++++ views/default/css/components/grid.php | 41 ++++ views/default/css/components/heading.php | 11 + views/default/css/components/reset.php | 70 ++++++ views/default/css/components/spacing.php | 81 +++++++ views/default/css/components/typography.php | 11 + views/default/css/screen.php | 334 ++-------------------------- 9 files changed, 518 insertions(+), 321 deletions(-) create mode 100644 views/default/css/components/OOCSS_LICENSE create mode 100644 views/default/css/components/forms.php create mode 100644 views/default/css/components/grid.php create mode 100644 views/default/css/components/heading.php create mode 100644 views/default/css/components/reset.php create mode 100644 views/default/css/components/spacing.php create mode 100644 views/default/css/components/typography.php (limited to 'views/default') diff --git a/views/default/css/admin.php b/views/default/css/admin.php index b99325898..1cc97f54c 100644 --- a/views/default/css/admin.php +++ b/views/default/css/admin.php @@ -1,6 +1,9 @@ diff --git a/views/default/css/components/OOCSS_LICENSE b/views/default/css/components/OOCSS_LICENSE new file mode 100644 index 000000000..c09c45873 --- /dev/null +++ b/views/default/css/components/OOCSS_LICENSE @@ -0,0 +1,30 @@ +Software License Agreement (BSD License) + +Copyright (c) 2009, Nicole Sullivan. +All rights reserved. + +Redistribution and use of this software in source and binary forms, with or without modification, are +permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above + copyright notice, this list of conditions and the + following disclaimer. + +* Redistributions in binary form must reproduce the above + copyright notice, this list of conditions and the + following disclaimer in the documentation and/or other + materials provided with the distribution. + +* Neither the name of Nicole Sullivan nor the names of its + contributors may be used to endorse or promote products + derived from this software without specific prior + written permission of Nicole Sullivan. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED +WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A +PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR +TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF +ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file diff --git a/views/default/css/components/forms.php b/views/default/css/components/forms.php new file mode 100644 index 000000000..344ae7d86 --- /dev/null +++ b/views/default/css/components/forms.php @@ -0,0 +1,258 @@ + +/* *************************************** + Form Elements +*************************************** */ +/* default elgg core input field classes */ +.input_text, +.input_tags, +.input_url, +.input_textarea { + width:98%; +} +.input_access { + margin:5px 0 0 0; +} +.input_password { + width:200px; +} +.input_textarea { + height: 200px; + width:718px; +} +input[type="checkbox"], +input.input_radio { + margin:0 3px 0 0; + padding:0; + border:none; +} +label { + font-weight: bold; + color:#333333; + font-size: 110%; +} +input { + font: 120% Arial, Helvetica, sans-serif; + padding: 5px; + border: 1px solid #cccccc; + color:#666666; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; +} +textarea { + font: 120% Arial, Helvetica, sans-serif; + border: solid 1px #cccccc; + padding: 5px; + color:#666666; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; +} +textarea:focus, +input[type="text"]:focus { + border: solid 1px #4690d6; + background: #e4ecf5; + color:#333333; +} +.input_textarea.monospace { + font-family:Monaco,"Courier New",Courier,monospace; + font-size:13px; +} +a.longtext_control { + float:right; + margin-left:14px; +} +.submit_button { + font-size: 14px; + font-weight: bold; + color: white; + text-shadow:1px 1px 0px black; + text-decoration:none; + border: 1px solid #4690d6; + background-color:#4690d6; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + width: auto; + padding: 2px 4px; + margin:0 10px 10px 0; + cursor: pointer; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); +} +.submit_button:hover { + color: white; + border-color: #0054a7; + text-decoration:none; + background-color:#0054a7; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; +} +.submit_button.disabled { + background-color:#999999; + border-color:#999999; + color:#dedede; +} +.submit_button.disabled:hover { + background-color:#999999; + border-color:#999999; + color:#dedede; +} +input[type="password"]:focus { + border: solid 1px #4690d6; + background-color: #e4ecf5; + color:#333333; +} +input[type="submit"] { + font-size: 14px; + font-weight: bold; + color: white; + text-shadow:1px 1px 0px black; + text-decoration:none; + border: 1px solid #4690d6; + background-color:#4690d6; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + width: auto; + padding: 2px 4px; + margin:10px 0 10px 0; + cursor: pointer; + -moz-outline-style: none; + outline: none; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); +} +input[type="submit"]:hover { + border-color: #0054a7; + text-decoration:none; + background-color:#0054a7; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; +} +.cancel_button { + font-size: 14px; + font-weight: bold; + text-decoration:none; + color: #333333; + background-color:#dddddd; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; + border: 1px solid #999999; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + width: auto; + padding: 2px 4px; + margin:10px 0 10px 10px; + cursor: pointer; +} +.cancel_button:hover { + background-color: #999999; + background-position: left 10px; + text-decoration:none; + color:white; +} +input.action_button, +a.action_button { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + background-color:#cccccc; + background-image: url(_graphics/button_background.gif); + background-repeat: repeat-x; + background-position: 0 0; + border:1px solid #999999; + color:#333333; + padding:2px 15px 2px 15px; + text-align:center; + font-weight:bold; + text-decoration:none; + text-shadow:0 1px 0 white; + cursor:pointer; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} +input.action_button:hover, +a.action_button:hover, +input.action_button:focus, +a.action_button:focus { + background-position:0 -15px; + background-image: url(_graphics/button_background.gif); + background-repeat: repeat-x; + color:#111111; + text-decoration: none; + background-color:#cccccc; + border:1px solid #999999; +} +.action_button:active { + background-image:none; +} +.action_button.disabled { + color:#999999; + padding:2px 7px 2px 7px; +} +.action_button.disabled:hover { + background-position:0 -15px; + color:#111111; + border:1px solid #999999; +} +.action_button.disabled:active { + background-image:none; +} +.action_button.download { + padding: 5px 9px 5px 6px; +} +.action_button.download:hover { + +} +.action_button.download img { + margin-right:6px; + position:relative; + top:5px; +} +.action_button.small { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + width: auto; + height:8px; + padding: 4px; + font-size: 0.9em; + line-height: 0.6em; +} +.action_button.small:hover { + background-color: #4690d6; + background-image: none; + border-color: #4690d6; + color:white; + text-shadow:0 -1px 0 black; +} +/* small round delete button */ +.delete_button { + width:14px; + height:14px; + margin:0; + float:right; +} +.delete_button a { + display:block; + cursor: pointer; + width:14px; + height:14px; + background: url("_graphics/elgg_sprites.png") no-repeat -200px top; + text-indent: -9000px; + text-align: left; +} +.delete_button a:hover { + background-position: -200px -16px; +} diff --git a/views/default/css/components/grid.php b/views/default/css/components/grid.php new file mode 100644 index 000000000..d990a34ed --- /dev/null +++ b/views/default/css/components/grid.php @@ -0,0 +1,41 @@ + +/* *************************************** + GRID +*************************************** */ +.elgg-col-1of1 { + float: none; +} +.elgg-col-1of2 { + width: 50%; +} +.elgg-col-1of3 { + width: 33.3%; +} +.elgg-col-2of3 { + width: 66.6%; +} +.elgg-col-1of4 { + width: 25%; +} +.elgg-col-3of4 { + width: 75%; +} +.elgg-col-1of5 { + width: 20%; +} +.elgg-col-2of5 { + width: 40%; +} +.elgg-col-3of5 { + width: 60%; +} +.elgg-col-4of5 { + width: 80%; +} diff --git a/views/default/css/components/heading.php b/views/default/css/components/heading.php new file mode 100644 index 000000000..206264f03 --- /dev/null +++ b/views/default/css/components/heading.php @@ -0,0 +1,11 @@ + +/* *************************************** + Headings +*************************************** */ diff --git a/views/default/css/components/reset.php b/views/default/css/components/reset.php new file mode 100644 index 000000000..8abe8119e --- /dev/null +++ b/views/default/css/components/reset.php @@ -0,0 +1,70 @@ + +/* *************************************** + RESET CSS +*************************************** */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} +img { + border-width:0; + border-color:transparent; +} +:focus { + outline:0 none; + -moz-outline-style: none; +} +ol, ul { + /* list-style:none outside none; */ + margin: 0 0 10px 0; + padding-left: 20px; +} +em, i { + font-style:italic; +} +ins { + text-decoration:none; +} +del { + text-decoration:line-through; +} +strong { + font-weight:bold; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: top; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} diff --git a/views/default/css/components/spacing.php b/views/default/css/components/spacing.php new file mode 100644 index 000000000..d65e2fc09 --- /dev/null +++ b/views/default/css/components/spacing.php @@ -0,0 +1,81 @@ + +/* *************************************** + Spacing (from OOCSS) +*************************************** */ +/** +* Spacing classes +* Should be used to modify the default spacing between objects (not between nodes of the same object) +* Please use judiciously. You want to be using defaults most of the time, these are exceptions! +* +*/ +/* ====== Default spacing ====== */ +/* comment out for now +h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote, .media {margin:10px;} +h1, h2, h3, h4, h5, h6, img{padding-bottom:0px;} +pre{margin: 10px;} +table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;} +*/ + +.pan{padding:0} +.pas{padding:5px} +.pam{padding:10px} +.pal{padding:20px} +.ptn{padding-top:0} +.pts{padding-top:5px} +.ptm{padding-top:10px} +.ptl{padding-top:20px} +.prn{padding-right:0} +.prs{padding-right:5px} +.prm{padding-right:10px} +.prl{padding-right:20px} +.pbn{padding-bottom:0} +.pbs{padding-bottom:5px} +.pbm{padding-bottom:10px} +.pbl{padding-bottom:20px} +.pln{padding-left:0} +.pls{padding-left:5px} +.plm{padding-left:10px} +.pll{padding-left:20px} +.phn{padding-left:0;padding-right:0} +.phs{padding-left:5px;padding-right:5px} +.phm{padding-left:10px;padding-right:10px} +.phl{padding-left:20px;padding-right:20px} +.pvn{padding-top:0;padding-bottom:0} +.pvs{padding-top:5px;padding-bottom:5px} +.pvm{padding-top:10px;padding-bottom:10px} +.pvl{padding-top:20px;padding-bottom:20px} +.man{margin:0} +.mas{margin:5px} +.mam{margin:10px} +.mal{margin:20px} +.mtn{margin-top:0} +.mts{margin-top:5px} +.mtm{margin-top:10px} +.mtl{margin-top:20px} +.mrn{margin-right:0} +.mrs{margin-right:5px} +.mrm{margin-right:10px} +.mrl{margin-right:20px} +.mbn{margin-bottom:0} +.mbs{margin-bottom:5px} +.mbm{margin-bottom:10px} +.mbl{margin-bottom:20px} +.mln{margin-left:0} +.mls{margin-left:5px} +.mlm{margin-left:10px} +.mll{margin-left:20px} +.mhn{margin-left:0;margin-right:0} +.mhs{margin-left:5px;margin-right:5px} +.mhm{margin-left:10px;margin-right:10px} +.mhl{margin-left:20px;margin-right:20px} +.mvn{margin-top:0;margin-bottom:0} +.mvs{margin-top:5px;margin-bottom:5px} +.mvm{margin-top:10px;margin-bottom:10px} +.mvl{margin-top:20px;margin-bottom:20px} diff --git a/views/default/css/components/typography.php b/views/default/css/components/typography.php new file mode 100644 index 000000000..869b74bf8 --- /dev/null +++ b/views/default/css/components/typography.php @@ -0,0 +1,11 @@ + +/* *************************************** + Typography +*************************************** */ diff --git a/views/default/css/screen.php b/views/default/css/screen.php index 46e40c6cb..9221d810f 100644 --- a/views/default/css/screen.php +++ b/views/default/css/screen.php @@ -2,15 +2,26 @@ /** * Elgg primary CSS view * + * @package Elgg.Core + * @subpackage UI */ // check if there is a theme overriding the old css view and use it, if it exists $old_css_view = elgg_get_view_location('css'); if ($old_css_view != "{$CONFIG->viewpath}") { - echo elgg_view('css'); + echo elgg_view('css', $vars); return true; } + +echo elgg_view('css/components/reset', $vars); +echo elgg_view('css/components/grid', $vars); +echo elgg_view('css/components/typography', $vars); +echo elgg_view('css/components/spacing', $vars); +echo elgg_view('css/components/heading', $vars); +echo elgg_view('css/components/forms', $vars); + + ?> /** @@ -53,72 +64,6 @@ if ($old_css_view != "{$CONFIG->viewpath}") { -/* *************************************** - RESET CSS -*************************************** */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; -} -img { - border-width:0; - border-color:transparent; -} -:focus { - outline:0 none; - -moz-outline-style: none; -} -ol, ul { - /* list-style:none outside none; */ - margin: 0 0 10px 0; - padding-left: 20px; -} -em, i { - font-style:italic; -} -ins { - text-decoration:none; -} -del { - text-decoration:line-through; -} -strong { - font-weight:bold; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -caption, th, td { - text-align: left; - font-weight: normal; - vertical-align: top; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ""; -} -blockquote, q { - quotes: "" ""; -} - - - - /* *************************************** BASICS *************************************** */ @@ -1322,259 +1267,6 @@ a.widget_edit_button:hover, a.widget_delete_button:hover { width:300px; } - -/* *************************************** - GENERAL FORM ELEMENTS -*************************************** */ -/* default elgg core input field classes */ -.input_text, -.input_tags, -.input_url, -.input_textarea { - width:98%; -} -.input_access { - margin:5px 0 0 0; -} -.input_password { - width:200px; -} -.input_textarea { - height: 200px; - width:718px; -} -input[type="checkbox"], -input.input_radio { - margin:0 3px 0 0; - padding:0; - border:none; -} -label { - font-weight: bold; - color:#333333; - font-size: 110%; -} -input { - font: 120% Arial, Helvetica, sans-serif; - padding: 5px; - border: 1px solid #cccccc; - color:#666666; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; -} -textarea { - font: 120% Arial, Helvetica, sans-serif; - border: solid 1px #cccccc; - padding: 5px; - color:#666666; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; -} -textarea:focus, -input[type="text"]:focus { - border: solid 1px #4690d6; - background: #e4ecf5; - color:#333333; -} -.input_textarea.monospace { - font-family:Monaco,"Courier New",Courier,monospace; - font-size:13px; -} -a.longtext_control { - float:right; - margin-left:14px; -} -.submit_button { - font-size: 14px; - font-weight: bold; - color: white; - text-shadow:1px 1px 0px black; - text-decoration:none; - border: 1px solid #4690d6; - background-color:#4690d6; - background-image: url(_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - width: auto; - padding: 2px 4px; - margin:0 10px 10px 0; - cursor: pointer; - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); -} -.submit_button:hover { - color: white; - border-color: #0054a7; - text-decoration:none; - background-color:#0054a7; - background-image: url(_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; -} -.submit_button.disabled { - background-color:#999999; - border-color:#999999; - color:#dedede; -} -.submit_button.disabled:hover { - background-color:#999999; - border-color:#999999; - color:#dedede; -} -input[type="password"]:focus { - border: solid 1px #4690d6; - background-color: #e4ecf5; - color:#333333; -} -input[type="submit"] { - font-size: 14px; - font-weight: bold; - color: white; - text-shadow:1px 1px 0px black; - text-decoration:none; - border: 1px solid #4690d6; - background-color:#4690d6; - background-image: url(_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - width: auto; - padding: 2px 4px; - margin:10px 0 10px 0; - cursor: pointer; - -moz-outline-style: none; - outline: none; - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); -} -input[type="submit"]:hover { - border-color: #0054a7; - text-decoration:none; - background-color:#0054a7; - background-image: url(_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; -} -.cancel_button { - font-size: 14px; - font-weight: bold; - text-decoration:none; - color: #333333; - background-color:#dddddd; - background-image: url(_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; - border: 1px solid #999999; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - width: auto; - padding: 2px 4px; - margin:10px 0 10px 10px; - cursor: pointer; -} -.cancel_button:hover { - background-color: #999999; - background-position: left 10px; - text-decoration:none; - color:white; -} -input.action_button, -a.action_button { - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - background-color:#cccccc; - background-image: url(_graphics/button_background.gif); - background-repeat: repeat-x; - background-position: 0 0; - border:1px solid #999999; - color:#333333; - padding:2px 15px 2px 15px; - text-align:center; - font-weight:bold; - text-decoration:none; - text-shadow:0 1px 0 white; - cursor:pointer; - -webkit-box-shadow: none; - -moz-box-shadow: none; -} -input.action_button:hover, -a.action_button:hover, -input.action_button:focus, -a.action_button:focus { - background-position:0 -15px; - background-image: url(_graphics/button_background.gif); - background-repeat: repeat-x; - color:#111111; - text-decoration: none; - background-color:#cccccc; - border:1px solid #999999; -} -.action_button:active { - background-image:none; -} -.action_button.disabled { - color:#999999; - padding:2px 7px 2px 7px; -} -.action_button.disabled:hover { - background-position:0 -15px; - color:#111111; - border:1px solid #999999; -} -.action_button.disabled:active { - background-image:none; -} -.action_button.download { - padding: 5px 9px 5px 6px; -} -.action_button.download:hover { - -} -.action_button.download img { - margin-right:6px; - position:relative; - top:5px; -} -.action_button.small { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - width: auto; - height:8px; - padding: 4px; - font-size: 0.9em; - line-height: 0.6em; -} -.action_button.small:hover { - background-color: #4690d6; - background-image: none; - border-color: #4690d6; - color:white; - text-shadow:0 -1px 0 black; -} -/* small round delete button */ -.delete_button { - width:14px; - height:14px; - margin:0; - float:right; -} -.delete_button a { - display:block; - cursor: pointer; - width:14px; - height:14px; - background: url("_graphics/elgg_sprites.png") no-repeat -200px top; - text-indent: -9000px; - text-align: left; -} -.delete_button a:hover { - background-position: -200px -16px; -} - - /* *************************************** FRIENDS PICKER *************************************** */ @@ -1803,4 +1495,4 @@ p.elgg_likes_owner {