rails_admin 0.6.5 → 0.6.6
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/app/assets/javascripts/rails_admin/bootstrap/bootstrap-affix.js +99 -74
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-alert.js +48 -55
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-button.js +70 -65
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-carousel.js +163 -147
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-collapse.js +117 -114
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-dropdown.js +89 -107
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-modal.js +208 -175
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-popover.js +77 -78
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-scrollspy.js +137 -129
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-tab.js +85 -101
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-tooltip.js +364 -268
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-transition.js +51 -52
- data/app/assets/javascripts/rails_admin/bootstrap/bootstrap-typeahead.js +1782 -335
- data/app/assets/javascripts/rails_admin/ra.filter-box.js +1 -1
- data/app/assets/javascripts/rails_admin/ra.filtering-multiselect.js +3 -3
- data/app/assets/javascripts/rails_admin/ra.filtering-select.js +1 -1
- data/app/assets/javascripts/rails_admin/ra.remote-form.js +6 -2
- data/app/assets/stylesheets/rails_admin/base/theming.scss +34 -14
- data/app/assets/stylesheets/rails_admin/bootstrap/_alerts.scss +47 -58
- data/app/assets/stylesheets/rails_admin/bootstrap/_badges.scss +57 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_breadcrumbs.scss +12 -10
- data/app/assets/stylesheets/rails_admin/bootstrap/_button-groups.scss +163 -152
- data/app/assets/stylesheets/rails_admin/bootstrap/_buttons.scss +98 -169
- data/app/assets/stylesheets/rails_admin/bootstrap/_carousel.scss +151 -66
- data/app/assets/stylesheets/rails_admin/bootstrap/_close.scss +11 -8
- data/app/assets/stylesheets/rails_admin/bootstrap/_code.scss +36 -29
- data/app/assets/stylesheets/rails_admin/bootstrap/_component-animations.scss +16 -3
- data/app/assets/stylesheets/rails_admin/bootstrap/_dropdowns.scss +115 -148
- data/app/assets/stylesheets/rails_admin/bootstrap/_forms.scss +396 -547
- data/app/assets/stylesheets/rails_admin/bootstrap/_glyphicons.scss +237 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_grid.scss +74 -11
- data/app/assets/stylesheets/rails_admin/bootstrap/_input-groups.scss +166 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_jumbotron.scss +48 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_labels.scss +66 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_list-group.scss +131 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_media.scss +8 -7
- data/app/assets/stylesheets/rails_admin/bootstrap/_mixins.scss +36 -693
- data/app/assets/stylesheets/rails_admin/bootstrap/_modals.scss +108 -53
- data/app/assets/stylesheets/rails_admin/bootstrap/_navbar.scss +545 -383
- data/app/assets/stylesheets/rails_admin/bootstrap/_navs.scss +191 -358
- data/app/assets/stylesheets/rails_admin/bootstrap/_normalize.scss +425 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_pager.scss +45 -33
- data/app/assets/stylesheets/rails_admin/bootstrap/_pagination.scss +70 -105
- data/app/assets/stylesheets/rails_admin/bootstrap/_panels.scss +243 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_popovers.scss +61 -61
- data/app/assets/stylesheets/rails_admin/bootstrap/_print.scss +101 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_progress-bars.scss +56 -73
- data/app/assets/stylesheets/rails_admin/bootstrap/_responsive-embed.scss +34 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_responsive-utilities.scss +150 -50
- data/app/assets/stylesheets/rails_admin/bootstrap/_scaffolding.scss +120 -23
- data/app/assets/stylesheets/rails_admin/bootstrap/_tables.scss +168 -170
- data/app/assets/stylesheets/rails_admin/bootstrap/_theme.scss +258 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/_thumbnails.scss +27 -42
- data/app/assets/stylesheets/rails_admin/bootstrap/_tooltip.scss +49 -24
- data/app/assets/stylesheets/rails_admin/bootstrap/_type.scss +200 -143
- data/app/assets/stylesheets/rails_admin/bootstrap/_utilities.scss +33 -21
- data/app/assets/stylesheets/rails_admin/bootstrap/_variables.scss +764 -215
- data/app/assets/stylesheets/rails_admin/bootstrap/_wells.scss +7 -7
- data/app/assets/stylesheets/rails_admin/bootstrap/bootstrap.scss +47 -60
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_alerts.scss +14 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_background-variant.scss +11 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_border-radius.scss +18 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_buttons.scss +50 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_center-block.scss +7 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_clearfix.scss +22 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_forms.scss +84 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_gradients.scss +58 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_grid-framework.scss +81 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_grid.scss +122 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_hide-text.scss +21 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_image.scss +34 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_labels.scss +12 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_list-group.scss +31 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_nav-divider.scss +10 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_nav-vertical-align.scss +9 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_opacity.scss +8 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_pagination.scss +23 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_panels.scss +24 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_progress-bar.scss +10 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_reset-filter.scss +8 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_resize.scss +6 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_responsive-visibility.scss +21 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_size.scss +10 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_tab-focus.scss +9 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_table-row.scss +28 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_text-emphasis.scss +11 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_text-overflow.scss +8 -0
- data/app/assets/stylesheets/rails_admin/bootstrap/mixins/_vendor-prefixes.scss +219 -0
- data/app/assets/stylesheets/rails_admin/ra.calendar-additions.scss +17 -0
- data/app/assets/stylesheets/rails_admin/rails_admin.scss.erb +9 -5
- data/app/helpers/rails_admin/application_helper.rb +20 -19
- data/app/helpers/rails_admin/form_builder.rb +14 -11
- data/app/views/kaminari/twitter-bootstrap/_paginator.html.haml +8 -9
- data/app/views/layouts/rails_admin/_navigation.html.haml +5 -5
- data/app/views/layouts/rails_admin/_secondary_navigation.html.haml +1 -1
- data/app/views/layouts/rails_admin/application.html.haml +9 -8
- data/app/views/layouts/rails_admin/pjax.html.haml +4 -3
- data/app/views/rails_admin/main/_form_datetime.html.haml +2 -1
- data/app/views/rails_admin/main/_form_field.html.haml +1 -1
- data/app/views/rails_admin/main/_form_text.html.haml +1 -1
- data/app/views/rails_admin/main/_submit_buttons.html.haml +1 -0
- data/app/views/rails_admin/main/dashboard.html.haml +1 -1
- data/app/views/rails_admin/main/export.html.haml +19 -16
- data/app/views/rails_admin/main/index.html.haml +11 -7
- data/app/views/rails_admin/main/show.html.haml +1 -1
- data/lib/rails_admin/adapters/active_record.rb +2 -2
- data/lib/rails_admin/adapters/mongoid/property.rb +1 -1
- data/lib/rails_admin/config/actions/bulk_delete.rb +0 -1
- data/lib/rails_admin/config/actions/edit.rb +0 -2
- data/lib/rails_admin/config/actions/export.rb +0 -2
- data/lib/rails_admin/config/actions/index.rb +0 -3
- data/lib/rails_admin/config/actions/new.rb +0 -2
- data/lib/rails_admin/config/configurable.rb +1 -1
- data/lib/rails_admin/config/fields/base.rb +9 -0
- data/lib/rails_admin/config/fields/factories/enum.rb +2 -3
- data/lib/rails_admin/config/fields/types/polymorphic_association.rb +4 -0
- data/lib/rails_admin/config/model.rb +2 -1
- data/lib/rails_admin/extensions/paper_trail/auditing_adapter.rb +2 -2
- data/lib/rails_admin/support/csv_converter.rb +22 -42
- data/lib/rails_admin/version.rb +1 -1
- metadata +59 -18
- data/app/assets/stylesheets/rails_admin/bootstrap/_accordion.scss +0 -34
- data/app/assets/stylesheets/rails_admin/bootstrap/_hero-unit.scss +0 -25
- data/app/assets/stylesheets/rails_admin/bootstrap/_labels-badges.scss +0 -83
- data/app/assets/stylesheets/rails_admin/bootstrap/_layouts.scss +0 -16
- data/app/assets/stylesheets/rails_admin/bootstrap/_reset.scss +0 -216
- data/app/assets/stylesheets/rails_admin/bootstrap/_responsive-1200px-min.scss +0 -28
- data/app/assets/stylesheets/rails_admin/bootstrap/_responsive-767px-max.scss +0 -193
- data/app/assets/stylesheets/rails_admin/bootstrap/_responsive-768px-979px.scss +0 -19
- data/app/assets/stylesheets/rails_admin/bootstrap/_responsive-navbar.scss +0 -189
- data/app/assets/stylesheets/rails_admin/bootstrap/_sprites.scss +0 -197
- data/app/assets/stylesheets/rails_admin/bootstrap/responsive.scss +0 -48
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Jumbotron
|
|
3
|
+
// --------------------------------------------------
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
.jumbotron {
|
|
7
|
+
padding: $jumbotron-padding;
|
|
8
|
+
margin-bottom: $jumbotron-padding;
|
|
9
|
+
color: $jumbotron-color;
|
|
10
|
+
background-color: $jumbotron-bg;
|
|
11
|
+
|
|
12
|
+
h1,
|
|
13
|
+
.h1 {
|
|
14
|
+
color: $jumbotron-heading-color;
|
|
15
|
+
}
|
|
16
|
+
p {
|
|
17
|
+
margin-bottom: ($jumbotron-padding / 2);
|
|
18
|
+
font-size: $jumbotron-font-size;
|
|
19
|
+
font-weight: 200;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
> hr {
|
|
23
|
+
border-top-color: darken($jumbotron-bg, 10%);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.container & {
|
|
27
|
+
border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.container {
|
|
31
|
+
max-width: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media screen and (min-width: $screen-sm-min) {
|
|
35
|
+
padding-top: ($jumbotron-padding * 1.6);
|
|
36
|
+
padding-bottom: ($jumbotron-padding * 1.6);
|
|
37
|
+
|
|
38
|
+
.container & {
|
|
39
|
+
padding-left: ($jumbotron-padding * 2);
|
|
40
|
+
padding-right: ($jumbotron-padding * 2);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
h1,
|
|
44
|
+
.h1 {
|
|
45
|
+
font-size: ($font-size-base * 4.5);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Labels
|
|
3
|
+
// --------------------------------------------------
|
|
4
|
+
|
|
5
|
+
.label {
|
|
6
|
+
display: inline;
|
|
7
|
+
padding: .2em .6em .3em;
|
|
8
|
+
font-size: 75%;
|
|
9
|
+
font-weight: bold;
|
|
10
|
+
line-height: 1;
|
|
11
|
+
color: $label-color;
|
|
12
|
+
text-align: center;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
vertical-align: baseline;
|
|
15
|
+
border-radius: .25em;
|
|
16
|
+
|
|
17
|
+
// [converter] extracted a& to a.label
|
|
18
|
+
|
|
19
|
+
// Empty labels collapse automatically (not available in IE8)
|
|
20
|
+
&:empty {
|
|
21
|
+
display: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Quick fix for labels in buttons
|
|
25
|
+
.btn & {
|
|
26
|
+
position: relative;
|
|
27
|
+
top: -1px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Add hover effects, but only for links
|
|
32
|
+
a.label {
|
|
33
|
+
&:hover,
|
|
34
|
+
&:focus {
|
|
35
|
+
color: $label-link-hover-color;
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Colors
|
|
42
|
+
// Contextual variations (linked labels get darker on :hover)
|
|
43
|
+
|
|
44
|
+
.label-default {
|
|
45
|
+
@include label-variant($label-default-bg);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.label-primary {
|
|
49
|
+
@include label-variant($label-primary-bg);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.label-success {
|
|
53
|
+
@include label-variant($label-success-bg);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.label-info {
|
|
57
|
+
@include label-variant($label-info-bg);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.label-warning {
|
|
61
|
+
@include label-variant($label-warning-bg);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.label-danger {
|
|
65
|
+
@include label-variant($label-danger-bg);
|
|
66
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
//
|
|
2
|
+
// List groups
|
|
3
|
+
// --------------------------------------------------
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// Base class
|
|
7
|
+
//
|
|
8
|
+
// Easily usable on <ul>, <ol>, or <div>.
|
|
9
|
+
|
|
10
|
+
.list-group {
|
|
11
|
+
// No need to set list-style: none; since .list-group-item is block level
|
|
12
|
+
margin-bottom: 20px;
|
|
13
|
+
padding-left: 0; // reset padding because ul and ol
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
// Individual list items
|
|
18
|
+
//
|
|
19
|
+
// Use on `li`s or `div`s within the `.list-group` parent.
|
|
20
|
+
|
|
21
|
+
.list-group-item {
|
|
22
|
+
position: relative;
|
|
23
|
+
display: block;
|
|
24
|
+
padding: 10px 15px;
|
|
25
|
+
// Place the border on the list items and negative margin up for better styling
|
|
26
|
+
margin-bottom: -1px;
|
|
27
|
+
background-color: $list-group-bg;
|
|
28
|
+
border: 1px solid $list-group-border;
|
|
29
|
+
|
|
30
|
+
// Round the first and last items
|
|
31
|
+
&:first-child {
|
|
32
|
+
@include border-top-radius($list-group-border-radius);
|
|
33
|
+
}
|
|
34
|
+
&:last-child {
|
|
35
|
+
margin-bottom: 0;
|
|
36
|
+
@include border-bottom-radius($list-group-border-radius);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Align badges within list items
|
|
40
|
+
> .badge {
|
|
41
|
+
float: right;
|
|
42
|
+
}
|
|
43
|
+
> .badge + .badge {
|
|
44
|
+
margin-right: 5px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
// Linked list items
|
|
50
|
+
//
|
|
51
|
+
// Use anchor elements instead of `li`s or `div`s to create linked list items.
|
|
52
|
+
// Includes an extra `.active` modifier class for showing selected items.
|
|
53
|
+
|
|
54
|
+
a.list-group-item {
|
|
55
|
+
color: $list-group-link-color;
|
|
56
|
+
|
|
57
|
+
.list-group-item-heading {
|
|
58
|
+
color: $list-group-link-heading-color;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Hover state
|
|
62
|
+
&:hover,
|
|
63
|
+
&:focus {
|
|
64
|
+
text-decoration: none;
|
|
65
|
+
color: $list-group-link-hover-color;
|
|
66
|
+
background-color: $list-group-hover-bg;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.list-group-item {
|
|
71
|
+
// Disabled state
|
|
72
|
+
&.disabled,
|
|
73
|
+
&.disabled:hover,
|
|
74
|
+
&.disabled:focus {
|
|
75
|
+
background-color: $list-group-disabled-bg;
|
|
76
|
+
color: $list-group-disabled-color;
|
|
77
|
+
|
|
78
|
+
// Force color to inherit for custom content
|
|
79
|
+
.list-group-item-heading {
|
|
80
|
+
color: inherit;
|
|
81
|
+
}
|
|
82
|
+
.list-group-item-text {
|
|
83
|
+
color: $list-group-disabled-text-color;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Active class on item itself, not parent
|
|
88
|
+
&.active,
|
|
89
|
+
&.active:hover,
|
|
90
|
+
&.active:focus {
|
|
91
|
+
z-index: 2; // Place active items above their siblings for proper border styling
|
|
92
|
+
color: $list-group-active-color;
|
|
93
|
+
background-color: $list-group-active-bg;
|
|
94
|
+
border-color: $list-group-active-border;
|
|
95
|
+
|
|
96
|
+
// Force color to inherit for custom content
|
|
97
|
+
.list-group-item-heading,
|
|
98
|
+
.list-group-item-heading > small,
|
|
99
|
+
.list-group-item-heading > .small {
|
|
100
|
+
color: inherit;
|
|
101
|
+
}
|
|
102
|
+
.list-group-item-text {
|
|
103
|
+
color: $list-group-active-text-color;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
// Contextual variants
|
|
110
|
+
//
|
|
111
|
+
// Add modifier classes to change text and background color on individual items.
|
|
112
|
+
// Organizationally, this must come after the `:hover` states.
|
|
113
|
+
|
|
114
|
+
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
|
|
115
|
+
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
|
|
116
|
+
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
|
|
117
|
+
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
// Custom content options
|
|
121
|
+
//
|
|
122
|
+
// Extra classes for creating well-formatted content within `.list-group-item`s.
|
|
123
|
+
|
|
124
|
+
.list-group-item-heading {
|
|
125
|
+
margin-top: 0;
|
|
126
|
+
margin-bottom: 5px;
|
|
127
|
+
}
|
|
128
|
+
.list-group-item-text {
|
|
129
|
+
margin-bottom: 0;
|
|
130
|
+
line-height: 1.3;
|
|
131
|
+
}
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
.media,
|
|
11
11
|
.media-body {
|
|
12
12
|
overflow: hidden;
|
|
13
|
-
*overflow: visible;
|
|
14
13
|
zoom: 1;
|
|
15
14
|
}
|
|
16
15
|
|
|
@@ -37,11 +36,13 @@
|
|
|
37
36
|
// Media image alignment
|
|
38
37
|
// -------------------------
|
|
39
38
|
|
|
40
|
-
.media
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
.media {
|
|
40
|
+
> .pull-left {
|
|
41
|
+
margin-right: 10px;
|
|
42
|
+
}
|
|
43
|
+
> .pull-right {
|
|
44
|
+
margin-left: 10px;
|
|
45
|
+
}
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
|
|
@@ -50,6 +51,6 @@
|
|
|
50
51
|
|
|
51
52
|
// Undo default ul/ol styles
|
|
52
53
|
.media-list {
|
|
53
|
-
|
|
54
|
+
padding-left: 0;
|
|
54
55
|
list-style: none;
|
|
55
56
|
}
|
|
@@ -1,696 +1,39 @@
|
|
|
1
|
-
//
|
|
2
1
|
// Mixins
|
|
3
2
|
// --------------------------------------------------
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
@
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
@
|
|
40
|
-
|
|
41
|
-
margin-left: auto;
|
|
42
|
-
margin-right: auto;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// IE7 inline-block
|
|
46
|
-
// ----------------
|
|
47
|
-
@mixin ie7-inline-block() {
|
|
48
|
-
*display: inline; /* IE7 inline-block hack */
|
|
49
|
-
*zoom: 1;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
|
53
|
-
// Ems because we're attempting to match the width of a space character. Left
|
|
54
|
-
// version is for form buttons, which typically come after other elements, and
|
|
55
|
-
// right version is for icons, which come before. Applying both is ok, but it will
|
|
56
|
-
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
|
57
|
-
// instead of the 1 space in other browsers.
|
|
58
|
-
@mixin ie7-restore-left-whitespace() {
|
|
59
|
-
*margin-left: .3em;
|
|
60
|
-
|
|
61
|
-
&:first-child {
|
|
62
|
-
*margin-left: 0;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
@mixin ie7-restore-right-whitespace() {
|
|
67
|
-
*margin-right: .3em;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Sizing shortcuts
|
|
71
|
-
// -------------------------
|
|
72
|
-
@mixin size($height, $width) {
|
|
73
|
-
width: $width;
|
|
74
|
-
height: $height;
|
|
75
|
-
}
|
|
76
|
-
@mixin square($size) {
|
|
77
|
-
@include size($size, $size);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// Placeholder text
|
|
81
|
-
// -------------------------
|
|
82
|
-
@mixin placeholder($color: $placeholderText) {
|
|
83
|
-
&:-moz-placeholder {
|
|
84
|
-
color: $color;
|
|
85
|
-
}
|
|
86
|
-
&:-ms-input-placeholder {
|
|
87
|
-
color: $color;
|
|
88
|
-
}
|
|
89
|
-
&::-webkit-input-placeholder {
|
|
90
|
-
color: $color;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// Text overflow
|
|
95
|
-
// -------------------------
|
|
96
|
-
// Requires inline-block or block for proper styling
|
|
97
|
-
@mixin text-overflow() {
|
|
98
|
-
overflow: hidden;
|
|
99
|
-
text-overflow: ellipsis;
|
|
100
|
-
white-space: nowrap;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// CSS image replacement
|
|
104
|
-
// -------------------------
|
|
105
|
-
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
|
106
|
-
@mixin hide-text {
|
|
107
|
-
font: 0/0 a;
|
|
108
|
-
color: transparent;
|
|
109
|
-
text-shadow: none;
|
|
110
|
-
background-color: transparent;
|
|
111
|
-
border: 0;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
// FONTS
|
|
116
|
-
// --------------------------------------------------
|
|
117
|
-
|
|
118
|
-
@mixin font-family-serif() {
|
|
119
|
-
font-family: $serifFontFamily;
|
|
120
|
-
}
|
|
121
|
-
@mixin font-family-sans-serif() {
|
|
122
|
-
font-family: $sansFontFamily;
|
|
123
|
-
}
|
|
124
|
-
@mixin font-family-monospace() {
|
|
125
|
-
font-family: $monoFontFamily;
|
|
126
|
-
}
|
|
127
|
-
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
128
|
-
font-size: $size;
|
|
129
|
-
font-weight: $weight;
|
|
130
|
-
line-height: $lineHeight;
|
|
131
|
-
}
|
|
132
|
-
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
133
|
-
@include font-family-serif();
|
|
134
|
-
@include font-shorthand($size, $weight, $lineHeight);
|
|
135
|
-
}
|
|
136
|
-
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
137
|
-
@include font-family-sans-serif();
|
|
138
|
-
@include font-shorthand($size, $weight, $lineHeight);
|
|
139
|
-
}
|
|
140
|
-
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
141
|
-
@include font-family-monospace();
|
|
142
|
-
@include font-shorthand($size, $weight, $lineHeight);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
// FORMS
|
|
147
|
-
// --------------------------------------------------
|
|
148
|
-
|
|
149
|
-
// Block level inputs
|
|
150
|
-
@mixin input-block-level {
|
|
151
|
-
display: block;
|
|
152
|
-
width: 100%;
|
|
153
|
-
min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
|
154
|
-
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
// Mixin for form field states
|
|
160
|
-
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
|
161
|
-
// Set the text color
|
|
162
|
-
.control-label,
|
|
163
|
-
.help-block,
|
|
164
|
-
.help-inline {
|
|
165
|
-
color: $textColor;
|
|
166
|
-
}
|
|
167
|
-
// Style inputs accordingly
|
|
168
|
-
.checkbox,
|
|
169
|
-
.radio,
|
|
170
|
-
input,
|
|
171
|
-
select,
|
|
172
|
-
textarea {
|
|
173
|
-
color: $textColor;
|
|
174
|
-
}
|
|
175
|
-
input,
|
|
176
|
-
select,
|
|
177
|
-
textarea {
|
|
178
|
-
border-color: $borderColor;
|
|
179
|
-
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
|
180
|
-
&:focus {
|
|
181
|
-
border-color: darken($borderColor, 10%);
|
|
182
|
-
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
// Give a small background color for input-prepend/-append
|
|
186
|
-
.input-prepend .add-on,
|
|
187
|
-
.input-append .add-on {
|
|
188
|
-
color: $textColor;
|
|
189
|
-
background-color: $backgroundColor;
|
|
190
|
-
border-color: $textColor;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
// CSS3 PROPERTIES
|
|
197
|
-
// --------------------------------------------------
|
|
198
|
-
|
|
199
|
-
// Border Radius
|
|
200
|
-
@mixin border-radius($radius) {
|
|
201
|
-
-webkit-border-radius: $radius;
|
|
202
|
-
-moz-border-radius: $radius;
|
|
203
|
-
border-radius: $radius;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
// Single Corner Border Radius
|
|
207
|
-
@mixin border-top-left-radius($radius) {
|
|
208
|
-
-webkit-border-top-left-radius: $radius;
|
|
209
|
-
-moz-border-radius-topleft: $radius;
|
|
210
|
-
border-top-left-radius: $radius;
|
|
211
|
-
}
|
|
212
|
-
@mixin border-top-right-radius($radius) {
|
|
213
|
-
-webkit-border-top-right-radius: $radius;
|
|
214
|
-
-moz-border-radius-topright: $radius;
|
|
215
|
-
border-top-right-radius: $radius;
|
|
216
|
-
}
|
|
217
|
-
@mixin border-bottom-right-radius($radius) {
|
|
218
|
-
-webkit-border-bottom-right-radius: $radius;
|
|
219
|
-
-moz-border-radius-bottomright: $radius;
|
|
220
|
-
border-bottom-right-radius: $radius;
|
|
221
|
-
}
|
|
222
|
-
@mixin border-bottom-left-radius($radius) {
|
|
223
|
-
-webkit-border-bottom-left-radius: $radius;
|
|
224
|
-
-moz-border-radius-bottomleft: $radius;
|
|
225
|
-
border-bottom-left-radius: $radius;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
// Single Side Border Radius
|
|
229
|
-
@mixin border-top-radius($radius) {
|
|
230
|
-
@include border-top-right-radius($radius);
|
|
231
|
-
@include border-top-left-radius($radius);
|
|
232
|
-
}
|
|
233
|
-
@mixin border-right-radius($radius) {
|
|
234
|
-
@include border-top-right-radius($radius);
|
|
235
|
-
@include border-bottom-right-radius($radius);
|
|
236
|
-
}
|
|
237
|
-
@mixin border-bottom-radius($radius) {
|
|
238
|
-
@include border-bottom-right-radius($radius);
|
|
239
|
-
@include border-bottom-left-radius($radius);
|
|
240
|
-
}
|
|
241
|
-
@mixin border-left-radius($radius) {
|
|
242
|
-
@include border-top-left-radius($radius);
|
|
243
|
-
@include border-bottom-left-radius($radius);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
// Drop shadows
|
|
247
|
-
@mixin box-shadow($shadow...) {
|
|
248
|
-
-webkit-box-shadow: $shadow;
|
|
249
|
-
-moz-box-shadow: $shadow;
|
|
250
|
-
box-shadow: $shadow;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
// Transitions
|
|
254
|
-
@mixin transition($transition...) {
|
|
255
|
-
-webkit-transition: $transition;
|
|
256
|
-
-moz-transition: $transition;
|
|
257
|
-
-o-transition: $transition;
|
|
258
|
-
transition: $transition;
|
|
259
|
-
}
|
|
260
|
-
@mixin transition-delay($transition-delay) {
|
|
261
|
-
-webkit-transition-delay: $transition-delay;
|
|
262
|
-
-moz-transition-delay: $transition-delay;
|
|
263
|
-
-o-transition-delay: $transition-delay;
|
|
264
|
-
transition-delay: $transition-delay;
|
|
265
|
-
}
|
|
266
|
-
@mixin transition-duration($transition-duration) {
|
|
267
|
-
-webkit-transition-duration: $transition-duration;
|
|
268
|
-
-moz-transition-duration: $transition-duration;
|
|
269
|
-
-o-transition-duration: $transition-duration;
|
|
270
|
-
transition-duration: $transition-duration;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
// Transformations
|
|
274
|
-
@mixin rotate($degrees) {
|
|
275
|
-
-webkit-transform: rotate($degrees);
|
|
276
|
-
-moz-transform: rotate($degrees);
|
|
277
|
-
-ms-transform: rotate($degrees);
|
|
278
|
-
-o-transform: rotate($degrees);
|
|
279
|
-
transform: rotate($degrees);
|
|
280
|
-
}
|
|
281
|
-
@mixin scale($ratio) {
|
|
282
|
-
-webkit-transform: scale($ratio);
|
|
283
|
-
-moz-transform: scale($ratio);
|
|
284
|
-
-ms-transform: scale($ratio);
|
|
285
|
-
-o-transform: scale($ratio);
|
|
286
|
-
transform: scale($ratio);
|
|
287
|
-
}
|
|
288
|
-
@mixin translate($x, $y) {
|
|
289
|
-
-webkit-transform: translate($x, $y);
|
|
290
|
-
-moz-transform: translate($x, $y);
|
|
291
|
-
-ms-transform: translate($x, $y);
|
|
292
|
-
-o-transform: translate($x, $y);
|
|
293
|
-
transform: translate($x, $y);
|
|
294
|
-
}
|
|
295
|
-
@mixin skew($x, $y) {
|
|
296
|
-
-webkit-transform: skew($x, $y);
|
|
297
|
-
-moz-transform: skew($x, $y);
|
|
298
|
-
-ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
|
|
299
|
-
-o-transform: skew($x, $y);
|
|
300
|
-
transform: skew($x, $y);
|
|
301
|
-
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
|
|
302
|
-
}
|
|
303
|
-
@mixin translate3d($x, $y, $z) {
|
|
304
|
-
-webkit-transform: translate3d($x, $y, $z);
|
|
305
|
-
-moz-transform: translate3d($x, $y, $z);
|
|
306
|
-
-o-transform: translate3d($x, $y, $z);
|
|
307
|
-
transform: translate3d($x, $y, $z);
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
// Backface visibility
|
|
311
|
-
// Prevent browsers from flickering when using CSS 3D transforms.
|
|
312
|
-
// Default value is `visible`, but can be changed to `hidden
|
|
313
|
-
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
|
314
|
-
@mixin backface-visibility($visibility){
|
|
315
|
-
-webkit-backface-visibility: $visibility;
|
|
316
|
-
-moz-backface-visibility: $visibility;
|
|
317
|
-
backface-visibility: $visibility;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
// Background clipping
|
|
321
|
-
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
|
322
|
-
@mixin background-clip($clip) {
|
|
323
|
-
-webkit-background-clip: $clip;
|
|
324
|
-
-moz-background-clip: $clip;
|
|
325
|
-
background-clip: $clip;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
// Background sizing
|
|
329
|
-
@mixin background-size($size) {
|
|
330
|
-
-webkit-background-size: $size;
|
|
331
|
-
-moz-background-size: $size;
|
|
332
|
-
-o-background-size: $size;
|
|
333
|
-
background-size: $size;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
// Box sizing
|
|
338
|
-
@mixin box-sizing($boxmodel) {
|
|
339
|
-
-webkit-box-sizing: $boxmodel;
|
|
340
|
-
-moz-box-sizing: $boxmodel;
|
|
341
|
-
box-sizing: $boxmodel;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
// User select
|
|
345
|
-
// For selecting text on the page
|
|
346
|
-
@mixin user-select($select) {
|
|
347
|
-
-webkit-user-select: $select;
|
|
348
|
-
-moz-user-select: $select;
|
|
349
|
-
-ms-user-select: $select;
|
|
350
|
-
-o-user-select: $select;
|
|
351
|
-
user-select: $select;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
// Resize anything
|
|
355
|
-
@mixin resizable($direction) {
|
|
356
|
-
resize: $direction; // Options: horizontal, vertical, both
|
|
357
|
-
overflow: auto; // Safari fix
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
// CSS3 Content Columns
|
|
361
|
-
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
|
|
362
|
-
-webkit-column-count: $columnCount;
|
|
363
|
-
-moz-column-count: $columnCount;
|
|
364
|
-
column-count: $columnCount;
|
|
365
|
-
-webkit-column-gap: $columnGap;
|
|
366
|
-
-moz-column-gap: $columnGap;
|
|
367
|
-
column-gap: $columnGap;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
// Optional hyphenation
|
|
371
|
-
@mixin hyphens($mode: auto) {
|
|
372
|
-
word-wrap: break-word;
|
|
373
|
-
-webkit-hyphens: $mode;
|
|
374
|
-
-moz-hyphens: $mode;
|
|
375
|
-
-ms-hyphens: $mode;
|
|
376
|
-
-o-hyphens: $mode;
|
|
377
|
-
hyphens: $mode;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
// Opacity
|
|
381
|
-
@mixin opacity($opacity) {
|
|
382
|
-
opacity: $opacity / 100;
|
|
383
|
-
filter: alpha(opacity=$opacity);
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
// BACKGROUNDS
|
|
389
|
-
// --------------------------------------------------
|
|
390
|
-
|
|
391
|
-
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
|
392
|
-
@mixin translucent-background($color: $white, $alpha: 1) {
|
|
393
|
-
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
@mixin translucent-border($color: $white, $alpha: 1) {
|
|
397
|
-
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
|
398
|
-
@include background-clip(padding-box);
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
// Gradient Bar Colors for buttons and alerts
|
|
402
|
-
@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
|
403
|
-
color: $textColor;
|
|
404
|
-
text-shadow: $textShadow;
|
|
405
|
-
@include gradient-vertical($primaryColor, $secondaryColor);
|
|
406
|
-
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
|
407
|
-
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
// Gradients
|
|
411
|
-
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
|
412
|
-
background-color: $endColor;
|
|
413
|
-
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
|
414
|
-
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
415
|
-
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
416
|
-
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
|
417
|
-
background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
|
|
418
|
-
background-repeat: repeat-x;
|
|
419
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
|
|
420
|
-
}
|
|
421
|
-
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
|
422
|
-
background-color: mix($startColor, $endColor, 60%);
|
|
423
|
-
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
|
424
|
-
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
425
|
-
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
426
|
-
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
|
427
|
-
background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
|
|
428
|
-
background-repeat: repeat-x;
|
|
429
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
|
|
430
|
-
}
|
|
431
|
-
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
|
432
|
-
background-color: $endColor;
|
|
433
|
-
background-repeat: repeat-x;
|
|
434
|
-
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
|
435
|
-
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
436
|
-
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
|
437
|
-
background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
|
|
438
|
-
}
|
|
439
|
-
@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
|
440
|
-
background-color: mix($midColor, $endColor, 80%);
|
|
441
|
-
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
|
442
|
-
background-image: -webkit-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
|
443
|
-
background-image: -moz-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
|
444
|
-
background-image: -o-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
|
445
|
-
background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
|
|
446
|
-
background-repeat: no-repeat;
|
|
447
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
|
451
|
-
background-color: mix($midColor, $endColor, 80%);
|
|
452
|
-
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
|
453
|
-
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
454
|
-
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
|
455
|
-
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
456
|
-
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
457
|
-
background-repeat: no-repeat;
|
|
458
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
|
459
|
-
}
|
|
460
|
-
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
|
461
|
-
background-color: $outerColor;
|
|
462
|
-
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
|
463
|
-
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
|
464
|
-
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
|
465
|
-
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
|
|
466
|
-
background-repeat: no-repeat;
|
|
467
|
-
}
|
|
468
|
-
@mixin gradient-striped($color: #555, $angle: 45deg) {
|
|
469
|
-
background-color: $color;
|
|
470
|
-
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
|
|
471
|
-
background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
472
|
-
background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
473
|
-
background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
474
|
-
background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
// Reset filters for IE
|
|
478
|
-
@mixin reset-filter() {
|
|
479
|
-
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
// COMPONENT MIXINS
|
|
485
|
-
// --------------------------------------------------
|
|
486
|
-
|
|
487
|
-
// Horizontal dividers
|
|
488
|
-
// -------------------------
|
|
489
|
-
// Dividers (basically an hr) within dropdowns and nav lists
|
|
490
|
-
@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
|
|
491
|
-
// IE7 needs a set width since we gave a height. Restricting just
|
|
492
|
-
// to IE7 to keep the 1px left/right space in other browsers.
|
|
493
|
-
// It is unclear where IE is getting the extra space that we need
|
|
494
|
-
// to negative-margin away, but so it goes.
|
|
495
|
-
*width: 100%;
|
|
496
|
-
height: 1px;
|
|
497
|
-
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
|
498
|
-
*margin: -5px 0 5px;
|
|
499
|
-
overflow: hidden;
|
|
500
|
-
background-color: $top;
|
|
501
|
-
border-bottom: 1px solid $bottom;
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
// Button backgrounds
|
|
505
|
-
// ------------------
|
|
506
|
-
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
|
507
|
-
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
|
508
|
-
@include gradientBar($startColor, $endColor, $textColor, $textShadow);
|
|
509
|
-
*background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
|
510
|
-
@include reset-filter();
|
|
511
|
-
|
|
512
|
-
// in these cases the gradient won't cover the background, so we override
|
|
513
|
-
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
|
514
|
-
color: $textColor;
|
|
515
|
-
background-color: $endColor;
|
|
516
|
-
*background-color: darken($endColor, 5%);
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
|
520
|
-
&:active,
|
|
521
|
-
&.active {
|
|
522
|
-
background-color: darken($endColor, 10%) \9;
|
|
523
|
-
}
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
// Navbar vertical align
|
|
527
|
-
// -------------------------
|
|
528
|
-
// Vertically center elements in the navbar.
|
|
529
|
-
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
|
530
|
-
@mixin navbarVerticalAlign($elementHeight) {
|
|
531
|
-
margin-top: ($navbarHeight - $elementHeight) / 2;
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
// Grid System
|
|
537
|
-
// -----------
|
|
538
|
-
|
|
539
|
-
// Centered container element
|
|
540
|
-
@mixin container-fixed() {
|
|
541
|
-
margin-right: auto;
|
|
542
|
-
margin-left: auto;
|
|
543
|
-
@include clearfix();
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
// Table columns
|
|
547
|
-
@mixin tableColumns($columnSpan: 1) {
|
|
548
|
-
float: none; // undo default grid column styles
|
|
549
|
-
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
|
550
|
-
margin-left: 0; // undo default grid column styles
|
|
551
|
-
}
|
|
552
|
-
|
|
553
|
-
// Make a Grid
|
|
554
|
-
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
|
555
|
-
@mixin makeRow() {
|
|
556
|
-
margin-left: $gridGutterWidth * -1;
|
|
557
|
-
@include clearfix();
|
|
558
|
-
}
|
|
559
|
-
@mixin makeColumn($columns: 1, $offset: 0) {
|
|
560
|
-
float: left;
|
|
561
|
-
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
|
|
562
|
-
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
|
563
|
-
}
|
|
564
|
-
|
|
565
|
-
// The Grid
|
|
566
|
-
@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
|
|
567
|
-
.row {
|
|
568
|
-
margin-left: $gridGutterWidth * -1;
|
|
569
|
-
@include clearfix();
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
[class*="span"] {
|
|
573
|
-
float: left;
|
|
574
|
-
min-height: 1px; // prevent collapsing columns
|
|
575
|
-
margin-left: $gridGutterWidth;
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
// Set the container width, and override it for fixed navbars in media queries
|
|
579
|
-
.container,
|
|
580
|
-
.navbar-static-top .container,
|
|
581
|
-
.navbar-fixed-top .container,
|
|
582
|
-
.navbar-fixed-bottom .container {
|
|
583
|
-
@include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
// generate .spanX and .offsetX
|
|
587
|
-
@include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
|
588
|
-
@include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
|
592
|
-
@for $i from 1 through $gridColumns {
|
|
593
|
-
.span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth); }
|
|
594
|
-
}
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
|
598
|
-
@for $i from 1 through $gridColumns {
|
|
599
|
-
.offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth); }
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
|
604
|
-
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
|
605
|
-
}
|
|
606
|
-
|
|
607
|
-
@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
|
|
608
|
-
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
614
|
-
.row-fluid {
|
|
615
|
-
width: 100%;
|
|
616
|
-
@include clearfix();
|
|
617
|
-
[class*="span"] {
|
|
618
|
-
@include input-block-level();
|
|
619
|
-
float: left;
|
|
620
|
-
margin-left: $fluidGridGutterWidth;
|
|
621
|
-
*margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
|
622
|
-
}
|
|
623
|
-
[class*="span"]:first-child {
|
|
624
|
-
margin-left: 0;
|
|
625
|
-
}
|
|
626
|
-
|
|
627
|
-
// Space grid-sized controls properly if multiple per line
|
|
628
|
-
.controls-row [class*="span"] + [class*="span"] {
|
|
629
|
-
margin-left: $fluidGridGutterWidth;
|
|
630
|
-
}
|
|
631
|
-
|
|
632
|
-
// generate .spanX and .offsetX
|
|
633
|
-
@include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
|
634
|
-
@include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
|
635
|
-
}
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
639
|
-
@for $i from 1 through $gridColumns {
|
|
640
|
-
.span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
|
641
|
-
}
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
645
|
-
@for $i from 1 through $gridColumns {
|
|
646
|
-
.offset#{$i} { @include grid-fluid-offset($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
|
647
|
-
.offset#{$i}:first-child { @include grid-fluid-offset-first-child($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
|
648
|
-
}
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
652
|
-
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
|
653
|
-
*width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
|
|
654
|
-
}
|
|
655
|
-
|
|
656
|
-
@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
657
|
-
margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
|
|
658
|
-
*margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
662
|
-
margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
|
|
663
|
-
*margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
|
|
669
|
-
input,
|
|
670
|
-
textarea,
|
|
671
|
-
.uneditable-input {
|
|
672
|
-
margin-left: 0; // override margin-left from core grid system
|
|
673
|
-
}
|
|
674
|
-
|
|
675
|
-
// Space grid-sized controls properly if multiple per line
|
|
676
|
-
.controls-row [class*="span"] + [class*="span"] {
|
|
677
|
-
margin-left: $gridGutterWidth;
|
|
678
|
-
}
|
|
679
|
-
|
|
680
|
-
// generate .spanX
|
|
681
|
-
@include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
|
685
|
-
@for $i from 1 through $gridColumns {
|
|
686
|
-
input.span#{$i},
|
|
687
|
-
textarea.span#{$i},
|
|
688
|
-
.uneditable-input.span#{$i} {
|
|
689
|
-
@include grid-input-span($i, $gridColumnWidth, $gridGutterWidth);
|
|
690
|
-
}
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
|
-
|
|
694
|
-
@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
|
695
|
-
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
|
|
696
|
-
}
|
|
4
|
+
// Utilities
|
|
5
|
+
@import "mixins/hide-text";
|
|
6
|
+
@import "mixins/opacity";
|
|
7
|
+
@import "mixins/image";
|
|
8
|
+
@import "mixins/labels";
|
|
9
|
+
@import "mixins/reset-filter";
|
|
10
|
+
@import "mixins/resize";
|
|
11
|
+
@import "mixins/responsive-visibility";
|
|
12
|
+
@import "mixins/size";
|
|
13
|
+
@import "mixins/tab-focus";
|
|
14
|
+
@import "mixins/text-emphasis";
|
|
15
|
+
@import "mixins/text-overflow";
|
|
16
|
+
@import "mixins/vendor-prefixes";
|
|
17
|
+
|
|
18
|
+
// Components
|
|
19
|
+
@import "mixins/alerts";
|
|
20
|
+
@import "mixins/buttons";
|
|
21
|
+
@import "mixins/panels";
|
|
22
|
+
@import "mixins/pagination";
|
|
23
|
+
@import "mixins/list-group";
|
|
24
|
+
@import "mixins/nav-divider";
|
|
25
|
+
@import "mixins/forms";
|
|
26
|
+
@import "mixins/progress-bar";
|
|
27
|
+
@import "mixins/table-row";
|
|
28
|
+
|
|
29
|
+
// Skins
|
|
30
|
+
@import "mixins/background-variant";
|
|
31
|
+
@import "mixins/border-radius";
|
|
32
|
+
@import "mixins/gradients";
|
|
33
|
+
|
|
34
|
+
// Layout
|
|
35
|
+
@import "mixins/clearfix";
|
|
36
|
+
@import "mixins/center-block";
|
|
37
|
+
@import "mixins/nav-vertical-align";
|
|
38
|
+
@import "mixins/grid-framework";
|
|
39
|
+
@import "mixins/grid";
|