shoestrap-rails 0.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 +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
|
+
}
|