mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-02 16:04:07 +03:00
Merge branch 'misc_css_fixes' of github.com:twitter/bootstrap into misc_css_fixes
Conflicts: lib/forms.less
This commit is contained in:
Jacob Thornton
+15
-15
@@ -25,7 +25,7 @@ form {
|
||||
}
|
||||
|
||||
// Parent element that clears floats and wraps labels and fields together
|
||||
div.clearfix {
|
||||
.clearfix {
|
||||
margin-bottom: @baseline;
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@ form {
|
||||
}
|
||||
|
||||
// Error styles
|
||||
div.error {
|
||||
.error {
|
||||
background: lighten(@red, 57%);
|
||||
padding: 10px 0;
|
||||
margin: -10px 0 10px;
|
||||
@@ -135,8 +135,8 @@ form {
|
||||
.box-shadow(0 0 6px rgba(171,41,32,.5));
|
||||
}
|
||||
}
|
||||
div.input-prepend,
|
||||
div.input-append {
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
span.add-on {
|
||||
background: lighten(@red, 50%);
|
||||
border-color: @error-text;
|
||||
@@ -179,14 +179,14 @@ form {
|
||||
}
|
||||
|
||||
// Actions (the buttons)
|
||||
div.actions {
|
||||
.actions {
|
||||
background: #f5f5f5;
|
||||
margin-top: @baseline;
|
||||
margin-bottom: @baseline;
|
||||
padding: (@baseline - 1) 20px @baseline 150px;
|
||||
border-top: 1px solid #ddd;
|
||||
.border-radius(0 0 3px 3px);
|
||||
div.secondary-action {
|
||||
.secondary-action {
|
||||
float: right;
|
||||
a {
|
||||
line-height: 30px;
|
||||
@@ -217,7 +217,7 @@ div.actions {
|
||||
}
|
||||
|
||||
// Inline Fields (input fields that appear as inline objects
|
||||
div.inline-inputs {
|
||||
.inline-inputs {
|
||||
color: @gray;
|
||||
span, input[type=text] {
|
||||
display: inline-block;
|
||||
@@ -234,8 +234,8 @@ div.inline-inputs {
|
||||
}
|
||||
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
div.input-prepend,
|
||||
div.input-append {
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
input[type=text] {
|
||||
.border-radius(0 3px 3px 0);
|
||||
}
|
||||
@@ -262,13 +262,13 @@ div.input-append {
|
||||
}
|
||||
}
|
||||
|
||||
div.input-prepend {
|
||||
.input-prepend {
|
||||
.add-on {
|
||||
*margin-top: 1px; /* IE6-7 */
|
||||
}
|
||||
}
|
||||
|
||||
div.input-append {
|
||||
.input-append {
|
||||
input[type=text] {
|
||||
float: left;
|
||||
.border-radius(3px 0 0 3px);
|
||||
@@ -281,7 +281,7 @@ div.input-append {
|
||||
}
|
||||
|
||||
// Stacked options for forms (radio buttons or checkboxes)
|
||||
ul.inputs-list {
|
||||
.inputs-list {
|
||||
margin: 0 0 5px;
|
||||
width: 100%;
|
||||
li {
|
||||
@@ -337,13 +337,13 @@ form.form-stacked {
|
||||
line-height: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
div.clearfix {
|
||||
.clearfix {
|
||||
margin-bottom: @baseline / 2;
|
||||
div.input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
ul.inputs-list {
|
||||
.inputs-list {
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
padding-top: 0;
|
||||
@@ -353,7 +353,7 @@ form.form-stacked {
|
||||
}
|
||||
}
|
||||
}
|
||||
div.actions {
|
||||
.actions {
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
+40
-38
@@ -7,7 +7,8 @@
|
||||
// ------
|
||||
|
||||
// Topbar for Branding and Nav
|
||||
div.topbar {
|
||||
.topbar {
|
||||
#gradient > .vertical(#333, #222);
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -81,11 +82,13 @@ div.topbar {
|
||||
&::-webkit-input-placeholder {
|
||||
color: @grayLighter;
|
||||
}
|
||||
// Hover states
|
||||
&:hover {
|
||||
background-color: @grayLight;
|
||||
background-color: rgba(255,255,255,.5);
|
||||
color: #fff;
|
||||
}
|
||||
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
||||
&:focus,
|
||||
&.focused {
|
||||
outline: none;
|
||||
@@ -270,7 +273,7 @@ div.topbar {
|
||||
// PAGE HEADERS
|
||||
// ------------
|
||||
|
||||
div.page-header {
|
||||
.page-header {
|
||||
margin-bottom: @baseline - 1;
|
||||
border-bottom: 1px solid #ddd;
|
||||
.box-shadow(0 1px 0 rgba(255,255,255,.5));
|
||||
@@ -284,8 +287,7 @@ div.page-header {
|
||||
// ------------
|
||||
|
||||
// One-liner alert bars
|
||||
div.alert-message {
|
||||
|
||||
.alert-message {
|
||||
// TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_;
|
||||
#gradient > .vertical(transparent, rgba(0,0,0,0.15));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
|
||||
@@ -294,8 +296,8 @@ div.alert-message {
|
||||
margin-bottom: @baseline;
|
||||
padding: 8px 15px;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
border-bottom: 1px solid rgba(0,0,0,.25);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
border-bottom: 1px solid rgba(0,0,0,.3);
|
||||
.border-radius(4px);
|
||||
p {
|
||||
color: #fff;
|
||||
@@ -305,35 +307,38 @@ div.alert-message {
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
background-color: lighten(@red, 25%);
|
||||
#gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%));
|
||||
border-bottom-color: lighten(@red, 5%);
|
||||
}
|
||||
&.warning {
|
||||
background-color: lighten(@yellow, 15%);
|
||||
#gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%));
|
||||
border-bottom-color: @yellow;
|
||||
}
|
||||
&.success {
|
||||
background-color: lighten(@green, 15%);
|
||||
#gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%));
|
||||
border-bottom-color: @green;
|
||||
}
|
||||
&.info {
|
||||
background-color: lighten(@blue, 15%);
|
||||
#gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%));
|
||||
border-bottom-color: @blue;
|
||||
}
|
||||
a.close {
|
||||
.close {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
||||
.opacity(50);
|
||||
.border-radius(3px);
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
.opacity(50);
|
||||
.opacity(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Block-level Alerts
|
||||
div.block-message {
|
||||
.block-message {
|
||||
margin-bottom: @baseline;
|
||||
padding: 14px;
|
||||
color: @grayDark;
|
||||
@@ -354,12 +359,6 @@ div.block-message {
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
a.close {
|
||||
display: block;
|
||||
color: @grayDark;
|
||||
color: rgba(0,0,0,.5);
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
}
|
||||
&.error {
|
||||
background: lighten(@red, 55%);
|
||||
border: 1px solid lighten(@red, 50%);
|
||||
@@ -383,8 +382,8 @@ div.block-message {
|
||||
// ----------
|
||||
|
||||
// Common tab and pill styles
|
||||
ul.tabs,
|
||||
ul.pills {
|
||||
.tabs,
|
||||
.pills {
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
.clearfix();
|
||||
@@ -398,7 +397,7 @@ ul.pills {
|
||||
}
|
||||
|
||||
// Basic Tabs
|
||||
ul.tabs {
|
||||
.tabs {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid @grayLight;
|
||||
li {
|
||||
@@ -424,7 +423,7 @@ ul.tabs {
|
||||
}
|
||||
|
||||
// Basic pill nav
|
||||
ul.pills {
|
||||
.pills {
|
||||
li {
|
||||
a {
|
||||
margin: 5px 3px 5px 0;
|
||||
@@ -451,16 +450,17 @@ ul.pills {
|
||||
// PAGINATION
|
||||
// ----------
|
||||
|
||||
div.pagination {
|
||||
.pagination {
|
||||
height: @baseline * 2;
|
||||
margin: @baseline 0;
|
||||
ul {
|
||||
float: left;
|
||||
margin: 0;
|
||||
border: 1px solid #ddd;
|
||||
border-right: 0\9; /* IE8 and below don't support last child */
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
border-right: 0\9; /* IE8 and below don't support last child. TODO: clean this up; */
|
||||
.border-radius(3px);
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.075);
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.05);
|
||||
li {
|
||||
display: inline;
|
||||
a {
|
||||
@@ -508,7 +508,7 @@ div.pagination {
|
||||
// MODALS
|
||||
// ------
|
||||
|
||||
div.modal-backdrop {
|
||||
.modal-backdrop {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -517,7 +517,7 @@ div.modal-backdrop {
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
div.modal {
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -525,10 +525,11 @@ div.modal {
|
||||
width: 560px;
|
||||
margin: -280px 0 0 -250px;
|
||||
background-color: @white;
|
||||
border: 1px solid #555;
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
.border-radius(6px);
|
||||
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
.background-clip(padding);
|
||||
.background-clip(padding-box);
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 5px 20px;
|
||||
@@ -600,7 +601,7 @@ div.modal {
|
||||
// TWIPSY
|
||||
// ------
|
||||
|
||||
div.twipsy {
|
||||
.twipsy {
|
||||
display: block;
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
@@ -649,7 +650,8 @@ div.twipsy {
|
||||
height: 0;
|
||||
}
|
||||
.inner {
|
||||
background: #333;
|
||||
background-color: #333;
|
||||
background-color: rgba(0,0,0,.8);
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
width: 280px;
|
||||
@@ -657,7 +659,7 @@ div.twipsy {
|
||||
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
}
|
||||
.title {
|
||||
background: #f5f5f5;
|
||||
background-color: #f5f5f5;
|
||||
padding: 9px 15px;
|
||||
line-height: 1;
|
||||
.border-radius(3px 3px 0 0);
|
||||
@@ -667,7 +669,7 @@ div.twipsy {
|
||||
background-color: @white;
|
||||
padding: 14px;
|
||||
.border-radius(0 0 3px 3px);
|
||||
.background-clip(padding);
|
||||
.background-clip(padding-box);
|
||||
p, ul, ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -224,8 +224,6 @@
|
||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
|
||||
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
|
||||
}
|
||||
.vertical (@startColor: #555, @endColor: #333) {
|
||||
@@ -237,8 +235,6 @@
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
|
||||
background-image: linear-gradient(@startColor, @endColor); // The standard
|
||||
}
|
||||
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
|
||||
|
||||
+30
-34
@@ -11,12 +11,12 @@ table {
|
||||
width: 100%;
|
||||
margin-bottom: @baseline;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
border-collapse: separate;
|
||||
font-size: 13px;
|
||||
th, td {
|
||||
padding: 10px 10px 9px;
|
||||
line-height: @baseline * .75;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
@@ -32,7 +32,7 @@ table {
|
||||
// --------------
|
||||
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
table.zebra-striped {
|
||||
.zebra-striped {
|
||||
tbody {
|
||||
tr:nth-child(odd) td {
|
||||
background-color: #f9f9f9;
|
||||
@@ -43,7 +43,7 @@ table.zebra-striped {
|
||||
}
|
||||
|
||||
// Tablesorting styles w/ jQuery plugin
|
||||
th.header {
|
||||
.header {
|
||||
cursor: pointer;
|
||||
&:after {
|
||||
content: "";
|
||||
@@ -55,36 +55,29 @@ table.zebra-striped {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Style the sorted column headers (THs)
|
||||
th.headerSortUp,
|
||||
th.headerSortDown {
|
||||
.headerSortUp,
|
||||
.headerSortDown {
|
||||
background-color: rgba(141,192,219,.25);
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
.border-radius(3px 3px 0 0);
|
||||
}
|
||||
|
||||
// Style the ascending (reverse alphabetical) column header
|
||||
th.header:hover {
|
||||
.header:hover {
|
||||
&:after {
|
||||
visibility:visible;
|
||||
}
|
||||
}
|
||||
th.actions:hover {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
// Style the descending (alphabetical) column header
|
||||
th.headerSortDown,
|
||||
th.headerSortDown:hover {
|
||||
.headerSortDown,
|
||||
.headerSortDown:hover {
|
||||
&:after {
|
||||
visibility:visible;
|
||||
.opacity(60);
|
||||
}
|
||||
}
|
||||
|
||||
// Style the ascending (reverse alphabetical) column header
|
||||
th.headerSortUp {
|
||||
.headerSortUp {
|
||||
&:after {
|
||||
border-bottom: none;
|
||||
border-left: 4px solid transparent;
|
||||
@@ -95,58 +88,61 @@ table.zebra-striped {
|
||||
.opacity(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
// Blue Table Headings
|
||||
th.blue {
|
||||
.blue {
|
||||
color: @blue;
|
||||
border-bottom-color: @blue;
|
||||
}
|
||||
th.headerSortUp.blue, th.headerSortDown.blue {
|
||||
.headerSortUp.blue,
|
||||
.headerSortDown.blue {
|
||||
background-color: lighten(@blue, 40%);
|
||||
}
|
||||
|
||||
// Green Table Headings
|
||||
th.green {
|
||||
.green {
|
||||
color: @green;
|
||||
border-bottom-color: @green;
|
||||
}
|
||||
th.headerSortUp.green, th.headerSortDown.green { // backround color is 20% of border color
|
||||
.headerSortUp.green,
|
||||
.headerSortDown.green {
|
||||
background-color: lighten(@green, 40%);
|
||||
}
|
||||
|
||||
// Red Table Headings
|
||||
th.red {
|
||||
.red {
|
||||
color: @red;
|
||||
border-bottom-color: @red;
|
||||
}
|
||||
th.headerSortUp.red, th.headerSortDown.red {
|
||||
.headerSortUp.red,
|
||||
.headerSortDown.red {
|
||||
background-color: lighten(@red, 50%);
|
||||
}
|
||||
|
||||
// Yellow Table Headings
|
||||
th.yellow {
|
||||
.yellow {
|
||||
color: @yellow;
|
||||
border-bottom-color: @yellow;
|
||||
}
|
||||
th.headerSortUp.yellow, th.headerSortDown.yellow {
|
||||
.headerSortUp.yellow,
|
||||
.headerSortDown.yellow {
|
||||
background-color: lighten(@yellow, 40%);
|
||||
}
|
||||
|
||||
// Orange Table Headings
|
||||
th.orange {
|
||||
.orange {
|
||||
color: @orange;
|
||||
border-bottom-color: @orange;
|
||||
}
|
||||
th.headerSortUp.orange, th.headerSortDown.orange {
|
||||
.headerSortUp.orange,
|
||||
.headerSortDown.orange {
|
||||
background-color: lighten(@orange, 40%);
|
||||
}
|
||||
|
||||
// Purple Table Headings
|
||||
th.purple {
|
||||
.purple {
|
||||
color: @purple;
|
||||
border-bottom-color: @purple;
|
||||
}
|
||||
th.headerSortUp.purple, th.headerSortDown.purple {
|
||||
.headerSortUp.purple,
|
||||
.headerSortDown.purple {
|
||||
background-color: lighten(@purple, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user