Skip to content

B
bootstrap
Commit 2f6f9ec6 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

Merge branch 'misc_css_fixes' of github.com:twitter/bootstrap into misc_css_fixes 

Conflicts:
	lib/forms.less
parents 0e92acd9 34a19915
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 448 additions and 434 deletions
bootstrap-1.0.0.css
View file @ 2f6f9ec6
This diff is collapsed.
bootstrap-1.0.0.min.css
View file @ 2f6f9ec6
This diff is collapsed.
docs/index.html
View file @ 2f6f9ec6
...@@ -361,64 +361,54 @@ ...@@ -361,64 +361,54 @@
<div class="span4 columns"> <div class="span4 columns">
<h4>Unordered <code>&lt;ul&gt;</code></h4> <h4>Unordered <code>&lt;ul&gt;</code></h4>
<ul> <ul>
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit
<ul> <ul>
<li>George Castanza</li> <li>Phasellus iaculis neque</li>
<li>Jerry Seinfeld</li> <li>Purus sodales ultricies</li>
<li>Cosmo Kramer</li> <li>Vestibulum laoreet porttitor sem</li>
<li>Elaine Bennis</li> <li>Ac tristique libero volutpat at</li>
<li>Newman</li>
</ul> </ul>
</li> </li>
<li>John Jacob</li> <li>Faucibus porta lacus fringilla vel</li>
<li>Paul Pierce</li> <li>Aenean sit amet erat nunc</li>
<li>Kevin Garnett</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
<h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4> <h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4>
<ul class="unstyled"> <ul class="unstyled">
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit
<ul> <ul>
<li>George Castanza</li> <li>Phasellus iaculis neque</li>
<li>Jerry Seinfeld</li> <li>Purus sodales ultricies</li>
<li>Cosmo Kramer</li> <li>Vestibulum laoreet porttitor sem</li>
<li>Elaine Bennis</li> <li>Ac tristique libero volutpat at</li>
<li>Newman</li>
</ul> </ul>
</li> </li>
<li>John Jacob</li> <li>Faucibus porta lacus fringilla vel</li>
<li>Paul Pierce</li> <li>Aenean sit amet erat nunc</li>
<li>Kevin Garnett</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
<h4>Ordered <code>&lt;ol&gt;</code></h4> <h4>Ordered <code>&lt;ol&gt;</code></h4>
<ol> <ol>
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit</li>
<ol> <li>Faucibus porta lacus fringilla vel</li>
<li>George Castanza</li> <li>Aenean sit amet erat nunc</li>
<li>Jerry Seinfeld</li> <li>Eget porttitor lorem</li>
<li>Cosmo Kramer</li>
<li>Elaine Bennis</li>
<li>Newman</li>
</ol>
</li>
<li>John Jacob</li>
<li>Paul Pierce</li>
<li>Kevin Garnett</li>
</ol> </ol>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
...@@ -1176,13 +1166,15 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -1176,13 +1166,15 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div> </div>
</div> </div>
</div> </div>
<<<<<<< HEAD
<img class="large-bird" src="assets/img/bird.png" width="220px" height="145px">
=======
<img class="large-bird" src="assets/img/bird.png" width="220px" height="151px"> <img class="large-bird" src="assets/img/bird.png" width="220px" height="151px">
>>>>>>> 842ad01fce710c50dc9c0174ab790f91e66c46b1
</div> </div>
</div> </div>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
</section> </section>
......
lib/forms.less
View file @ 2f6f9ec6
...@@ -25,7 +25,7 @@ form { ...@@ -25,7 +25,7 @@ form {
} }
// Parent element that clears floats and wraps labels and fields together // Parent element that clears floats and wraps labels and fields together
div.clearfix { .clearfix {
margin-bottom: @baseline; margin-bottom: @baseline;
} }
...@@ -114,7 +114,7 @@ form { ...@@ -114,7 +114,7 @@ form {
} }
// Error styles // Error styles
div.error { .error {
background: lighten(@red, 57%); background: lighten(@red, 57%);
padding: 10px 0; padding: 10px 0;
margin: -10px 0 10px; margin: -10px 0 10px;
...@@ -135,8 +135,8 @@ form { ...@@ -135,8 +135,8 @@ form {
.box-shadow(0 0 6px rgba(171,41,32,.5)); .box-shadow(0 0 6px rgba(171,41,32,.5));
} }
} }
div.input-prepend, .input-prepend,
div.input-append { .input-append {
span.add-on { span.add-on {
background: lighten(@red, 50%); background: lighten(@red, 50%);
border-color: @error-text; border-color: @error-text;
...@@ -179,14 +179,14 @@ form { ...@@ -179,14 +179,14 @@ form {
} }
// Actions (the buttons) // Actions (the buttons)
div.actions { .actions {
background: #f5f5f5; background: #f5f5f5;
margin-top: @baseline; margin-top: @baseline;
margin-bottom: @baseline; margin-bottom: @baseline;
padding: (@baseline - 1) 20px @baseline 150px; padding: (@baseline - 1) 20px @baseline 150px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
.border-radius(0 0 3px 3px); .border-radius(0 0 3px 3px);
div.secondary-action { .secondary-action {
float: right; float: right;
a { a {
line-height: 30px; line-height: 30px;
...@@ -217,7 +217,7 @@ div.actions { ...@@ -217,7 +217,7 @@ div.actions {
} }
// Inline Fields (input fields that appear as inline objects // Inline Fields (input fields that appear as inline objects
div.inline-inputs { .inline-inputs {
color: @gray; color: @gray;
span, input[type=text] { span, input[type=text] {
display: inline-block; display: inline-block;
...@@ -234,8 +234,8 @@ div.inline-inputs { ...@@ -234,8 +234,8 @@ div.inline-inputs {
} }
// Allow us to put symbols and text within the input field for a cleaner look // Allow us to put symbols and text within the input field for a cleaner look
div.input-prepend, .input-prepend,
div.input-append { .input-append {
input[type=text] { input[type=text] {
.border-radius(0 3px 3px 0); .border-radius(0 3px 3px 0);
} }
...@@ -262,13 +262,13 @@ div.input-append { ...@@ -262,13 +262,13 @@ div.input-append {
} }
} }
div.input-prepend { .input-prepend {
.add-on { .add-on {
*margin-top: 1px; /* IE6-7 */ *margin-top: 1px; /* IE6-7 */
} }
} }
div.input-append { .input-append {
input[type=text] { input[type=text] {
float: left; float: left;
.border-radius(3px 0 0 3px); .border-radius(3px 0 0 3px);
...@@ -281,7 +281,7 @@ div.input-append { ...@@ -281,7 +281,7 @@ div.input-append {
} }
// Stacked options for forms (radio buttons or checkboxes) // Stacked options for forms (radio buttons or checkboxes)
ul.inputs-list { .inputs-list {
margin: 0 0 5px; margin: 0 0 5px;
width: 100%; width: 100%;
li { li {
...@@ -337,13 +337,13 @@ form.form-stacked { ...@@ -337,13 +337,13 @@ form.form-stacked {
line-height: 20px; line-height: 20px;
padding-top: 0; padding-top: 0;
} }
div.clearfix { .clearfix {
margin-bottom: @baseline / 2; margin-bottom: @baseline / 2;
div.input { div.input {
margin-left: 0; margin-left: 0;
} }
} }
ul.inputs-list { .inputs-list {
margin-bottom: 0; margin-bottom: 0;
li { li {
padding-top: 0; padding-top: 0;
...@@ -353,7 +353,7 @@ form.form-stacked { ...@@ -353,7 +353,7 @@ form.form-stacked {
} }
} }
} }
div.actions { .actions {
margin-left: -20px; margin-left: -20px;
padding-left: 20px; padding-left: 20px;
} }
......
lib/patterns.less
View file @ 2f6f9ec6
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
// ------ // ------
// Topbar for Branding and Nav // Topbar for Branding and Nav
div.topbar { .topbar {
#gradient > .vertical(#333, #222);
height: 40px; height: 40px;
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -81,11 +82,13 @@ div.topbar { ...@@ -81,11 +82,13 @@ div.topbar {
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: @grayLighter; color: @grayLighter;
} }
// 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, &:focus,
&.focused { &.focused {
outline: none; outline: none;
...@@ -270,7 +273,7 @@ div.topbar { ...@@ -270,7 +273,7 @@ div.topbar {
// PAGE HEADERS // PAGE HEADERS
// ------------ // ------------
div.page-header { .page-header {
margin-bottom: @baseline - 1; margin-bottom: @baseline - 1;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
.box-shadow(0 1px 0 rgba(255,255,255,.5)); .box-shadow(0 1px 0 rgba(255,255,255,.5));
...@@ -284,8 +287,7 @@ div.page-header { ...@@ -284,8 +287,7 @@ div.page-header {
// ------------ // ------------
// One-liner alert bars // 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 ;_; // 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)); #gradient > .vertical(transparent, rgba(0,0,0,0.15));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')"; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
...@@ -294,8 +296,8 @@ div.alert-message { ...@@ -294,8 +296,8 @@ div.alert-message {
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 8px 15px; padding: 8px 15px;
color: #fff; color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.3);
border-bottom: 1px solid rgba(0,0,0,.25); border-bottom: 1px solid rgba(0,0,0,.3);
.border-radius(4px); .border-radius(4px);
p { p {
color: #fff; color: #fff;
...@@ -305,35 +307,38 @@ div.alert-message { ...@@ -305,35 +307,38 @@ div.alert-message {
} }
} }
&.error { &.error {
background-color: lighten(@red, 25%); #gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%));
border-bottom-color: lighten(@red, 5%);
} }
&.warning { &.warning {
background-color: lighten(@yellow, 15%); #gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%));
border-bottom-color: @yellow;
} }
&.success { &.success {
background-color: lighten(@green, 15%); #gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%));
border-bottom-color: @green;
} }
&.info { &.info {
background-color: lighten(@blue, 15%); #gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%));
border-bottom-color: @blue;
} }
a.close { .close {
float: right; float: right;
margin-top: -2px; margin-top: -2px;
color: #fff; color: #000;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(50); .opacity(20);
.border-radius(3px);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
.opacity(50); .opacity(40);
} }
} }
} }
// Block-level Alerts // Block-level Alerts
div.block-message { .block-message {
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 14px; padding: 14px;
color: @grayDark; color: @grayDark;
...@@ -354,12 +359,6 @@ div.block-message { ...@@ -354,12 +359,6 @@ div.block-message {
strong { strong {
display: block; 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 { &.error {
background: lighten(@red, 55%); background: lighten(@red, 55%);
border: 1px solid lighten(@red, 50%); border: 1px solid lighten(@red, 50%);
...@@ -383,8 +382,8 @@ div.block-message { ...@@ -383,8 +382,8 @@ div.block-message {
// ---------- // ----------
// Common tab and pill styles // Common tab and pill styles
ul.tabs, .tabs,
ul.pills { .pills {
margin: 0 0 20px; margin: 0 0 20px;
padding: 0; padding: 0;
.clearfix(); .clearfix();
...@@ -398,7 +397,7 @@ ul.pills { ...@@ -398,7 +397,7 @@ ul.pills {
} }
// Basic Tabs // Basic Tabs
ul.tabs { .tabs {
width: 100%; width: 100%;
border-bottom: 1px solid @grayLight; border-bottom: 1px solid @grayLight;
li { li {
...@@ -424,7 +423,7 @@ ul.tabs { ...@@ -424,7 +423,7 @@ ul.tabs {
} }
// Basic pill nav // Basic pill nav
ul.pills { .pills {
li { li {
a { a {
margin: 5px 3px 5px 0; margin: 5px 3px 5px 0;
...@@ -451,16 +450,17 @@ ul.pills { ...@@ -451,16 +450,17 @@ ul.pills {
// PAGINATION // PAGINATION
// ---------- // ----------
div.pagination { .pagination {
height: @baseline * 2; height: @baseline * 2;
margin: @baseline 0; margin: @baseline 0;
ul { ul {
float: left; float: left;
margin: 0; margin: 0;
border: 1px solid #ddd; 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); .border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.075); .box-shadow(0 1px 2px rgba(0,0,0,.05);
li { li {
display: inline; display: inline;
a { a {
...@@ -508,7 +508,7 @@ div.pagination { ...@@ -508,7 +508,7 @@ div.pagination {
// MODALS // MODALS
// ------ // ------
div.modal-backdrop { .modal-backdrop {
background-color: rgba(0,0,0,.5); background-color: rgba(0,0,0,.5);
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -517,7 +517,7 @@ div.modal-backdrop { ...@@ -517,7 +517,7 @@ div.modal-backdrop {
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
} }
div.modal { .modal {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
...@@ -525,10 +525,11 @@ div.modal { ...@@ -525,10 +525,11 @@ div.modal {
width: 560px; width: 560px;
margin: -280px 0 0 -250px; margin: -280px 0 0 -250px;
background-color: @white; background-color: @white;
border: 1px solid #555; border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
.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); .background-clip(padding-box);
.modal-header { .modal-header {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding: 5px 20px; padding: 5px 20px;
...@@ -600,7 +601,7 @@ div.modal { ...@@ -600,7 +601,7 @@ div.modal {
// TWIPSY // TWIPSY
// ------ // ------
div.twipsy { .twipsy {
display: block; display: block;
position: absolute; position: absolute;
visibility: visible; visibility: visible;
...@@ -649,7 +650,8 @@ div.twipsy { ...@@ -649,7 +650,8 @@ div.twipsy {
height: 0; height: 0;
} }
.inner { .inner {
background: #333; background-color: #333;
background-color: rgba(0,0,0,.8);
padding: 3px; padding: 3px;
overflow: hidden; overflow: hidden;
width: 280px; width: 280px;
...@@ -657,7 +659,7 @@ div.twipsy { ...@@ -657,7 +659,7 @@ div.twipsy {
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); .box-shadow(0 3px 7px rgba(0,0,0,0.3));
} }
.title { .title {
background: #f5f5f5; background-color: #f5f5f5;
padding: 9px 15px; padding: 9px 15px;
line-height: 1; line-height: 1;
.border-radius(3px 3px 0 0); .border-radius(3px 3px 0 0);
...@@ -667,7 +669,7 @@ div.twipsy { ...@@ -667,7 +669,7 @@ div.twipsy {
background-color: @white; background-color: @white;
padding: 14px; padding: 14px;
.border-radius(0 0 3px 3px); .border-radius(0 0 3px 3px);
.background-clip(padding); .background-clip(padding-box);
p, ul, ol { p, ul, ol {
margin-bottom: 0; margin-bottom: 0;
} }
......
lib/preboot.less
View file @ 2f6f9ec6
...@@ -224,8 +224,6 @@ ...@@ -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-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: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.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 background-image: linear-gradient(left, @startColor, @endColor); // Le standard
} }
.vertical (@startColor: #555, @endColor: #333) { .vertical (@startColor: #555, @endColor: #333) {
...@@ -237,8 +235,6 @@ ...@@ -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-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: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.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 background-image: linear-gradient(@startColor, @endColor); // The standard
} }
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) { .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
......
lib/tables.less
View file @ 2f6f9ec6
...@@ -11,12 +11,12 @@ table { ...@@ -11,12 +11,12 @@ table {
width: 100%; width: 100%;
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 0; padding: 0;
text-align: left;
border-collapse: separate; border-collapse: separate;
font-size: 13px; font-size: 13px;
th, td { th, td {
padding: 10px 10px 9px; padding: 10px 10px 9px;
line-height: @baseline * .75; line-height: @baseline * .75;
text-align: left;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
...@@ -32,7 +32,7 @@ table { ...@@ -32,7 +32,7 @@ table {
// -------------- // --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds) // Default zebra-stripe styles (alternating gray and transparent backgrounds)
table.zebra-striped { .zebra-striped {
tbody { tbody {
tr:nth-child(odd) td { tr:nth-child(odd) td {
background-color: #f9f9f9; background-color: #f9f9f9;
...@@ -43,7 +43,7 @@ table.zebra-striped { ...@@ -43,7 +43,7 @@ table.zebra-striped {
} }
// Tablesorting styles w/ jQuery plugin // Tablesorting styles w/ jQuery plugin
th.header { .header {
cursor: pointer; cursor: pointer;
&:after { &:after {
content: ""; content: "";
...@@ -55,36 +55,29 @@ table.zebra-striped { ...@@ -55,36 +55,29 @@ table.zebra-striped {
visibility: hidden; visibility: hidden;
} }
} }
// Style the sorted column headers (THs) // Style the sorted column headers (THs)
th.headerSortUp, .headerSortUp,
th.headerSortDown { .headerSortDown {
background-color: rgba(141,192,219,.25); background-color: rgba(141,192,219,.25);
text-shadow: 0 1px 1px rgba(255,255,255,.75); text-shadow: 0 1px 1px rgba(255,255,255,.75);
.border-radius(3px 3px 0 0); .border-radius(3px 3px 0 0);
} }
// Style the ascending (reverse alphabetical) column header // Style the ascending (reverse alphabetical) column header
th.header:hover { .header:hover {
&:after { &:after {
visibility:visible; visibility:visible;
} }
} }
th.actions:hover {
background-image: none;
}
// Style the descending (alphabetical) column header // Style the descending (alphabetical) column header
th.headerSortDown, .headerSortDown,
th.headerSortDown:hover { .headerSortDown:hover {
&:after { &:after {
visibility:visible; visibility:visible;
.opacity(60); .opacity(60);
} }
} }
// Style the ascending (reverse alphabetical) column header // Style the ascending (reverse alphabetical) column header
th.headerSortUp { .headerSortUp {
&:after { &:after {
border-bottom: none; border-bottom: none;
border-left: 4px solid transparent; border-left: 4px solid transparent;
...@@ -95,58 +88,61 @@ table.zebra-striped { ...@@ -95,58 +88,61 @@ table.zebra-striped {
.opacity(60); .opacity(60);
} }
} }
}
table {
// Blue Table Headings // Blue Table Headings
th.blue { .blue {
color: @blue; color: @blue;
border-bottom-color: @blue; border-bottom-color: @blue;
} }
th.headerSortUp.blue, th.headerSortDown.blue { .headerSortUp.blue,
.headerSortDown.blue {
background-color: lighten(@blue, 40%); background-color: lighten(@blue, 40%);
} }
// Green Table Headings // Green Table Headings
th.green { .green {
color: @green; color: @green;
border-bottom-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%); background-color: lighten(@green, 40%);
} }
// Red Table Headings // Red Table Headings
th.red { .red {
color: @red; color: @red;
border-bottom-color: @red; border-bottom-color: @red;
} }
th.headerSortUp.red, th.headerSortDown.red { .headerSortUp.red,
.headerSortDown.red {
background-color: lighten(@red, 50%); background-color: lighten(@red, 50%);
} }
// Yellow Table Headings // Yellow Table Headings
th.yellow { .yellow {
color: @yellow; color: @yellow;
border-bottom-color: @yellow; border-bottom-color: @yellow;
} }
th.headerSortUp.yellow, th.headerSortDown.yellow { .headerSortUp.yellow,
.headerSortDown.yellow {
background-color: lighten(@yellow, 40%); background-color: lighten(@yellow, 40%);
} }
// Orange Table Headings // Orange Table Headings
th.orange { .orange {
color: @orange; color: @orange;
border-bottom-color: @orange; border-bottom-color: @orange;
} }
th.headerSortUp.orange, th.headerSortDown.orange { .headerSortUp.orange,
.headerSortDown.orange {
background-color: lighten(@orange, 40%); background-color: lighten(@orange, 40%);
} }
// Purple Table Headings // Purple Table Headings
th.purple { .purple {
color: @purple; color: @purple;
border-bottom-color: @purple; border-bottom-color: @purple;
} }
th.headerSortUp.purple, th.headerSortDown.purple { .headerSortUp.purple,
.headerSortDown.purple {
background-color: lighten(@purple, 40%); background-color: lighten(@purple, 40%);
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment