anjlab-bootstrap-rails 3.0.0.0.alpha1 → 3.0.0.rc1
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.
- checksums.yaml +4 -4
- data/README.md +14 -27
- data/Rakefile +11 -35
- data/{vendor → app}/assets/javascripts/twitter/bootstrap.js +6 -6
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/affix.js +9 -3
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/alert.js +4 -2
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/button.js +6 -4
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/carousel.js +22 -12
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/collapse.js +69 -43
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/dropdown.js +22 -13
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/modal.js +37 -38
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/popover.js +11 -5
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/scrollspy.js +6 -4
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/tab.js +4 -2
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/tooltip.js +49 -38
- data/{vendor → app}/assets/javascripts/twitter/bootstrap/transition.js +10 -1
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap.scss +0 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_accordion.scss +7 -10
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_alerts.scss +11 -34
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_badges.scss +8 -15
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_bootstrap.scss +0 -1
- data/app/assets/stylesheets/twitter/bootstrap/_breadcrumbs.scss +23 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_button-groups.scss +23 -22
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_buttons.scss +21 -24
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_carousel.scss +46 -32
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_close.scss +3 -3
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_code.scss +6 -12
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_component-animations.scss +10 -4
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_dropdowns.scss +46 -101
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_forms.scss +139 -179
- data/app/assets/stylesheets/twitter/bootstrap/_grid.scss +155 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_jumbotron.scss +1 -4
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_labels.scss +7 -31
- data/app/assets/stylesheets/twitter/bootstrap/_list-group.scss +89 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_media.scss +8 -6
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_mixins.scss +152 -131
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_modals.scss +11 -12
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_navbar.scss +90 -66
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_navs.scss +56 -68
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_normalize.scss +0 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_pager.scss +4 -3
- data/app/assets/stylesheets/twitter/bootstrap/_pagination.scss +108 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_panels.scss +8 -2
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_popovers.scss +22 -20
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_print.scss +26 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_progress-bars.scss +5 -18
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_responsive-utilities.scss +25 -25
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_scaffolding.scss +24 -8
- data/app/assets/stylesheets/twitter/bootstrap/_tables.scss +211 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_thumbnails.scss +2 -3
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_tooltip.scss +26 -2
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_type.scss +31 -49
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_utilities.scss +0 -0
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_variables.scss +201 -54
- data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_wells.scss +0 -0
- data/bootstrap-rails.gemspec +0 -1
- data/lib/bootstrap-rails/version.rb +1 -1
- metadata +54 -60
- data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.eot +0 -0
- data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.otf +0 -0
- data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.svg +0 -175
- data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.ttf +0 -0
- data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.woff +0 -0
- data/vendor/assets/stylesheets/twitter/bootstrap/_breadcrumbs.scss +0 -28
- data/vendor/assets/stylesheets/twitter/bootstrap/_glyphicons.scss +0 -200
- data/vendor/assets/stylesheets/twitter/bootstrap/_grid.scss +0 -65
- data/vendor/assets/stylesheets/twitter/bootstrap/_list-group.scss +0 -96
- data/vendor/assets/stylesheets/twitter/bootstrap/_pagination.scss +0 -87
- data/vendor/assets/stylesheets/twitter/bootstrap/_tables.scss +0 -242
@@ -0,0 +1,155 @@
|
|
1
|
+
//
|
2
|
+
// Grid system
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
// Set the container width, and override it for fixed navbars in media queries
|
6
|
+
.container {
|
7
|
+
@include container-fixed();
|
8
|
+
}
|
9
|
+
|
10
|
+
// Mobile-first defaults
|
11
|
+
.row {
|
12
|
+
@include make-row();
|
13
|
+
}
|
14
|
+
|
15
|
+
// Common styles for small and large grid columns
|
16
|
+
.col-1,
|
17
|
+
.col-2,
|
18
|
+
.col-3,
|
19
|
+
.col-4,
|
20
|
+
.col-5,
|
21
|
+
.col-6,
|
22
|
+
.col-7,
|
23
|
+
.col-8,
|
24
|
+
.col-9,
|
25
|
+
.col-10,
|
26
|
+
.col-11,
|
27
|
+
.col-12,
|
28
|
+
.col-sm-1,
|
29
|
+
.col-sm-2,
|
30
|
+
.col-sm-3,
|
31
|
+
.col-sm-4,
|
32
|
+
.col-sm-5,
|
33
|
+
.col-sm-6,
|
34
|
+
.col-sm-7,
|
35
|
+
.col-sm-8,
|
36
|
+
.col-sm-9,
|
37
|
+
.col-sm-10,
|
38
|
+
.col-sm-11,
|
39
|
+
.col-sm-12,
|
40
|
+
.col-lg-1,
|
41
|
+
.col-lg-2,
|
42
|
+
.col-lg-3,
|
43
|
+
.col-lg-4,
|
44
|
+
.col-lg-5,
|
45
|
+
.col-lg-6,
|
46
|
+
.col-lg-7,
|
47
|
+
.col-lg-8,
|
48
|
+
.col-lg-9,
|
49
|
+
.col-lg-10,
|
50
|
+
.col-lg-11,
|
51
|
+
.col-lg-12 {
|
52
|
+
position: relative;
|
53
|
+
// Prevent columns from collapsing when empty
|
54
|
+
min-height: 1px;
|
55
|
+
// Inner gutter via padding
|
56
|
+
padding-left: ($grid-gutter-width / 2);
|
57
|
+
padding-right: ($grid-gutter-width / 2);
|
58
|
+
}
|
59
|
+
|
60
|
+
|
61
|
+
|
62
|
+
//
|
63
|
+
// Container and grid column sizing
|
64
|
+
//
|
65
|
+
|
66
|
+
// Tiny device columns (smartphones)
|
67
|
+
.col-1,
|
68
|
+
.col-2,
|
69
|
+
.col-3,
|
70
|
+
.col-4,
|
71
|
+
.col-5,
|
72
|
+
.col-6,
|
73
|
+
.col-7,
|
74
|
+
.col-8,
|
75
|
+
.col-9,
|
76
|
+
.col-10,
|
77
|
+
.col-11,
|
78
|
+
.col-12 {
|
79
|
+
float: left;
|
80
|
+
}
|
81
|
+
|
82
|
+
@for $i from 1 through $grid-columns {
|
83
|
+
.col-#{$i} { width: percentage(($i / $grid-columns)); }
|
84
|
+
}
|
85
|
+
|
86
|
+
// Small device columns (phones to tablets)
|
87
|
+
@media (min-width: $screen-tablet) {
|
88
|
+
.container {
|
89
|
+
max-width: $container-tablet;
|
90
|
+
}
|
91
|
+
|
92
|
+
.col-sm-1,
|
93
|
+
.col-sm-2,
|
94
|
+
.col-sm-3,
|
95
|
+
.col-sm-4,
|
96
|
+
.col-sm-5,
|
97
|
+
.col-sm-6,
|
98
|
+
.col-sm-7,
|
99
|
+
.col-sm-8,
|
100
|
+
.col-sm-9,
|
101
|
+
.col-sm-10,
|
102
|
+
.col-sm-11,
|
103
|
+
.col-sm-12 {
|
104
|
+
float: left;
|
105
|
+
}
|
106
|
+
|
107
|
+
@for $i from 1 through $grid-columns {
|
108
|
+
.col-sm-#{$i} { width: percentage(($i / $grid-columns)); }
|
109
|
+
}
|
110
|
+
|
111
|
+
// Push and pull columns for source order changes
|
112
|
+
@for $i from 1 through $grid-columns - 1 {
|
113
|
+
.col-push-#{$i} { left: percentage(($i / $grid-columns)); }
|
114
|
+
}
|
115
|
+
|
116
|
+
@for $i from 1 through $grid-columns - 1 {
|
117
|
+
.col-pull-#{$i} { right: percentage(($i / $grid-columns)); }
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
// Medium and large device columns (desktop and up)
|
122
|
+
@media (min-width: $screen-desktop) {
|
123
|
+
.container {
|
124
|
+
max-width: $container-desktop;
|
125
|
+
}
|
126
|
+
.col-lg-1,
|
127
|
+
.col-lg-2,
|
128
|
+
.col-lg-3,
|
129
|
+
.col-lg-4,
|
130
|
+
.col-lg-5,
|
131
|
+
.col-lg-6,
|
132
|
+
.col-lg-7,
|
133
|
+
.col-lg-8,
|
134
|
+
.col-lg-9,
|
135
|
+
.col-lg-10,
|
136
|
+
.col-lg-11,
|
137
|
+
.col-lg-12 {
|
138
|
+
float: left;
|
139
|
+
}
|
140
|
+
@for $i from 1 through $grid-columns {
|
141
|
+
.col-lg-#{$i} { width: percentage(($i / $grid-columns)); }
|
142
|
+
}
|
143
|
+
|
144
|
+
// Offsets
|
145
|
+
@for $i from 1 through $grid-columns - 1 {
|
146
|
+
.col-offset-#{$i} { margin-left: percentage(($i / $grid-columns)); }
|
147
|
+
}
|
148
|
+
}
|
149
|
+
|
150
|
+
// Large desktops and up
|
151
|
+
@media (min-width: $screen-large-desktop) {
|
152
|
+
.container {
|
153
|
+
max-width: $container-large-desktop;
|
154
|
+
}
|
155
|
+
}
|
@@ -18,13 +18,10 @@
|
|
18
18
|
p {
|
19
19
|
line-height: 1.4;
|
20
20
|
}
|
21
|
-
}
|
22
21
|
|
23
|
-
@media screen and (min-width: $screen-tablet) {
|
24
|
-
.jumbotron {
|
22
|
+
@media screen and (min-width: $screen-tablet) {
|
25
23
|
padding: 50px 60px;
|
26
24
|
border-radius: $border-radius-large; // Only round corners at higher resolutions
|
27
|
-
|
28
25
|
h1 {
|
29
26
|
font-size: ($font-size-base * 4.5);
|
30
27
|
}
|
@@ -8,7 +8,7 @@
|
|
8
8
|
font-size: 75%;
|
9
9
|
font-weight: 500;
|
10
10
|
line-height: 1;
|
11
|
-
color:
|
11
|
+
color: $label-color;
|
12
12
|
text-align: center;
|
13
13
|
white-space: nowrap;
|
14
14
|
vertical-align: middle;
|
@@ -19,7 +19,7 @@
|
|
19
19
|
&[href] {
|
20
20
|
&:hover,
|
21
21
|
&:focus {
|
22
|
-
color:
|
22
|
+
color: $label-link-hover-color;
|
23
23
|
text-decoration: none;
|
24
24
|
cursor: pointer;
|
25
25
|
background-color: darken($gray-light, 10%);
|
@@ -30,41 +30,17 @@
|
|
30
30
|
// Colors
|
31
31
|
// Contextual variations (linked labels get darker on :hover)
|
32
32
|
.label-danger {
|
33
|
-
|
34
|
-
&[href] {
|
35
|
-
&:hover,
|
36
|
-
&:focus {
|
37
|
-
background-color: darken($label-danger-bg, 10%);
|
38
|
-
}
|
39
|
-
}
|
33
|
+
@include label-variant($label-danger-bg);
|
40
34
|
}
|
41
35
|
|
42
36
|
.label-success {
|
43
|
-
|
44
|
-
&[href] {
|
45
|
-
&:hover,
|
46
|
-
&:focus {
|
47
|
-
background-color: darken($label-success-bg, 10%);
|
48
|
-
}
|
49
|
-
}
|
37
|
+
@include label-variant($label-success-bg);
|
50
38
|
}
|
51
39
|
|
52
40
|
.label-warning {
|
53
|
-
|
54
|
-
&[href] {
|
55
|
-
&:hover,
|
56
|
-
&:focus {
|
57
|
-
background-color: darken($label-warning-bg, 10%);
|
58
|
-
}
|
59
|
-
}
|
41
|
+
@include label-variant($label-warning-bg);
|
60
42
|
}
|
61
43
|
|
62
44
|
.label-info {
|
63
|
-
|
64
|
-
|
65
|
-
&:hover,
|
66
|
-
&:focus {
|
67
|
-
background-color: darken($label-info-bg, 10%);
|
68
|
-
}
|
69
|
-
}
|
70
|
-
}
|
45
|
+
@include label-variant($label-info-bg);
|
46
|
+
}
|
@@ -0,0 +1,89 @@
|
|
1
|
+
//
|
2
|
+
// List groups
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
// Base class
|
6
|
+
//
|
7
|
+
// Easily usable on <ul>, <ol>, or <div>.
|
8
|
+
.list-group {
|
9
|
+
// No need to set list-style: none; since .list-group-item is block level
|
10
|
+
margin-bottom: 20px;
|
11
|
+
padding-left: 0; // reset padding because ul and ol
|
12
|
+
background-color: $list-group-bg;
|
13
|
+
}
|
14
|
+
|
15
|
+
// Individual list items
|
16
|
+
// -------------------------
|
17
|
+
|
18
|
+
.list-group-item {
|
19
|
+
position: relative;
|
20
|
+
display: block;
|
21
|
+
padding: 10px 30px 10px 15px;
|
22
|
+
// Place the border on the list items and negative margin up for better styling
|
23
|
+
margin-bottom: -1px;
|
24
|
+
border: 1px solid $list-group-border;
|
25
|
+
|
26
|
+
// Round the first and last items
|
27
|
+
&:first-child {
|
28
|
+
@include border-top-radius($border-radius-base);
|
29
|
+
}
|
30
|
+
&:last-child {
|
31
|
+
margin-bottom: 0;
|
32
|
+
@include border-bottom-radius($border-radius-base);
|
33
|
+
}
|
34
|
+
|
35
|
+
// Align badges within list items
|
36
|
+
> .badge {
|
37
|
+
float: right;
|
38
|
+
margin-right: -15px;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// Custom content options
|
43
|
+
// -------------------------
|
44
|
+
|
45
|
+
.list-group-item-heading {
|
46
|
+
margin-top: 0;
|
47
|
+
margin-bottom: 5px;
|
48
|
+
}
|
49
|
+
.list-group-item-text {
|
50
|
+
margin-bottom: 0;
|
51
|
+
line-height: 1.3;
|
52
|
+
}
|
53
|
+
|
54
|
+
// Linked list items
|
55
|
+
// -------------------------
|
56
|
+
|
57
|
+
// Custom content within linked items
|
58
|
+
a.list-group-item {
|
59
|
+
// Colorize content accordingly
|
60
|
+
.list-group-item-heading {
|
61
|
+
color: $list-group-link-heading-color;
|
62
|
+
}
|
63
|
+
.list-group-item-text {
|
64
|
+
color: $list-group-link-color;
|
65
|
+
}
|
66
|
+
|
67
|
+
// Hover state
|
68
|
+
&:hover,
|
69
|
+
&:focus {
|
70
|
+
text-decoration: none;
|
71
|
+
background-color: $list-group-hover-bg;
|
72
|
+
}
|
73
|
+
|
74
|
+
// Active class on item itself, not parent
|
75
|
+
&.active {
|
76
|
+
z-index: 2; // Place active items above their siblings for proper border styling
|
77
|
+
color: $list-group-active-color;
|
78
|
+
background-color: $list-group-active-bg;
|
79
|
+
border-color: $list-group-active-border;
|
80
|
+
|
81
|
+
// Force color to inherit for custom content
|
82
|
+
.list-group-item-heading {
|
83
|
+
color: inherit;
|
84
|
+
}
|
85
|
+
.list-group-item-text {
|
86
|
+
color: lighten($list-group-active-bg, 40%);
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
@@ -36,11 +36,13 @@
|
|
36
36
|
// Media image alignment
|
37
37
|
// -------------------------
|
38
38
|
|
39
|
-
.media
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
39
|
+
.media {
|
40
|
+
> .pull-left {
|
41
|
+
margin-right: 10px;
|
42
|
+
}
|
43
|
+
> .pull-right {
|
44
|
+
margin-left: 10px;
|
45
|
+
}
|
44
46
|
}
|
45
47
|
|
46
48
|
|
@@ -49,6 +51,6 @@
|
|
49
51
|
|
50
52
|
// Undo default ul/ol styles
|
51
53
|
.media-list {
|
52
|
-
|
54
|
+
padding-left: 0;
|
53
55
|
list-style: none;
|
54
56
|
}
|
@@ -109,62 +109,52 @@
|
|
109
109
|
// Transitions
|
110
110
|
@mixin transition($transition) {
|
111
111
|
-webkit-transition: $transition;
|
112
|
-
-moz-transition: $transition;
|
113
|
-
-o-transition: $transition;
|
114
112
|
transition: $transition;
|
115
113
|
}
|
116
114
|
@mixin transition-delay($transition-delay) {
|
117
115
|
-webkit-transition-delay: $transition-delay;
|
118
|
-
-moz-transition-delay: $transition-delay;
|
119
|
-
-o-transition-delay: $transition-delay;
|
120
116
|
transition-delay: $transition-delay;
|
121
117
|
}
|
122
118
|
@mixin transition-duration($transition-duration) {
|
123
119
|
-webkit-transition-duration: $transition-duration;
|
124
|
-
-moz-transition-duration: $transition-duration;
|
125
|
-
-o-transition-duration: $transition-duration;
|
126
120
|
transition-duration: $transition-duration;
|
127
121
|
}
|
122
|
+
@mixin transition-transform($transition) {
|
123
|
+
-webkit-transition: -webkit-transform $transition;
|
124
|
+
-moz-transition: -moz-transform $transition;
|
125
|
+
-o-transition: -o-transform $transition;
|
126
|
+
transition: transform $transition;
|
127
|
+
}
|
128
128
|
|
129
129
|
// Transformations
|
130
130
|
@mixin rotate($degrees) {
|
131
131
|
-webkit-transform: rotate($degrees);
|
132
|
-
-moz-transform: rotate($degrees);
|
133
132
|
-ms-transform: rotate($degrees);
|
134
|
-
-o-transform: rotate($degrees);
|
135
133
|
transform: rotate($degrees);
|
136
134
|
}
|
137
135
|
@mixin scale($ratio) {
|
138
136
|
-webkit-transform: scale($ratio);
|
139
|
-
-moz-transform: scale($ratio);
|
140
137
|
-ms-transform: scale($ratio);
|
141
|
-
-o-transform: scale($ratio);
|
142
138
|
transform: scale($ratio);
|
143
139
|
}
|
144
140
|
@mixin translate($x, $y) {
|
145
141
|
-webkit-transform: translate($x, $y);
|
146
|
-
-moz-transform: translate($x, $y);
|
147
142
|
-ms-transform: translate($x, $y);
|
148
|
-
-o-transform: translate($x, $y);
|
149
143
|
transform: translate($x, $y);
|
150
144
|
}
|
151
145
|
@mixin skew($x, $y) {
|
152
146
|
-webkit-transform: skew($x, $y);
|
153
|
-
|
154
|
-
-ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
|
155
|
-
-o-transform: skew($x, $y);
|
147
|
+
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885
|
156
148
|
transform: skew($x, $y);
|
157
149
|
}
|
158
150
|
@mixin translate3d($x, $y, $z) {
|
159
151
|
-webkit-transform: translate3d($x, $y, $z);
|
160
|
-
-moz-transform: translate3d($x, $y, $z);
|
161
|
-
-o-transform: translate3d($x, $y, $z);
|
162
152
|
transform: translate3d($x, $y, $z);
|
163
153
|
}
|
164
154
|
|
165
155
|
// Backface visibility
|
166
156
|
// Prevent browsers from flickering when using CSS 3D transforms.
|
167
|
-
// Default value is `visible`, but can be changed to `hidden
|
157
|
+
// Default value is `visible`, but can be changed to `hidden`
|
168
158
|
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
169
159
|
@mixin backface-visibility($visibility){
|
170
160
|
-webkit-backface-visibility: $visibility;
|
@@ -174,16 +164,11 @@
|
|
174
164
|
|
175
165
|
// Background clipping
|
176
166
|
@mixin background-clip($clip) {
|
177
|
-
-webkit-background-clip: $clip;
|
178
|
-
-moz-background-clip: $clip;
|
179
167
|
background-clip: $clip;
|
180
168
|
}
|
181
169
|
|
182
170
|
// Background sizing
|
183
171
|
@mixin background-size($size) {
|
184
|
-
-webkit-background-size: $size;
|
185
|
-
-moz-background-size: $size;
|
186
|
-
-o-background-size: $size;
|
187
172
|
background-size: $size;
|
188
173
|
}
|
189
174
|
|
@@ -235,65 +220,75 @@
|
|
235
220
|
opacity: $opacity;
|
236
221
|
// IE8 filter
|
237
222
|
$opacity-ie: ($opacity * 100);
|
238
|
-
filter: alpha(opacity=#{opacity-ie})
|
223
|
+
filter: alpha(opacity=#{$opacity-ie})
|
239
224
|
}
|
240
225
|
|
241
226
|
|
242
227
|
|
243
|
-
//
|
228
|
+
// GRADIENTS
|
244
229
|
// --------------------------------------------------
|
245
230
|
|
246
|
-
//
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
background-
|
252
|
-
background-image:
|
231
|
+
// Horizontal gradient, from left to right
|
232
|
+
//
|
233
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
234
|
+
// Color stops are not available in IE9 and below.
|
235
|
+
@mixin gradient-horizontal($start-color: #555, $start-percent: 0%, $end-color: #333, $end-percent: 100%) {
|
236
|
+
background-color: $end-color;
|
237
|
+
background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
|
238
|
+
background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+
|
239
|
+
background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
|
240
|
+
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
|
253
241
|
background-repeat: repeat-x;
|
254
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($
|
255
|
-
}
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
242
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
|
243
|
+
}
|
244
|
+
|
245
|
+
// Vertical gradient, from top to bottom
|
246
|
+
//
|
247
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
248
|
+
// Color stops are not available in IE9 and below.
|
249
|
+
@mixin gradient-vertical($start-color: #555, $start-percent: 0%, $end-color: #333, $end-percent: 100%) {
|
250
|
+
background-color: $end-color;
|
251
|
+
background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
|
252
|
+
background-image: -webkit-linear-gradient(top, $start-color, $start-percent, $end-color, $end-percent); // Safari 5.1+, Chrome 10+
|
253
|
+
background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
|
254
|
+
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
|
262
255
|
background-repeat: repeat-x;
|
263
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($
|
256
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
|
264
257
|
}
|
265
|
-
|
266
|
-
|
258
|
+
|
259
|
+
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
260
|
+
background-color: $end-color;
|
267
261
|
background-repeat: repeat-x;
|
268
|
-
background-image: -webkit-linear-gradient($deg, $
|
269
|
-
background-image: -moz-linear-gradient($deg, $
|
270
|
-
background-image: linear-gradient($deg, $
|
271
|
-
}
|
272
|
-
|
273
|
-
|
274
|
-
background-
|
275
|
-
background-image: -webkit-
|
276
|
-
background-image: -
|
277
|
-
background-image: linear-gradient(
|
262
|
+
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1+, Chrome 10+
|
263
|
+
background-image: -moz-linear-gradient($deg, $start-color, $end-color); // FF 3.6+
|
264
|
+
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10
|
265
|
+
}
|
266
|
+
|
267
|
+
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
268
|
+
background-color: mix($mid-color, $end-color, 80%);
|
269
|
+
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
|
270
|
+
background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
|
271
|
+
background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
|
272
|
+
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
278
273
|
background-repeat: no-repeat;
|
279
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($
|
274
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
|
280
275
|
}
|
281
276
|
|
282
|
-
@mixin gradient-vertical-three-colors($
|
283
|
-
background-color: mix($
|
284
|
-
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($
|
285
|
-
background-image: -webkit-linear-gradient($
|
286
|
-
background-image: -moz-linear-gradient(top, $
|
287
|
-
background-image: linear-gradient($
|
277
|
+
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
278
|
+
background-color: mix($mid-color, $end-color, 80%);
|
279
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
|
280
|
+
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
281
|
+
background-image: -moz-linear-gradient(top, $start-color, $mid-color $color-stop, $end-color);
|
282
|
+
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
288
283
|
background-repeat: no-repeat;
|
289
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($
|
290
|
-
}
|
291
|
-
@mixin gradient-radial($
|
292
|
-
background-color: $
|
293
|
-
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($
|
294
|
-
background-image: -webkit-radial-gradient(circle, $
|
295
|
-
background-image: -moz-radial-gradient(circle, $
|
296
|
-
background-image: radial-gradient(circle, $
|
284
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
285
|
+
}
|
286
|
+
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
|
287
|
+
background-color: $outer-color;
|
288
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color));
|
289
|
+
background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
|
290
|
+
background-image: -moz-radial-gradient(circle, $inner-color, $outer-color);
|
291
|
+
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
297
292
|
background-repeat: no-repeat;
|
298
293
|
}
|
299
294
|
@mixin gradient-striped($color: #555, $angle: 45deg) {
|
@@ -305,17 +300,21 @@
|
|
305
300
|
}
|
306
301
|
|
307
302
|
// Reset filters for IE
|
303
|
+
//
|
304
|
+
// When you need to remove a gradient background, don't forget to use this to reset
|
305
|
+
// the IE filter for IE9 and below.
|
308
306
|
@mixin reset-filter() {
|
309
307
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
310
308
|
}
|
311
309
|
|
312
310
|
|
311
|
+
|
313
312
|
// RETINA IMAGE SUPPORT
|
314
313
|
// --------------------------------------------------
|
315
314
|
|
316
315
|
// Short retina mixin for setting background-image and -size
|
317
|
-
@mixin retina
|
318
|
-
background-image: url("#{file-1x}");
|
316
|
+
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
317
|
+
background-image: url("#{$file-1x}");
|
319
318
|
|
320
319
|
@media
|
321
320
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
@@ -324,7 +323,7 @@
|
|
324
323
|
only screen and ( min-device-pixel-ratio: 2),
|
325
324
|
only screen and ( min-resolution: 192dpi),
|
326
325
|
only screen and ( min-resolution: 2dppx) {
|
327
|
-
background-image: url("#{file-2x}");
|
326
|
+
background-image: url("#{$file-2x}");
|
328
327
|
background-size: $width-1x $height-1x;
|
329
328
|
}
|
330
329
|
}
|
@@ -336,15 +335,28 @@
|
|
336
335
|
// Horizontal dividers
|
337
336
|
// -------------------------
|
338
337
|
// Dividers (basically an hr) within dropdowns and nav lists
|
339
|
-
@mixin nav-divider($
|
340
|
-
height:
|
338
|
+
@mixin nav-divider($color: #e5e5e5) {
|
339
|
+
height: 1px;
|
341
340
|
margin: (($line-height-computed / 2) - 1) 0;
|
342
341
|
overflow: hidden;
|
343
|
-
background-color: $
|
344
|
-
|
342
|
+
background-color: $color;
|
343
|
+
}
|
344
|
+
|
345
|
+
// Alerts
|
346
|
+
// -------------------------
|
347
|
+
@mixin alert-variant($background, $border, $text-color) {
|
348
|
+
background-color: $background;
|
349
|
+
border-color: $border;
|
350
|
+
color: $text-color;
|
351
|
+
hr {
|
352
|
+
border-top-color: darken($border, 5%);
|
353
|
+
}
|
354
|
+
.alert-link {
|
355
|
+
color: darken($text-color, 10%);
|
356
|
+
}
|
345
357
|
}
|
346
358
|
|
347
|
-
// Button
|
359
|
+
// Button pseudo states
|
348
360
|
// -------------------------
|
349
361
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
350
362
|
// and disabled options for all buttons
|
@@ -364,6 +376,7 @@
|
|
364
376
|
&.disabled,
|
365
377
|
&[disabled],
|
366
378
|
fieldset[disabled] & {
|
379
|
+
&,
|
367
380
|
&:hover,
|
368
381
|
&:focus,
|
369
382
|
&:active,
|
@@ -374,6 +387,18 @@
|
|
374
387
|
}
|
375
388
|
}
|
376
389
|
|
390
|
+
// Labels
|
391
|
+
// -------------------------
|
392
|
+
@mixin label-variant($color) {
|
393
|
+
background-color: $color;
|
394
|
+
&[href] {
|
395
|
+
&:hover,
|
396
|
+
&:focus {
|
397
|
+
background-color: darken($color, 10%);
|
398
|
+
}
|
399
|
+
}
|
400
|
+
}
|
401
|
+
|
377
402
|
// Navbar vertical align
|
378
403
|
// -------------------------
|
379
404
|
// Vertically center elements in the navbar.
|
@@ -383,7 +408,36 @@
|
|
383
408
|
margin-bottom: (($navbar-height - $element-height) / 2);
|
384
409
|
}
|
385
410
|
|
411
|
+
// Progress bars
|
412
|
+
// -------------------------
|
413
|
+
@mixin progress-bar-variant($color) {
|
414
|
+
background-color: $color;
|
415
|
+
.progress-striped & {
|
416
|
+
@include gradient-striped($color);
|
417
|
+
}
|
418
|
+
}
|
419
|
+
|
420
|
+
// Responsive utilities
|
421
|
+
// -------------------------
|
422
|
+
// More easily include all the states for responsive-utilities.less.
|
423
|
+
@mixin responsive-visibility($selector) {
|
424
|
+
#{$selector} {
|
425
|
+
display: block !important;
|
426
|
+
}
|
427
|
+
|
428
|
+
tr#{$selector} { display: table-row !important; }
|
429
|
+
th#{$selector},
|
430
|
+
td#{$selector} { display: table-cell !important; }
|
431
|
+
}
|
386
432
|
|
433
|
+
@mixin responsive-invisibility($selector) {
|
434
|
+
#{$selector} {
|
435
|
+
display: none !important;
|
436
|
+
}
|
437
|
+
tr#{$selector} { display: none !important; }
|
438
|
+
th#{$selector},
|
439
|
+
td#{$selector} { display: none !important; }
|
440
|
+
}
|
387
441
|
|
388
442
|
// Grid System
|
389
443
|
// -----------
|
@@ -395,25 +449,26 @@
|
|
395
449
|
@include clearfix();
|
396
450
|
}
|
397
451
|
|
398
|
-
// Make a grid
|
399
|
-
|
400
452
|
// Creates a wrapper for a series of columns
|
401
453
|
@mixin make-row() {
|
402
454
|
// Then clear the floated columns
|
403
455
|
@include clearfix();
|
404
456
|
|
457
|
+
@media (min-width: $screen-small) {
|
458
|
+
margin-left: ($grid-gutter-width / -2);
|
459
|
+
margin-right: ($grid-gutter-width / -2);
|
460
|
+
}
|
461
|
+
|
405
462
|
// Negative margin nested rows out to align the content of columns
|
406
463
|
.row {
|
407
464
|
margin-left: ($grid-gutter-width / -2);
|
408
465
|
margin-right: ($grid-gutter-width / -2);
|
409
466
|
}
|
410
467
|
}
|
468
|
+
|
411
469
|
// Generate the columns
|
412
470
|
@mixin make-column($columns) {
|
413
471
|
position: relative;
|
414
|
-
// Float and set width: 100%; for easy stacking on mobile devices
|
415
|
-
float: left;
|
416
|
-
width: 100%;
|
417
472
|
// Prevent columns from collapsing when empty
|
418
473
|
min-height: 1px;
|
419
474
|
// Inner gutter via padding
|
@@ -422,9 +477,11 @@
|
|
422
477
|
|
423
478
|
// Calculate width based on number of columns available
|
424
479
|
@media (min-width: $grid-float-breakpoint) {
|
480
|
+
float: left;
|
425
481
|
width: percentage(($columns / $grid-columns));
|
426
482
|
}
|
427
483
|
}
|
484
|
+
|
428
485
|
// Generate the column offsets
|
429
486
|
@mixin make-column-offset($columns) {
|
430
487
|
@media (min-width: $grid-float-breakpoint) {
|
@@ -442,62 +499,20 @@
|
|
442
499
|
}
|
443
500
|
}
|
444
501
|
|
445
|
-
@mixin col-sm($columns, $grid-columns: $grid-columns) {
|
446
|
-
width: percentage(($columns / $grid-columns));
|
447
|
-
}
|
448
|
-
|
449
|
-
@mixin col-lg($columns, $grid-columns: $grid-columns) {
|
450
|
-
width: percentage(($columns / $grid-columns));
|
451
|
-
}
|
452
|
-
|
453
|
-
@mixin col-offset($columns, $grid-columns: $grid-columns) {
|
454
|
-
margin-left: percentage(($columns / $grid-columns));
|
455
|
-
}
|
456
|
-
|
457
|
-
@mixin col-push($columns, $grid-columns: $grid-columns) {
|
458
|
-
left: percentage(($columns / $grid-columns));
|
459
|
-
}
|
460
|
-
|
461
|
-
@mixin col-pull($columns, $grid-columns: $grid-columns) {
|
462
|
-
right: percentage(($columns / $grid-columns));
|
463
|
-
}
|
464
|
-
|
465
|
-
// Small grid columns
|
466
|
-
@mixin generate-grid-columns($grid-columns) {
|
467
|
-
$columns: $grid-columns;
|
468
|
-
|
469
|
-
@while $columns > 0 {
|
470
|
-
.col-sm-#{$columns} { @include col-sm($columns, $grid-columns) }
|
471
|
-
|
472
|
-
$columns: $columns - 1;
|
473
|
-
}
|
474
|
-
}
|
475
|
-
|
476
|
-
// Large grid columns
|
477
|
-
@mixin generate-large-grid-columns($grid-columns) {
|
478
|
-
$columns: $grid-columns;
|
479
|
-
|
480
|
-
@while $columns > 0 {
|
481
|
-
.col-lg-#{$columns} { @include col-lg($columns, $grid-columns) }
|
482
|
-
.col-offset-#{$columns} { @include col-offset($columns, $grid-columns) }
|
483
|
-
.col-push-#{$columns} { @include col-push($columns, $grid-columns) }
|
484
|
-
.col-pull-#{$columns} { @include col-pull($columns, $grid-columns) }
|
485
502
|
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
// Framework mixins
|
491
|
-
// --------------------------------------------------
|
503
|
+
// Form validation states
|
504
|
+
//
|
505
|
+
// Used in forms.less to generate the form validation CSS for warnings, errors,
|
506
|
+
// and successes.
|
492
507
|
|
493
|
-
|
494
|
-
|
495
|
-
|
508
|
+
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
|
509
|
+
// Color the label and help text
|
510
|
+
.help-block,
|
496
511
|
.control-label {
|
497
512
|
color: $text-color;
|
498
513
|
}
|
499
514
|
// Set the border and box shadow on specific inputs to match
|
500
|
-
.
|
515
|
+
.form-control {
|
501
516
|
padding-right: 32px; // to account for the feedback icon
|
502
517
|
border-color: $border-color;
|
503
518
|
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
@@ -507,4 +522,10 @@
|
|
507
522
|
@include box-shadow($shadow);
|
508
523
|
}
|
509
524
|
}
|
525
|
+
// Set validation states also for addons
|
526
|
+
.input-group-addon {
|
527
|
+
color: $text-color;
|
528
|
+
border-color: $border-color;
|
529
|
+
background-color: $background-color;
|
530
|
+
}
|
510
531
|
}
|