shoestrap-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +4 -0
- data/Gemfile +3 -0
- data/LICENSE.md +22 -0
- data/README.md +3 -0
- data/Rakefile +80 -0
- data/assets/stylesheets/_shoestrap.scss +23 -0
- data/assets/stylesheets/shoestrap/_grid.scss +84 -0
- data/assets/stylesheets/shoestrap/_mixins.scss +18 -0
- data/assets/stylesheets/shoestrap/_normalize.scss +427 -0
- data/assets/stylesheets/shoestrap/_print.scss +90 -0
- data/assets/stylesheets/shoestrap/_scaffolding.scss +161 -0
- data/assets/stylesheets/shoestrap/_type.scss +299 -0
- data/assets/stylesheets/shoestrap/_utilities.scss +21 -0
- data/assets/stylesheets/shoestrap/_variables.scss +240 -0
- data/assets/stylesheets/shoestrap/mixins/_background-variant.scss +12 -0
- data/assets/stylesheets/shoestrap/mixins/_clearfix.scss +22 -0
- data/assets/stylesheets/shoestrap/mixins/_grid-framework.scss +81 -0
- data/assets/stylesheets/shoestrap/mixins/_grid.scss +122 -0
- data/assets/stylesheets/shoestrap/mixins/_image.scss +33 -0
- data/assets/stylesheets/shoestrap/mixins/_reset-text.scss +18 -0
- data/assets/stylesheets/shoestrap/mixins/_tab-focus.scss +9 -0
- data/assets/stylesheets/shoestrap/mixins/_text-emphasis.scss +12 -0
- data/assets/stylesheets/shoestrap/mixins/_text-overflow.scss +8 -0
- data/assets/stylesheets/shoestrap/mixins/_vendor-prefixes.scss +222 -0
- data/lib/shoestrap-rails.rb +57 -0
- data/lib/shoestrap-rails/engine.rb +9 -0
- data/lib/shoestrap-rails/version.rb +3 -0
- data/shoestrap-rails.gemspec +35 -0
- data/test/compilation_test.rb +18 -0
- data/test/dummy_rails/README.rdoc +3 -0
- data/test/dummy_rails/Rakefile +6 -0
- data/test/dummy_rails/app/assets/images/.keep +0 -0
- data/test/dummy_rails/app/assets/javascripts/application.js +1 -0
- data/test/dummy_rails/app/assets/stylesheets/application.sass +1 -0
- data/test/dummy_rails/app/controllers/application_controller.rb +5 -0
- data/test/dummy_rails/app/controllers/pages_controller.rb +4 -0
- data/test/dummy_rails/app/helpers/application_helper.rb +2 -0
- data/test/dummy_rails/app/views/layouts/application.html.erb +14 -0
- data/test/dummy_rails/app/views/pages/root.html.slim +84 -0
- data/test/dummy_rails/config.ru +4 -0
- data/test/dummy_rails/config/application.rb +30 -0
- data/test/dummy_rails/config/boot.rb +5 -0
- data/test/dummy_rails/config/environment.rb +5 -0
- data/test/dummy_rails/config/environments/development.rb +23 -0
- data/test/dummy_rails/config/environments/production.rb +82 -0
- data/test/dummy_rails/config/environments/test.rb +38 -0
- data/test/dummy_rails/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy_rails/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy_rails/config/initializers/inflections.rb +16 -0
- data/test/dummy_rails/config/initializers/mime_types.rb +5 -0
- data/test/dummy_rails/config/initializers/secret_token.rb +18 -0
- data/test/dummy_rails/config/initializers/session_store.rb +3 -0
- data/test/dummy_rails/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy_rails/config/locales/en.yml +3 -0
- data/test/dummy_rails/config/locales/es.yml +3 -0
- data/test/dummy_rails/config/routes.rb +3 -0
- data/test/dummy_rails/log/.keep +0 -0
- data/test/dummy_rails/log/production.log +0 -0
- data/test/dummy_rails/log/test.log +264 -0
- data/test/dummy_sass_only/Gemfile +4 -0
- data/test/dummy_sass_only/compile.rb +13 -0
- data/test/dummy_sass_only/import_all.sass +1 -0
- data/test/gemfiles/rails_head.gemfile +17 -0
- data/test/gemfiles/rails_head.gemfile.lock +214 -0
- data/test/gemfiles/sass_3_3.gemfile +6 -0
- data/test/gemfiles/sass_3_3.gemfile.lock +171 -0
- data/test/gemfiles/sass_3_4.gemfile +7 -0
- data/test/gemfiles/sass_3_4.gemfile.lock +171 -0
- data/test/gemfiles/sass_head.gemfile +6 -0
- data/test/gemfiles/sass_head.gemfile.lock +183 -0
- data/test/pages_test.rb +15 -0
- data/test/sass_test.rb +22 -0
- data/test/sprockets_rails_test.rb +27 -0
- data/test/support/dummy_rails_integration.rb +22 -0
- data/test/support/reporting.rb +27 -0
- data/test/test_helper.rb +36 -0
- data/test/test_helper_rails.rb +6 -0
- metadata +352 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Bootstrap v3.3.6 (http://getbootstrap.com)
|
|
3
|
+
* Copyright 2011-2015 Twitter, Inc.
|
|
4
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
// Positioning
|
|
8
|
+
|
|
9
|
+
.center-block {
|
|
10
|
+
display: block;
|
|
11
|
+
margin-left: auto;
|
|
12
|
+
margin-right: auto;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.pull-right {
|
|
16
|
+
float: right !important;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.pull-left {
|
|
20
|
+
float: left !important;
|
|
21
|
+
}
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Variables
|
|
3
|
+
// --------------------------------------------------
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
//== Colors
|
|
7
|
+
//
|
|
8
|
+
//## Gray and brand colors for use across Bootstrap.
|
|
9
|
+
|
|
10
|
+
$gray-base: #000 !default;
|
|
11
|
+
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
|
|
12
|
+
$gray-dark: lighten($gray-base, 20%) !default; // #333
|
|
13
|
+
$gray: lighten($gray-base, 33.5%) !default; // #555
|
|
14
|
+
$gray-light: lighten($gray-base, 46.7%) !default; // #777
|
|
15
|
+
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
|
|
16
|
+
|
|
17
|
+
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
|
|
18
|
+
$brand-success: #5cb85c !default;
|
|
19
|
+
$brand-info: #5bc0de !default;
|
|
20
|
+
$brand-warning: #f0ad4e !default;
|
|
21
|
+
$brand-danger: #d9534f !default;
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
//== Scaffolding
|
|
25
|
+
//
|
|
26
|
+
//## Settings for some of the most global styles.
|
|
27
|
+
|
|
28
|
+
//** Background color for `<body>`.
|
|
29
|
+
$body-bg: #fff !default;
|
|
30
|
+
//** Global text color on `<body>`.
|
|
31
|
+
$text-color: $gray-dark !default;
|
|
32
|
+
|
|
33
|
+
//** Global textual link color.
|
|
34
|
+
$link-color: $brand-primary !default;
|
|
35
|
+
//** Link hover color set via `darken()` function.
|
|
36
|
+
$link-hover-color: darken($link-color, 15%) !default;
|
|
37
|
+
//** Link hover decoration.
|
|
38
|
+
$link-hover-decoration: underline !default;
|
|
39
|
+
|
|
40
|
+
//== Typography
|
|
41
|
+
//
|
|
42
|
+
//## Font, line-height, and color for body text, headings, and more.
|
|
43
|
+
|
|
44
|
+
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
45
|
+
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
|
46
|
+
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
|
47
|
+
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
|
48
|
+
$font-family-base: $font-family-sans-serif !default;
|
|
49
|
+
|
|
50
|
+
$font-size-base: 14px !default;
|
|
51
|
+
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
|
52
|
+
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
|
53
|
+
|
|
54
|
+
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
|
|
55
|
+
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
|
|
56
|
+
$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
|
|
57
|
+
$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
|
|
58
|
+
$font-size-h5: $font-size-base !default;
|
|
59
|
+
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
|
|
60
|
+
|
|
61
|
+
//** Unit-less `line-height` for use in components like buttons.
|
|
62
|
+
$line-height-base: 1.428571429 !default; // 20/14
|
|
63
|
+
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
|
64
|
+
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
|
65
|
+
|
|
66
|
+
//** By default, this inherits from the `<body>`.
|
|
67
|
+
$headings-font-family: inherit !default;
|
|
68
|
+
$headings-font-weight: 500 !default;
|
|
69
|
+
$headings-line-height: 1.1 !default;
|
|
70
|
+
$headings-color: inherit !default;
|
|
71
|
+
|
|
72
|
+
//== Components
|
|
73
|
+
//
|
|
74
|
+
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
|
75
|
+
|
|
76
|
+
$padding-base-vertical: 6px !default;
|
|
77
|
+
$padding-base-horizontal: 12px !default;
|
|
78
|
+
|
|
79
|
+
$padding-large-vertical: 10px !default;
|
|
80
|
+
$padding-large-horizontal: 16px !default;
|
|
81
|
+
|
|
82
|
+
$padding-small-vertical: 5px !default;
|
|
83
|
+
$padding-small-horizontal: 10px !default;
|
|
84
|
+
|
|
85
|
+
$padding-xs-vertical: 1px !default;
|
|
86
|
+
$padding-xs-horizontal: 5px !default;
|
|
87
|
+
|
|
88
|
+
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
|
|
89
|
+
$line-height-small: 1.5 !default;
|
|
90
|
+
|
|
91
|
+
$border-radius-base: 4px !default;
|
|
92
|
+
$border-radius-large: 6px !default;
|
|
93
|
+
$border-radius-small: 3px !default;
|
|
94
|
+
|
|
95
|
+
//** Global color for active items (e.g., navs or dropdowns).
|
|
96
|
+
$component-active-color: #fff !default;
|
|
97
|
+
//** Global background color for active items (e.g., navs or dropdowns).
|
|
98
|
+
$component-active-bg: $brand-primary !default;
|
|
99
|
+
|
|
100
|
+
//** Width of the `border` for generating carets that indicator dropdowns.
|
|
101
|
+
$caret-width-base: 4px !default;
|
|
102
|
+
//** Carets increase slightly in size for larger components.
|
|
103
|
+
$caret-width-large: 5px !default;
|
|
104
|
+
|
|
105
|
+
//== Form states and alerts
|
|
106
|
+
//
|
|
107
|
+
//## Define colors for form feedback states and, by default, alerts.
|
|
108
|
+
|
|
109
|
+
$state-success-text: #3c763d !default;
|
|
110
|
+
$state-success-bg: #dff0d8 !default;
|
|
111
|
+
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
|
|
112
|
+
|
|
113
|
+
$state-info-text: #31708f !default;
|
|
114
|
+
$state-info-bg: #d9edf7 !default;
|
|
115
|
+
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
|
|
116
|
+
|
|
117
|
+
$state-warning-text: #8a6d3b !default;
|
|
118
|
+
$state-warning-bg: #fcf8e3 !default;
|
|
119
|
+
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
|
|
120
|
+
|
|
121
|
+
$state-danger-text: #a94442 !default;
|
|
122
|
+
$state-danger-bg: #f2dede !default;
|
|
123
|
+
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
|
|
124
|
+
|
|
125
|
+
//== Media queries breakpoints
|
|
126
|
+
//
|
|
127
|
+
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
|
128
|
+
|
|
129
|
+
// Extra small screen / phone
|
|
130
|
+
//** Deprecated `$screen-xs` as of v3.0.1
|
|
131
|
+
$screen-xs: 480px !default;
|
|
132
|
+
//** Deprecated `$screen-xs-min` as of v3.2.0
|
|
133
|
+
$screen-xs-min: $screen-xs !default;
|
|
134
|
+
//** Deprecated `$screen-phone` as of v3.0.1
|
|
135
|
+
$screen-phone: $screen-xs-min !default;
|
|
136
|
+
|
|
137
|
+
// Small screen / tablet
|
|
138
|
+
//** Deprecated `$screen-sm` as of v3.0.1
|
|
139
|
+
$screen-sm: 768px !default;
|
|
140
|
+
$screen-sm-min: $screen-sm !default;
|
|
141
|
+
//** Deprecated `$screen-tablet` as of v3.0.1
|
|
142
|
+
$screen-tablet: $screen-sm-min !default;
|
|
143
|
+
|
|
144
|
+
// Medium screen / desktop
|
|
145
|
+
//** Deprecated `$screen-md` as of v3.0.1
|
|
146
|
+
$screen-md: 992px !default;
|
|
147
|
+
$screen-md-min: $screen-md !default;
|
|
148
|
+
//** Deprecated `$screen-desktop` as of v3.0.1
|
|
149
|
+
$screen-desktop: $screen-md-min !default;
|
|
150
|
+
|
|
151
|
+
// Large screen / wide desktop
|
|
152
|
+
//** Deprecated `$screen-lg` as of v3.0.1
|
|
153
|
+
$screen-lg: 1200px !default;
|
|
154
|
+
$screen-lg-min: $screen-lg !default;
|
|
155
|
+
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
|
156
|
+
$screen-lg-desktop: $screen-lg-min !default;
|
|
157
|
+
|
|
158
|
+
// So media queries don't overlap when required, provide a maximum
|
|
159
|
+
$screen-xs-max: ($screen-sm-min - 1) !default;
|
|
160
|
+
$screen-sm-max: ($screen-md-min - 1) !default;
|
|
161
|
+
$screen-md-max: ($screen-lg-min - 1) !default;
|
|
162
|
+
|
|
163
|
+
//== Grid system
|
|
164
|
+
//
|
|
165
|
+
//## Define your custom responsive grid.
|
|
166
|
+
|
|
167
|
+
//** Number of columns in the grid.
|
|
168
|
+
$grid-columns: 12 !default;
|
|
169
|
+
//** Padding between columns. Gets divided in half for the left and right.
|
|
170
|
+
$grid-gutter-width: 30px !default;
|
|
171
|
+
// Navbar collapse
|
|
172
|
+
//** Point at which the navbar becomes uncollapsed.
|
|
173
|
+
$grid-float-breakpoint: $screen-sm-min !default;
|
|
174
|
+
//** Point at which the navbar begins collapsing.
|
|
175
|
+
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
//== Container sizes
|
|
179
|
+
//
|
|
180
|
+
//## Define the maximum width of `.container` for different screen sizes.
|
|
181
|
+
|
|
182
|
+
// Small screen / tablet
|
|
183
|
+
$container-tablet: (720px + $grid-gutter-width) !default;
|
|
184
|
+
//** For `$screen-sm-min` and up.
|
|
185
|
+
$container-sm: $container-tablet !default;
|
|
186
|
+
|
|
187
|
+
// Medium screen / desktop
|
|
188
|
+
$container-desktop: (940px + $grid-gutter-width) !default;
|
|
189
|
+
//** For `$screen-md-min` and up.
|
|
190
|
+
$container-md: $container-desktop !default;
|
|
191
|
+
|
|
192
|
+
// Large screen / wide desktop
|
|
193
|
+
$container-large-desktop: (1140px + $grid-gutter-width) !default;
|
|
194
|
+
//** For `$screen-lg-min` and up.
|
|
195
|
+
$container-lg: $container-large-desktop !default;
|
|
196
|
+
|
|
197
|
+
//== Type
|
|
198
|
+
//
|
|
199
|
+
//##
|
|
200
|
+
|
|
201
|
+
//** Horizontal offset for forms and lists.
|
|
202
|
+
$component-offset-horizontal: 180px !default;
|
|
203
|
+
//** Text muted color
|
|
204
|
+
$text-muted: $gray-light !default;
|
|
205
|
+
//** Abbreviations and acronyms border color
|
|
206
|
+
$abbr-border-color: $gray-light !default;
|
|
207
|
+
//** Headings small color
|
|
208
|
+
$headings-small-color: $gray-light !default;
|
|
209
|
+
//** Blockquote small color
|
|
210
|
+
$blockquote-small-color: $gray-light !default;
|
|
211
|
+
//** Blockquote font size
|
|
212
|
+
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
|
213
|
+
//** Blockquote border color
|
|
214
|
+
$blockquote-border-color: $gray-lighter !default;
|
|
215
|
+
//** Page header border color
|
|
216
|
+
$page-header-border-color: $gray-lighter !default;
|
|
217
|
+
//** Width of horizontal description list titles
|
|
218
|
+
$dl-horizontal-offset: $component-offset-horizontal !default;
|
|
219
|
+
//** Point at which .dl-horizontal becomes horizontal
|
|
220
|
+
$dl-horizontal-breakpoint: $grid-float-breakpoint !default;
|
|
221
|
+
//** Horizontal line color.
|
|
222
|
+
$hr-border: $gray-lighter !default;
|
|
223
|
+
|
|
224
|
+
//== Thumbnails
|
|
225
|
+
//
|
|
226
|
+
//##
|
|
227
|
+
|
|
228
|
+
//** Padding around the thumbnail image
|
|
229
|
+
$thumbnail-padding: 4px !default;
|
|
230
|
+
//** Thumbnail background color
|
|
231
|
+
$thumbnail-bg: $body-bg !default;
|
|
232
|
+
//** Thumbnail border color
|
|
233
|
+
$thumbnail-border: #ddd !default;
|
|
234
|
+
//** Thumbnail border radius
|
|
235
|
+
$thumbnail-border-radius: $border-radius-base !default;
|
|
236
|
+
|
|
237
|
+
//** Custom text color for thumbnail captions
|
|
238
|
+
$thumbnail-caption-color: $text-color !default;
|
|
239
|
+
//** Padding around the thumbnail caption
|
|
240
|
+
$thumbnail-caption-padding: 9px !default;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// Clearfix
|
|
2
|
+
//
|
|
3
|
+
// For modern browsers
|
|
4
|
+
// 1. The space content is one way to avoid an Opera bug when the
|
|
5
|
+
// contenteditable attribute is included anywhere else in the document.
|
|
6
|
+
// Otherwise it causes space to appear at the top and bottom of elements
|
|
7
|
+
// that are clearfixed.
|
|
8
|
+
// 2. The use of `table` rather than `block` is only necessary if using
|
|
9
|
+
// `:before` to contain the top-margins of child elements.
|
|
10
|
+
//
|
|
11
|
+
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
|
12
|
+
|
|
13
|
+
@mixin clearfix() {
|
|
14
|
+
&:before,
|
|
15
|
+
&:after {
|
|
16
|
+
content: " "; // 1
|
|
17
|
+
display: table; // 2
|
|
18
|
+
}
|
|
19
|
+
&:after {
|
|
20
|
+
clear: both;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
// Framework grid generation
|
|
2
|
+
//
|
|
3
|
+
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
4
|
+
// any value of `$grid-columns`.
|
|
5
|
+
|
|
6
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
7
|
+
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
|
|
8
|
+
@for $i from (1 + 1) through $grid-columns {
|
|
9
|
+
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
|
10
|
+
}
|
|
11
|
+
#{$list} {
|
|
12
|
+
position: relative;
|
|
13
|
+
// Prevent columns from collapsing when empty
|
|
14
|
+
min-height: 1px;
|
|
15
|
+
// Inner gutter via padding
|
|
16
|
+
padding-left: ceil(($grid-gutter-width / 2));
|
|
17
|
+
padding-right: floor(($grid-gutter-width / 2));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
23
|
+
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
|
|
24
|
+
@for $i from (1 + 1) through $grid-columns {
|
|
25
|
+
$list: "#{$list}, .col-#{$class}-#{$i}";
|
|
26
|
+
}
|
|
27
|
+
#{$list} {
|
|
28
|
+
float: left;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
@mixin calc-grid-column($index, $class, $type) {
|
|
34
|
+
@if ($type == width) and ($index > 0) {
|
|
35
|
+
.col-#{$class}-#{$index} {
|
|
36
|
+
width: percentage(($index / $grid-columns));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
@if ($type == push) and ($index > 0) {
|
|
40
|
+
.col-#{$class}-push-#{$index} {
|
|
41
|
+
left: percentage(($index / $grid-columns));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
@if ($type == push) and ($index == 0) {
|
|
45
|
+
.col-#{$class}-push-0 {
|
|
46
|
+
left: auto;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
@if ($type == pull) and ($index > 0) {
|
|
50
|
+
.col-#{$class}-pull-#{$index} {
|
|
51
|
+
right: percentage(($index / $grid-columns));
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
@if ($type == pull) and ($index == 0) {
|
|
55
|
+
.col-#{$class}-pull-0 {
|
|
56
|
+
right: auto;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
@if ($type == offset) {
|
|
60
|
+
.col-#{$class}-offset-#{$index} {
|
|
61
|
+
margin-left: percentage(($index / $grid-columns));
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
67
|
+
@mixin loop-grid-columns($columns, $class, $type) {
|
|
68
|
+
@for $i from 0 through $columns {
|
|
69
|
+
@include calc-grid-column($i, $class, $type);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
// Create grid for specific class
|
|
75
|
+
@mixin make-grid($class) {
|
|
76
|
+
@include float-grid-columns($class);
|
|
77
|
+
@include loop-grid-columns($grid-columns, $class, width);
|
|
78
|
+
@include loop-grid-columns($grid-columns, $class, pull);
|
|
79
|
+
@include loop-grid-columns($grid-columns, $class, push);
|
|
80
|
+
@include loop-grid-columns($grid-columns, $class, offset);
|
|
81
|
+
}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
// Grid system
|
|
2
|
+
//
|
|
3
|
+
// Generate semantic grid columns with these mixins.
|
|
4
|
+
|
|
5
|
+
// Centered container element
|
|
6
|
+
@mixin container-fixed($gutter: $grid-gutter-width) {
|
|
7
|
+
margin-right: auto;
|
|
8
|
+
margin-left: auto;
|
|
9
|
+
padding-left: floor(($gutter / 2));
|
|
10
|
+
padding-right: ceil(($gutter / 2));
|
|
11
|
+
@include clearfix;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// Creates a wrapper for a series of columns
|
|
15
|
+
@mixin make-row($gutter: $grid-gutter-width) {
|
|
16
|
+
margin-left: ceil(($gutter / -2));
|
|
17
|
+
margin-right: floor(($gutter / -2));
|
|
18
|
+
@include clearfix;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Generate the extra small columns
|
|
22
|
+
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
|
|
23
|
+
position: relative;
|
|
24
|
+
float: left;
|
|
25
|
+
width: percentage(($columns / $grid-columns));
|
|
26
|
+
min-height: 1px;
|
|
27
|
+
padding-left: ($gutter / 2);
|
|
28
|
+
padding-right: ($gutter / 2);
|
|
29
|
+
}
|
|
30
|
+
@mixin make-xs-column-offset($columns) {
|
|
31
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
32
|
+
}
|
|
33
|
+
@mixin make-xs-column-push($columns) {
|
|
34
|
+
left: percentage(($columns / $grid-columns));
|
|
35
|
+
}
|
|
36
|
+
@mixin make-xs-column-pull($columns) {
|
|
37
|
+
right: percentage(($columns / $grid-columns));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Generate the small columns
|
|
41
|
+
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
|
|
42
|
+
position: relative;
|
|
43
|
+
min-height: 1px;
|
|
44
|
+
padding-left: ($gutter / 2);
|
|
45
|
+
padding-right: ($gutter / 2);
|
|
46
|
+
|
|
47
|
+
@media (min-width: $screen-sm-min) {
|
|
48
|
+
float: left;
|
|
49
|
+
width: percentage(($columns / $grid-columns));
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
@mixin make-sm-column-offset($columns) {
|
|
53
|
+
@media (min-width: $screen-sm-min) {
|
|
54
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
@mixin make-sm-column-push($columns) {
|
|
58
|
+
@media (min-width: $screen-sm-min) {
|
|
59
|
+
left: percentage(($columns / $grid-columns));
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
@mixin make-sm-column-pull($columns) {
|
|
63
|
+
@media (min-width: $screen-sm-min) {
|
|
64
|
+
right: percentage(($columns / $grid-columns));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Generate the medium columns
|
|
69
|
+
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
|
|
70
|
+
position: relative;
|
|
71
|
+
min-height: 1px;
|
|
72
|
+
padding-left: ($gutter / 2);
|
|
73
|
+
padding-right: ($gutter / 2);
|
|
74
|
+
|
|
75
|
+
@media (min-width: $screen-md-min) {
|
|
76
|
+
float: left;
|
|
77
|
+
width: percentage(($columns / $grid-columns));
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
@mixin make-md-column-offset($columns) {
|
|
81
|
+
@media (min-width: $screen-md-min) {
|
|
82
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
@mixin make-md-column-push($columns) {
|
|
86
|
+
@media (min-width: $screen-md-min) {
|
|
87
|
+
left: percentage(($columns / $grid-columns));
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
@mixin make-md-column-pull($columns) {
|
|
91
|
+
@media (min-width: $screen-md-min) {
|
|
92
|
+
right: percentage(($columns / $grid-columns));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Generate the large columns
|
|
97
|
+
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
|
|
98
|
+
position: relative;
|
|
99
|
+
min-height: 1px;
|
|
100
|
+
padding-left: ($gutter / 2);
|
|
101
|
+
padding-right: ($gutter / 2);
|
|
102
|
+
|
|
103
|
+
@media (min-width: $screen-lg-min) {
|
|
104
|
+
float: left;
|
|
105
|
+
width: percentage(($columns / $grid-columns));
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
@mixin make-lg-column-offset($columns) {
|
|
109
|
+
@media (min-width: $screen-lg-min) {
|
|
110
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
@mixin make-lg-column-push($columns) {
|
|
114
|
+
@media (min-width: $screen-lg-min) {
|
|
115
|
+
left: percentage(($columns / $grid-columns));
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
@mixin make-lg-column-pull($columns) {
|
|
119
|
+
@media (min-width: $screen-lg-min) {
|
|
120
|
+
right: percentage(($columns / $grid-columns));
|
|
121
|
+
}
|
|
122
|
+
}
|