anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/Rakefile +11 -15
- data/bootstrap-rails.gemspec +4 -4
- data/lib/bootstrap-rails/version.rb +1 -1
- data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
- data/vendor/assets/javascripts/bootstrap-button.js +98 -0
- data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
- data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
- data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
- data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
- data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
- data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
- data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
- data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
- data/vendor/assets/javascripts/bootstrap.js +8 -5
- data/vendor/assets/stylesheets/accordion.scss +28 -0
- data/vendor/assets/stylesheets/alerts.scss +70 -0
- data/vendor/assets/stylesheets/bootstrap.scss +44 -8
- data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
- data/vendor/assets/stylesheets/button-groups.scss +147 -0
- data/vendor/assets/stylesheets/buttons.scss +165 -0
- data/vendor/assets/stylesheets/carousel.scss +121 -0
- data/vendor/assets/stylesheets/close.scss +18 -0
- data/vendor/assets/stylesheets/code.scss +44 -0
- data/vendor/assets/stylesheets/component-animations.scss +18 -0
- data/vendor/assets/stylesheets/dropdowns.scss +131 -0
- data/vendor/assets/stylesheets/forms.scss +337 -287
- data/vendor/assets/stylesheets/grid.scss +8 -0
- data/vendor/assets/stylesheets/hero-unit.scss +20 -0
- data/vendor/assets/stylesheets/labels.scss +16 -0
- data/vendor/assets/stylesheets/layouts.scss +17 -0
- data/vendor/assets/stylesheets/mixins.scss +375 -111
- data/vendor/assets/stylesheets/modals.scss +72 -0
- data/vendor/assets/stylesheets/navbar.scss +292 -0
- data/vendor/assets/stylesheets/navs.scss +344 -0
- data/vendor/assets/stylesheets/pager.scss +30 -0
- data/vendor/assets/stylesheets/pagination.scss +55 -0
- data/vendor/assets/stylesheets/popovers.scss +49 -0
- data/vendor/assets/stylesheets/progress-bars.scss +95 -0
- data/vendor/assets/stylesheets/reset.scss +37 -52
- data/vendor/assets/stylesheets/responsive.scss +323 -0
- data/vendor/assets/stylesheets/scaffolding.scss +13 -96
- data/vendor/assets/stylesheets/sprites.scss +158 -0
- data/vendor/assets/stylesheets/tables.scss +68 -149
- data/vendor/assets/stylesheets/thumbnails.scss +35 -0
- data/vendor/assets/stylesheets/tooltip.scss +35 -0
- data/vendor/assets/stylesheets/type.scss +100 -70
- data/vendor/assets/stylesheets/utilities.scss +23 -0
- data/vendor/assets/stylesheets/variables.scss +94 -55
- data/vendor/assets/stylesheets/wells.scss +17 -0
- metadata +51 -30
- data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
- data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
- data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
- data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
- data/vendor/assets/stylesheets/patterns.scss +0 -1060
@@ -1,112 +1,29 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
* ------------------------------------------------------------------------------------------- */
|
1
|
+
// Scaffolding
|
2
|
+
// Basic and global styles for generating a grid system, structural layout, and page templates
|
3
|
+
// -------------------------------------------------------------------------------------------
|
5
4
|
|
6
5
|
|
7
6
|
// STRUCTURAL LAYOUT
|
8
7
|
// -----------------
|
9
8
|
|
10
9
|
body {
|
11
|
-
background-color: $white;
|
12
10
|
margin: 0;
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
.container {
|
19
|
-
@include fixed-container;
|
20
|
-
}
|
21
|
-
|
22
|
-
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
23
|
-
.container-fluid {
|
24
|
-
position: relative;
|
25
|
-
min-width: 940px;
|
26
|
-
padding-left: 20px;
|
27
|
-
padding-right: 20px;
|
28
|
-
@include clearfix;
|
29
|
-
> .sidebar {
|
30
|
-
position: absolute;
|
31
|
-
top: 0;
|
32
|
-
left: 20px;
|
33
|
-
width: 220px;
|
34
|
-
}
|
35
|
-
// TODO in v2: rename this and .popover .content to be more specific
|
36
|
-
> .content {
|
37
|
-
margin-left: 240px;
|
38
|
-
}
|
11
|
+
font-family: $baseFontFamily;
|
12
|
+
font-size: $baseFontSize;
|
13
|
+
line-height: $baseLineHeight;
|
14
|
+
color: $textColor;
|
15
|
+
background-color: $white;
|
39
16
|
}
|
40
17
|
|
41
18
|
|
42
|
-
//
|
43
|
-
//
|
19
|
+
// LINKS
|
20
|
+
// -----
|
44
21
|
|
45
|
-
// Links
|
46
22
|
a {
|
47
23
|
color: $linkColor;
|
48
24
|
text-decoration: none;
|
49
|
-
line-height: inherit;
|
50
|
-
font-weight: inherit;
|
51
|
-
&:hover {
|
52
|
-
color: $linkColorHover;
|
53
|
-
text-decoration: underline;
|
54
|
-
}
|
55
25
|
}
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
float: right;
|
60
|
-
}
|
61
|
-
.pull-left {
|
62
|
-
float: left;
|
63
|
-
}
|
64
|
-
|
65
|
-
// Toggling content
|
66
|
-
.hide {
|
67
|
-
display: none;
|
68
|
-
}
|
69
|
-
.show {
|
70
|
-
display: block;
|
71
|
-
}
|
72
|
-
|
73
|
-
|
74
|
-
// GRID SYSTEM
|
75
|
-
// -----------
|
76
|
-
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
|
77
|
-
|
78
|
-
.row {
|
79
|
-
@include clearfix;
|
80
|
-
margin-left: -$gridGutterWidth;
|
81
|
-
}
|
82
|
-
|
83
|
-
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
|
84
|
-
// Credit to @dhg for the idea
|
85
|
-
.row > [class*="span"] {
|
86
|
-
@include gridColumn;
|
87
|
-
}
|
88
|
-
|
89
|
-
// Default columns
|
90
|
-
@for $i from 1 through 16 {
|
91
|
-
.span#{$i} { @include columns($i); }
|
92
|
-
}
|
93
|
-
|
94
|
-
// For optional 24-column grid
|
95
|
-
@for $i from 17 through 24 {
|
96
|
-
.span#{$i} { @include columns($i); }
|
97
|
-
}
|
98
|
-
|
99
|
-
// Offset column options
|
100
|
-
.row {
|
101
|
-
@for $i from 1 through 12 {
|
102
|
-
> .offset#{$i} { @include offset($i); }
|
103
|
-
}
|
104
|
-
}
|
105
|
-
|
106
|
-
// Unique column sizes for 16-column grid
|
107
|
-
.span-one-third { width: 300px; }
|
108
|
-
.span-two-thirds { width: 620px; }
|
109
|
-
.row {
|
110
|
-
> .offset-one-third { margin-left: 340px; }
|
111
|
-
> .offset-two-thirds { margin-left: 660px; }
|
26
|
+
a:hover {
|
27
|
+
color: $linkColorHover;
|
28
|
+
text-decoration: underline;
|
112
29
|
}
|
@@ -0,0 +1,158 @@
|
|
1
|
+
// SPRITES
|
2
|
+
// Glyphs and icons for buttons, nav, and more
|
3
|
+
// -------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// ICONS
|
7
|
+
// -----
|
8
|
+
|
9
|
+
// All icons receive the styles of the <i> tag with a base class
|
10
|
+
// of .i and are then given a unique class to add width, height,
|
11
|
+
// and background-position. Your resulting HTML will look like
|
12
|
+
// <i class="i icon-inbox"></i>.
|
13
|
+
|
14
|
+
// For the white version of the icons, just add the .icon-white class:
|
15
|
+
// <i class="i icon-inbox icon-white"></i>
|
16
|
+
|
17
|
+
[class^="icon-"] {
|
18
|
+
display: inline-block;
|
19
|
+
width: 14px;
|
20
|
+
height: 14px;
|
21
|
+
vertical-align: text-top;
|
22
|
+
// TODO: check for rails pipeline
|
23
|
+
background-image: image-url("glyphicons-halflings.png");
|
24
|
+
background-position: 14px 14px;
|
25
|
+
background-repeat: no-repeat;
|
26
|
+
|
27
|
+
@include ie7-restore-right-whitespace();
|
28
|
+
}
|
29
|
+
.icon-white {
|
30
|
+
// TODO: check for rails pipeline
|
31
|
+
background-image: image-url("glyphicons-halflings-white.png");
|
32
|
+
}
|
33
|
+
|
34
|
+
.icon-glass { background-position: 0 0; }
|
35
|
+
.icon-music { background-position: -24px 0; }
|
36
|
+
.icon-search { background-position: -48px 0; }
|
37
|
+
.icon-envelope { background-position: -72px 0; }
|
38
|
+
.icon-heart { background-position: -96px 0; }
|
39
|
+
.icon-star { background-position: -120px 0; }
|
40
|
+
.icon-star-empty { background-position: -144px 0; }
|
41
|
+
.icon-user { background-position: -168px 0; }
|
42
|
+
.icon-film { background-position: -192px 0; }
|
43
|
+
.icon-th-large { background-position: -216px 0; }
|
44
|
+
.icon-th { background-position: -240px 0; }
|
45
|
+
.icon-th-list { background-position: -264px 0; }
|
46
|
+
.icon-ok { background-position: -288px 0; }
|
47
|
+
.icon-remove { background-position: -312px 0; }
|
48
|
+
.icon-zoom-in { background-position: -336px 0; }
|
49
|
+
.icon-zoom-out { background-position: -360px 0; }
|
50
|
+
.icon-off { background-position: -384px 0; }
|
51
|
+
.icon-signal { background-position: -408px 0; }
|
52
|
+
.icon-cog { background-position: -432px 0; }
|
53
|
+
.icon-trash { background-position: -456px 0; }
|
54
|
+
|
55
|
+
.icon-home { background-position: 0 -24px; }
|
56
|
+
.icon-file { background-position: -24px -24px; }
|
57
|
+
.icon-time { background-position: -48px -24px; }
|
58
|
+
.icon-road { background-position: -72px -24px; }
|
59
|
+
.icon-download-alt { background-position: -96px -24px; }
|
60
|
+
.icon-download { background-position: -120px -24px; }
|
61
|
+
.icon-upload { background-position: -144px -24px; }
|
62
|
+
.icon-inbox { background-position: -168px -24px; }
|
63
|
+
.icon-play-circle { background-position: -192px -24px; }
|
64
|
+
.icon-repeat { background-position: -216px -24px; }
|
65
|
+
.icon-refresh { background-position: -240px -24px; }
|
66
|
+
.icon-list-alt { background-position: -264px -24px; }
|
67
|
+
.icon-lock { background-position: -287px -24px; } // 1px off
|
68
|
+
.icon-flag { background-position: -312px -24px; }
|
69
|
+
.icon-headphones { background-position: -336px -24px; }
|
70
|
+
.icon-volume-off { background-position: -360px -24px; }
|
71
|
+
.icon-volume-down { background-position: -384px -24px; }
|
72
|
+
.icon-volume-up { background-position: -408px -24px; }
|
73
|
+
.icon-qrcode { background-position: -432px -24px; }
|
74
|
+
.icon-barcode { background-position: -456px -24px; }
|
75
|
+
|
76
|
+
.icon-tag { background-position: 0 -48px; }
|
77
|
+
.icon-tags { background-position: -25px -48px; } // 1px off
|
78
|
+
.icon-book { background-position: -48px -48px; }
|
79
|
+
.icon-bookmark { background-position: -72px -48px; }
|
80
|
+
.icon-print { background-position: -96px -48px; }
|
81
|
+
.icon-camera { background-position: -120px -48px; }
|
82
|
+
.icon-font { background-position: -144px -48px; }
|
83
|
+
.icon-bold { background-position: -167px -48px; } // 1px off
|
84
|
+
.icon-italic { background-position: -192px -48px; }
|
85
|
+
.icon-text-height { background-position: -216px -48px; }
|
86
|
+
.icon-text-width { background-position: -240px -48px; }
|
87
|
+
.icon-align-left { background-position: -264px -48px; }
|
88
|
+
.icon-align-center { background-position: -288px -48px; }
|
89
|
+
.icon-align-right { background-position: -312px -48px; }
|
90
|
+
.icon-align-justify { background-position: -336px -48px; }
|
91
|
+
.icon-list { background-position: -360px -48px; }
|
92
|
+
.icon-indent-left { background-position: -384px -48px; }
|
93
|
+
.icon-indent-right { background-position: -408px -48px; }
|
94
|
+
.icon-facetime-video { background-position: -432px -48px; }
|
95
|
+
.icon-picture { background-position: -456px -48px; }
|
96
|
+
|
97
|
+
.icon-pencil { background-position: 0 -72px; }
|
98
|
+
.icon-map-marker { background-position: -24px -72px; }
|
99
|
+
.icon-adjust { background-position: -48px -72px; }
|
100
|
+
.icon-tint { background-position: -72px -72px; }
|
101
|
+
.icon-edit { background-position: -96px -72px; }
|
102
|
+
.icon-share { background-position: -120px -72px; }
|
103
|
+
.icon-check { background-position: -144px -72px; }
|
104
|
+
.icon-move { background-position: -168px -72px; }
|
105
|
+
.icon-step-backward { background-position: -192px -72px; }
|
106
|
+
.icon-fast-backward { background-position: -216px -72px; }
|
107
|
+
.icon-backward { background-position: -240px -72px; }
|
108
|
+
.icon-play { background-position: -264px -72px; }
|
109
|
+
.icon-pause { background-position: -288px -72px; }
|
110
|
+
.icon-stop { background-position: -312px -72px; }
|
111
|
+
.icon-forward { background-position: -336px -72px; }
|
112
|
+
.icon-fast-forward { background-position: -360px -72px; }
|
113
|
+
.icon-step-forward { background-position: -384px -72px; }
|
114
|
+
.icon-eject { background-position: -408px -72px; }
|
115
|
+
.icon-chevron-left { background-position: -432px -72px; }
|
116
|
+
.icon-chevron-right { background-position: -456px -72px; }
|
117
|
+
|
118
|
+
.icon-plus-sign { background-position: 0 -96px; }
|
119
|
+
.icon-minus-sign { background-position: -24px -96px; }
|
120
|
+
.icon-remove-sign { background-position: -48px -96px; }
|
121
|
+
.icon-ok-sign { background-position: -72px -96px; }
|
122
|
+
.icon-question-sign { background-position: -96px -96px; }
|
123
|
+
.icon-info-sign { background-position: -120px -96px; }
|
124
|
+
.icon-screenshot { background-position: -144px -96px; }
|
125
|
+
.icon-remove-circle { background-position: -168px -96px; }
|
126
|
+
.icon-ok-circle { background-position: -192px -96px; }
|
127
|
+
.icon-ban-circle { background-position: -216px -96px; }
|
128
|
+
.icon-arrow-left { background-position: -240px -96px; }
|
129
|
+
.icon-arrow-right { background-position: -264px -96px; }
|
130
|
+
.icon-arrow-up { background-position: -289px -96px; } // 1px off
|
131
|
+
.icon-arrow-down { background-position: -312px -96px; }
|
132
|
+
.icon-share-alt { background-position: -336px -96px; }
|
133
|
+
.icon-resize-full { background-position: -360px -96px; }
|
134
|
+
.icon-resize-small { background-position: -384px -96px; }
|
135
|
+
.icon-plus { background-position: -408px -96px; }
|
136
|
+
.icon-minus { background-position: -433px -96px; }
|
137
|
+
.icon-asterisk { background-position: -456px -96px; }
|
138
|
+
|
139
|
+
.icon-exclamation-sign { background-position: 0 -120px; }
|
140
|
+
.icon-gift { background-position: -24px -120px; }
|
141
|
+
.icon-leaf { background-position: -48px -120px; }
|
142
|
+
.icon-fire { background-position: -72px -120px; }
|
143
|
+
.icon-eye-open { background-position: -96px -120px; }
|
144
|
+
.icon-eye-close { background-position: -120px -120px; }
|
145
|
+
.icon-warning-sign { background-position: -144px -120px; }
|
146
|
+
.icon-plane { background-position: -168px -120px; }
|
147
|
+
.icon-calendar { background-position: -192px -120px; }
|
148
|
+
.icon-random { background-position: -216px -120px; }
|
149
|
+
.icon-comment { background-position: -240px -120px; }
|
150
|
+
.icon-magnet { background-position: -264px -120px; }
|
151
|
+
.icon-chevron-up { background-position: -288px -120px; }
|
152
|
+
.icon-chevron-down { background-position: -313px -119px; } // 1px off
|
153
|
+
.icon-retweet { background-position: -336px -120px; }
|
154
|
+
.icon-shopping-cart { background-position: -360px -120px; }
|
155
|
+
.icon-folder-close { background-position: -384px -120px; }
|
156
|
+
.icon-folder-open { background-position: -408px -120px; }
|
157
|
+
.icon-resize-vertical { background-position: -432px -119px; }
|
158
|
+
.icon-resize-horizontal { background-position: -456px -118px; }
|
@@ -1,47 +1,59 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
//
|
2
|
+
// Tables.less
|
3
|
+
// Tables for, you guessed it, tabular data
|
4
|
+
// ----------------------------------------
|
5
5
|
|
6
6
|
|
7
|
+
// BASE TABLES
|
8
|
+
// -----------------
|
9
|
+
|
10
|
+
table {
|
11
|
+
max-width: 100%;
|
12
|
+
border-collapse: collapse;
|
13
|
+
border-spacing: 0;
|
14
|
+
}
|
15
|
+
|
7
16
|
// BASELINE STYLES
|
8
17
|
// ---------------
|
9
18
|
|
10
|
-
table {
|
19
|
+
.table {
|
11
20
|
width: 100%;
|
12
|
-
margin-bottom: $
|
13
|
-
|
14
|
-
font-size: $basefont;
|
15
|
-
border-collapse: collapse;
|
21
|
+
margin-bottom: $baseLineHeight;
|
22
|
+
// Cells
|
16
23
|
th,
|
17
24
|
td {
|
18
|
-
padding:
|
19
|
-
line-height: $
|
25
|
+
padding: 8px;
|
26
|
+
line-height: $baseLineHeight;
|
20
27
|
text-align: left;
|
28
|
+
border-top: 1px solid #ddd;
|
21
29
|
}
|
22
30
|
th {
|
23
|
-
padding-top: 9px;
|
24
31
|
font-weight: bold;
|
25
|
-
vertical-align:
|
32
|
+
vertical-align: bottom;
|
26
33
|
}
|
27
34
|
td {
|
28
35
|
vertical-align: top;
|
29
|
-
border-top: 1px solid #ddd;
|
30
36
|
}
|
31
|
-
//
|
32
|
-
|
33
|
-
|
34
|
-
|
37
|
+
// Remove top border from thead by default
|
38
|
+
thead:first-child tr th,
|
39
|
+
thead:first-child tr td {
|
40
|
+
border-top: 0;
|
41
|
+
}
|
42
|
+
// Account for multiple tbody instances
|
43
|
+
tbody + tbody {
|
44
|
+
border-top: 2px solid #ddd;
|
35
45
|
}
|
36
46
|
}
|
37
47
|
|
38
48
|
|
39
|
-
|
40
|
-
//
|
41
|
-
|
49
|
+
|
50
|
+
// CONDENSED TABLE W/ HALF PADDING
|
51
|
+
// -------------------------------
|
52
|
+
|
53
|
+
.table-condensed {
|
42
54
|
th,
|
43
55
|
td {
|
44
|
-
padding:
|
56
|
+
padding: 4px 5px;
|
45
57
|
}
|
46
58
|
}
|
47
59
|
|
@@ -49,163 +61,70 @@ table {
|
|
49
61
|
// BORDERED VERSION
|
50
62
|
// ----------------
|
51
63
|
|
52
|
-
.bordered
|
64
|
+
.table-bordered {
|
53
65
|
border: 1px solid #ddd;
|
54
66
|
border-collapse: separate; // Done so we can round those corners!
|
55
|
-
*border-collapse:
|
67
|
+
*border-collapse: collapsed; // IE7 can't round corners anyway
|
56
68
|
@include border-radius(4px);
|
57
69
|
th + th,
|
58
70
|
td + td,
|
59
|
-
th + td
|
71
|
+
th + td,
|
72
|
+
td + th {
|
60
73
|
border-left: 1px solid #ddd;
|
61
74
|
}
|
62
|
-
|
63
|
-
|
75
|
+
// Prevent a double border
|
76
|
+
thead:first-child tr:first-child th,
|
77
|
+
tbody:first-child tr:first-child th,
|
78
|
+
tbody:first-child tr:first-child td {
|
79
|
+
border-top: 0;
|
80
|
+
}
|
81
|
+
// For first th or td in the first row in the first thead or tbody
|
82
|
+
thead:first-child tr:first-child th:first-child,
|
83
|
+
tbody:first-child tr:first-child td:first-child {
|
64
84
|
@include border-radius(4px 0 0 0);
|
65
85
|
}
|
66
|
-
thead tr:first-child th:last-child,
|
67
|
-
tbody tr:first-child td:last-child {
|
86
|
+
thead:first-child tr:first-child th:last-child,
|
87
|
+
tbody:first-child tr:first-child td:last-child {
|
68
88
|
@include border-radius(0 4px 0 0);
|
69
89
|
}
|
70
|
-
|
90
|
+
// For first th or td in the first row in the first thead or tbody
|
91
|
+
thead:last-child tr:last-child th:first-child,
|
92
|
+
tbody:last-child tr:last-child td:first-child {
|
71
93
|
@include border-radius(0 0 0 4px);
|
72
94
|
}
|
73
|
-
|
95
|
+
thead:last-child tr:last-child th:last-child,
|
96
|
+
tbody:last-child tr:last-child td:last-child {
|
74
97
|
@include border-radius(0 0 4px 0);
|
75
98
|
}
|
76
99
|
}
|
77
100
|
|
78
101
|
|
79
|
-
// TABLE CELL SIZES
|
80
|
-
// ----------------
|
81
|
-
|
82
|
-
// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
|
83
|
-
@mixin tableColumns($columnSpan: 1) {
|
84
|
-
width: (($gridColumnWidth - 20) * $columnSpan) + (($gridColumnWidth - 20) * ($columnSpan - 1));
|
85
|
-
}
|
86
|
-
table {
|
87
|
-
// Default columns
|
88
|
-
@for $i from 1 through 16 {
|
89
|
-
.span#{$i} { @include tableColumns($i); }
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
|
-
|
94
102
|
// ZEBRA-STRIPING
|
95
103
|
// --------------
|
96
104
|
|
97
105
|
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
98
|
-
.
|
106
|
+
.table-striped {
|
99
107
|
tbody {
|
100
108
|
tr:nth-child(odd) td,
|
101
109
|
tr:nth-child(odd) th {
|
102
110
|
background-color: #f9f9f9;
|
103
111
|
}
|
104
|
-
tr:hover td,
|
105
|
-
tr:hover th {
|
106
|
-
background-color: #f5f5f5;
|
107
|
-
}
|
108
112
|
}
|
109
113
|
}
|
110
114
|
|
115
|
+
|
116
|
+
|
117
|
+
// TABLE CELL SIZING
|
118
|
+
// -----------------
|
119
|
+
|
120
|
+
// Change the columns
|
121
|
+
@mixin table-columns($columnSpan: 1) {
|
122
|
+
float: none;
|
123
|
+
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16;
|
124
|
+
margin-left: 0;
|
125
|
+
}
|
111
126
|
table {
|
112
|
-
|
113
|
-
|
114
|
-
cursor: pointer;
|
115
|
-
&:after {
|
116
|
-
content: "";
|
117
|
-
float: right;
|
118
|
-
margin-top: 7px;
|
119
|
-
border-width: 0 4px 4px;
|
120
|
-
border-style: solid;
|
121
|
-
border-color: #000 transparent;
|
122
|
-
visibility: hidden;
|
123
|
-
}
|
124
|
-
}
|
125
|
-
// Style the sorted column headers (THs)
|
126
|
-
.headerSortUp,
|
127
|
-
.headerSortDown {
|
128
|
-
background-color: rgba(141,192,219,.25);
|
129
|
-
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
130
|
-
}
|
131
|
-
// Style the ascending (reverse alphabetical) column header
|
132
|
-
.header:hover {
|
133
|
-
&:after {
|
134
|
-
visibility:visible;
|
135
|
-
}
|
136
|
-
}
|
137
|
-
// Style the descending (alphabetical) column header
|
138
|
-
.headerSortDown,
|
139
|
-
.headerSortDown:hover {
|
140
|
-
&:after {
|
141
|
-
visibility:visible;
|
142
|
-
@include opacity(60);
|
143
|
-
}
|
144
|
-
}
|
145
|
-
// Style the ascending (reverse alphabetical) column header
|
146
|
-
.headerSortUp {
|
147
|
-
&:after {
|
148
|
-
border-bottom: none;
|
149
|
-
border-left: 4px solid transparent;
|
150
|
-
border-right: 4px solid transparent;
|
151
|
-
border-top: 4px solid #000;
|
152
|
-
visibility:visible;
|
153
|
-
@include box-shadow(none); //can't add boxshadow to downward facing arrow :(
|
154
|
-
@include opacity(60);
|
155
|
-
}
|
156
|
-
}
|
157
|
-
// Blue Table Headings
|
158
|
-
.blue {
|
159
|
-
color: $blue;
|
160
|
-
border-bottom-color: $blue;
|
161
|
-
}
|
162
|
-
.headerSortUp.blue,
|
163
|
-
.headerSortDown.blue {
|
164
|
-
background-color: lighten($blue, 40%);
|
165
|
-
}
|
166
|
-
// Green Table Headings
|
167
|
-
.green {
|
168
|
-
color: $green;
|
169
|
-
border-bottom-color: $green;
|
170
|
-
}
|
171
|
-
.headerSortUp.green,
|
172
|
-
.headerSortDown.green {
|
173
|
-
background-color: lighten($green, 40%);
|
174
|
-
}
|
175
|
-
// Red Table Headings
|
176
|
-
.red {
|
177
|
-
color: $red;
|
178
|
-
border-bottom-color: $red;
|
179
|
-
}
|
180
|
-
.headerSortUp.red,
|
181
|
-
.headerSortDown.red {
|
182
|
-
background-color: lighten($red, 50%);
|
183
|
-
}
|
184
|
-
// Yellow Table Headings
|
185
|
-
.yellow {
|
186
|
-
color: $yellow;
|
187
|
-
border-bottom-color: $yellow;
|
188
|
-
}
|
189
|
-
.headerSortUp.yellow,
|
190
|
-
.headerSortDown.yellow {
|
191
|
-
background-color: lighten($yellow, 40%);
|
192
|
-
}
|
193
|
-
// Orange Table Headings
|
194
|
-
.orange {
|
195
|
-
color: $orange;
|
196
|
-
border-bottom-color: $orange;
|
197
|
-
}
|
198
|
-
.headerSortUp.orange,
|
199
|
-
.headerSortDown.orange {
|
200
|
-
background-color: lighten($orange, 40%);
|
201
|
-
}
|
202
|
-
// Purple Table Headings
|
203
|
-
.purple {
|
204
|
-
color: $purple;
|
205
|
-
border-bottom-color: $purple;
|
206
|
-
}
|
207
|
-
.headerSortUp.purple,
|
208
|
-
.headerSortDown.purple {
|
209
|
-
background-color: lighten($purple, 40%);
|
127
|
+
@for $i from 1 through 12 {
|
128
|
+
.span#{$i} { @include table-columns($i); }
|
210
129
|
}
|
211
130
|
}
|