root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 14 Packages Projects Releases Wiki Activity

resolving deltas between that epic css selector specifity pull request and latest changes here

This commit is contained in:
Mark Otto 2011-08-29 21:24:00 -07:00
parent 650251228b
commit 654cc5ad3f
2 changed files with 160 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/index.html
View File

@ -34,7 +34,7 @@
<!-- Topbar <!-- Topbar
================================================== --> ================================================== -->
<div class="topbar"> <div class="topbar">
<div class="wrapper"> <div class="fill">
<div class="container"> <div class="container">
<h3><a href="#">Bootstrap</a></h3> <h3><a href="#">Bootstrap</a></h3>
<ul class="nav"> <ul class="nav">
@ -906,7 +906,7 @@
<h2>Fixed topbar</h2> <h2>Fixed topbar</h2>
<div class="topbar-wrapper" style="z-index: 5;"> <div class="topbar-wrapper" style="z-index: 5;">
<div class="topbar"> <div class="topbar">
<div class="wrapper"> <div class="fill">
<div class="container"> <div class="container">
<h3><a href="#">Project Name</a></h3> <h3><a href="#">Project Name</a></h3>
<ul class="nav"> <ul class="nav">

322
lib/patterns.less
View File

@ -17,7 +17,7 @@
overflow: visible; overflow: visible;
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
.wrapper { .fill {
background-color: #222; background-color: #222;
#gradient > .vertical(#333, #222); #gradient > .vertical(#333, #222);
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
@ -32,7 +32,7 @@
// Hover and active states // Hover and active states
a:hover, a:hover,
ul li.active a { ul .active a {
background-color: #333; background-color: #333;
background-color: rgba(255,255,255,.05); background-color: rgba(255,255,255,.05);
color: @white; color: @white;
@ -60,44 +60,44 @@
margin: 5px 0 0 0; margin: 5px 0 0 0;
position: relative; position: relative;
.opacity(100); .opacity(100);
input { }
background-color: #444; input {
background-color: rgba(255,255,255,.3); background-color: #444;
#font > .sans-serif(13px, normal, 1); background-color: rgba(255,255,255,.3);
width: 220px; #font > .sans-serif(13px, normal, 1);
padding: 4px 9px; width: 220px;
color: #fff; padding: 4px 9px;
color: rgba(255,255,255,.75); color: #fff;
border: 1px solid #111; color: rgba(255,255,255,.75);
.border-radius(4px); border: 1px solid #111;
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); .border-radius(4px);
.box-shadow(@shadow); @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.transition(none); .box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason // Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder { &:-moz-placeholder {
color: @grayLighter; color: @grayLighter;
} }
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: @grayLighter; color: @grayLighter;
} }
// Hover states // Hover states
&:hover { &:hover {
background-color: @grayLight; background-color: @grayLight;
background-color: rgba(255,255,255,.5); background-color: rgba(255,255,255,.5);
color: #fff; color: #fff;
} }
// Focus states (we use .focused since IE8 and down doesn't support :focus) // Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus, &:focus,
&.focused { &.focused {
outline: none; outline: none;
background-color: #fff; background-color: #fff;
color: @grayDark; color: @grayDark;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
border: 0; border: 0;
padding: 5px 10px; padding: 5px 10px;
.box-shadow(0 0 3px rgba(0,0,0,.15)); .box-shadow(0 0 3px rgba(0,0,0,.15));
}
} }
} }
} }
@ -118,29 +118,29 @@
display: block; display: block;
float: left; float: left;
font-size: 13px; font-size: 13px;
a { }
display: block; a {
float: none; display: block;
padding: 10px 10px 11px; float: none;
line-height: 19px; padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
&:hover {
color: #fff;
text-decoration: none; text-decoration: none;
&:hover {
color: #fff;
text-decoration: none;
}
}
&.active a {
background-color: #222;
background-color: rgba(0,0,0,.5);
} }
} }
.active a {
background-color: #222;
background-color: rgba(0,0,0,.5);
}
// Secondary (floated right) nav in topbar // Secondary (floated right) nav in topbar
&.secondary-nav { &.secondary-nav {
float: right; float: right;
margin-left: 10px; margin-left: 10px;
margin-right: 0; margin-right: 0;
.dropdown .dropdown-menu { .dropdown-menu {
right: 0; right: 0;
} }
} }
@ -221,33 +221,33 @@
float: none; float: none;
display: block; display: block;
background-color: none; background-color: none;
// Links within the dropdown menu }
a { // Links within the dropdown menu
display: block; a {
padding: 4px 15px; display: block;
clear: both; padding: 4px 15px;
font-weight: normal; clear: both;
line-height: 18px; font-weight: normal;
color: @gray; line-height: 18px;
text-shadow: 0 1px 0 #fff; color: @gray;
// Hover state text-shadow: 0 1px 0 #fff;
&:hover { // Hover state
#gradient > .vertical(#eeeeee, #dddddd); &:hover {
color: @grayDark; #gradient > .vertical(#eeeeee, #dddddd);
text-decoration: none; color: @grayDark;
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); text-decoration: none;
.box-shadow(@shadow); @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
} .box-shadow(@shadow);
}
// Dividers (basically an hr) within the dropdown
&.divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid #fff;
} }
} }
// Dividers (basically an hr) within the dropdown
.divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid #fff;
}
} }
// Open state for the dropdown // Open state for the dropdown
.dropdown.open { .dropdown.open {
@ -320,26 +320,24 @@
// Basic pill nav // Basic pill nav
.pills { .pills {
li { a {
a {
margin: 5px 3px 5px 0; margin: 5px 3px 5px 0;
padding: 0 15px; padding: 0 15px;
text-shadow: 0 1px 1px #fff; text-shadow: 0 1px 1px #fff;
line-height: 30px; line-height: 30px;
.border-radius(15px); .border-radius(15px);
&:hover { &:hover {
background: @linkColorHover; background: @linkColorHover;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
&.active a {
background: @linkColor;
color: #fff; color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25); text-shadow: 0 1px 1px rgba(0,0,0,.25);
} }
} }
.active a {
background: @linkColor;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
} }
@ -370,6 +368,7 @@ footer {
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
// PAGE HEADERS // PAGE HEADERS
// ------------ // ------------
@ -382,10 +381,10 @@ footer {
} }
} }
// BUTTON STYLES // BUTTON STYLES
// ------------- // -------------
// Base .btn styles // Base .btn styles
.btn { .btn {
// Button Base // Button Base
@ -424,7 +423,6 @@ footer {
background-image: none; background-image: none;
.opacity(65); .opacity(65);
} }
&:disabled { &:disabled {
// disabled pseudo can't be included with .disabled // disabled pseudo can't be included with .disabled
// def because IE8 and below will drop it ;_; // def because IE8 and below will drop it ;_;
@ -432,7 +430,6 @@ footer {
background-image: none; background-image: none;
.opacity(65); .opacity(65);
} }
&:active { &:active {
@shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow); .box-shadow(@shadow);
@ -445,12 +442,10 @@ footer {
padding: 9px 14px 9px; padding: 9px 14px 9px;
.border-radius(6px); .border-radius(6px);
} }
&.small { &.small {
padding: 7px 9px 7px; padding: 7px 9px 7px;
font-size: 11px; font-size: 11px;
} }
} }
// Help Firefox not be a jerk about adding extra padding to buttons // Help Firefox not be a jerk about adding extra padding to buttons
@ -463,7 +458,6 @@ input[type=submit].btn {
} }
// ERROR STYLES // ERROR STYLES
// ------------ // ------------
@ -558,31 +552,31 @@ input[type=submit].btn {
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15);
.border-radius(3px); .border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05)); .box-shadow(0 1px 2px rgba(0,0,0,.05));
li { }
display: inline; li {
a { display: inline;
float: left; }
padding: 0 14px; a {
line-height: (@baseline * 2) - 2; float: left;
border-right: 1px solid; padding: 0 14px;
border-right-color: #ddd; line-height: (@baseline * 2) - 2;
border-right-color: rgba(0,0,0,.15); border-right: 1px solid;
*border-right-color: #ddd; /* IE6-7 */ border-right-color: #ddd;
text-decoration: none; border-right-color: rgba(0,0,0,.15);
} *border-right-color: #ddd; /* IE6-7 */
a:hover, text-decoration: none;
&.active a { }
background-color: lighten(@blue, 45%); a:hover,
} .active a {
&.disabled a, background-color: lighten(@blue, 45%);
&.disabled a:hover { }
background-color: transparent; .disabled a,
color: @grayLight; .disabled a:hover {
} background-color: transparent;
&.next a { color: @grayLight;
border: 0; }
} .next a {
} border: 0;
} }
} }
@ -628,33 +622,33 @@ input[type=submit].btn {
.border-radius(6px); .border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); .box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box); .background-clip(padding-box);
.modal-header { }
border-bottom: 1px solid #eee; .modal-header {
padding: 5px 20px; border-bottom: 1px solid #eee;
.close { padding: 5px 20px;
position: absolute; .close {
right: 10px; position: absolute;
top: 10px; right: 10px;
color: #999; top: 10px;
line-height:10px; color: #999;
font-size: 18px; line-height:10px;
} font-size: 18px;
} }
.modal-body { }
padding: 20px; .modal-body {
} padding: 20px;
.modal-footer { }
background-color: #f5f5f5; .modal-footer {
padding: 14px 20px 15px; background-color: #f5f5f5;
border-top: 1px solid #ddd; padding: 14px 20px 15px;
.border-radius(0 0 6px 6px); border-top: 1px solid #ddd;
.box-shadow(inset 0 1px 0 #fff); .border-radius(0 0 6px 6px);
.clearfix(); .box-shadow(inset 0 1px 0 #fff);
margin-bottom: 0; .clearfix();
.btn { margin-bottom: 0;
float: right; .btn {
margin-left: 10px; float: right;
} margin-left: 10px;
} }
} }
@ -712,20 +706,20 @@ input[type=submit].btn {
&.left .twipsy-arrow { #popoverArrow > .left(); } &.left .twipsy-arrow { #popoverArrow > .left(); }
&.below .twipsy-arrow { #popoverArrow > .below(); } &.below .twipsy-arrow { #popoverArrow > .below(); }
&.right .twipsy-arrow { #popoverArrow > .right(); } &.right .twipsy-arrow { #popoverArrow > .right(); }
.twipsy-inner { }
padding: 3px 8px; .twipsy-inner {
background-color: #000; padding: 3px 8px;
color: white; background-color: #000;
text-align: center; color: white;
max-width: 200px; text-align: center;
text-decoration: none; max-width: 200px;
.border-radius(4px); text-decoration: none;
} .border-radius(4px);
.twipsy-arrow { }
position: absolute; .twipsy-arrow {
width: 0; position: absolute;
height: 0; width: 0;
} height: 0;
} }