mirror of
https://github.com/twbs/bootstrap-sass.git
synced 2022-11-09 12:27:02 -05:00
Update CSS with 1.4.0 changes
This commit is contained in:
Thomas McDonald
parent
3a0d75c3cb
commit
77429477d2
6 changed files with 205 additions and 130 deletions
4
vendor/assets/stylesheets/bootstrap.css.scss
vendored
4
vendor/assets/stylesheets/bootstrap.css.scss
vendored
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Bootstrap v1.3.0
|
||||
* Bootstrap v1.4.0
|
||||
*
|
||||
* Copyright 2011 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Converted to SASS by Thomas McDonald
|
||||
*
|
||||
* Date: Fri Sep 16 11:24:41 PDT 2011
|
||||
* Date: Friday 4 November, 2011
|
||||
*/
|
||||
|
||||
@import "bootstrap/reset";
|
||||
|
|
|
|||
|
|
@ -69,7 +69,12 @@ input, textarea, select, .uneditable-input {
|
|||
@include border-radius(3px);
|
||||
}
|
||||
|
||||
/* mini reset for non-html5 file types */
|
||||
// remove padding from select
|
||||
select {
|
||||
padding: initial;
|
||||
}
|
||||
|
||||
// mini reset for non-html5 file types
|
||||
input[type=checkbox], input[type=radio] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
|
@ -95,6 +100,7 @@ input[type=button], input[type=reset], input[type=submit] {
|
|||
|
||||
select, input[type=file] {
|
||||
height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
|
||||
height: auto; // reset for IE7. bah.
|
||||
line-height: $baseline * 1.5;
|
||||
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
||||
}
|
||||
|
|
@ -102,6 +108,7 @@ select, input[type=file] {
|
|||
// Make multiple select elements height not fixed
|
||||
select[multiple] {
|
||||
height: inherit;
|
||||
background-color: $white; // Fixes Chromium bug of unreadable items
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -142,32 +149,40 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
|
|||
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
|
||||
}
|
||||
|
||||
// Error styles
|
||||
form div.clearfix.error {
|
||||
background: lighten($red, 57%);
|
||||
padding: 10px 0;
|
||||
margin: -10px 0 10px;
|
||||
@include border-radius(4px);
|
||||
$error-text: desaturate(lighten($red, 25%), 25%);
|
||||
> label, span.help-inline, span.help-block {
|
||||
color: $red;
|
||||
// FORM FIELD FEEDBACK STATES
|
||||
// --------------------------
|
||||
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
||||
// Set the text color
|
||||
> label, .help-block, .help-inline {
|
||||
color: $textColor;
|
||||
}
|
||||
input, textarea {
|
||||
border-color: $error-text;
|
||||
@include box-shadow(0 0 3px rgba(171,41,32,.25));
|
||||
color: $textColor;
|
||||
border-color: $borderColor;
|
||||
&:focus {
|
||||
border-color: darken($error-text, 10%);
|
||||
@include box-shadow(0 0 6px rgba(171,41,32,.5));
|
||||
border-color: darken($borderColor, 10%);
|
||||
@include box-shadow(0 0 6px lighten($borderColor, 10%));
|
||||
}
|
||||
}
|
||||
.input-prepend, .input-append {
|
||||
span.add-on {
|
||||
background: lighten($red, 50%);
|
||||
border-color: $error-text;
|
||||
color: darken($error-text, 10%);
|
||||
}
|
||||
// Give a small background color for input-prepend/-append
|
||||
.input-prepend .add-on, .input-append .add-on {
|
||||
color: $textColor;
|
||||
background-color: $backgroundColor;
|
||||
border-color: $borderColor;
|
||||
}
|
||||
}
|
||||
// Error
|
||||
form .clearfix.error {
|
||||
@include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
|
||||
}
|
||||
// Warning
|
||||
form .clearfix.warning {
|
||||
@include formFieldState(#c09853, #ccae64, lighten(#ccae64, 5%));
|
||||
}
|
||||
// Success
|
||||
form .clearfix.success {
|
||||
@include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
|
||||
}
|
||||
|
||||
// Form element sizes
|
||||
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
|
||||
|
|
@ -198,10 +213,10 @@ textarea.xxlarge {
|
|||
@mixin formColumns($columnSpan: 1) {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
|
||||
width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
|
||||
margin-left: 0;
|
||||
}
|
||||
input, textarea, select {
|
||||
input, textarea {
|
||||
// Default columns
|
||||
&.span1 { @include formColumns(1); }
|
||||
&.span2 { @include formColumns(2); }
|
||||
|
|
@ -249,7 +264,7 @@ input[disabled], select[disabled], textarea[disabled], input[readonly], select[r
|
|||
|
||||
// Help Text
|
||||
.help-inline, .help-block {
|
||||
font-size: $basefont - 2;
|
||||
font-size: $basefont;
|
||||
line-height: $baseline;
|
||||
color: $grayLight;
|
||||
}
|
||||
|
|
@ -268,15 +283,6 @@ input[disabled], select[disabled], textarea[disabled], input[readonly], select[r
|
|||
// Inline Fields (input fields that appear as inline objects
|
||||
.inline-inputs {
|
||||
color: $gray;
|
||||
span, input {
|
||||
display: inline-block;
|
||||
}
|
||||
input.mini {
|
||||
width: 60px;
|
||||
}
|
||||
input.small {
|
||||
width: 90px;
|
||||
}
|
||||
span {
|
||||
padding: 0 2px 0 1px;
|
||||
}
|
||||
|
|
@ -342,6 +348,7 @@ input[disabled], select[disabled], textarea[disabled], input[readonly], select[r
|
|||
float: none;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin-left: 20px;
|
||||
line-height: $baseline;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
|
|
@ -366,6 +373,8 @@ input[disabled], select[disabled], textarea[disabled], input[readonly], select[r
|
|||
}
|
||||
input[type=radio], input[type=checkbox] {
|
||||
margin-bottom: 0;
|
||||
margin-left: -20px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
|
|
@ -110,7 +109,7 @@
|
|||
|
||||
// Transitions
|
||||
@mixin transition($transition) {
|
||||
-webkit-transition: $transition;
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
-ms-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
|
|
@ -134,6 +133,11 @@
|
|||
column-gap: $columnGap;
|
||||
}
|
||||
|
||||
@mixin resizable($direction: both) {
|
||||
resize: $direction; // Options are horizontal, vertical, both
|
||||
overflow: auto; // Safari fix
|
||||
}
|
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
||||
@mixin background-translucent($color: $white, $alpha: 1) {
|
||||
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
// Hover and active states
|
||||
// h3 for backwards compatibility
|
||||
h3 a:hover, .brand a:hover, ul .active > a {
|
||||
h3 a:hover, .brand:hover, ul .active > a {
|
||||
background-color: #333;
|
||||
background-color: rgba(255,255,255,.05);
|
||||
color: $white;
|
||||
|
|
@ -272,7 +272,7 @@ a.menu:after, .dropdown-toggle:after {
|
|||
color: $gray;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
// Hover state
|
||||
&:hover {
|
||||
&:hover, &.hover {
|
||||
@include vertical-gradient(#eeeeee, #dddddd);
|
||||
color: $grayDark;
|
||||
text-decoration: none;
|
||||
|
|
@ -297,9 +297,12 @@ a.menu:after, .dropdown-toggle:after {
|
|||
}
|
||||
}
|
||||
|
||||
// Tabs and Pills
|
||||
// TABS AND PILLS
|
||||
// --------------
|
||||
|
||||
// Common styles
|
||||
.tabs, .pills {
|
||||
margin: 0 0 20px;
|
||||
margin: 0 0 $baseline;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@include clearfix();
|
||||
|
|
@ -311,18 +314,18 @@ a.menu:after, .dropdown-toggle:after {
|
|||
}
|
||||
}
|
||||
|
||||
// Basic Tabs
|
||||
// Tabs
|
||||
.tabs {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-color: #ddd;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
> li {
|
||||
position: relative; // For the dropdowns mostly
|
||||
top: 1px;
|
||||
margin-bottom: -1px;
|
||||
> a {
|
||||
padding: 0 15px;
|
||||
margin-right: 2px;
|
||||
line-height: $baseline * 2;
|
||||
line-height: ($baseline * 2) - 2;
|
||||
border: 1px solid transparent;
|
||||
@include border-radius(4px 4px 0 0);
|
||||
&:hover {
|
||||
|
|
@ -331,13 +334,18 @@ a.menu:after, .dropdown-toggle:after {
|
|||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
}
|
||||
&.active > a {
|
||||
color: $gray;
|
||||
background-color: $white;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
.active > a, .active > a:hover {
|
||||
color: $gray;
|
||||
background-color: $white;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns in tabs
|
||||
.tabs {
|
||||
// first one for backwards compatibility
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
top: 35px;
|
||||
|
|
@ -359,46 +367,50 @@ a.menu:after, .dropdown-toggle:after {
|
|||
border-top-color: #555;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Basic pill nav
|
||||
// Pills
|
||||
.pills {
|
||||
a {
|
||||
margin: 5px 3px 5px 0;
|
||||
margin: 5px 3px 5px 0;
|
||||
padding: 0 15px;
|
||||
text-shadow: 0 1px 1px $white;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 1px 1px $white;
|
||||
@include border-radius(15px);
|
||||
&:hover {
|
||||
background: $linkColorHover;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
background-color: $linkColorHover;
|
||||
}
|
||||
}
|
||||
.active a {
|
||||
background: $linkColor;
|
||||
color: $white;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
background-color: $linkColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content > *, .pill-content > * {
|
||||
display: none;
|
||||
// Stacked pills
|
||||
.pills-vertical > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Tabbable areas
|
||||
.tab-content, .pill-content {
|
||||
}
|
||||
.tab-content > .tab-pane, .pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
.tab-content > .active, .pill-content > .active {
|
||||
display:block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// BREADCRUMBS
|
||||
// -----------
|
||||
|
||||
.breadcrumb {
|
||||
margin: 0 0 $baseline;
|
||||
padding: 7px 14px;
|
||||
margin: 0 0 $baseline;
|
||||
@include vertical-gradient(#ffffff, #f5f5f5);
|
||||
border: 1px solid #ddd;
|
||||
@include border-radius(3px);
|
||||
|
|
@ -411,8 +423,6 @@ a.menu:after, .dropdown-toggle:after {
|
|||
padding: 0 5px;
|
||||
color: $grayLight;
|
||||
}
|
||||
a {
|
||||
}
|
||||
.active a {
|
||||
color: $grayDark;
|
||||
}
|
||||
|
|
@ -468,6 +478,11 @@ footer {
|
|||
&.danger, &.danger:hover, &.error, &.error:hover, &.success, &.success:hover, &.info, &.info:hover {
|
||||
color: $white
|
||||
}
|
||||
// Sets the close button to the middle of message
|
||||
.close {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 18px;
|
||||
}
|
||||
// Danger and error appear as red
|
||||
&.danger, &.error {
|
||||
@include gradientBar(#ee5f5b, #c43c35);
|
||||
|
|
@ -520,7 +535,7 @@ footer {
|
|||
@include transition(.1s linear all);
|
||||
|
||||
// Active and Disabled states
|
||||
&:active {
|
||||
&:active, &.active {
|
||||
$shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
|
|
@ -576,7 +591,7 @@ button.btn, input[type=submit].btn {
|
|||
font-weight: bold;
|
||||
line-height: $baseline * .75;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
@include opacity(20);
|
||||
@include opacity(25);
|
||||
&:hover {
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
|
|
@ -603,7 +618,17 @@ button.btn, input[type=submit].btn {
|
|||
|
||||
// Adjust close icon
|
||||
.close {
|
||||
*margin-top: 3px; /* IE7 spacing */
|
||||
margin-top: 1px;
|
||||
*margin-top: 0; // IE7.
|
||||
}
|
||||
|
||||
// Make links same color as text and stand out more
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: $grayDark;
|
||||
}
|
||||
&.danger p a, &.error p a, &.success p a, &.info p a {
|
||||
color: $grayDark;
|
||||
}
|
||||
|
||||
// Remove extra margin from content
|
||||
|
|
@ -746,7 +771,7 @@ button.btn, input[type=submit].btn {
|
|||
left: 50%;
|
||||
z-index: 11000;
|
||||
width: 560px;
|
||||
margin: -250px 0 0 -250px;
|
||||
margin: -250px 0 0 -280px;
|
||||
background-color: $white;
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
|
|
@ -769,6 +794,9 @@ button.btn, input[type=submit].btn {
|
|||
.modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
.modal-body form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.modal-footer {
|
||||
background-color: #f5f5f5;
|
||||
padding: 14px 15px 15px;
|
||||
|
|
@ -783,6 +811,10 @@ button.btn, input[type=submit].btn {
|
|||
}
|
||||
}
|
||||
|
||||
// Fix the stacking of these components when in modals
|
||||
.modal .popover, .modal .twipsy {
|
||||
z-index: 12000;
|
||||
}
|
||||
|
||||
// POPOVER ARROWS
|
||||
// --------------
|
||||
|
|
@ -875,8 +907,8 @@ button.btn, input[type=submit].btn {
|
|||
height: 0;
|
||||
}
|
||||
.inner {
|
||||
background-color: $black;
|
||||
background-color: rgba(0,0,0,.8);
|
||||
background: $black;
|
||||
background: rgba(0,0,0,.8);
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
width: 280px;
|
||||
|
|
@ -918,11 +950,12 @@ button.btn, input[type=submit].btn {
|
|||
|
||||
.label {
|
||||
padding: 1px 3px 2px;
|
||||
background-color: $grayLight;
|
||||
font-size: $basefont * .75;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
background-color: $grayLight;
|
||||
@include border-radius(3px);
|
||||
&.important { background-color: #c43c35; }
|
||||
&.warning { background-color: $orange; }
|
||||
|
|
@ -935,7 +968,7 @@ button.btn, input[type=submit].btn {
|
|||
// -----------
|
||||
|
||||
.media-grid {
|
||||
margin-left: -20px;
|
||||
margin-left: -$gridGutterWidth;
|
||||
margin-bottom: 0;
|
||||
@include clearfix();
|
||||
li {
|
||||
|
|
@ -944,7 +977,7 @@ button.btn, input[type=submit].btn {
|
|||
a {
|
||||
float: left;
|
||||
padding: 4px;
|
||||
margin: 0 0 20px 20px;
|
||||
margin: 0 0 $baseline $gridGutterWidth;
|
||||
border: 1px solid #ddd;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 1px rgba(0,0,0,.075));
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@
|
|||
// STRUCTURAL LAYOUT
|
||||
// -----------------
|
||||
|
||||
html, body {
|
||||
background-color: $white;
|
||||
}
|
||||
body {
|
||||
background-color: $white;
|
||||
margin: 0;
|
||||
@include sans-serif-font(normal,$basefont,$baseline);
|
||||
color: $grayDark;
|
||||
|
|
@ -24,31 +22,22 @@ body {
|
|||
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
||||
.container-fluid {
|
||||
position: relative;
|
||||
min-width: 940px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
@include clearfix();
|
||||
> .sidebar {
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
// TODO in v2: rename this and .popover .content to be more specific
|
||||
> .content {
|
||||
float: left;
|
||||
min-width: 700px;
|
||||
max-width: 1180px;
|
||||
margin-left: 20px;
|
||||
margin-left: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggling content
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// BASE STYLES
|
||||
// -----------
|
||||
|
||||
|
|
@ -65,13 +54,12 @@ a {
|
|||
}
|
||||
|
||||
// Quick floats
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
.pull-right { float: right; }
|
||||
.pull-left { float: left; }
|
||||
|
||||
// Toggling content
|
||||
.hide { display: none; }
|
||||
.show { display: block; }
|
||||
|
||||
// GRID SYSTEM
|
||||
// -----------
|
||||
|
|
@ -79,12 +67,12 @@ a {
|
|||
|
||||
.row {
|
||||
@include clearfix();
|
||||
margin-left: -1 * $gridGutterWidth;
|
||||
margin-left: -$gridGutterWidth;
|
||||
}
|
||||
|
||||
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
|
||||
// Credit to @dhg for the idea
|
||||
[class*="span"] {
|
||||
.row > [class*="span"] {
|
||||
@include gridColumn();
|
||||
}
|
||||
|
||||
|
|
@ -117,18 +105,20 @@ a {
|
|||
.span24 { @include columns(24); }
|
||||
|
||||
// Offset column options
|
||||
.offset1 { @include offset(1); }
|
||||
.offset2 { @include offset(2); }
|
||||
.offset3 { @include offset(3); }
|
||||
.offset4 { @include offset(4); }
|
||||
.offset5 { @include offset(5); }
|
||||
.offset6 { @include offset(6); }
|
||||
.offset7 { @include offset(7); }
|
||||
.offset8 { @include offset(8); }
|
||||
.offset9 { @include offset(9); }
|
||||
.offset10 { @include offset(10); }
|
||||
.offset11 { @include offset(11); }
|
||||
.offset12 { @include offset(12); }
|
||||
.row {
|
||||
& > .offset1 { @include offset(1); }
|
||||
& > .offset2 { @include offset(2); }
|
||||
& > .offset3 { @include offset(3); }
|
||||
& > .offset4 { @include offset(4); }
|
||||
& > .offset5 { @include offset(5); }
|
||||
& > .offset6 { @include offset(6); }
|
||||
& > .offset7 { @include offset(7); }
|
||||
& > .offset8 { @include offset(8); }
|
||||
& > .offset9 { @include offset(9); }
|
||||
& > .offset10 { @include offset(10); }
|
||||
& > .offset11 { @include offset(11); }
|
||||
& > .offset12 { @include offset(12); }
|
||||
}
|
||||
|
||||
// Unique column sizes for 16-column grid
|
||||
.span-one-third { width: 300px; }
|
||||
|
|
|
|||
|
|
@ -11,11 +11,8 @@ table {
|
|||
width: 100%;
|
||||
margin-bottom: $baseline;
|
||||
padding: 0;
|
||||
border-collapse: separate; // Done so we can round those corners!
|
||||
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
|
||||
font-size: $basefont;
|
||||
border: 1px solid #ddd;
|
||||
@include border-radius(4px);
|
||||
border-collapse: collapse;
|
||||
th, td {
|
||||
padding: 10px 10px 9px;
|
||||
line-height: $baseline;
|
||||
|
|
@ -25,22 +22,38 @@ table {
|
|||
padding-top: 9px;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
th + th,
|
||||
td + td {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
tr + tr td {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
tbody tr:first-child td:first-child {
|
||||
// When scoped to row, fix th in body
|
||||
tbody th {
|
||||
border-top: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
// Condensed table
|
||||
.condensed-table {
|
||||
.th, .td {
|
||||
padding: 5px 5px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered table
|
||||
.bordered-table {
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: separate; // For rounded corners
|
||||
*border-collapse: collapse; // IE7, Y U NO STANDARD
|
||||
@include border-radius(4px);
|
||||
th + th, td + td, th + td {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
thead tr:first-child th:first-child, tbody tr:first-child td:first-child {
|
||||
@include border-radius(4px 0 0 0);
|
||||
}
|
||||
tbody tr:first-child td:last-child {
|
||||
thead tr:first-child th:last-child, tbody tr:first-child td:last-child {
|
||||
@include border-radius(0 4px 0 0);
|
||||
}
|
||||
tbody tr:last-child td:first-child {
|
||||
|
|
@ -51,6 +64,33 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
// TABLE CELL SIZES
|
||||
// ----------------
|
||||
|
||||
// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for padding and border
|
||||
@mixin tableColumns($columnSpan: 1) {
|
||||
width: (($gridColumnWidth - 20) * $columnSpan) + (($gridColumnWidth - 20) * ($columnSpan - 1));
|
||||
}
|
||||
|
||||
table {
|
||||
// Default columns
|
||||
.span1 { @include tableColumns(1); }
|
||||
.span2 { @include tableColumns(2); }
|
||||
.span3 { @include tableColumns(3); }
|
||||
.span4 { @include tableColumns(4); }
|
||||
.span5 { @include tableColumns(5); }
|
||||
.span6 { @include tableColumns(6); }
|
||||
.span7 { @include tableColumns(7); }
|
||||
.span8 { @include tableColumns(8); }
|
||||
.span9 { @include tableColumns(9); }
|
||||
.span10 { @include tableColumns(10); }
|
||||
.span11 { @include tableColumns(11); }
|
||||
.span12 { @include tableColumns(12); }
|
||||
.span13 { @include tableColumns(13); }
|
||||
.span14 { @include tableColumns(14); }
|
||||
.span15 { @include tableColumns(15); }
|
||||
.span16 { @include tableColumns(16); }
|
||||
}
|
||||
|
||||
// ZEBRA-STRIPING
|
||||
// --------------
|
||||
|
|
@ -58,14 +98,16 @@ table {
|
|||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
.zebra-striped {
|
||||
tbody {
|
||||
tr:nth-child(odd) td {
|
||||
tr:nth-child(odd) td, tr:nth-child(odd) th {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
tr:hover td {
|
||||
tr:hover td, tr:hover th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
// Tablesorting styles w/ jQuery plugin
|
||||
.header {
|
||||
cursor: pointer;
|
||||
|
|
@ -111,9 +153,6 @@ table {
|
|||
@include opacity(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
// Blue Table Headings
|
||||
.blue {
|
||||
color: $blue;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue