mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-21 18:54:30 +01:00
resolving deltas between that epic css selector specifity pull request and latest changes here
This commit is contained in:
Mark Otto
parent
650251228b
commit
654cc5ad3f
@ -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">
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user