diff --git a/frameworks/yui/stylesheets/yui/modules/_base.sass b/frameworks/yui/stylesheets/yui/modules/_base.sass index 7f95b886..f457131d 100644 --- a/frameworks/yui/stylesheets/yui/modules/_base.sass +++ b/frameworks/yui/stylesheets/yui/modules/_base.sass @@ -1,4 +1,7 @@ =yui-base + body + :margin 10px + h1 :font-size 138.5% @@ -11,9 +14,12 @@ h1, h2, h3 :margin 1em 0 - h1,h2, h3, h4, h5, h6, strong + h1,h2, h3, h4, h5, h6, strong, dt :font-weight bold + optgroup + :font-weight normal + abbr, acronym :border-bottom 1px dotted #000 :cursor help @@ -21,40 +27,44 @@ em :font-style italic - blockquote + del + :text-decoration line-through + + blockquote, ul, ol, dl :margin 1em - ul - :margin 1em + ol,ul,dl :margin-left 2em - li - :list-style disc outside - ol - :margin 1em - :margin-left 2em - li - :list-style decimal outside + ol li + :list-style decimal outside - dl - :margin 1em - :margin-left 2em - dd - :margin-left 1em + ul li + :list-style disc outside + + dl dd + :margin-left 1em + + th, td + :border 1px solid #000 + :padding .5em th - :border 1px solid #000 - :padding .5em :font-weight bold :text-align center - td - :border 1px solid #000 - :padding .5em - caption :margin-bottom .5em :text-align center - p, fieldset, table + sup + :vertical-align super + + sub + :vertical-align sub + + p, fieldset, table, pre :margin-bottom 1em + + button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"] + padding: 1px \ No newline at end of file diff --git a/frameworks/yui/stylesheets/yui/modules/_fonts.sass b/frameworks/yui/stylesheets/yui/modules/_fonts.sass index d84284ab..708458ce 100644 --- a/frameworks/yui/stylesheets/yui/modules/_fonts.sass +++ b/frameworks/yui/stylesheets/yui/modules/_fonts.sass @@ -13,7 +13,7 @@ // +font-size(18px) // .big .bigger // +font-size(18px, 16px) -// +// // For more information see the table found at http://developer.yahoo.com/yui/fonts/#fontsize =font-size(!size, !base_font_size = !yui_default_base_font_size) :font-size= percentage(!size / !base_font_size) @@ -28,6 +28,13 @@ :*font-size small :*font x-small + select, + input, + button, + textarea, + button + :font 99% arial,helvetica,clean,sans-serif + table :font-size inherit :font 100% diff --git a/frameworks/yui/stylesheets/yui/modules/_grids.sass b/frameworks/yui/stylesheets/yui/modules/_grids.sass index aa9a9c9d..a90f26b5 100644 --- a/frameworks/yui/stylesheets/yui/modules/_grids.sass +++ b/frameworks/yui/stylesheets/yui/modules/_grids.sass @@ -18,6 +18,7 @@ +yui-document("fluid") #doc4 +yui-document(974px) + /* Section: Preset Template Rules (.yui-t[1-6]) .yui-t1 +yui-two-column-left-template(160px) .yui-t2 @@ -30,22 +31,31 @@ +yui-two-column-right-template(240px) .yui-t6 +yui-two-column-right-template(300px) + .yui-t7 + +yui-one-column-template -=yui-grids-footer - clear: both +=yui-group-clearing + zoom: 1 + &:after + content: "." + display: block + height: 0 + clear: both + visibility: hidden -=yui-grids-body - +clearfix - -=yui-grids-init(!footer = "#ft", !body = "#bd") +=yui-grids-init(!header = "#hd", !footer = "#ft", !body = "#bd") + /* Section: General Rules body :text-align center + @if !header + #{!header} + +yui-group-clearing @if !footer #{!footer} - +yui-grids-footer + +yui-group-clearing @if !body #{!body} - +yui-grids-body + +yui-group-clearing =em-size(!style, !px_size, !base_font_size = !yui_default_base_font_size) :#{!style}= 1em * !px_size / !base_font_size @@ -54,8 +64,8 @@ +em-size(!style, !px_size, !base_font_size) +em-size("*"+!style, !px_size * 39 / 40, !base_font_size) -// All documents must have these styles. Setting a min-width is optional, but recommended. To omit it, pass false as the min_width value. -=yui-document-base(!min_width = 750px) +// All documents must have these styles +=yui-document-base(!min_width = false) :margin auto :text-align left @if !min_width @@ -66,14 +76,12 @@ :_position static =yui-main-block - :position static :float none :width auto - // Creates a fixed width document container // Pass "fluid" for the width to create a document that grows with the width of the browser. -=yui-document(!width, !min_width = 750px, !base_font_size = !yui_default_base_font_size) +=yui-document(!width, !min_width = false, !base_font_size = !yui_default_base_font_size) +yui-document-base(!min_width) @if !width == "fluid" :margin auto 10px @@ -81,85 +89,163 @@ @else +em-size-hacked("width", !width, !base_font_size) -=yui-two-column-left-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = 750px, !base_font_size = !yui_default_base_font_size) +=yui-two-column-left-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size) +yui-document(!document_width, !min_width, !base_font_size) - #{!main_selector} - :width 100% - :float right - +em-size("margin-left", -!column_width - 10px, !base_font_size) - #{!block_selector} - +yui-main-block - +em-size-hacked("margin-left", !column_width, !base_font_size) #{!block_selector} +yui-block-base :float left +em-size-hacked("width", !column_width, !base_font_size) - -=yui-two-column-right-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = 750px, !base_font_size = !yui_default_base_font_size) - +yui-document(!document_width, !min_width, !base_font_size) #{!main_selector} :width 100% - :float left - +em-size("margin-right", -!column_width - 10px, !base_font_size) + :float right + :margin-left -25em #{!block_selector} +yui-main-block - +em-size-hacked("margin-right", !column_width, !base_font_size) + +em-size("margin-left", !column_width + 13px, !base_font_size) + // t3 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research + @if !column_width > 180px + +em-size("*margin-left", (!column_width + 15px) * 39 / 40, !base_font_size) + @else + +em-size("*margin-left", (!column_width + 14px) * 39 / 40, !base_font_size) + +=yui-two-column-right-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size) + +yui-document(!document_width, !min_width, !base_font_size) #{!block_selector} +yui-block-base :float right +em-size-hacked("width", !column_width, !base_font_size) - -=yui-one-column-template(!main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = 750px, !base_font_size = !yui_default_base_font_size) - +yui-document(!document_width, !min_width, !base_font_size) #{!main_selector} :width 100% + :float left + :margin-right -25em + #{!block_selector} + +yui-main-block + +em-size("margin-right", !column_width + 13px, !base_font_size) + // t5 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research + @if !column_width > 180px + +em-size("*margin-right", (!column_width + 15px) * 39 / 40, !base_font_size) + @else + +em-size("*margin-right", (!column_width + 14px) * 39 / 40, !base_font_size) + +=yui-one-column-template(!main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size) + +yui-document(!document_width, !min_width, !base_font_size) + #{!main_selector} #{!block_selector} +yui-main-block :display block :margin 0 0 1em 0 - #{!block_selector} - +yui-block-base =yui-custom-template(!main_selector = "#yui-main", !block_selector = ".yui-b") + #{!block_selector} + +yui-block-base #{!main_selector} :width 100% #{!block_selector} +yui-main-block - #{!block_selector} - +yui-block-base =yui-grid-divisions(!unit = ".yui-u", !g_50_50 = ".yui-g", !g_33_33_33 = ".yui-gb", !g_67_33 = ".yui-gc", !g_33_67 = ".yui-gd", !g_75_25 = ".yui-ge", !g_25_75 = ".yui-gf") + + /* Section: Grids and Nesting Grids + + /* from #yui-main, .yui-g .yui-u .yui-g + #{nest(!g_50_50, !unit, !g_50_50)} + width: 100% + + /* Children generally take half the available space + #{nest(!g_33_33_33, !unit)}, #{nest(!g_50_50, !g_33_33_33, !unit)}, - #{nest(!g_67_33, !unit)}, - #{nest(!g_67_33, !g_50_50)}, - #{nest(!g_33_67, !unit)}, #{nest(!g_33_33_33, !g_50_50)}, #{nest(!g_33_33_33, !g_33_33_33)}, #{nest(!g_33_33_33, !g_67_33)}, #{nest(!g_33_33_33, !g_33_67)}, #{nest(!g_33_33_33, !g_75_25)}, #{nest(!g_33_33_33, !g_25_75)}, - #{nest(!g_33_33_33, !unit)} + #{nest(!g_67_33, !unit)}, + #{nest(!g_67_33, !g_50_50)}, + #{nest(!g_33_67, !unit)} float: left - margin-left: 2% - width: 32% - #{!g_33_33_33} - #{!g_33_33_33}, - #{!g_67_33} - #{!unit} - *margin-left: 1.8% - _margin-left: 4% - - #{nest(!g_50_50, !g_33_33_33, !unit)} - _margin-left: .8% - - #{nest(!g_33_33_33, !unit)} + /* Float units (and sub grids) to the right + #{nest(!g_50_50, !unit)}, + #{nest(!g_50_50, !g_50_50)}, + #{nest(!g_50_50, !g_33_33_33)}, + #{nest(!g_50_50, !g_67_33)}, + #{nest(!g_50_50, !g_33_67)}, + #{nest(!g_50_50, !g_75_25)}, + #{nest(!g_50_50, !g_25_75)}, + #{nest(!g_67_33, !unit)}, + #{nest(!g_33_67, !g_50_50)}, + #{nest(!g_50_50, !g_67_33, !unit)}, + #{nest(!g_75_25, !unit)}, + #{nest(!g_75_25, !g_50_50)}, + #{nest(!g_25_75, !g_50_50)}, + #{nest(!g_25_75, !unit)} float: right - #{nest(!g_33_33_33, "div.first")} - margin-left: 0 - float: left + /* Float units (and sub grids) to the left + #{!g_50_50}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75}, + #{nest(!g_50_50, !g_67_33)}, + #{nest(!g_50_50, !g_75_25)}, + #{nest(!g_67_33, "div.first")} + div.first + float: left + + #{!g_50_50} + #{!unit}, + #{!g_50_50}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75} + width: 49.1% + + #{nest(!g_33_33_33, !unit)}, + #{nest(!g_50_50, !g_33_33_33, !unit)}, + #{nest(!g_33_33_33, !g_50_50)}, + #{nest(!g_33_33_33, !g_33_33_33)}, + #{nest(!g_33_33_33, !g_67_33)}, + #{nest(!g_33_33_33, !g_33_67)}, + #{nest(!g_33_33_33, !g_75_25)}, + #{nest(!g_33_33_33, !g_25_75)}, + #{nest(!g_67_33, !unit)}, + #{nest(!g_67_33, !g_50_50)}, + #{nest(!g_33_67, !unit)} + width: 32% + margin-left: 1.99% + + /* Give IE some extra breathing room for 1/3-based rounding issues + #{nest(!g_33_33_33, !unit)} + *margin-left: 1.9% + *width: 31.9% + + #{nest(!g_50_50, !g_33_33_33)}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67} + div.first + margin-left: 0 + + /* Section: Deep Nesting + #{!g_50_50}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75} + #{!g_50_50} + #{!unit} + width: 49% + *width: 48.1% + *margin-left: 0 + + #{nest(!g_50_50, !g_50_50, !unit)} + width: 48.1% #{!g_50_50}, #{!g_33_33_33} @@ -169,12 +255,32 @@ *width: 32% _width: 31.7% + #{nest(!g_50_50, !g_67_33, "div.first")}, + #{nest(!g_67_33, "div.first")}, + #{nest(!g_33_67, !g_50_50)}, + #{nest(!g_33_67, !unit)} + width: 66% + + #{nest(!g_33_33_33, !g_50_50, "div.first")} + *margin-right: 4% + _margin-right: 1.3% + #{!g_33_33_33} #{!g_67_33}, #{!g_33_67} div.first *margin-right: 0 + #{!g_33_33_33} + #{!g_33_33_33}, + #{!g_67_33} + #{!unit} + *margin-left: 1.8% + _margin-left: 4% + + #{nest(!g_50_50, !g_33_33_33, !unit)} + _margin-left: 1.0% + #{nest(!g_33_33_33, !g_33_67, !unit)} *width: 66% _width: 61.2% @@ -203,52 +309,6 @@ #{!unit} margin: 0 - #{nest(!g_50_50, !unit)}, - #{nest(!g_50_50, !g_50_50)}, - #{nest(!g_50_50, !g_33_33_33)}, - #{nest(!g_50_50, !g_67_33)}, - #{nest(!g_50_50, !g_33_67)}, - #{nest(!g_50_50, !g_75_25)}, - #{nest(!g_50_50, !g_25_75)}, - #{nest(!g_67_33, !unit)}, - #{nest(!g_33_67, !g_50_50)}, - #{nest(!g_50_50, !g_67_33, !unit)}, - #{nest(!g_75_25, !unit)}, - #{nest(!g_75_25, !g_50_50)}, - #{nest(!g_25_75, !g_50_50)}, - #{nest(!g_25_75, !unit)} - float: right - - #{nest(!g_50_50, !g_67_33)}, - #{nest(!g_50_50, !g_75_25)}, - #{!g_50_50}, - #{!g_67_33}, - #{nest(!g_67_33, "div.first")}, - #{!g_33_67}, - #{!g_75_25}, - #{!g_25_75} - div.first - float: left - - #{!g_50_50}, - #{!g_33_33_33}, - #{!g_67_33}, - #{!g_33_67}, - #{!g_75_25}, - #{!g_25_75} - #{!g_50_50} - #{!unit} - width: 49% - *width: 48.1% - *margin-left: 0 - - #{nest(!g_50_50, !g_50_50, "div.first")} - *margin: 0 - - #{nest(!g_33_33_33, !g_50_50, "div.first")} - *margin-right: 4% - _margin-right: 1.3% - #{nest(!g_33_33_33, !g_33_33_33, !unit)} _margin-left: .7% @@ -264,29 +324,6 @@ *width: 48.1% *margin-left: 0 - #{!g_50_50} - #{!unit}, - #{!g_50_50}, - #{!g_33_33_33}, - #{!g_67_33}, - #{!g_33_67}, - #{!g_75_25}, - #{!g_25_75} - width: 49.1% - - #{nest(!g_50_50, !g_33_33_33)}, - #{!g_33_33_33}, - #{!g_67_33}, - #{!g_33_67} - div.first - margin-left: 0 - - #{nest(!g_50_50, !g_67_33, "div.first")}, - #{nest(!g_67_33, "div.first")}, - #{nest(!g_33_67, !g_50_50)}, - #{nest(!g_33_67, !unit)} - width: 66% - #{!g_33_67}, #{nest(!g_33_33_33, !g_33_67)} div.first @@ -300,6 +337,11 @@ #{nest(!g_25_75, "div.first")} width: 24% + #{nest(!g_75_25, "div.first")}, + #{nest(!g_25_75, !g_50_50)}, + #{nest(!g_25_75, !unit)} + width: 74.2% + #{!g_33_33_33} #{!g_75_25}, #{!g_25_75} @@ -312,30 +354,32 @@ div.first float: left - #{nest(!g_75_25, "div.first")}, - #{nest(!g_25_75, !g_50_50)}, - #{nest(!g_25_75, !unit)} - width: 74.2% - + /* Width Accommodation for Nested Contexts #{!g_33_33_33} #{nest(!g_75_25, !unit)}, #{nest(!g_25_75, "div.first")} *width: 24% _width: 20% + /* Width Accommodation for Nested Contexts #{!g_33_33_33} #{nest(!g_75_25, "div.first")}, #{nest(!g_25_75, !unit)} *width: 73.5% _width: 65.5% + /* Patch for GD within GE + #{nest(!g_75_25, "div.first", !g_33_67, !unit)} + width: 65% + + #{nest(!g_75_25, "div.first", !g_33_67, "div.first")} + width: 32% + + /* @group Clearing #{!g_50_50}, #{!g_33_33_33}, #{!g_67_33}, #{!g_33_67}, #{!g_75_25}, #{!g_25_75} - +clearfix - - #{nest(!g_33_33_33, !unit)} - float: left + +yui-group-clearing