include_media_rails 1.4.2.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 +10 -0
- data/.rspec +2 -0
- data/.travis.yml +9 -0
- data/CODE_OF_CONDUCT.md +49 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +41 -0
- data/Rakefile +6 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/include_media_rails.gemspec +40 -0
- data/lib/include_media_rails/version.rb +3 -0
- data/lib/include_media_rails.rb +8 -0
- data/vendor/assets/stylesheets/include_media.scss +562 -0
- metadata +162 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: b71bfe5f01712b5d6de5127dc455b316c043c708
|
4
|
+
data.tar.gz: 8ad807e26631312f59ae43077956e345415e9f6f
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 806a16f212b5ac3f7b0a237041a07b3628f3972c08d9789deec08edf34824fcabd26443be1d205a4115518bc51af8ccdc327a842a28236e484d463618ee2e333
|
7
|
+
data.tar.gz: 5ce38c9027e100cb002855650696f945b3b8d98e2560d3cc69b0f1d8fa735e40e784ca3402ea1da6fb77bc3cb676a7ab7b1aaeb4f404e78bfdc183e044dc57f6
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.travis.yml
ADDED
data/CODE_OF_CONDUCT.md
ADDED
@@ -0,0 +1,49 @@
|
|
1
|
+
# Contributor Code of Conduct
|
2
|
+
|
3
|
+
As contributors and maintainers of this project, and in the interest of
|
4
|
+
fostering an open and welcoming community, we pledge to respect all people who
|
5
|
+
contribute through reporting issues, posting feature requests, updating
|
6
|
+
documentation, submitting pull requests or patches, and other activities.
|
7
|
+
|
8
|
+
We are committed to making participation in this project a harassment-free
|
9
|
+
experience for everyone, regardless of level of experience, gender, gender
|
10
|
+
identity and expression, sexual orientation, disability, personal appearance,
|
11
|
+
body size, race, ethnicity, age, religion, or nationality.
|
12
|
+
|
13
|
+
Examples of unacceptable behavior by participants include:
|
14
|
+
|
15
|
+
* The use of sexualized language or imagery
|
16
|
+
* Personal attacks
|
17
|
+
* Trolling or insulting/derogatory comments
|
18
|
+
* Public or private harassment
|
19
|
+
* Publishing other's private information, such as physical or electronic
|
20
|
+
addresses, without explicit permission
|
21
|
+
* Other unethical or unprofessional conduct
|
22
|
+
|
23
|
+
Project maintainers have the right and responsibility to remove, edit, or
|
24
|
+
reject comments, commits, code, wiki edits, issues, and other contributions
|
25
|
+
that are not aligned to this Code of Conduct, or to ban temporarily or
|
26
|
+
permanently any contributor for other behaviors that they deem inappropriate,
|
27
|
+
threatening, offensive, or harmful.
|
28
|
+
|
29
|
+
By adopting this Code of Conduct, project maintainers commit themselves to
|
30
|
+
fairly and consistently applying these principles to every aspect of managing
|
31
|
+
this project. Project maintainers who do not follow or enforce the Code of
|
32
|
+
Conduct may be permanently removed from the project team.
|
33
|
+
|
34
|
+
This code of conduct applies both within project spaces and in public spaces
|
35
|
+
when an individual is representing the project or its community.
|
36
|
+
|
37
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
38
|
+
reported by contacting a project maintainer at dev@kaoruk.com. All
|
39
|
+
complaints will be reviewed and investigated and will result in a response that
|
40
|
+
is deemed necessary and appropriate to the circumstances. Maintainers are
|
41
|
+
obligated to maintain confidentiality with regard to the reporter of an
|
42
|
+
incident.
|
43
|
+
|
44
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
|
45
|
+
version 1.3.0, available at
|
46
|
+
[http://contributor-covenant.org/version/1/3/0/][version]
|
47
|
+
|
48
|
+
[homepage]: http://contributor-covenant.org
|
49
|
+
[version]: http://contributor-covenant.org/version/1/3/0/
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2016 Kaoru Kohashigawa
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
# IncludeMediaRails
|
2
|
+
|
3
|
+
Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/include_media_rails`. To experiment with that code, run `bin/console` for an interactive prompt.
|
4
|
+
|
5
|
+
TODO: Delete this and the text above, and describe your gem
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem 'include_media_rails'
|
13
|
+
```
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install include_media_rails
|
22
|
+
|
23
|
+
## Usage
|
24
|
+
|
25
|
+
TODO: Write usage instructions here
|
26
|
+
|
27
|
+
## Development
|
28
|
+
|
29
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
30
|
+
|
31
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
32
|
+
|
33
|
+
## Contributing
|
34
|
+
|
35
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/include_media_rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
36
|
+
|
37
|
+
|
38
|
+
## License
|
39
|
+
|
40
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
41
|
+
|
data/Rakefile
ADDED
data/bin/console
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
|
3
|
+
require "bundler/setup"
|
4
|
+
require "include_media_rails"
|
5
|
+
|
6
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
7
|
+
# with your gem easier. You can also use a different console, if you like.
|
8
|
+
|
9
|
+
# (If you use this, don't forget to add pry to your Gemfile!)
|
10
|
+
# require "pry"
|
11
|
+
# Pry.start
|
12
|
+
|
13
|
+
require "irb"
|
14
|
+
IRB.start
|
data/bin/setup
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'include_media_rails/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "include_media_rails"
|
8
|
+
spec.version = IncludeMediaRails::VERSION
|
9
|
+
spec.authors = ["Kaoru Kohashigawa"]
|
10
|
+
spec.email = ["opensource@kaoruk.com"]
|
11
|
+
|
12
|
+
spec.homepage = "https://github.com/KaoruDev/include_media_rails"
|
13
|
+
spec.summary = "Use Include Media by Eduardo Bouças (@eduardoboucas) " \
|
14
|
+
"in any Rails > 3.1 project"
|
15
|
+
spec.description = "This gem allows you to easily import include media " \
|
16
|
+
"to your project to easily write readable breakpoints"
|
17
|
+
spec.homepage = "https://github.com/KaoruDev/include_media_rails"
|
18
|
+
spec.license = "MIT"
|
19
|
+
|
20
|
+
# Prevent pushing this gem to RubyGems.org by setting 'allowed_push_host', or
|
21
|
+
# delete this section to allow pushing this gem to any host.
|
22
|
+
if spec.respond_to?(:metadata)
|
23
|
+
spec.metadata['allowed_push_host'] = "https://rubygems.org"
|
24
|
+
else
|
25
|
+
raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
|
26
|
+
end
|
27
|
+
|
28
|
+
spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
|
29
|
+
spec.bindir = "exe"
|
30
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
31
|
+
spec.require_paths = ["lib"]
|
32
|
+
|
33
|
+
spec.add_dependency "railties", ">= 3.1", "< 5"
|
34
|
+
spec.add_dependency "sass", ">= 3.3", "< 4" # Include Media needs sass maps
|
35
|
+
|
36
|
+
spec.add_development_dependency "bundler", "~> 1.11"
|
37
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
38
|
+
spec.add_development_dependency "rspec", "~> 3.0"
|
39
|
+
spec.add_development_dependency "rails", ">= 3.1", "< 5"
|
40
|
+
end
|
@@ -0,0 +1,562 @@
|
|
1
|
+
@charset 'UTF-8';
|
2
|
+
|
3
|
+
// _ _ _ _ _
|
4
|
+
// (_) | | | | | (_)
|
5
|
+
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
|
6
|
+
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
|
7
|
+
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
|
8
|
+
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
|
9
|
+
//
|
10
|
+
// Simple, elegant and maintainable media queries in Sass
|
11
|
+
// v1.4.2
|
12
|
+
//
|
13
|
+
// http://include-media.com
|
14
|
+
//
|
15
|
+
// Authors: Eduardo Boucas (@eduardoboucas)
|
16
|
+
// Hugo Giraudel (@hugogiraudel)
|
17
|
+
//
|
18
|
+
// This project is licensed under the terms of the MIT license
|
19
|
+
|
20
|
+
|
21
|
+
////
|
22
|
+
/// include-media library public configuration
|
23
|
+
/// @author Eduardo Boucas
|
24
|
+
/// @access public
|
25
|
+
////
|
26
|
+
|
27
|
+
|
28
|
+
///
|
29
|
+
/// Creates a list of global breakpoints
|
30
|
+
///
|
31
|
+
/// @example scss - Creates a single breakpoint with the label `phone`
|
32
|
+
/// $breakpoints: ('phone': 320px);
|
33
|
+
///
|
34
|
+
$breakpoints: (
|
35
|
+
'phone': 320px,
|
36
|
+
'tablet': 768px,
|
37
|
+
'desktop': 1024px
|
38
|
+
) !default;
|
39
|
+
|
40
|
+
|
41
|
+
///
|
42
|
+
/// Creates a list of static expressions or media types
|
43
|
+
///
|
44
|
+
/// @example scss - Creates a single media type (screen)
|
45
|
+
/// $media-expressions: ('screen': 'screen');
|
46
|
+
///
|
47
|
+
/// @example scss - Creates a static expression with logical disjunction (OR operator)
|
48
|
+
/// $media-expressions: (
|
49
|
+
/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
|
50
|
+
/// );
|
51
|
+
///
|
52
|
+
$media-expressions: (
|
53
|
+
'screen': 'screen',
|
54
|
+
'print': 'print',
|
55
|
+
'handheld': 'handheld',
|
56
|
+
'landscape': '(orientation: landscape)',
|
57
|
+
'portrait': '(orientation: portrait)',
|
58
|
+
'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
|
59
|
+
'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)'
|
60
|
+
) !default;
|
61
|
+
|
62
|
+
|
63
|
+
///
|
64
|
+
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
|
65
|
+
///
|
66
|
+
/// @example scss - Interval for pixels is defined as `1` by default
|
67
|
+
/// @include media('>128px') {}
|
68
|
+
///
|
69
|
+
/// /* Generates: */
|
70
|
+
/// @media (min-width: 129px) {}
|
71
|
+
///
|
72
|
+
/// @example scss - Interval for ems is defined as `0.01` by default
|
73
|
+
/// @include media('>20em') {}
|
74
|
+
///
|
75
|
+
/// /* Generates: */
|
76
|
+
/// @media (min-width: 20.01em) {}
|
77
|
+
///
|
78
|
+
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
|
79
|
+
/// @include media('>2.0rem') {}
|
80
|
+
///
|
81
|
+
/// /* Generates: */
|
82
|
+
/// @media (min-width: 2.1rem) {}
|
83
|
+
///
|
84
|
+
$unit-intervals: (
|
85
|
+
'px': 1,
|
86
|
+
'em': 0.01,
|
87
|
+
'rem': 0.1
|
88
|
+
) !default;
|
89
|
+
|
90
|
+
///
|
91
|
+
/// Defines whether support for media queries is available, useful for creating separate stylesheets
|
92
|
+
/// for browsers that don't support media queries.
|
93
|
+
///
|
94
|
+
/// @example scss - Disables support for media queries
|
95
|
+
/// $im-media-support: false;
|
96
|
+
/// @include media('>=tablet') {
|
97
|
+
/// .foo {
|
98
|
+
/// color: tomato;
|
99
|
+
/// }
|
100
|
+
/// }
|
101
|
+
///
|
102
|
+
/// /* Generates: */
|
103
|
+
/// .foo {
|
104
|
+
/// color: tomato;
|
105
|
+
/// }
|
106
|
+
///
|
107
|
+
$im-media-support: true !default;
|
108
|
+
|
109
|
+
///
|
110
|
+
/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
|
111
|
+
/// intercept the breakpoint will be displayed, any others will be ignored.
|
112
|
+
///
|
113
|
+
/// @example scss - This media query will show because it intercepts the static breakpoint
|
114
|
+
/// $im-media-support: false;
|
115
|
+
/// $im-no-media-breakpoint: 'desktop';
|
116
|
+
/// @include media('>=tablet') {
|
117
|
+
/// .foo {
|
118
|
+
/// color: tomato;
|
119
|
+
/// }
|
120
|
+
/// }
|
121
|
+
///
|
122
|
+
/// /* Generates: */
|
123
|
+
/// .foo {
|
124
|
+
/// color: tomato;
|
125
|
+
/// }
|
126
|
+
///
|
127
|
+
/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
|
128
|
+
/// $im-media-support: false;
|
129
|
+
/// $im-no-media-breakpoint: 'tablet';
|
130
|
+
/// @include media('>=desktop') {
|
131
|
+
/// .foo {
|
132
|
+
/// color: tomato;
|
133
|
+
/// }
|
134
|
+
/// }
|
135
|
+
///
|
136
|
+
/// /* No output */
|
137
|
+
///
|
138
|
+
$im-no-media-breakpoint: 'desktop' !default;
|
139
|
+
|
140
|
+
///
|
141
|
+
/// Selects which media expressions are allowed in an expression for it to be used when media queries
|
142
|
+
/// are not supported.
|
143
|
+
///
|
144
|
+
/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
|
145
|
+
/// $im-media-support: false;
|
146
|
+
/// $im-no-media-breakpoint: 'desktop';
|
147
|
+
/// $im-no-media-expressions: ('screen');
|
148
|
+
/// @include media('>=tablet', 'screen') {
|
149
|
+
/// .foo {
|
150
|
+
/// color: tomato;
|
151
|
+
/// }
|
152
|
+
/// }
|
153
|
+
///
|
154
|
+
/// /* Generates: */
|
155
|
+
/// .foo {
|
156
|
+
/// color: tomato;
|
157
|
+
/// }
|
158
|
+
///
|
159
|
+
/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
|
160
|
+
/// $im-media-support: false;
|
161
|
+
/// $im-no-media-breakpoint: 'desktop';
|
162
|
+
/// $im-no-media-expressions: ('screen');
|
163
|
+
/// @include media('>=tablet', 'retina2x') {
|
164
|
+
/// .foo {
|
165
|
+
/// color: tomato;
|
166
|
+
/// }
|
167
|
+
/// }
|
168
|
+
///
|
169
|
+
/// /* No output */
|
170
|
+
///
|
171
|
+
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
|
172
|
+
|
173
|
+
////
|
174
|
+
/// Cross-engine logging engine
|
175
|
+
/// @author Hugo Giraudel
|
176
|
+
/// @access private
|
177
|
+
////
|
178
|
+
|
179
|
+
|
180
|
+
///
|
181
|
+
/// Log a message either with `@error` if supported
|
182
|
+
/// else with `@warn`, using `feature-exists('at-error')`
|
183
|
+
/// to detect support.
|
184
|
+
///
|
185
|
+
/// @param {String} $message - Message to log
|
186
|
+
///
|
187
|
+
@function log($message) {
|
188
|
+
@if feature-exists('at-error') {
|
189
|
+
@error $message;
|
190
|
+
} @else {
|
191
|
+
@warn $message;
|
192
|
+
$_: noop();
|
193
|
+
}
|
194
|
+
|
195
|
+
@return $message;
|
196
|
+
}
|
197
|
+
|
198
|
+
|
199
|
+
///
|
200
|
+
/// Wrapper mixin for the log function so it can be used with a more friendly
|
201
|
+
/// API than `@if log('..') {}` or `$_: log('..')`. Basically, use the function
|
202
|
+
/// within functions because it is not possible to include a mixin in a function
|
203
|
+
/// and use the mixin everywhere else because it's much more elegant.
|
204
|
+
///
|
205
|
+
/// @param {String} $message - Message to log
|
206
|
+
///
|
207
|
+
@mixin log($message) {
|
208
|
+
@if log($message) {}
|
209
|
+
}
|
210
|
+
|
211
|
+
|
212
|
+
///
|
213
|
+
/// Function with no `@return` called next to `@warn` in Sass 3.3
|
214
|
+
/// to trigger a compiling error and stop the process.
|
215
|
+
///
|
216
|
+
@function noop() {}
|
217
|
+
|
218
|
+
///
|
219
|
+
/// Determines whether a list of conditions is intercepted by the static breakpoint.
|
220
|
+
///
|
221
|
+
/// @param {Arglist} $conditions - Media query conditions
|
222
|
+
///
|
223
|
+
/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
|
224
|
+
///
|
225
|
+
@function im-intercepts-static-breakpoint($conditions...) {
|
226
|
+
$no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
|
227
|
+
|
228
|
+
@if not $no-media-breakpoint-value {
|
229
|
+
@if log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
|
230
|
+
}
|
231
|
+
|
232
|
+
@each $condition in $conditions {
|
233
|
+
@if not map-has-key($media-expressions, $condition) {
|
234
|
+
$operator: get-expression-operator($condition);
|
235
|
+
$prefix: get-expression-prefix($operator);
|
236
|
+
$value: get-expression-value($condition, $operator);
|
237
|
+
|
238
|
+
// scss-lint:disable SpaceAroundOperator
|
239
|
+
@if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
|
240
|
+
($prefix == 'min' and $value > $no-media-breakpoint-value) {
|
241
|
+
@return false;
|
242
|
+
}
|
243
|
+
} @else if not index($im-no-media-expressions, $condition) {
|
244
|
+
@return false;
|
245
|
+
}
|
246
|
+
}
|
247
|
+
|
248
|
+
@return true;
|
249
|
+
}
|
250
|
+
|
251
|
+
////
|
252
|
+
/// Parsing engine
|
253
|
+
/// @author Hugo Giraudel
|
254
|
+
/// @access private
|
255
|
+
////
|
256
|
+
|
257
|
+
|
258
|
+
///
|
259
|
+
/// Get operator of an expression
|
260
|
+
///
|
261
|
+
/// @param {String} $expression - Expression to extract operator from
|
262
|
+
///
|
263
|
+
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
|
264
|
+
///
|
265
|
+
@function get-expression-operator($expression) {
|
266
|
+
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
|
267
|
+
@if str-index($expression, $operator) {
|
268
|
+
@return $operator;
|
269
|
+
}
|
270
|
+
}
|
271
|
+
|
272
|
+
// It is not possible to include a mixin inside a function, so we have to
|
273
|
+
// rely on the `log(..)` function rather than the `log(..)` mixin. Because
|
274
|
+
// functions cannot be called anywhere in Sass, we need to hack the call in
|
275
|
+
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
276
|
+
// Sass 3.3, change this line in `@if log(..) {}` instead.
|
277
|
+
$_: log('No operator found in `#{$expression}`.');
|
278
|
+
}
|
279
|
+
|
280
|
+
|
281
|
+
///
|
282
|
+
/// Get dimension of an expression, based on a found operator
|
283
|
+
///
|
284
|
+
/// @param {String} $expression - Expression to extract dimension from
|
285
|
+
/// @param {String} $operator - Operator from `$expression`
|
286
|
+
///
|
287
|
+
/// @return {String} - `width` or `height` (or potentially anything else)
|
288
|
+
///
|
289
|
+
@function get-expression-dimension($expression, $operator) {
|
290
|
+
$operator-index: str-index($expression, $operator);
|
291
|
+
$parsed-dimension: str-slice($expression, 0, $operator-index - 1);
|
292
|
+
$dimension: 'width';
|
293
|
+
|
294
|
+
@if str-length($parsed-dimension) > 0 {
|
295
|
+
$dimension: $parsed-dimension;
|
296
|
+
}
|
297
|
+
|
298
|
+
@return $dimension;
|
299
|
+
}
|
300
|
+
|
301
|
+
|
302
|
+
///
|
303
|
+
/// Get dimension prefix based on an operator
|
304
|
+
///
|
305
|
+
/// @param {String} $operator - Operator
|
306
|
+
///
|
307
|
+
/// @return {String} - `min` or `max`
|
308
|
+
///
|
309
|
+
@function get-expression-prefix($operator) {
|
310
|
+
@return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
|
311
|
+
}
|
312
|
+
|
313
|
+
|
314
|
+
///
|
315
|
+
/// Get value of an expression, based on a found operator
|
316
|
+
///
|
317
|
+
/// @param {String} $expression - Expression to extract value from
|
318
|
+
/// @param {String} $operator - Operator from `$expression`
|
319
|
+
///
|
320
|
+
/// @return {Number} - A numeric value
|
321
|
+
///
|
322
|
+
@function get-expression-value($expression, $operator) {
|
323
|
+
$operator-index: str-index($expression, $operator);
|
324
|
+
$value: str-slice($expression, $operator-index + str-length($operator));
|
325
|
+
|
326
|
+
@if map-has-key($breakpoints, $value) {
|
327
|
+
$value: map-get($breakpoints, $value);
|
328
|
+
} @else {
|
329
|
+
$value: to-number($value);
|
330
|
+
}
|
331
|
+
|
332
|
+
$interval: map-get($unit-intervals, unit($value));
|
333
|
+
|
334
|
+
@if not $interval {
|
335
|
+
// It is not possible to include a mixin inside a function, so we have to
|
336
|
+
// rely on the `log(..)` function rather than the `log(..)` mixin. Because
|
337
|
+
// functions cannot be called anywhere in Sass, we need to hack the call in
|
338
|
+
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
339
|
+
// Sass 3.3, change this line in `@if log(..) {}` instead.
|
340
|
+
$_: log('Unknown unit `#{unit($value)}`.');
|
341
|
+
}
|
342
|
+
|
343
|
+
@if $operator == '>' {
|
344
|
+
$value: $value + $interval;
|
345
|
+
} @else if $operator == '<' {
|
346
|
+
$value: $value - $interval;
|
347
|
+
}
|
348
|
+
|
349
|
+
@return $value;
|
350
|
+
}
|
351
|
+
|
352
|
+
|
353
|
+
///
|
354
|
+
/// Parse an expression to return a valid media-query expression
|
355
|
+
///
|
356
|
+
/// @param {String} $expression - Expression to parse
|
357
|
+
///
|
358
|
+
/// @return {String} - Valid media query
|
359
|
+
///
|
360
|
+
@function parse-expression($expression) {
|
361
|
+
// If it is part of $media-expressions, it has no operator
|
362
|
+
// then there is no need to go any further, just return the value
|
363
|
+
@if map-has-key($media-expressions, $expression) {
|
364
|
+
@return map-get($media-expressions, $expression);
|
365
|
+
}
|
366
|
+
|
367
|
+
$operator: get-expression-operator($expression);
|
368
|
+
$dimension: get-expression-dimension($expression, $operator);
|
369
|
+
$prefix: get-expression-prefix($operator);
|
370
|
+
$value: get-expression-value($expression, $operator);
|
371
|
+
|
372
|
+
@return '(#{$prefix}-#{$dimension}: #{$value})';
|
373
|
+
}
|
374
|
+
|
375
|
+
///
|
376
|
+
/// Slice `$list` between `$start` and `$end` indexes
|
377
|
+
///
|
378
|
+
/// @access private
|
379
|
+
///
|
380
|
+
/// @param {List} $list - List to slice
|
381
|
+
/// @param {Number} $start [1] - Start index
|
382
|
+
/// @param {Number} $end [length($list)] - End index
|
383
|
+
///
|
384
|
+
/// @return {List} Sliced list
|
385
|
+
///
|
386
|
+
@function slice($list, $start: 1, $end: length($list)) {
|
387
|
+
@if length($list) < 1 or $start > $end {
|
388
|
+
@return ();
|
389
|
+
}
|
390
|
+
|
391
|
+
$result: ();
|
392
|
+
|
393
|
+
@for $i from $start through $end {
|
394
|
+
$result: append($result, nth($list, $i));
|
395
|
+
}
|
396
|
+
|
397
|
+
@return $result;
|
398
|
+
}
|
399
|
+
|
400
|
+
////
|
401
|
+
/// String to number converter
|
402
|
+
/// @author Hugo Giraudel
|
403
|
+
/// @access private
|
404
|
+
////
|
405
|
+
|
406
|
+
|
407
|
+
///
|
408
|
+
/// Casts a string into a number
|
409
|
+
///
|
410
|
+
/// @param {String | Number} $value - Value to be parsed
|
411
|
+
///
|
412
|
+
/// @return {Number}
|
413
|
+
///
|
414
|
+
@function to-number($value) {
|
415
|
+
@if type-of($value) == 'number' {
|
416
|
+
@return $value;
|
417
|
+
} @else if type-of($value) != 'string' {
|
418
|
+
$_: log('Value for `to-number` should be a number or a string.');
|
419
|
+
}
|
420
|
+
|
421
|
+
$result: 0;
|
422
|
+
$digits: 0;
|
423
|
+
$minus: str-slice($value, 1, 1) == '-';
|
424
|
+
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
|
425
|
+
|
426
|
+
@for $i from if($minus, 2, 1) through str-length($value) {
|
427
|
+
$character: str-slice($value, $i, $i);
|
428
|
+
|
429
|
+
@if not (index(map-keys($numbers), $character) or $character == '.') {
|
430
|
+
@return to-length(if($minus, -$result, $result), str-slice($value, $i))
|
431
|
+
}
|
432
|
+
|
433
|
+
@if $character == '.' {
|
434
|
+
$digits: 1;
|
435
|
+
} @else if $digits == 0 {
|
436
|
+
$result: $result * 10 + map-get($numbers, $character);
|
437
|
+
} @else {
|
438
|
+
$digits: $digits * 10;
|
439
|
+
$result: $result + map-get($numbers, $character) / $digits;
|
440
|
+
}
|
441
|
+
}
|
442
|
+
|
443
|
+
@return if($minus, -$result, $result);
|
444
|
+
}
|
445
|
+
|
446
|
+
|
447
|
+
///
|
448
|
+
/// Add `$unit` to `$value`
|
449
|
+
///
|
450
|
+
/// @param {Number} $value - Value to add unit to
|
451
|
+
/// @param {String} $unit - String representation of the unit
|
452
|
+
///
|
453
|
+
/// @return {Number} - `$value` expressed in `$unit`
|
454
|
+
///
|
455
|
+
@function to-length($value, $unit) {
|
456
|
+
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
|
457
|
+
|
458
|
+
@if not index(map-keys($units), $unit) {
|
459
|
+
$_: log('Invalid unit `#{$unit}`.');
|
460
|
+
}
|
461
|
+
|
462
|
+
@return $value * map-get($units, $unit);
|
463
|
+
}
|
464
|
+
|
465
|
+
///
|
466
|
+
/// This mixin aims at redefining the configuration just for the scope of
|
467
|
+
/// the call. It is helpful when having a component needing an extended
|
468
|
+
/// configuration such as custom breakpoints (referred to as tweakpoints)
|
469
|
+
/// for instance.
|
470
|
+
///
|
471
|
+
/// @author Hugo Giraudel
|
472
|
+
///
|
473
|
+
/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
|
474
|
+
/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
|
475
|
+
///
|
476
|
+
/// @example scss - Extend the global breakpoints with a tweakpoint
|
477
|
+
/// @include media-context(('custom': 678px)) {
|
478
|
+
/// .foo {
|
479
|
+
/// @include media('>phone', '<=custom') {
|
480
|
+
/// // ...
|
481
|
+
/// }
|
482
|
+
/// }
|
483
|
+
/// }
|
484
|
+
///
|
485
|
+
/// @example scss - Extend the global media expressions with a custom one
|
486
|
+
/// @include media-context($tweak-media-expressions: ('all': 'all')) {
|
487
|
+
/// .foo {
|
488
|
+
/// @include media('all', '>phone') {
|
489
|
+
/// // ...
|
490
|
+
/// }
|
491
|
+
/// }
|
492
|
+
/// }
|
493
|
+
///
|
494
|
+
/// @example scss - Extend both configuration maps
|
495
|
+
/// @include media-context(('custom': 678px), ('all': 'all')) {
|
496
|
+
/// .foo {
|
497
|
+
/// @include media('all', '>phone', '<=custom') {
|
498
|
+
/// // ...
|
499
|
+
/// }
|
500
|
+
/// }
|
501
|
+
/// }
|
502
|
+
///
|
503
|
+
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
|
504
|
+
// Save global configuration
|
505
|
+
$global-breakpoints: $breakpoints;
|
506
|
+
$global-media-expressions: $media-expressions;
|
507
|
+
|
508
|
+
// Update global configuration
|
509
|
+
$breakpoints: map-merge($breakpoints, $tweakpoints) !global;
|
510
|
+
$media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
|
511
|
+
|
512
|
+
@content;
|
513
|
+
|
514
|
+
// Restore global configuration
|
515
|
+
$breakpoints: $global-breakpoints !global;
|
516
|
+
$media-expressions: $global-media-expressions !global;
|
517
|
+
}
|
518
|
+
|
519
|
+
////
|
520
|
+
/// include-media public exposed API
|
521
|
+
/// @author Eduardo Boucas
|
522
|
+
/// @access public
|
523
|
+
////
|
524
|
+
|
525
|
+
|
526
|
+
///
|
527
|
+
/// Generates a media query based on a list of conditions
|
528
|
+
///
|
529
|
+
/// @param {Arglist} $conditions - Media query conditions
|
530
|
+
///
|
531
|
+
/// @example scss - With a single set breakpoint
|
532
|
+
/// @include media('>phone') { }
|
533
|
+
///
|
534
|
+
/// @example scss - With two set breakpoints
|
535
|
+
/// @include media('>phone', '<=tablet') { }
|
536
|
+
///
|
537
|
+
/// @example scss - With custom values
|
538
|
+
/// @include media('>=358px', '<850px') { }
|
539
|
+
///
|
540
|
+
/// @example scss - With set breakpoints with custom values
|
541
|
+
/// @include media('>desktop', '<=1350px') { }
|
542
|
+
///
|
543
|
+
/// @example scss - With a static expression
|
544
|
+
/// @include media('retina2x') { }
|
545
|
+
///
|
546
|
+
/// @example scss - Mixing everything
|
547
|
+
/// @include media('>=350px', '<tablet', 'retina3x') { }
|
548
|
+
///
|
549
|
+
@mixin media($conditions...) {
|
550
|
+
// scss-lint:disable SpaceAroundOperator
|
551
|
+
@if ($im-media-support and length($conditions) == 0) or
|
552
|
+
(not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
|
553
|
+
@content;
|
554
|
+
} @else if ($im-media-support and length($conditions) > 0) {
|
555
|
+
@media #{unquote(parse-expression(nth($conditions, 1)))} {
|
556
|
+
// Recursive call
|
557
|
+
@include media(slice($conditions, 2)...) {
|
558
|
+
@content;
|
559
|
+
}
|
560
|
+
}
|
561
|
+
}
|
562
|
+
}
|
metadata
ADDED
@@ -0,0 +1,162 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: include_media_rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.4.2.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Kaoru Kohashigawa
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2016-04-15 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: railties
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '3.1'
|
20
|
+
- - "<"
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '5'
|
23
|
+
type: :runtime
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
requirements:
|
27
|
+
- - ">="
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '3.1'
|
30
|
+
- - "<"
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '5'
|
33
|
+
- !ruby/object:Gem::Dependency
|
34
|
+
name: sass
|
35
|
+
requirement: !ruby/object:Gem::Requirement
|
36
|
+
requirements:
|
37
|
+
- - ">="
|
38
|
+
- !ruby/object:Gem::Version
|
39
|
+
version: '3.3'
|
40
|
+
- - "<"
|
41
|
+
- !ruby/object:Gem::Version
|
42
|
+
version: '4'
|
43
|
+
type: :runtime
|
44
|
+
prerelease: false
|
45
|
+
version_requirements: !ruby/object:Gem::Requirement
|
46
|
+
requirements:
|
47
|
+
- - ">="
|
48
|
+
- !ruby/object:Gem::Version
|
49
|
+
version: '3.3'
|
50
|
+
- - "<"
|
51
|
+
- !ruby/object:Gem::Version
|
52
|
+
version: '4'
|
53
|
+
- !ruby/object:Gem::Dependency
|
54
|
+
name: bundler
|
55
|
+
requirement: !ruby/object:Gem::Requirement
|
56
|
+
requirements:
|
57
|
+
- - "~>"
|
58
|
+
- !ruby/object:Gem::Version
|
59
|
+
version: '1.11'
|
60
|
+
type: :development
|
61
|
+
prerelease: false
|
62
|
+
version_requirements: !ruby/object:Gem::Requirement
|
63
|
+
requirements:
|
64
|
+
- - "~>"
|
65
|
+
- !ruby/object:Gem::Version
|
66
|
+
version: '1.11'
|
67
|
+
- !ruby/object:Gem::Dependency
|
68
|
+
name: rake
|
69
|
+
requirement: !ruby/object:Gem::Requirement
|
70
|
+
requirements:
|
71
|
+
- - "~>"
|
72
|
+
- !ruby/object:Gem::Version
|
73
|
+
version: '10.0'
|
74
|
+
type: :development
|
75
|
+
prerelease: false
|
76
|
+
version_requirements: !ruby/object:Gem::Requirement
|
77
|
+
requirements:
|
78
|
+
- - "~>"
|
79
|
+
- !ruby/object:Gem::Version
|
80
|
+
version: '10.0'
|
81
|
+
- !ruby/object:Gem::Dependency
|
82
|
+
name: rspec
|
83
|
+
requirement: !ruby/object:Gem::Requirement
|
84
|
+
requirements:
|
85
|
+
- - "~>"
|
86
|
+
- !ruby/object:Gem::Version
|
87
|
+
version: '3.0'
|
88
|
+
type: :development
|
89
|
+
prerelease: false
|
90
|
+
version_requirements: !ruby/object:Gem::Requirement
|
91
|
+
requirements:
|
92
|
+
- - "~>"
|
93
|
+
- !ruby/object:Gem::Version
|
94
|
+
version: '3.0'
|
95
|
+
- !ruby/object:Gem::Dependency
|
96
|
+
name: rails
|
97
|
+
requirement: !ruby/object:Gem::Requirement
|
98
|
+
requirements:
|
99
|
+
- - ">="
|
100
|
+
- !ruby/object:Gem::Version
|
101
|
+
version: '3.1'
|
102
|
+
- - "<"
|
103
|
+
- !ruby/object:Gem::Version
|
104
|
+
version: '5'
|
105
|
+
type: :development
|
106
|
+
prerelease: false
|
107
|
+
version_requirements: !ruby/object:Gem::Requirement
|
108
|
+
requirements:
|
109
|
+
- - ">="
|
110
|
+
- !ruby/object:Gem::Version
|
111
|
+
version: '3.1'
|
112
|
+
- - "<"
|
113
|
+
- !ruby/object:Gem::Version
|
114
|
+
version: '5'
|
115
|
+
description: This gem allows you to easily import include media to your project to
|
116
|
+
easily write readable breakpoints
|
117
|
+
email:
|
118
|
+
- opensource@kaoruk.com
|
119
|
+
executables: []
|
120
|
+
extensions: []
|
121
|
+
extra_rdoc_files: []
|
122
|
+
files:
|
123
|
+
- ".gitignore"
|
124
|
+
- ".rspec"
|
125
|
+
- ".travis.yml"
|
126
|
+
- CODE_OF_CONDUCT.md
|
127
|
+
- Gemfile
|
128
|
+
- LICENSE.txt
|
129
|
+
- README.md
|
130
|
+
- Rakefile
|
131
|
+
- bin/console
|
132
|
+
- bin/setup
|
133
|
+
- include_media_rails.gemspec
|
134
|
+
- lib/include_media_rails.rb
|
135
|
+
- lib/include_media_rails/version.rb
|
136
|
+
- vendor/assets/stylesheets/include_media.scss
|
137
|
+
homepage: https://github.com/KaoruDev/include_media_rails
|
138
|
+
licenses:
|
139
|
+
- MIT
|
140
|
+
metadata:
|
141
|
+
allowed_push_host: https://rubygems.org
|
142
|
+
post_install_message:
|
143
|
+
rdoc_options: []
|
144
|
+
require_paths:
|
145
|
+
- lib
|
146
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
147
|
+
requirements:
|
148
|
+
- - ">="
|
149
|
+
- !ruby/object:Gem::Version
|
150
|
+
version: '0'
|
151
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
152
|
+
requirements:
|
153
|
+
- - ">="
|
154
|
+
- !ruby/object:Gem::Version
|
155
|
+
version: '0'
|
156
|
+
requirements: []
|
157
|
+
rubyforge_project:
|
158
|
+
rubygems_version: 2.6.3
|
159
|
+
signing_key:
|
160
|
+
specification_version: 4
|
161
|
+
summary: Use Include Media by Eduardo Bouças (@eduardoboucas) in any Rails > 3.1 project
|
162
|
+
test_files: []
|