mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option

Browse Source
This commit is contained in:
Mark Otto
2011-10-09 21:13:26 -07:00
parent 913338f930
commit f61fe3c474
7 changed files with 229 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/patterns.less
+42 -43
View File
@@ -54,54 +54,53 @@
}
// Search Form
form {
float: left;
margin: 5px 0 0 0;
.form-search {
position: relative;
.opacity(100);
margin-top: 5px;
margin-bottom: 0;
input {
background-color: #444;
background-color: rgba(255,255,255,.3);
#font > .sans-serif(13px, normal, 1);
padding: 4px 9px;
color: @white;
color: rgba(255,255,255,.75);
border: 1px solid #111;
.border-radius(4px);
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
color: @grayLighter;
}
&::-webkit-input-placeholder {
color: @grayLighter;
}
// Hover states
&:hover {
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
color: @white;
}
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused {
outline: 0;
background-color: @white;
color: @grayDark;
text-shadow: 0 1px 0 @white;
border: 0;
padding: 5px 10px;
.box-shadow(0 0 3px rgba(0,0,0,.15));
}
}
}
// Todo: remove from v2.0 when ready, added for legacy
form.pull-right {
.pull-right {
float: right;
}
input {
background-color: #444;
background-color: rgba(255,255,255,.3);
#font > .sans-serif(13px, normal, 1);
padding: 4px 9px;
color: @white;
color: rgba(255,255,255,.75);
border: 1px solid #111;
.border-radius(4px);
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
color: @grayLighter;
}
&::-webkit-input-placeholder {
color: @grayLighter;
}
// Hover states
&:hover {
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
color: @white;
}
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused {
outline: 0;
background-color: @white;
color: @grayDark;
text-shadow: 0 1px 0 @white;
border: 0;
padding: 5px 10px;
.box-shadow(0 0 3px rgba(0,0,0,.15));
}
}
}
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
lib/scaffolding.less
+17 -9
View File
@@ -24,20 +24,28 @@ body {
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
.fluid-container {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
> .sidebar {
float: left;
width: 220px;
}
// TODO in v2: rename this and .popover .content to be more specific
> .content {
margin-left: 240px;
}
}
// Sidebars (left and right options)
.fluid-sidebar-left,
.fluid-sidebar-right {
width: 220px;
}
.fluid-sidebar-left { float: left; }
.fluid-sidebar-right { float: right; }
// The main content area
.fluid-content {
margin-left: 240px;
}
// Reverse layout for sidebar on right
.fluid-container.reverse .fluid-content {
margin-left: 0;
margin-right: 240px;
}