bootstrap-sass-rtl 2.3.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.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/bootstrap-sass-rtl.gemspec +24 -0
- data/lib/bootstrap/sass/rtl.rb +10 -0
- data/lib/bootstrap/sass/rtl/version.rb +7 -0
- data/vendor/assets/stylesheets/bootstrap-responsive-rtl.scss +1 -0
- data/vendor/assets/stylesheets/bootstrap-rtl.scss +1 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_accordion.scss +34 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_alerts.scss +79 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_breadcrumbs.scss +24 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_button-groups.scss +229 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_buttons.scss +228 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_carousel.scss +158 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_close.scss +32 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_code.scss +61 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_component-animations.scss +22 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_dropdowns.scss +237 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_forms.scss +689 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_grid.scss +21 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_hero-unit.scss +25 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_labels-badges.scss +83 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_layouts.scss +16 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_media.scss +55 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_mixins.scss +690 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_modals.scss +95 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_navbar.scss +497 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_navs.scss +409 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_pager.scss +43 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_pagination.scss +123 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_popovers.scss +133 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_progress-bars.scss +122 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_reset.scss +216 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-1200px-min.scss +28 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-767px-max.scss +193 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-768px-979px.scss +19 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-navbar.scss +189 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-utilities.scss +74 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_scaffolding.scss +53 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_sprites.scss +197 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_tables.scss +235 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_thumbnails.scss +53 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_tooltip.scss +70 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_type.scss +247 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_utilities.scss +45 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_variables.scss +301 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_wells.scss +29 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/bootstrap.scss +63 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/responsive.scss +48 -0
- metadata +137 -0
@@ -0,0 +1,21 @@
|
|
1
|
+
//
|
2
|
+
// Grid system
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// Fixed (940px)
|
7
|
+
@include grid-core($gridColumnWidth, $gridGutterWidth);
|
8
|
+
|
9
|
+
// Fluid (940px)
|
10
|
+
@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
|
11
|
+
|
12
|
+
// Reset utility classes due to specificity
|
13
|
+
[class*="span"].hide,
|
14
|
+
.row-fluid [class*="span"].hide {
|
15
|
+
display: none;
|
16
|
+
}
|
17
|
+
|
18
|
+
[class*="span"].pull-left,
|
19
|
+
.row-fluid [class*="span"].pull-right {
|
20
|
+
float: left;
|
21
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
//
|
2
|
+
// Hero unit
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
.hero-unit {
|
7
|
+
padding: 60px;
|
8
|
+
margin-bottom: 30px;
|
9
|
+
font-size: 18px;
|
10
|
+
font-weight: 200;
|
11
|
+
line-height: $baseLineHeight * 1.5;
|
12
|
+
color: $heroUnitLeadColor;
|
13
|
+
background-color: $heroUnitBackground;
|
14
|
+
@include border-radius(6px);
|
15
|
+
h1 {
|
16
|
+
margin-bottom: 0;
|
17
|
+
font-size: 60px;
|
18
|
+
line-height: 1;
|
19
|
+
color: $heroUnitHeadingColor;
|
20
|
+
letter-spacing: -1px;
|
21
|
+
}
|
22
|
+
li {
|
23
|
+
line-height: $baseLineHeight * 1.5; // Reset since we specify in type.scss
|
24
|
+
}
|
25
|
+
}
|
@@ -0,0 +1,83 @@
|
|
1
|
+
//
|
2
|
+
// Labels and badges
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// Base classes
|
7
|
+
.label,
|
8
|
+
.badge {
|
9
|
+
display: inline-block;
|
10
|
+
padding: 2px 4px;
|
11
|
+
font-size: $baseFontSize * .846;
|
12
|
+
font-weight: bold;
|
13
|
+
line-height: 14px; // ensure proper line-height if floated
|
14
|
+
color: $white;
|
15
|
+
vertical-align: baseline;
|
16
|
+
white-space: nowrap;
|
17
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
18
|
+
background-color: $grayLight;
|
19
|
+
}
|
20
|
+
// Set unique padding and border-radii
|
21
|
+
.label {
|
22
|
+
@include border-radius(3px);
|
23
|
+
}
|
24
|
+
.badge {
|
25
|
+
padding-right: 9px;
|
26
|
+
padding-left: 9px;
|
27
|
+
@include border-radius(9px);
|
28
|
+
}
|
29
|
+
|
30
|
+
// Empty labels/badges collapse
|
31
|
+
.label,
|
32
|
+
.badge {
|
33
|
+
&:empty {
|
34
|
+
display: none;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Hover/focus state, but only for links
|
39
|
+
a {
|
40
|
+
&.label:hover,
|
41
|
+
&.label:focus,
|
42
|
+
&.badge:hover,
|
43
|
+
&.badge:focus {
|
44
|
+
color: $white;
|
45
|
+
text-decoration: none;
|
46
|
+
cursor: pointer;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
// Colors
|
51
|
+
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
|
52
|
+
@each $item in label, badge {
|
53
|
+
// Important (red)
|
54
|
+
.#{$item}-important { background-color: $errorText; }
|
55
|
+
.#{$item}-important[href] { background-color: darken($errorText, 10%); }
|
56
|
+
// Warnings (orange)
|
57
|
+
.#{$item}-warning { background-color: $orange; }
|
58
|
+
.#{$item}-warning[href] { background-color: darken($orange, 10%); }
|
59
|
+
// Success (green)
|
60
|
+
.#{$item}-success { background-color: $successText; }
|
61
|
+
.#{$item}-success[href] { background-color: darken($successText, 10%); }
|
62
|
+
// Info (turquoise)
|
63
|
+
.#{$item}-info { background-color: $infoText; }
|
64
|
+
.#{$item}-info[href] { background-color: darken($infoText, 10%); }
|
65
|
+
// Inverse (black)
|
66
|
+
.#{$item}-inverse { background-color: $grayDark; }
|
67
|
+
.#{$item}-inverse[href] { background-color: darken($grayDark, 10%); }
|
68
|
+
}
|
69
|
+
|
70
|
+
// Quick fix for labels/badges in buttons
|
71
|
+
.btn {
|
72
|
+
.label,
|
73
|
+
.badge {
|
74
|
+
position: relative;
|
75
|
+
top: -1px;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
.btn-mini {
|
79
|
+
.label,
|
80
|
+
.badge {
|
81
|
+
top: 0;
|
82
|
+
}
|
83
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
//
|
2
|
+
// Layouts
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// Container (centered, fixed-width layouts)
|
7
|
+
.container {
|
8
|
+
@include container-fixed();
|
9
|
+
}
|
10
|
+
|
11
|
+
// Fluid layouts (right aligned, with sidebar, min- & max-width content)
|
12
|
+
.container-fluid {
|
13
|
+
padding-left: $gridGutterWidth;
|
14
|
+
padding-right: $gridGutterWidth;
|
15
|
+
@include clearfix();
|
16
|
+
}
|
@@ -0,0 +1,55 @@
|
|
1
|
+
// Media objects
|
2
|
+
// Source: http://stubbornella.org/content/?p=497
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// Common styles
|
7
|
+
// -------------------------
|
8
|
+
|
9
|
+
// Clear the floats
|
10
|
+
.media,
|
11
|
+
.media-body {
|
12
|
+
overflow: hidden;
|
13
|
+
*overflow: visible;
|
14
|
+
zoom: 1;
|
15
|
+
}
|
16
|
+
|
17
|
+
// Proper spacing between instances of .media
|
18
|
+
.media,
|
19
|
+
.media .media {
|
20
|
+
margin-top: 15px;
|
21
|
+
}
|
22
|
+
.media:first-child {
|
23
|
+
margin-top: 0;
|
24
|
+
}
|
25
|
+
|
26
|
+
// For images and videos, set to block
|
27
|
+
.media-object {
|
28
|
+
display: block;
|
29
|
+
}
|
30
|
+
|
31
|
+
// Reset margins on headings for tighter default spacing
|
32
|
+
.media-heading {
|
33
|
+
margin: 0 0 5px;
|
34
|
+
}
|
35
|
+
|
36
|
+
|
37
|
+
// Media image alignment
|
38
|
+
// -------------------------
|
39
|
+
|
40
|
+
.media > .pull-left {
|
41
|
+
margin-left: 10px;
|
42
|
+
}
|
43
|
+
.media > .pull-right {
|
44
|
+
margin-right: 10px;
|
45
|
+
}
|
46
|
+
|
47
|
+
|
48
|
+
// Media list variation
|
49
|
+
// -------------------------
|
50
|
+
|
51
|
+
// Undo default ul/ol styles
|
52
|
+
.media-list {
|
53
|
+
margin-right: 0;
|
54
|
+
list-style: none;
|
55
|
+
}
|
@@ -0,0 +1,690 @@
|
|
1
|
+
//
|
2
|
+
// Mixins
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// UTILITY MIXINS
|
7
|
+
// --------------------------------------------------
|
8
|
+
|
9
|
+
// Clearfix
|
10
|
+
// --------
|
11
|
+
// For clearing floats like a boss h5bp.com/q
|
12
|
+
@mixin clearfix {
|
13
|
+
*zoom: 1;
|
14
|
+
&:before,
|
15
|
+
&:after {
|
16
|
+
display: table;
|
17
|
+
content: "";
|
18
|
+
// Fixes Opera/contenteditable bug:
|
19
|
+
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
20
|
+
line-height: 0;
|
21
|
+
}
|
22
|
+
&:after {
|
23
|
+
clear: both;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
// Webkit-style focus
|
28
|
+
// ------------------
|
29
|
+
@mixin tab-focus() {
|
30
|
+
// Default
|
31
|
+
outline: thin dotted #333;
|
32
|
+
// Webkit
|
33
|
+
outline: 5px auto -webkit-focus-ring-color;
|
34
|
+
outline-offset: -2px;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Center-align a block level element
|
38
|
+
// ----------------------------------
|
39
|
+
@mixin center-block() {
|
40
|
+
display: block;
|
41
|
+
margin-right: auto;
|
42
|
+
margin-left: 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. right
|
54
|
+
// version is for form buttons, which typically come after other elements, and
|
55
|
+
// left 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-right-whitespace() {
|
59
|
+
*margin-right: .3em;
|
60
|
+
|
61
|
+
&:first-child {
|
62
|
+
*margin-right: 0;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
@mixin ie7-restore-left-whitespace() {
|
67
|
+
*margin-left: .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-right-radius($radius) {
|
208
|
+
-webkit-border-top-right-radius: $radius;
|
209
|
+
-moz-border-radius-topleft: $radius;
|
210
|
+
border-top-right-radius: $radius;
|
211
|
+
}
|
212
|
+
@mixin border-top-left-radius($radius) {
|
213
|
+
-webkit-border-top-left-radius: $radius;
|
214
|
+
-moz-border-radius-topright: $radius;
|
215
|
+
border-top-left-radius: $radius;
|
216
|
+
}
|
217
|
+
@mixin border-bottom-left-radius($radius) {
|
218
|
+
-webkit-border-bottom-left-radius: $radius;
|
219
|
+
-moz-border-radius-bottomright: $radius;
|
220
|
+
border-bottom-left-radius: $radius;
|
221
|
+
}
|
222
|
+
@mixin border-bottom-right-radius($radius) {
|
223
|
+
-webkit-border-bottom-right-radius: $radius;
|
224
|
+
-moz-border-radius-bottomleft: $radius;
|
225
|
+
border-bottom-right-radius: $radius;
|
226
|
+
}
|
227
|
+
|
228
|
+
// Single Side Border Radius
|
229
|
+
@mixin border-top-radius($radius) {
|
230
|
+
@include border-top-left-radius($radius);
|
231
|
+
@include border-top-right-radius($radius);
|
232
|
+
}
|
233
|
+
@mixin border-left-radius($radius) {
|
234
|
+
@include border-top-left-radius($radius);
|
235
|
+
@include border-bottom-left-radius($radius);
|
236
|
+
}
|
237
|
+
@mixin border-bottom-radius($radius) {
|
238
|
+
@include border-bottom-left-radius($radius);
|
239
|
+
@include border-bottom-right-radius($radius);
|
240
|
+
}
|
241
|
+
@mixin border-right-radius($radius) {
|
242
|
+
@include border-top-right-radius($radius);
|
243
|
+
@include border-bottom-right-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(right, $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(right, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
416
|
+
background-image: -o-linear-gradient(right, $startColor, $endColor); // Opera 11.10
|
417
|
+
background-image: linear-gradient(to left, $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-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
440
|
+
background-color: mix($midColor, $endColor, 80%);
|
441
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
442
|
+
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
443
|
+
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
444
|
+
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
445
|
+
background-image: linear-gradient($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
|
+
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
450
|
+
background-color: $outerColor;
|
451
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
452
|
+
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
453
|
+
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
454
|
+
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
|
455
|
+
background-repeat: no-repeat;
|
456
|
+
}
|
457
|
+
@mixin gradient-striped($color: #555, $angle: 45deg) {
|
458
|
+
background-color: $color;
|
459
|
+
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));
|
460
|
+
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);
|
461
|
+
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);
|
462
|
+
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);
|
463
|
+
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);
|
464
|
+
}
|
465
|
+
|
466
|
+
// Reset filters for IE
|
467
|
+
@mixin reset-filter() {
|
468
|
+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
469
|
+
}
|
470
|
+
|
471
|
+
|
472
|
+
|
473
|
+
// COMPONENT MIXINS
|
474
|
+
// --------------------------------------------------
|
475
|
+
|
476
|
+
// Horizontal dividers
|
477
|
+
// -------------------------
|
478
|
+
// Dividers (basically an hr) within dropdowns and nav lists
|
479
|
+
@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
|
480
|
+
// IE7 needs a set width since we gave a height. Restricting just
|
481
|
+
// to IE7 to keep the 1px right/left space in other browsers.
|
482
|
+
// It is unclear where IE is getting the extra space that we need
|
483
|
+
// to negative-margin away, but so it goes.
|
484
|
+
*width: 100%;
|
485
|
+
height: 1px;
|
486
|
+
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
487
|
+
*margin: -5px 0 5px;
|
488
|
+
overflow: hidden;
|
489
|
+
background-color: $top;
|
490
|
+
border-bottom: 1px solid $bottom;
|
491
|
+
}
|
492
|
+
|
493
|
+
// Button backgrounds
|
494
|
+
// ------------------
|
495
|
+
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
496
|
+
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
497
|
+
@include gradientBar($startColor, $endColor, $textColor, $textShadow);
|
498
|
+
*background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
499
|
+
@include reset-filter();
|
500
|
+
|
501
|
+
// in these cases the gradient won't cover the background, so we override
|
502
|
+
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
503
|
+
color: $textColor;
|
504
|
+
background-color: $endColor;
|
505
|
+
*background-color: darken($endColor, 5%);
|
506
|
+
}
|
507
|
+
|
508
|
+
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
509
|
+
&:active,
|
510
|
+
&.active {
|
511
|
+
background-color: darken($endColor, 10%) \9;
|
512
|
+
}
|
513
|
+
}
|
514
|
+
|
515
|
+
// Navbar vertical align
|
516
|
+
// -------------------------
|
517
|
+
// Vertically center elements in the navbar.
|
518
|
+
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
519
|
+
@mixin navbarVerticalAlign($elementHeight) {
|
520
|
+
margin-top: ($navbarHeight - $elementHeight) / 2;
|
521
|
+
}
|
522
|
+
|
523
|
+
|
524
|
+
|
525
|
+
// Grid System
|
526
|
+
// -----------
|
527
|
+
|
528
|
+
// Centered container element
|
529
|
+
@mixin container-fixed() {
|
530
|
+
margin-left: auto;
|
531
|
+
margin-right: auto;
|
532
|
+
@include clearfix();
|
533
|
+
}
|
534
|
+
|
535
|
+
// Table columns
|
536
|
+
@mixin tableColumns($columnSpan: 1) {
|
537
|
+
float: none; // undo default grid column styles
|
538
|
+
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on right and left of table cells
|
539
|
+
margin-right: 0; // undo default grid column styles
|
540
|
+
}
|
541
|
+
|
542
|
+
// Make a Grid
|
543
|
+
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
544
|
+
@mixin makeRow() {
|
545
|
+
margin-right: $gridGutterWidth * -1;
|
546
|
+
@include clearfix();
|
547
|
+
}
|
548
|
+
@mixin makeColumn($columns: 1, $offset: 0) {
|
549
|
+
float: right;
|
550
|
+
margin-right: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
|
551
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
552
|
+
}
|
553
|
+
|
554
|
+
// The Grid
|
555
|
+
@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
|
556
|
+
.row {
|
557
|
+
margin-right: $gridGutterWidth * -1;
|
558
|
+
@include clearfix();
|
559
|
+
}
|
560
|
+
|
561
|
+
[class*="span"] {
|
562
|
+
float: right;
|
563
|
+
min-height: 1px; // prevent collapsing columns
|
564
|
+
margin-right: $gridGutterWidth;
|
565
|
+
}
|
566
|
+
|
567
|
+
// Set the container width, and override it for fixed navbars in media queries
|
568
|
+
.container,
|
569
|
+
.navbar-static-top .container,
|
570
|
+
.navbar-fixed-top .container,
|
571
|
+
.navbar-fixed-bottom .container {
|
572
|
+
@include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
573
|
+
}
|
574
|
+
|
575
|
+
// generate .spanX and .offsetX
|
576
|
+
@include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
577
|
+
@include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
578
|
+
}
|
579
|
+
|
580
|
+
@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
581
|
+
@while $gridColumns > 0 {
|
582
|
+
.span#{$gridColumns} { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)}
|
583
|
+
$gridColumns: $gridColumns - 1;
|
584
|
+
}
|
585
|
+
}
|
586
|
+
|
587
|
+
@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
588
|
+
@while $gridColumns > 0 {
|
589
|
+
.offset#{$gridColumns} { @include grid-core-offset($gridColumns, $gridColumnWidth, $gridGutterWidth); }
|
590
|
+
$gridColumns: $gridColumns - 1;
|
591
|
+
}
|
592
|
+
}
|
593
|
+
|
594
|
+
@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
595
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
596
|
+
}
|
597
|
+
|
598
|
+
@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
|
599
|
+
margin-right: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
|
600
|
+
}
|
601
|
+
|
602
|
+
|
603
|
+
|
604
|
+
@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
|
605
|
+
.row-fluid {
|
606
|
+
width: 100%;
|
607
|
+
@include clearfix();
|
608
|
+
[class*="span"] {
|
609
|
+
@include input-block-level();
|
610
|
+
float: right;
|
611
|
+
margin-right: $fluidGridGutterWidth;
|
612
|
+
*margin-right: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
613
|
+
}
|
614
|
+
[class*="span"]:first-child {
|
615
|
+
margin-right: 0;
|
616
|
+
}
|
617
|
+
|
618
|
+
// Space grid-sized controls properly if multiple per line
|
619
|
+
.controls-row [class*="span"] + [class*="span"] {
|
620
|
+
margin-right: $fluidGridGutterWidth;
|
621
|
+
}
|
622
|
+
|
623
|
+
// generate .spanX and .offsetX
|
624
|
+
@include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
625
|
+
@include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
626
|
+
}
|
627
|
+
}
|
628
|
+
|
629
|
+
@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
630
|
+
@while $gridColumns > 0 {
|
631
|
+
.span#{$gridColumns} { @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
632
|
+
$gridColumns: $gridColumns - 1;
|
633
|
+
}
|
634
|
+
}
|
635
|
+
|
636
|
+
@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
637
|
+
@while $gridColumns > 0 {
|
638
|
+
.offset#{$gridColumns} { @include grid-fluid-offset($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
639
|
+
.offset#{$gridColumns}:first-child { @include grid-fluid-offset-first-child($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
640
|
+
$gridColumns: $gridColumns - 1;
|
641
|
+
}
|
642
|
+
}
|
643
|
+
|
644
|
+
@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
645
|
+
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
646
|
+
*width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
|
647
|
+
}
|
648
|
+
|
649
|
+
@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
650
|
+
margin-right: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
|
651
|
+
*margin-right: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
|
652
|
+
}
|
653
|
+
|
654
|
+
@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
655
|
+
margin-right: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
|
656
|
+
*margin-right: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
657
|
+
}
|
658
|
+
|
659
|
+
|
660
|
+
|
661
|
+
@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
|
662
|
+
input,
|
663
|
+
textarea,
|
664
|
+
.uneditable-input {
|
665
|
+
margin-right: 0; // override margin-right from core grid system
|
666
|
+
}
|
667
|
+
|
668
|
+
// Space grid-sized controls properly if multiple per line
|
669
|
+
.controls-row [class*="span"] + [class*="span"] {
|
670
|
+
margin-right: $gridGutterWidth;
|
671
|
+
}
|
672
|
+
|
673
|
+
// generate .spanX
|
674
|
+
@include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
675
|
+
}
|
676
|
+
|
677
|
+
@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
678
|
+
@while $gridColumns > 0 {
|
679
|
+
input.span#{$gridColumns},
|
680
|
+
textarea.span#{$gridColumns},
|
681
|
+
.uneditable-input.span#{$gridColumns} {
|
682
|
+
@include grid-input-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
683
|
+
}
|
684
|
+
$gridColumns: $gridColumns - 1;
|
685
|
+
}
|
686
|
+
}
|
687
|
+
|
688
|
+
@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
689
|
+
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
|
690
|
+
}
|