bootstrap-sass 1.2.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

@@ -0,0 +1,265 @@
1
+ /* preboot.css.scss
2
+ * Variables and mixins to pre-ignite any new web development project
3
+ * ------------------------------------------------------------------ */
4
+
5
+ // VARIABLES
6
+ // ---------
7
+
8
+ // Links
9
+ $linkColor: #0069d6;
10
+ $linkColorHover: darken($linkColor, 10);
11
+
12
+ // Grays
13
+ $black: #000;
14
+ $grayDark: lighten($black, 25%);
15
+ $gray: lighten($black, 50%);
16
+ $grayLight: lighten($black, 75%);
17
+ $grayLighter: lighten($black, 90%);
18
+ $white: #fff;
19
+
20
+ // Accent Colors
21
+ $blue: #049CDB;
22
+ $blueDark: #0064CD;
23
+ $green: #46a546;
24
+ $red: #9d261d;
25
+ $yellow: #ffc40d;
26
+ $orange: #f89406;
27
+ $pink: #c3325f;
28
+ $purple: #7a43b6;
29
+
30
+ // Baseline grid
31
+ $basefont: 13px;
32
+ $baseline: 18px;
33
+
34
+ // Griditude
35
+ $gridColumns: 16;
36
+ $gridColumnWidth: 40px;
37
+ $gridGutterWidth: 20px;
38
+ $extraSpace: ($gridGutterWidth * 2); // For our grid calculations
39
+ $siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
40
+
41
+ // Color Scheme
42
+ $baseColor: $blue; // Set a base color
43
+ $complement: complement($baseColor); // Determine a complementary color
44
+ $split1: adjust-hue($baseColor, 158); // Split complements
45
+ $split2: adjust-hue($baseColor, -158);
46
+ $triad1: adjust-hue($baseColor, 135); // Triads colors
47
+ $triad2: adjust-hue($baseColor, -135);
48
+ $tetra1: adjust-hue($baseColor, 90); // Tetra colors
49
+ $tetra2: adjust-hue($baseColor, -90);
50
+ $analog1: adjust-hue($baseColor, 22); // Analogs colors
51
+ $analog2: adjust-hue($baseColor, -22);
52
+
53
+
54
+ // MIXINS
55
+ // ------
56
+
57
+ // Clearfix for clearing floats like a boss h5bp.com/q
58
+ @mixin clearfix {
59
+ zoom: 1;
60
+ &:before, &:after {
61
+ display: table;
62
+ content: "";
63
+ }
64
+ &:after {
65
+ clear: both;
66
+ }
67
+ }
68
+
69
+ // Center-align a block level element
70
+ @mixin center-block {
71
+ display: block;
72
+ margin: 0 auto;
73
+ }
74
+
75
+ // Sizing shortcuts
76
+ @mixin size($height: 5px, $width: 5px) {
77
+ height: $height;
78
+ width: $width;
79
+ }
80
+ @mixin square($size: 5px) {
81
+ @include size($size, $size);
82
+ }
83
+
84
+ // Input placeholder text
85
+ @mixin placeholder($color: $grayLight) {
86
+ :-moz-placeholder {
87
+ color: $color;
88
+ }
89
+ ::-webkit-input-placeholder {
90
+ color: $color;
91
+ }
92
+ }
93
+
94
+ // Font Stacks
95
+ @mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {
96
+ font-size: $size;
97
+ font-weight: $weight;
98
+ line-height: $lineHeight;
99
+ }
100
+ @mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
101
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
102
+ font-size: $size;
103
+ font-weight: $weight;
104
+ line-height: $lineHeight;
105
+ }
106
+ @mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
107
+ font-family: "Georgia", Times New Roman, Times, serif;
108
+ font-size: $size;
109
+ font-weight: $weight;
110
+ line-height: $lineHeight;
111
+ }
112
+ @mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) {
113
+ font-family: "Monaco", Courier New, monospace;
114
+ font-size: $size;
115
+ font-weight: $weight;
116
+ line-height: $lineHeight;
117
+ }
118
+
119
+ // Grid System
120
+ @mixin container {
121
+ width: $siteWidth;
122
+ margin: 0 auto;
123
+ @include clearfix();
124
+ }
125
+ @mixin columns($columnSpan: 1) {
126
+ width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
127
+ }
128
+ @mixin offset($columnOffset: 1) {
129
+ margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
130
+ }
131
+
132
+ // Border Radius
133
+ @mixin border-radius($radius: 5px) {
134
+ -webkit-border-radius: $radius;
135
+ -moz-border-radius: $radius;
136
+ border-radius: $radius;
137
+ }
138
+
139
+ // Drop shadows
140
+ @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
141
+ -webkit-box-shadow: $shadow;
142
+ -moz-box-shadow: $shadow;
143
+ box-shadow: $shadow;
144
+ }
145
+
146
+ // Transitions
147
+ @mixin transition($transition) {
148
+ -webkit-transition: $transition;
149
+ -moz-transition: $transition;
150
+ transition: $transition;
151
+ }
152
+
153
+ // Background clipping
154
+ @mixin background-clip($clip) {
155
+ -webkit-background-clip: $clip;
156
+ -moz-background-clip: $clip;
157
+ background-clip: $clip;
158
+ }
159
+
160
+ // CSS3 Content Columns
161
+ @mixin content-columns($columnCount, $columnGap: 20px) {
162
+ -webkit-column-count: $columnCount;
163
+ -moz-column-count: $columnCount;
164
+ column-count: $columnCount;
165
+ -webkit-column-gap: $columnGap;
166
+ -moz-column-gap: $columnGap;
167
+ column-gap: $columnGap;
168
+ }
169
+
170
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
171
+ @mixin background-translucent($color: $white, $alpha: 1) {
172
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
173
+ }
174
+ @mixin border-translucent($color: $white, $alpha: 1) {
175
+ border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
176
+ background-clip: padding-box;
177
+ }
178
+
179
+ // Gradients
180
+ @mixin horizontal-gradient($startColor: #555, $endColor: #333) {
181
+ background-color: $endColor;
182
+ background-repeat: repeat-x;
183
+ background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
184
+ background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
185
+ background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
186
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
187
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
188
+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
189
+ background-image: linear-gradient(left, $startColor, $endColor); // Le standard
190
+ }
191
+ @mixin vertical-gradient($startColor: #555, $endColor: #333) {
192
+ background-color: $endColor;
193
+ background-repeat: repeat-x;
194
+ background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
195
+ background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
196
+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
197
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
198
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
199
+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
200
+ background-image: linear-gradient(top, $startColor, $endColor); // The standard
201
+ }
202
+ @mixin directional-gradient($startColor: #555, $endColor: #333, $deg: 45deg) {
203
+ background-color: $endColor;
204
+ background-repeat: repeat-x;
205
+ background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
206
+ background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
207
+ background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
208
+ background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
209
+ background-image: linear-gradient($deg, $startColor, $endColor); // The standard
210
+ }
211
+ @mixin vertical-three-colors-gradient($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
212
+ background-color: $endColor;
213
+ background-repeat: no-repeat;
214
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
215
+ background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
216
+ background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
217
+ background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
218
+ background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
219
+ background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
220
+ }
221
+
222
+ // Gradient Bar Colors for buttons and allerts
223
+ @mixin gradientBar($primaryColor, $secondaryColor) {
224
+ @include vertical-gradient($primaryColor, $secondaryColor);
225
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
226
+ border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
227
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
228
+ }
229
+ // Shared colors for buttons and alerts
230
+ .btn,
231
+ .alert-message {
232
+ // Set text color
233
+ &.danger,
234
+ &.danger:hover,
235
+ &.error,
236
+ &.error:hover,
237
+ &.success,
238
+ &.success:hover,
239
+ &.info,
240
+ &.info:hover {
241
+ color: $white
242
+ }
243
+ // Danger and error appear as red
244
+ &.danger,
245
+ &.error {
246
+ @include gradientBar(#ee5f5b, #c43c35);
247
+ }
248
+ // Success appears as green
249
+ &.success {
250
+ @include gradientBar(#62c462, #57a957);
251
+ }
252
+ // Info appears as a neutral blue
253
+ &.info {
254
+ @include gradientBar(#5bc0de, #339bb9);
255
+ }
256
+ }
257
+
258
+ // Opacity
259
+ @mixin opacity($opacity: 100) {
260
+ -khtml-opacity: $opacity / 100;
261
+ -moz-opacity: $opacity / 100;
262
+ opacity: $opacity / 100;
263
+ }
264
+
265
+
@@ -0,0 +1,137 @@
1
+ /* reset.css.scss
2
+ * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
3
+ * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
4
+
5
+
6
+ // ERIC MEYER RESET
7
+ // --------------------------------------------------
8
+
9
+ html, body { margin: 0; padding: 0; }
10
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
11
+ table { border-collapse: collapse; border-spacing: 0; }
12
+ ol, ul { list-style: none; }
13
+ q:before, q:after, blockquote:before, blockquote:after { content: ""; }
14
+
15
+
16
+ // Normalize.css
17
+ // Pulling in select resets form the normalize.css project
18
+ // --------------------------------------------------
19
+
20
+ // Display in IE6-9 and FF3
21
+ // -------------------------
22
+ // Source: http://github.com/necolas/normalize.css
23
+ html {
24
+ overflow-y: scroll;
25
+ font-size: 100%;
26
+ -webkit-text-size-adjust: 100%;
27
+ -ms-text-size-adjust: 100%;
28
+ }
29
+ // Focus states
30
+ a:focus {
31
+ outline: thin dotted;
32
+ }
33
+
34
+ // Display in IE6-9 and FF3
35
+ // -------------------------
36
+ // Source: http://github.com/necolas/normalize.css
37
+ article,
38
+ aside,
39
+ details,
40
+ figcaption,
41
+ figure,
42
+ footer,
43
+ header,
44
+ hgroup,
45
+ nav,
46
+ section {
47
+ display: block;
48
+ }
49
+
50
+ // Display block in IE6-9 and FF3
51
+ // -------------------------
52
+ // Source: http://github.com/necolas/normalize.css
53
+ audio,
54
+ canvas,
55
+ video {
56
+ display: inline-block;
57
+ *display: inline;
58
+ *zoom: 1;
59
+ }
60
+
61
+ // Prevents modern browsers from displaying 'audio' without controls
62
+ // -------------------------
63
+ // Source: http://github.com/necolas/normalize.css
64
+ audio:not([controls]) {
65
+ display: none;
66
+ }
67
+
68
+ // Prevents sub and sup affecting line-height in all browsers
69
+ // -------------------------
70
+ // Source: http://github.com/necolas/normalize.css
71
+ sub,
72
+ sup {
73
+ font-size: 75%;
74
+ line-height: 0;
75
+ position: relative;
76
+ vertical-align: baseline;
77
+ }
78
+ sup {
79
+ top: -0.5em;
80
+ }
81
+ sub {
82
+ bottom: -0.25em;
83
+ }
84
+
85
+ // Img border in a's and image quality
86
+ // -------------------------
87
+ // Source: http://github.com/necolas/normalize.css
88
+ img {
89
+ border: 0;
90
+ -ms-interpolation-mode: bicubic;
91
+ }
92
+
93
+ // Forms
94
+ // -------------------------
95
+ // Source: http://github.com/necolas/normalize.css
96
+
97
+ // Font size in all browsers, margin changes, misc consistency
98
+ button,
99
+ input,
100
+ select,
101
+ textarea {
102
+ font-size: 100%;
103
+ margin: 0;
104
+ vertical-align: baseline;
105
+ *vertical-align: middle;
106
+ }
107
+ button,
108
+ input {
109
+ line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
110
+ *overflow: visible; // Inner spacing ie IE6/7
111
+ }
112
+ button::-moz-focus-inner,
113
+ input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
114
+ border: 0;
115
+ padding: 0;
116
+ }
117
+ button,
118
+ input[type="button"],
119
+ input[type="reset"],
120
+ input[type="submit"] {
121
+ cursor: pointer; // Cursors on all buttons applied consistently
122
+ -webkit-appearance: button; // Style clicable inputs in iOS
123
+ }
124
+ input[type="search"] { // Appearance in Safari/Chrome
125
+ -webkit-appearance: textfield;
126
+ -webkit-box-sizing: content-box;
127
+ -moz-box-sizing: content-box;
128
+ box-sizing: content-box;
129
+ }
130
+ input[type="search"]::-webkit-search-decoration {
131
+ -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
132
+ }
133
+ textarea {
134
+ overflow: auto; // Remove vertical scrollbar in IE6-9
135
+ vertical-align: top; // Readability and alignment cross-browser
136
+ }
137
+
@@ -0,0 +1,110 @@
1
+ /*
2
+ * scaffolding.css.scss
3
+ * Basic and global styles for generating a grid system, structural layout, and page templates
4
+ * ------------------------------------------------------------------------------------------- */
5
+
6
+
7
+ // GRID SYSTEM
8
+ // -----------
9
+
10
+ .row {
11
+ @include clearfix();
12
+ margin-left: -1 * $gridGutterWidth;
13
+
14
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
15
+ // Credit to @dhg for the idea
16
+ [class^="span"] {
17
+ display: inline;
18
+ float: left;
19
+ margin-left: $gridGutterWidth;
20
+ }
21
+
22
+ // Default columns
23
+ .span1 { @include columns(1); }
24
+ .span2 { @include columns(2); }
25
+ .span3 { @include columns(3); }
26
+ .span4 { @include columns(4); }
27
+ .span5 { @include columns(5); }
28
+ .span6 { @include columns(6); }
29
+ .span7 { @include columns(7); }
30
+ .span8 { @include columns(8); }
31
+ .span9 { @include columns(9); }
32
+ .span10 { @include columns(10); }
33
+ .span11 { @include columns(11); }
34
+ .span12 { @include columns(12); }
35
+ .span13 { @include columns(13); }
36
+ .span14 { @include columns(14); }
37
+ .span15 { @include columns(15); }
38
+ .span16 { @include columns(16); }
39
+
40
+ // Offset column options
41
+ .offset1 { @include offset(1); }
42
+ .offset2 { @include offset(2); }
43
+ .offset3 { @include offset(3); }
44
+ .offset4 { @include offset(4); }
45
+ .offset5 { @include offset(5); }
46
+ .offset6 { @include offset(6); }
47
+ .offset7 { @include offset(7); }
48
+ .offset8 { @include offset(8); }
49
+ .offset9 { @include offset(9); }
50
+ .offset10 { @include offset(10); }
51
+ .offset11 { @include offset(11); }
52
+ .offset12 { @include offset(12); }
53
+
54
+ // Unique column sizes for 16-column grid
55
+ .span-one-third { width: 300px; }
56
+ .span-two-thirds { width: 620px; }
57
+ .offset-one-third { margin-left: 340px; }
58
+ .offset-two-thirds { margin-left: 660px; }
59
+ }
60
+
61
+
62
+ // STRUCTURAL LAYOUT
63
+ // -----------------
64
+
65
+ html, body {
66
+ background-color: #fff;
67
+ }
68
+ body {
69
+ margin: 0;
70
+ @include sans-serif-font(normal,$basefont,$baseline);
71
+ color: $gray;
72
+ }
73
+
74
+ // Container (centered, fixed-width layouts)
75
+ .container {
76
+ width: 940px;
77
+ margin: 0 auto;
78
+ }
79
+
80
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
81
+ .container-fluid {
82
+ padding: 0 20px;
83
+ @include clearfix();
84
+ > .sidebar {
85
+ float: left;
86
+ width: 220px;
87
+ }
88
+ // TODO in v2: rename this and .popover .content to be more specific
89
+ > .content {
90
+ min-width: 700px;
91
+ max-width: 1180px;
92
+ margin-left: 240px;
93
+ }
94
+ }
95
+
96
+
97
+ // BASE STYLES
98
+ // -----------
99
+
100
+ // Links
101
+ a {
102
+ color: $linkColor;
103
+ text-decoration: none;
104
+ line-height: inherit;
105
+ font-weight: inherit;
106
+ &:hover {
107
+ color: $linkColorHover;
108
+ text-decoration: underline;
109
+ }
110
+ }