[YUI] Update for YUI Grids 2.7.0
This commit is contained in:
Brian Johnson
Chris Eppstein
parent
8679a926f1
commit
3d67927ad6
@ -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
|
||||
ol li
|
||||
:list-style decimal outside
|
||||
|
||||
dl
|
||||
:margin 1em
|
||||
:margin-left 2em
|
||||
dd
|
||||
ul li
|
||||
:list-style disc outside
|
||||
|
||||
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
|
||||
@ -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%
|
||||
|
||||
@ -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
|
||||
+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,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
|
||||
+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 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}
|
||||
#{!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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user