[YUI] Update for YUI Grids 2.7.0

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
+  ol,ul,dl
-    :margin 1em
     :margin-left 2em
-    li
-      :list-style disc outside
 
-  ol
+  ol li
-    :margin 1em
-    :margin-left 2em
-    li
     :list-style decimal outside
 
-  dl
+  ul li
-    :margin 1em
+    :list-style disc outside
-    :margin-left 2em
+
-    dd
+  dl dd
     :margin-left 1em
 
-  th
+  th, td
     :border 1px solid #000
     :padding .5em
+
+  th
     :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

frameworks/yui/stylesheets/yui/modules/_fonts.sass

@@ -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%

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
+=yui-group-clearing
+  zoom: 1
+  &:after
+    content: "."
+    display: block
+    height: 0
     clear: both
+    visibility: hidden
 
-=yui-grids-body
+=yui-grids-init(!header = "#hd", !footer = "#ft", !body = "#bd")
-  +clearfix
+  /* Section: General Rules
-
-=yui-grids-init(!footer = "#ft", !body = "#bd")
   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.
+// All documents must have these styles
-=yui-document-base(!min_width = 750px)
+=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,86 +89,164 @@
   @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
+    :float right
-    +em-size("margin-right", -!column_width - 10px, !base_font_size)
+    :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}
+  /* Float units (and sub grids) to the right
-    #{!g_33_33_33},
+  #{nest(!g_50_50, !unit)},
-    #{!g_67_33}
+  #{nest(!g_50_50, !g_50_50)},
-      #{!unit}
+  #{nest(!g_50_50, !g_33_33_33)},
-        *margin-left: 1.8%
+  #{nest(!g_50_50, !g_67_33)},
-        _margin-left: 4%
+  #{nest(!g_50_50, !g_33_67)},
-
+  #{nest(!g_50_50, !g_75_25)},
-  #{nest(!g_50_50, !g_33_33_33, !unit)}
+  #{nest(!g_50_50, !g_25_75)},
-    _margin-left: .8%
+  #{nest(!g_67_33, !unit)},
-
+  #{nest(!g_33_67, !g_50_50)},
-  #{nest(!g_33_33_33, !unit)}
+  #{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")}
+  /* Float units (and sub grids) to the left
-    margin-left: 0
+  #{!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}
     #{!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")},
+  /* Width Accommodation for Nested Contexts
-  #{nest(!g_25_75, !g_50_50)},
-  #{nest(!g_25_75, !unit)}
-    width: 74.2%
-
   #{!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
+    +yui-group-clearing
-
-  #{nest(!g_33_33_33, !unit)}
-    float: left