updated fluid example to not use floated sidebar and instead use position absolute; not ideal, but it works in most cases

This commit is contained in:
Mark Otto
2011-10-19 23:50:41 -07:00
parent 35793d98e7
commit b62475a22e
5 changed files with 44 additions and 47 deletions

View File

@@ -6,32 +6,31 @@
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
&:before,
&:before,
&:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
&:after {
}
&:after {
clear: both;
}
}
}
// Center-align a block level element
.center-block() {
display: block;
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
height: @height;
width: @width;
height: @height;
width: @width;
}
.square(@size: 5px) {
.size(@size, @size);
.size(@size, @size);
}
// Input placeholder text
@@ -112,27 +111,27 @@
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
-moz-column-gap: @columnGap;
column-gap: @columnGap;
}
@@ -140,11 +139,11 @@
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
// Gradient Bar Colors for buttons and allerts
@@ -210,8 +209,8 @@
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}

View File

@@ -29,7 +29,9 @@ body {
padding-right: 20px;
.clearfix();
> .sidebar {
float: left;
position: absolute;
top: 0;
left: 20px;
width: 220px;
}
// TODO in v2: rename this and .popover .content to be more specific